You are climbing a staircase. It takes n steps to reach the top.
+
Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?
+
Examples
+
Ex 1) Input: n = 2 Output: 2
+
Explanation: There are two ways to climb to the top. 1. 1 step + 1 step 2. 2 steps
+
Ex 2) Input: n = 3 Output: 3
+
Explanation: There are three ways to climb to the top. 1. 1 step + 1 step + 1 step 2. 1 step + 2 steps 3. 2 steps + 1 step
+
Constraints
+
+
+
+
Thought Process
+
+
+
Let's start by diagramming the different ways we can climb the steps to see if we can find a pattern.
+
+
When n = 3 we have:
+
+
+
+
+
+
From the diagram we can see there are 3 distinct ways to climb to the top when n = 3 since we can ignore the scenarios where we take extra steps.
+
+
+
To help you see a pattern try drawing out more diagrams for larger values of n or creating a generalized diagram for any value of n.
+
+
+
The diagram above is an example of a recursion tree.
+
+
+
So, one way to solve this problem is to come up with a recursive formula that represents how many distinct ways we can climb the stairs.
+
+
+
Let's use the diagram to help us come up with our recursive formula.
+
+
+
We know we can either add 1 step or 2 steps each time we climb up the stairs, and we want to hit our target of n steps.
+
+
+
So, we need to keep track of how many steps we have taken which we can represent with the variable , where represents the current choice when climbing the stairs.
+
+
+
Initially, , here means we haven't made a choice to take 1 step or 2 steps yet.
+
+
+
Each time we climb the stairs we make one of the following choices:
+
+
+
+
+
+
+
+
Now, we'll let denote our function for climbing the stairs.
+
+
+
Here's how we can represent the different scenarios for climbing the stairs:
+
+
+
+
+
+
We're passing the + and our target value of steps to our function .
+
+
+
Now, we need to determine how many times we need to to call .
+
+
+
We know from the diagram if , then we can ignore that way of climbing the stairs
+
+
+
We also know if , then we have found a valid way to climb the steps.
+
+
+
Using this knowledge we can come up with the following:
We'll actually get a time limit exceeded error on LeetCode if we submit this.
+
+
+
This is because the time complexity of our solution is O(2n).
+
+
+
We can look at our recursion tree above and count the number of nodes to determine the time complexity.
+
+
+
Now, we won't count exactly 2n nodes since our recursive formula isn't exactly 2n, but when dealing with Big-Oh we only care about the behavior as n becomes very large.
+
+
+
We'll be improving this in the next post by drawing out recursion trees for larger values of n which will allow us to see an interesting pattern.
+
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-06-30T16:43:32.000Z
+ Copyright by J the Code Monkey
+
+
+ Contains Duplicate
+ https://codemonkeys.tech/contains-duplicate/
+
+ 2024-07-17T04:15:09.318Z
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Contains Duplicate! 🍌🐒
+
Given an integer array nums, return true if any value appears at least twice, and return false if every element is distinct.
+
Examples
+
Ex 1) Input: nums = [1, 2, 3, 1] Output: true since 1 appears twice.
+
Ex 2) Input: nums = [1, 2, 3, 4] Output: false since no value appears twice.
+
Ex 3) Input: nums = [1, 1, 1, 3, 3, 4, 3, 2, 4, 2] Output: true since 1, 3, and 2 appear more than once.
+
Ex 4) Input: nums = [] Output: false since there are no values.
+
Constraints
+
+
+
Thought Process
+
+
+
By looking at the examples, the 1st thought that comes to mind may be to simply take each value in nums, and compare it with every other value.
+
+
+
Basically, we'll be comparing each pair of values in nums to see if a duplicate has occurred.
+
+
+
To do this we'll start at the first value in nums, and compare it with each value to the right until we reach the end of nums.
+
+
+
Then we'll take the second value in nums, and compare it with each value to the right until we reach the end of nums.
+
+
+
We repeat this process until we reach the end of nums in the worst case or until we find a duplicate value.
+
+
+
Here's a visualization for nums = [1, 2, 3] which represents a worst case scenario:
+
+
+
Let's take our 1st value in nums, and compare it with each value to the right of it:
+
+
1st Comparison:
+
+
+
+
+
2nd Comparison:
+
+
+
+
+
+
Now, let's take our 2nd value in nums, and compare it with each value to the right of it:
+
+
3rd Comparison:
+
+
+
+
+
The 3rd value in nums is also the last value, so there's no more comparisons to be made.
+
+
+
+
+
+
To achieve this we'll need to loop over each value in nums, and for each iteration of this loop we need to compare our current value which will denote as nums[i] with each value to the right of it.
+
+
+
The process of comparing nums[i] with each value to the right of it means we'll need a nested for loop that loops from nums[i + 1] to the last value in nums.
+
+
+
A nested for loop a time complexity of which is not efficient and will result in a Time Limit Exceeded error on LeetCode.
+
+
+
+
+
Before checking for duplicate values, we can realize that if we sort nums any duplicate values will be consecutive.
+
+
+
Let's visualize this with an example for nums = [1, 2, 3, 1]:
+
+
+
Sorting nums gives us:
+
+
+
+
Now, we can loop over nums and check for duplicates values.
+
+
+
+
+
Looping over nums has a time complexity of O(n), and the sorting algorithm can have a time complexity as good as O(nlogn) if something like heapsort is used.
+
+
+
So, the overall time complexity is O(nlogn) since it's the dominating factor.
+
+
+
+
+
Solving this problem requires the ability to efficiently search for values, and a great way to do that is to use a hash table.
+
+
+
A hash table is an object that maps keys to values.
+
+
+
The search and insert opertions in a hash table have a time complexity of O(1).
+
+
+
Using a hash table will allow us to store each value in nums as a key, and we can map a value of let's say true to it if it's the first time we've seen the value.
+
+
+
Now, to create our hash table we can loop over nums then check to see if the key is present.
+
+
+
If the key is present, then we have found a duplicate, and we'll return true.
+
+
+
If the key isn't present, then we'll store the current value of nums as a key in our hash table with a value of true.
+
+
+
If no key appears twice, then nums has no duplicates, and we'll return false.
+
+
+
Here's a visualization of creating our hash table which we'll denote as obj for nums = [1, 2, 1]:
+
+
1st Iteration:
+
+
+
+
+
+
So, we'll store the value of nums[0] as a key in our hash table with a value of true.
+
+
+
+
2nd Iteration:
+
+
+
+
+
+
+
So, we'll store the value of nums[1] as a key in our hash table with a value of true.
+
+
+
+
3rd Iteration:
+
+
+
+
+
+
Since the same key appeared in our hash table, a duplicate has been found in nums, so we'll return false.
You are climbing a staircase. It takes n steps to reach the top.
+
Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?
+
Examples
+
Ex 1) Input: n = 2 Output: 2
+
Explanation: There are two ways to climb to the top. 1. 1 step + 1 step 2. 2 steps
+
Ex 2) Input: n = 3 Output: 3
+
Explanation: There are three ways to climb to the top. 1. 1 step + 1 step + 1 step 2. 1 step + 2 steps 3. 2 steps + 1 step
+
Constraints
+
+
+
+
Thought Process
+
+
+
We previously came up with a solution for this problem by using a recursive formula that represents how many distinct ways we can climb the stairs.
+
+
+
The issue with the previous solution is it has a time complexity of O(2n) which is very inefficient.
+
+
+
To come up with a better solution we'll be drawing out multiple recursion trees to help us see a pattern.
+
+
+
When n = 1 we have:
+
+
+
+
+
From the diagram we can see there is 1 distinct way to climb to the top when n = 1 since we can ignore the scenarios where we take extra steps.
+
+
+
When n = 2 we have:
+
+
+
+
+
So, we have 2 distinct ways to climb to the top.
+
+
+
When n = 3 we have:
+
+
+
+
+
So, we have 3 distinct ways to climb to the top.
+
+
+
When n = 4 we have:
+
+
+
+
+
So, we have 5 distinct ways to climb to the top.
+
+
+
Now, let's take a look at our cases from n = 1 to n = 2 and see if we can find a pattern:
+
+
+
+
+
+
+
Here, waysToClimb denotes our function for determining how many unique ways we can climb the stairs.
+
+
+
This sequence of numbers follows the Fibonacci sequence with the only difference being the value of the 1st and 2nd terms.
+
+
+
Here, the 1st term has a value of 1 and the 2nd term has a value of 2.
+
+
+
Also, notice that we know we have two ways to climb the stairs to reach the nth step.
+
+
+
If we take 1 step, then we're n - 1 steps closer to n, and if we take 2 steps then we're n - 2 steps closer to n.
+
+
+
So, we can get the distinct number of ways to climb the steps by summing up the ways of climbing to the n - 1 step and the ways of climbing to the n - 2 step using the following formula:
+
+
+
+
+
The Fibonacci sequence is the following series of numbers:
+
+
+
+
+
The next number is found by adding up the two numbers before it.
+
+
+
For example, 5 is found by adding 2 and 3.
+
+
+
The first two terms are called seed numbers, which we'll denote as:
+
+
+
+
+
Here's the formula used to characterize the sequence:
+
+
+
+
The seed numbers for our problem are:
+
+
+
+
+
Now that we know our pattern of climbing the stairs follows a Fibonnaci sequence we can implement the sequence in our code using the waysToClimb formula and the seed numbers we came up with.
+
+
+
This will improve the time complexity of our solution from the O(2n) solution we previously came up with.
+
+
+
Implementation
+
+
+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));
+
+
+
+
Analysis
+
+
+
Since we're looping over the length of n - 1 our time complexity is O(n) which is a much more efficient solution!
+
+
+
See if you can come up with an even more efficient solution using more properties of the Fibonnaci sequence!
+
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-07-01T15:45:32.000Z
+ Copyright by J the Code Monkey
+
+
+ Reverse String
+ https://codemonkeys.tech/reverse-string/
+
+ 2024-07-17T04:15:09.424Z
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Reverse String! 🍌🐒
+
Write a function that reverses a string. The input string is given as an array of characters s.
+
Examples
+
Ex 1) Input: s = ["h", "e", "l", "l", "o"] Output: ["o", "l", "l", "e", "h"]
+
Ex 2) Input: s = ["H", "a", "n", "n", "a", "h"] Output: ["h", "a", "n", "n", "a", "H"]
+
Constraints
+
+
+
+
+
+
s[i] is a printable ASCII character.
+
+
+
Do not allocate extra space for another array. You must do this in-place with O(1) extra memory.
+
+
+
What is a printable ASCII Character?
+
+
+
ASCII stands for American Standard Code for Information Interchange and it consists of 33 non-printable and 95 printable characters.
+
+
+
You can check out the non-printable, printable, and extended ASCII characters hereContent not supported.
+
+
+
For this problem we only care about the printable ASCII characters.
+
+
+
What does In-Place Mean?
+
+
+
In-place refers to an algorithm that transforms input using no auxiliary data structure.
+
+
+
So, we cannot allocate extra space for another array, a hash table, or any other data structure.
+
+
+
Another way of saying this is we must use O(1) extra memory.
+
+
+
Thought Process
+
+
+
Let's take our two examples from earlier and find a way to model the reversing of the characters in s.
+
+
+
Let's start with Ex 1)
+
+
Initially, we have
+
+
+
and after reversing s our output should be:
+
+
+
+
To perform the reversal we need to swap the characters in s.
+
+
+
We can start by swapping the leftmost character and the rightmost character.
+
+
+
Then we'll move to the second leftmost character and the second rightmost character and swap them.
+
+
+
We'll continue this process until every character has been swapped if we have an even number of characters, or until we have one unswapped character left if we have an odd number of characters.
+
+
+
To perform this swapping we'll need to loop over s while there are still characters that can be swapped.
+
+
+
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.
+
+
+
1st Iteration:
+
+
+
+
Current Leftmost Character: h
+
+
+
Current Rightmost Character: o
+
+
+
Now, we can swap the characters by assigning s[0] to be s[4], but if we want to assign s[4] to be s[0], then we must first store s[0] in a temp variable.
+
+
+
Storing s[0] in a temp variable will allow us to still have the original character that was stored in s[0].
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 1st swap:
+
+
+
+
+
2nd Iteration:
+
+
+
+
Current Leftmost Character: e
+
+
+
Current Rightmost Character: l
+
+
+
Now, we can swap the characters by assigning s[1] to be s[3] and by assinging s[3] to be s[1] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 2nd swap:
+
+
+
+
There are no unswapped characters left to swap with our only remaining unswapped character, s[2], so the reversal is complete.
+
+
+
+
+
+
To perform these swaps we had to keep track of the index of our current leftmost character which we'll denote with i and the index of our current rightmost character which we'll denote with j.
+
+
+
Keeping track of the current leftmost index required us to start with i = 0 and to increment i on each subsequent iteration.
+
+
+
Keeping track of the current rightmost index required us to start with j = s.length - 1 and to decrement j on each subsequent iteration.
+
+
+
We continued the loop while i < j.
+
+
+
+
+
Let's now look at Ex 2)
+
+
Initially, we have
+
+
+
and after reversing s our output should be:
+
+
+
+
We need to swap the characters in s again like in Ex) 1.
+
+
+
Let's visualize this process to help us see how the swapping will occur for this example:
+
+
+
1st Iteration:
+
+
+
+
Current Leftmost Character: H
+
+
+
Current Rightmost Character: h
+
+
+
Now, we can swap the characters by assigning s[0] to be s[5] and by assinging s[5] to be s[0] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 1st swap:
+
+
+
+
+
2nd Iteration:
+
+
+
+
Current Leftmost Character: a
+
+
+
Current Rightmost Character: a
+
+
+
Now, we can swap the characters by assigning s[1] to be s[4] and by assinging s[4] to be s[1] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 2nd swap:
+
+
+
+
+
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.
+
+
+
3rd Iteration:
+
+
+
+
Current Leftmost Character: n
+
+
+
Current Rightmost Character: n
+
+
+
Now, we can swap the characters by assigning s[2] to be s[3] and by assinging s[3] to be s[2] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 3rd swap:
+
+
+
+
Every character has been swapped, so the reversal is complete.
+
+
+
+
+
+
Notice again we continued the loop while i < j.
+
+
+
Using the model we described above we can come up with the following implementation:
+
+
+
+
+
Implementation
+
+
+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);
+
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-08-11T15:35:00.000Z
+ Copyright by J the Code Monkey
+
+
+ Remove Duplicates from Sorted Array
+ https://codemonkeys.tech/remove-duplicates-from-sorted-array/
+
+ 2024-07-17T04:15:09.501Z
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Remove Duplicates from Sorted Array! 🍌🐒
+
Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same.
+
Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the first part of the array nums. More formally, if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result. It does not matter what you leave beyond the first k elements.
+
Return k after placing the final result in the first k slots of nums.
+
Do not allocate extra space for another array. You must do this by modifying the input array in-place with O(1) extra memory.
Explanation: Your function should return k = 2, with the first two elements of nums being 1 and 2 respectively. It does not matter what you leave beyond the returned k (hence they are underscores).
Explanation: Your function should return k = 5, with the first five elements of nums being 0, 1, 2, 3, and 4 respectively. It does not matter what you leave beyond the returned k (hence they are underscores).
+
Constraints
+
+
+
+
+
+
+
+
+
nums is sorted in non-decreasing order.
+
+
+
What does In-Place mean?
+
+
+
Let's start by defining in-place which is an algorithm that transforms input using no auxiliary data structure.
+
+
+
So, we cannot allocate extra space for another array, a hash table, or any other data structure.
+
+
+
Another way of saying this is we must use O(1) extra memory.
+
+
+
Removing (or Moving) Duplicates & Maintaining Relative Order
+
+
+
In JavaScript we can change the length of an array by adding or removing elements, but in other languages like C for example we cannot change the length of an array after it's created.
+
+
+
So, to get around this we're told we can place the result in the first part of nums.
+
+
+
Recall the formal description from earlier: if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result, and it doesn't matter what is left after the first k elements.
+
+
+
The examples from earlier should make this clearer:
The output maintains the relative order again for nums by keeping the elements we care about in non-decreasing order.
+
+
+
And again, recall if we're moving the duplicates it doesn't matter what we leave after the kth element, so those elements were denoted with underscores.
+
+
+
+
+
+
+
How to Modify nums In-Place?
+
+
+
We're told we can only modify nums in-place.
+
+
+
Let's start with nums = [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.
+
+
+
Let's start by taking our 1st element in nums and compare it with the 2nd element, then we can compare the 2nd element with the 3rd and so on...
+
+
+
1st Iteration:
+
+
+
+
+
+
2nd Iteration:
+
+
+
+
+
3rd Iteration:
+
+
+
+
+
+
4th Iteration:
+
+
+
+
+
+
After the 4th iteration, there's nothing left to compare nums[4] with, so that's the last iteration we need.
+
+
+
During our iterations we had to keep track of our current element in nums which we'll call nums[i] and the next element in nums which will be nums[i + 1].
+
+
+
We also had to keep track of which element we needed to replace in nums if we ran into an element we hadn't seen before which we'll call nums[j].
+
+
+
So, to implement this we'll loop over nums from the beginning to the length of nums - 1 since when we get to the last element there's nothing else for us to compare it with.
+
+
+
On each iteration we'll compare the current element of nums which is nums[i] with the next element of nums which is nums[i + 1].
+
+
+
If they're not equal then we'll set nums[j]=nums[i + 1] where j gets initialized to 1, and we'll increment j every time nums[i] doesn't equal nums[i + 1].
+
+
+
We also need to remember the case of nums.length = 0 which means we have no elements in our array, so we'll just return 0.
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-07-03T17:25:34.000Z
+ Copyright by J the Code Monkey
+
+
+ Single Number
+ https://codemonkeys.tech/single-number/
+
+ 2024-07-17T04:15:09.527Z
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Single Number! 🍌🐒
+
Given two strings s and t, return true
+if t is an anagram of s, and false otherwise.
+
Examples
+
Ex 1) Input: s = "anagram", t = "nagaram" Output: true
+
Ex 2) Input: s = "rat", t = "car" Output: false
+
Constraints
+
+
+
s and t consist of lowercase English letters
+
+
What is an Anagram?
+
+
A word or a phrase that is formed by rearranging the letters of a different word or phrase typically using all of the original letters exactly once.
+
+
Assumptions
+
+
To clarify the provided constraints we're also assuming s and t contain no spaces, and we're only able to use each letter once.
+
+
How to Check if t is an Anagram of s?
+
+
+
Since we're assuming we can only use each letter in s and t once, then for t to be an anagram of s they must be the same length.
+
+
+
We can first check that s and t are the same length, and if they aren't we can return false.
+
+
+
Now, if s and t are the same length, they must also contain the same letters.
+
+
+
How to Check if s and t contain the same letters?
+
+
+
We're given s and t 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 s and t.
+
+
+
Ex 1) s = "anagram" sArray = ["a", "n", "a", "g", "r", "a", "m"] t = "nagaram" tArray = ["n", "a", "g", "a", "r", "a", "m"]
+
+
+
Ex 2) s = "rat" sArray = ["r", "a", "t"] t = "car" tArray = ["c", "a", "r"]
+
+
+
+
+
We can use the split() method, and pass it a pattern of "".
+
+
+
This tells split() to split our strings into substrings where a "" pattern occurs which is between each character in our strings.
+
+
+
split() will then return an array of these substrings.
+
+
+
Now, we need a way to compare the letters of sArray with the letters of tArray.
+
+
+
We could take the first value of sArray and compare it with each value of tArray. 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.
+
+
+
A simplier solution though is to realize that we can sort our arrays, and if t is an anagram of s, then our arrays will have all the same letters in the same order.
Then we can check if the letters in the arrays are equal by comparing each value at index i of sArray with each value at index i of tArray.
+
+
+
To do this we can loop over the length of one of the arrays, and if the values of our arrays at index i are not equal, then we can break the loop by returning false.
+
+
+
If the arrays are equal, then we'll loop over the entire length of our array and return true.
+
+
+
Implementation
+
+
+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));
+
+
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-07-02T18:15:23.000Z
+ Copyright by J the Code Monkey
+
+
+ Installing Fast Node Manager (fnm)
+ https://codemonkeys.tech/installing-fnm/
+
+ 2024-07-17T04:15:09.535Z
+ Hey fellow Code Monkeys!!! 🐵 Want to switch between Node versions extremely fast, then check out Installing Fast Node Manager (fnm)! 🍌🐒
+
We'll be going over how to install fnmContent not supported on Linux, macOS, and Windows. If you run into any issues with installation then check out the fnmContent not supported repository for any updates.
On Windows, the profile is located at ~\Documents\PowerShell\Microsoft.PowerShell_profile.ps1 or $PROFILE
+
On macOS and Linux, the profile is located at ~/.config/powershell/Microsoft.PowerShell_profile.ps1
+
Usage
+
Here are some useful commands to get started with fnmContent not supported. You can find more commands hereContent not supported or you can run fnm --help to see a list of subcommands and fnm <SUBCOMMAND> --help to see information for a specific subcommand.
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-12-08T21:27:15.000Z
+ Copyright by J the Code Monkey
+
+
+ Installing Node Version Manager (nvm)
+ https://codemonkeys.tech/installing-nvm/
+
+ 2024-07-17T04:15:09.544Z
+ Hey fellow Code Monkeys!!! 🐵 Want to be able to easily install and switch between Node versions, then check out Installing Node Version Manager (nvm)! 🍌🐒
+
Installing Node Version Manager (nvm)
+
Why use a Node Version Manager?
+
A Node version manager allows you to easily install and switch between numerous versions of Node.jsContent not supported. This is useful when a project you’re working on requires a different version of Node.jsContent not supported than what you currently have installed.
If you run into any issues with installation, then be sure to check out the nvmContent not supported repository for any updates and troubleshooting tips.
This can occur since versions installed by nvmContent not supported will only be available to the user account it was installed on, and any other user accounts will use the system version.
+
If version mismatches are occurring or any other issues, then you can uninstall node and npm associated with the system version and just use versions installed by nvmContent not supported.
+
Be sure to uninstall any globally installed npm packages associated with the system version as well.
When using nvmContent not supported, you don't need to use sudo npm install -g <package> instead use npm install -g <package> when installing global packages.
+
Finally, if you're using a different node version manager like fnmContent not supported, then you may run into issues with your installed versions from nvmContent not supported. If this is the case, then uninstall the node version manager you will not be using to resolve the issues.
If you're interested, check out the nvm Additional NotesContent not supported for information on more parameters and how to customize the install source, directory, profile, and version for the install script.
+
+
After running the command above, you'll be prompted to close and reopen your terminal to start using nvmContent not supported, or you can run the following commands to start using it in the current shell session:
+
+
+
exportNVM_DIR="$HOME/.config/nvm"&&
+[ -s "$NVM_DIR/nvm.sh"]&&\. "$NVM_DIR/nvm.sh"&&# This loads nvm
+[ -s "$NVM_DIR/bash_completion"]&&\. "$NVM_DIR/bash_completion"# This loads nvm bash_completion
+
Here are some useful commands to get started with nvmContent not supported. You can run nvm --help to see a list of commands, their flags, and descriptions.
Here, version 16.11.1 will get an alias of nickname:
+
+
+
nvm alias nickname 16.11.1
+
+
1
+
+
The default version is the active version when opening new shells. The first installed version will get set as the default version. To change the default version run the command below.
+
Here, we're setting the default version to be 17.1.0:
Then remove these lines from your ~/.bashrc, ~/.zshrc, ~/.profile, etc.
+
+
+
exportNVM_DIR="$HOME/.config/nvm"
+[ -s "$NVM_DIR/nvm.sh"]&&\. "$NVM_DIR/nvm.sh"# This loads nvm
+[ -s "$NVM_DIR/bash_completion"]&&\. "$NVM_DIR/bash_completion"# This loads nvm bash_completion
+
+
1 2 3
+
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-12-07T22:01:15.000Z
+ Copyright by J the Code Monkey
+
+
+ Installing Yarn 1
+ https://codemonkeys.tech/installing-yarn-1/
+
+ 2024-07-17T04:15:09.554Z
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to install and use Yarn 1, then check out this post! 🍌🐒
+
Installing Yarn 1
+
What is a Package Manager?
+
Before discussing YarnContent not supported in more detail, let's first define what a package manager is and what it handles for us.
+
A package manager is a tool that allows developers to manage a project's dependencies.
+
Dependencies also known as packages are programs that a project relys on to function properly.
+
Using dependencies makes development easier since you can use other developer's solutions for implementing features in your project.
+
A package manager handles the following for your packages:
Like other package managers, YarnContent not supported allows you to use and share code with other developers which again makes development easier. The code is shared using a package.json file which describes the dependencies used in a project.
Yarn 1Content not supported 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 Yarn 3Content not supported.
When YarnContent not supported was released in 2016 it achieved its goals of being a faster, more secure, and more reliable alternative to npmContent not supported. The improved reliability was accomplished by generating a yarn.lock file which handles keeping track of the exact versions of packages used in a project.
+
In 2017, npmContent not supported addressed its speed and reliability issues with the release of npm 5Content not supported. The reliability issue was addressed with the introduction of the package-lock.json file which provided similar functionality to the yarn.lock file.
+
In 2018, npmContent not supported addressed its security issues with the release of npm 6Content not supported by checking vulnerabilities before installing dependencies as well as introducing more improvements to speed and reliability.
After installing a system version or a version with a node version manager, you can run the following command to install and upgrade Yarn 1Content not supported:
+
+
+
npminstall --global yarn
+
+
1
+
+
This will install Yarn 1Content not supported globally. We'll see how to install a specific local version of yarn in the root of a project directory when looking at the usage of yarn.
+
Resolving Permissions Error
+
If you're using a system version, you may get a permissions error when attempting to install with npmContent not supported. To resolve this check out the installationContent not supported documentation for platform-specific methods for Linux, macOS, and Windows. Alternatively, you can uninstall your system version and use a node version manager instead.
If you prefer to use a platform-specific method with a node version manager, then you should only use a method that can ignore the installation of Node.jsContent not supported since it can cause conflicts.
+
Usage
+
Now we'll be discussing some useful and common commands to get you started with Yarn 1Content not supported.
+
Help Commands
+
Here's how to access the help documentation for the yarn command which is always useful and recommended to do for any installed tool.
+
Run the following command to see a list of commands, flags, and descriptions for yarn:
+
+
+
yarn --help
+
+
1
+
+
To see help information for a specific subcommand run the following:
+
+
+
yarn[subcommand] --help
+
+
1
+
+
Check Yarn Version
+
To verify your installation was successful and to check your version of yarn run the following command:
+
+
+
yarn --version
+
+
1
+
+
Setting a Local Version
+
To install and set a local version of yarn for a specific project you can use the global yarn command we installed earlier. This ensures everyone working on a project is using the exact same version of yarn which is useful to avoid any undesired behavior like producing a different yarn.lock file.
+
This is accomplished by using yarn policiesContent not supported which allows you to check in your Yarn 1Content not supported 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 .yarn/releases directory. Then your yarn-path will be updated in a .yarnrc file.
+
Now any yarn command run in your project will be using the local version 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 Yarn 1Content not supported as you.
+
If you're using an existing project, then you don't need to set the local version as long as the project has the desired version of Yarn 1Content not supported in the .yarn/releases directory, and the yarn-path is configured properly in the .yarnrc file.
+
If you don't have a project directory, then run the following:
There are multiple ways to specify which version you want to use:
+
+
yarn policies set-version downloads the latest stable release
+
yarn policies set-version --rc downloads the latest rc release
+
yarn policies set-version 1.22.4 downloads a specific version
+
+
Running yarn policies set-version [version] is also the recommended way to upgrade your version of Yarn 1Content not supported.
+
Now run yarn --version in your project directory, and it should output the local version you just set. If you navigate out of your project directory and run yarn --version, then you should see the global version that you installed.
+
The global version of yarn will first check if it's in a directory with a .yarnrc file. If the directory has a .yarnrc file, then the configured yarn-path value will be used to switch the yarn version from the global version to the project specific version.
+
Resolving Installation Directory Issue
+
If you set the local version in your project's root directory and the .yarn directory and .yarnrc file aren't generated there, then delete the files that were generated and run the yarn init command in your project's root directory before setting the local version. The yarn init command is described in the Creating a New Project section.
+
+
Updating the .gitignore File
+
After setting your local version of yarn, you should now have .yarn directory in the root of your project.
+
Some of the files yarn adds to your .yarn directory should be checked into version control, e.g., git and others should be ignored.
+
To specify which directories and files should be ignored when pushing to your repositiory you can create a .gitignore file.
+
After creating the .gitignore file, you can add the recommended basic configuration for yarn:
This will ignore the entire .yarn directory except for the directories specified after the !.
+
The yarn.lock and .yarnrc files should always be checked into version control.
+
Adding a .gitattributes File
+
If you're using a local version of yarn, then it's recommended to add a .gitattributes file to your project which will prevent git from showing large diffs when you add or update releases and plugins:
This is accomplished by identifying the release and plugin directories as binary content.
+
Creating a New Project
+
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.
+
Then run the following command:
+
+
+
yarn init
+
+
1
+
+
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 project-directory:
+
+
+
question name (project-directory): my-new-project
+question version (1.0.0): 1.2.4
+question description: Learning Yarn
+question entry point (index.js):
+question repository url: https://github.com/github-username/my-new-project
+question author: Your Name
+question license (MIT):
+question private:
+success Saved package.json
+Done in34.11s.
+
+
1 2 3 4 5 6 7 8 9 10
+
+
After answering all of the questions, a package.json file containing the answers will be created. The package.json file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow semantic versioning (semver)Content not supported.
+
Now, let's describe each property in a little more detail:
entry point is a JavaScript file that starts the execution of your project
+
+
This property is called main in the package.json file
+
The default value is index.js
+
+
+
repository url describes the location of the project repository containing the code
+
+
This property is called repository in the package.json file
+
You can explicitly set the URL and a version control type in the package.json file by adding, e.g., "repository": { "type": "git", "url": "https://github.com/github-username/my-new-project" }
+
If no value is given, it will not be set
+
+
+
author describes the creator or owner of the project
+
+
Used to describe one person
+
You can explicitly set the author name, email, and website in the package.json file by adding, e.g., "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }
+
If no value is given, it will not be set
+
+
+
license indicates the type of license being used by the project
+
+
Allows users to know how they're permitted to use the project
When adding a package the package.json file gets updated by adding the package as a dependency to a dependencies object where each key is a package name and the value represents a range of allowed versions following semverContent not supported notation.
+
A yarn.lock file will also be created if it doesn't exist or updated if it already exists. A yarn.lock 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.
+
Here's how to handle the yarn.lock file in your project:
+
+
The yarn.lock file should be in the root of your project directory
+
You shouldn't directly edit the yarn.lock file it gets auto-generated and automatically updated
+
When installing only the top-level yarn.lock file is used and any yarn.lock files that exist in the dependencies will be ignored
+
The yarn.lock file should also be checked into version control since it's used to install the exact same versions of packages across machines
+
+
To add the latest version of a package run the following command:
+
+
+
yarnadd<package-name>
+
+
1
+
+
To add a specific version of a package run the following command:
+
+
+
yarnadd<package-name>@1.2.3
+
+
1
+
+
To add the latest version of a package within a specified version range run the following command:
+
+
+
yarnadd<package-name>@"^1.2.3"
+
+
1
+
+
The latest version within the given version range is determined by the range specifier and the version number.
+
In the example above the range specifier is the caret symbol, i.e., ^. You can use any desired range specifier, and the added package will be the latest version within the given version range.
+
You can also add a package with a specific tag by running the following command:
+
+
+
yarnadd<package-name>@tag
+
+
1
+
+
Tags are a way to mark published versions of a package with a label. Check out the yarn tagContent not supported documentation for more information about them.
+
To add a package to your development dependencies, i.e., devDependencies you can add either the --dev or -D flag to the end of the command.
+
Development dependencies are dependencies that you need for the development workflow, e.g., BabelContent not supported, but not while running the project.
+
Here's an example of adding the latest version of a package to your devDependencies:
To add a package globally to your operating system you can use the global subcommand before add:
+
+
+
yarn global add<package-name>
+
+
1
+
+
When to Use Global
+
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., nodemonContent not supported. See the yarn globalContent not supported documentation for more details.
The upgrade subcommand will update the packages to their latest version based on the version ranges defined in the package.json file. See the Versions of dependenciesContent not supported documentation to get a better understanding of how version ranges are used.
+
After running the upgrade subcommand, the yarn.lock file will be updated with the latest versions specified by the version ranges. The versions in the package.json file will remain the same though since the upgraded packages will still be within the same version ranges.
+
To view the upgraded versions of your packages in a readable format you can use the yarn list command described in the previous section.
+
We'll see how to upgrade packages to versions outside of the specified version ranges which will update both the yarn.lock file and the package.json file.
+
The following command upgrades all packages within their specified version ranges:
+
+
+
yarn upgrade
+
+
1
+
+
You can also upgrade a specific package within its specified version range:
+
+
+
yarn upgrade [package-name]
+
+
1
+
+
To upgrade all packages to their latest versions you can add the --latest flag:
+
+
+
yarn upgrade --latest
+
+
1
+
+
You can also upgrade a specific package to its latest version using the --latest flag:
+
+
+
yarn upgrade [package-name] --latest
+
+
1
+
+
When using the --latest flag, the version range in the package.json 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.
+
Since the range versions in the package.json file are ignored, both the yarn.lock and package.json files can be updated.
+
Also, the range specifiers in the package.json 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., ^ will be used instead.
+
So, e.g., a tilde range specifier, i.e., ~ will still be used for any packages that we're using it previously.
+
You can also explicitly set the range specifier by passing a flag after the --latest flag, e.g., --caret.
+
You can also upgrade a package to a specific version with the following command:
+
+
+
yarn upgrade <package-name>@1.2.3
+
+
1
+
+
To upgrade a package to the latest version within a specified version range run the following:
+
+
+
yarn upgrade <package-name>"@^1.2.3"
+
+
1
+
+
The latest version within the given version range is again determined by the range specifier and the version number.
+
In the example above the range specifier is the caret symbol, i.e., ^. You can again use any desired range specifier, and the package will be upgraded to the latest version within the given version range.
+
You can also upgrade a package to a specific tag using the following command:
+
+
+
yarn upgrade <package-name>@tag
+
+
1
+
+
Tags are again a way to mark published versions of a package with a label. Check out the yarn tagContent not supported documentation for more information about them.
+
You can specify a preferred range specifier when upgrading a package with a tag by passing, e.g., --tilde flag at the end of the command.
+
Downgrading Packages
+
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.
After running the command above, the yarn.lock and package.json files will both always be updated. This ensures all developers will still be using the exact same versions of the packages.
+
Also, when removing a package it will be removed from all types of dependencies, e.g., dependencies, devDependencies, etc.
The following command should be run when checking out code for a new project and when another developer adds or removes a package.
+
Run the following command to install all of a project's packages specified in the package.json file:
+
+
+
yarninstall
+
+
1
+
+
You can also just run the following:
+
+
+
yarn
+
+
1
+
+
After running either one of the commands above, a node_modules directory will be created in the current directory which contains all of the code for the installed packages.
+
Here's how the yarn.lock file is used:
+
+
If the yarn.lock file is present and if it contains all of the packages specified in the package.json file, then the exact versions specified in the yarn.lock file will be installed.
+
If there is no yarn.lock file or there is one that doesn't contain all of the packages in the package.json file, then the newest versions within the version ranges specified in the package.json file will be installed. This will then update the yarn.lock file.
+
+
To ensure the yarn.lock file is not updated when installing all of a project's dependencies you can run the following:
To run a script you need to first add a scripts object to your package.json 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.
Here, we have defined two scripts in our scripts object with the names of test and build and with the commands of test-script and build-script, respectively.
+
To run a script you can run the following command:
+
+
+
yarn run [script-name]
+
+
1
+
+
You can also just run the following:
+
+
+
yarn[script-name]
+
+
1
+
+
Potential Shorthand Issue
+
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 run subcommand when running your scripts.
+
+
It's also possible to list all of the scripts available to run in your project by running the following:
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-12-28T22:56:00.000Z
+ Copyright by J the Code Monkey
+
+
+ Configuring Settings
+ https://codemonkeys.tech/raspberry-pi-configuring-settings/
+
+ 2024-07-17T04:15:09.558Z
+ 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! 🍌🐒
+
Configuring Settings
+
What We're Doing
+
In this tutorial we're going to learn how to configure various settings for a Raspberry PiContent not supported using standard DebianContent not supported commands. Since we'll be using standard Debian commands, the commands will be compatible with most other hardware platforms running Debian.
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.
+
Raspberry Pi Imager Boot Issues
+
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.
+
+
We'll be configuring the following settings:
+
+
Username
+
Password
+
Secure Shell (SSH)
+
WiFi
+
Time Zone
+
Keyboard Layout
+
+
We'll be using the nano text editor to edit the configuration files.
+
Here's how to save and exit nano:
+
+
Save: press Ctrl+o, confirm the filename, and press the Enter key
The Raspberry Pi is connected to a display either a computer monitor or television
+
You have a USB keyboard plugged into the Raspberry Pi
+
+
Username
+
There are multiple ways to update your username. We'll be updating the username by logging in as the root user. Instead of using the root user, it's also possible to create another user and log into it to update the username.
+
Don't Use pi for your Username
+
For security reasons it's recommended to not use pi 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 pi username.
+
+
Enable root User
+
To update the username using the root user, you first need to enable it which you can do by running the following command:
You can also disable the root user if you want after updating the username which we'll demonstrate below. For security reasons it's recommended to disable the root user after updating the username.
+
+
Logout
+
After enabling the root user, you need to log out of the current user which you can do with the following command:
+
+
+
logout
+
+
1
+
+
Update Username
+
Now, you'll need to log in using the root user by entering root for the username and the password you just created for the root user.
+
After logging in as the root user, you're now ready to update the username by running the following command:
+
+
+
usermod -l <new_username><old_username>
+
+
1
+
+
Be sure to replace:
+
+
<new_username> with the updated username
+
<old_username> with the username you want to update
+
+
Update home Directory
+
The username has been updated, but the user's home directory will still be using the previous username. To update the home directory to reflect the updated username you need to run the following command:
You can now log out of the root user by running the logout command we used earlier, and log in using the updated username and the user's password.
+
Disable root User
+
You can now disable the root user if you want, but you'll first want to make sure the updated user still has sudo privileges. You can check this by running the following command:
+
+
+
groups<new_username>
+
+
1
+
+
Be sure to replace:
+
+
<new_username> with the updated username
+
+
If the user still has sudo privileges, you should see the sudo group in the output.
+
After confirming the updated user still has sudo privileges, you can disable the root user by running the following command:
+
+
+
sudopasswd -l root
+
+
1
+
+
Password
+
To update the password for your user you can run the following command:
+
+
+
passwd
+
+
1
+
+
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.
It's recommended to not use raspberry as your password since it has been used in the past as the default password plus it isn't a secure password anyway.
+
+
Hostname
+
Every Raspberry Pi using Raspberry Pi OS Lite (64-bit) uses the default hostname raspberrypi which isn't very helpful when you're using multiple Raspberry Pi devices that you're trying to distinguish between on your network.
+
hostname Restrictions
+
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.
+
+
hosts File
+
To update the hostname you can open the /etc/hosts file by running the following command:
Next you need to open the /etc/hostname file by running the following command:
+
+
+
sudonano /etc/hostname
+
+
1
+
+
Your hostname file should look something like this:
+
+
+
<old_hostname>
+
+
1
+
+
Be sure to replace:
+
+
<old_hostname> with the updated hostname
+
+
Then save and exit the file.
+
For the changes to take effect you need to reboot your Raspberry Pi which you can do by running the following command:
+
+
+
sudo reboot
+
+
1
+
+
After rebooting the command prompt should now display, <username>@<new_hostname>.
+
Where:
+
+
<username> is the username of the current user
+
<new_hostname> is the updated hostname
+
+
Enable and Start SSH
+
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.
+
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.
+
Enable SSH
+
To enable SSH run the following command:
+
+
+
sudo systemctl enable ssh
+
+
1
+
+
Start SSH
+
To start the SSH service run the following command:
+
+
+
sudo systemctl start ssh
+
+
1
+
+
You should now be able to SSH into the Raspberry Pi from your local computer.
+
Configure WiFi
+
To configure WiFi you need to edit the wpa_supplicant.conf file.
+
wpa_supplicant.conf
+
The wpa_supplicant.conf file should be located in the /etc/wpa_supplicant directory.
+
To open the wpa_supplicant.conf file you can run the following command:
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:
+
+
+
sudo reboot
+
+
1
+
+
Conclusion
+
After following only with this tutorial, you should now know how to configure various settings for your Raspberry Pi using standard Debian commands.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-12-20T15:02:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 1 - Introduction
+ https://codemonkeys.tech/vuepress-tutorial-1/
+
+ 2024-07-17T04:15:09.560Z
+ Hey fellow Code Monkeys!!! 🐵 If you're interested in learning Vuepress, then check out VuePress Tutorial 1 - Introduction! 🍌🐒
+
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.
+
How to Use these Tutorials
+
+
+
If you want to recreate the Code Monkeys Blog or create a very similar blog then you can simply follow these tutorials in order.
+
+
+
Each tutorial will give you some general information about a VuePressContent not supported topic and provide helpful resources.
+
+
+
Then we'll apply what we've learned to the blog as an example.
+
+
+
This way you don't have to necessarily follow the tutorials in a linear order.
+
+
+
You'll be able to just learn a VuePressContent not supported topic if you don't want to recreate the entire blog or create a very similar blog.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-09-24T16:26:30.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 10 - Homepage Styling Part 2
+ https://codemonkeys.tech/vuepress-tutorial-10/
+
+ 2024-07-17T04:15:09.566Z
+ Hey fellow Code Monkeys!!! 🐵 Ready to continue the homepage styling for your VuePress site, then check out VuePress Tutorial 10 - Homepage Styling Part 2! 🍌🐒
+
VuePress Tutorial 10 - Homepage Styling Part 2
+
Homepage Styling Recap
+
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 $accentColor, $textColor, and $borderColor in the palette.styl file. The colors of these variables then get applied instead of the colors originally set by the default themeContent not supported. These variables can also be used to style other elements of the blog as well.
+
We also added our own global styling variables to the palette.styl file which included the $backgroundColor and the $darkBorderColor. These variables were then used in the index.styl file.
+
In the index.styl file we used some of the global styling variables along with overriding and adding our own global styling to style the background-color of the blog, the main tag with a class of home, the header tag with a class of hero, and the div tag with a class of features.
+
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.
+
Homepage Styling Updates
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
padding: 8rem 0 0 adds a padding of 8rem to the top and a padding of 0 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.
+
+
Why not Start with this Padding?
+
In the previous tutorial we used padding: 0 to style the home class since that code was based off of a more complicated way of styling the Footer component which has now been simplified. We'll be going over this simplified Footer component styling in the next tutorial.
+
+
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.
+
Adding Hover Effects
+
To implement the hover effects we'll be adding a CSS pseudo-class of hover to the header tag with a class of hero which we'll use along with the transition property to smoothly apply the hover effects to the main card logo and to the box shadow around the main card.
.hero:hover applies the hover pseudo-class to the .hero selector which will apply the styles defined inside of it when the user hovers their pointer over the header tag with a class of hero.
+
box-shadow: 0.125rem 0.5rem 1rem 0.125rem #0b0c0f changes the box shadow style defined in the hero class.
+
transform: scale(1.1) applies the scale() method to the transform property to increase the size of the img tag to be 1.1 times the original width and height.
+
+
If you have questions about the CSS discussed above, then check out these resources:
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.
+
The hover effects are working, but they aren't that smooth. To make them smoother we're going to use the transition property.
+
The transition property allows you to change CSS property values smoothly over a specified duration. To create a transition you need to specify two values:
+
+
The CSS property you want to add the transition to
+
The duration of the transition
+
+
Here's what the index.styl file looks like after adding our transition properties:
Now that we have added our hover effects, let's add the radial gradient background to the main card.
+
Adding Gradient Background
+
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.
+
We'll be adding a circular radial gradient background to the center of the header tag with a class of hero:
background-image: radial-gradient(circle at center center, #2c303a, $backgroundColor) adds a radial gradient with a circular shape to the center of the element starting with a color of #2c303a which transitions to the $backgroundColor variable that is defined in the palette.styl file.
+
+
If you want to learn more about CSS gradients, then check out these resources:
You can also check out Gradient MagicContent not supported which is a gallery of CSS gradients that you can freely use in your own projects.
+
The background of the main card should now be a radial gradient that starts at the center of the card with a color of #2c303a that circularly transitions to the $backgroundColor.
+
Next Steps
+
In the next tutorial we'll add styling to make the Footer component stick to the bottom of the page, and we'll add a highlight effect to the SVG icons.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-02T21:56:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 11 - Sticky Footer
+ https://codemonkeys.tech/vuepress-tutorial-11/
+
+ 2024-07-17T04:15:09.569Z
+ 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! 🍌🐒
+
VuePress Tutorial 11 - Sticky Footer
+
What We're Doing
+
We're going to continue styling the blog by making the Footer component we created in VuePress Tutorial 8 - Custom Footer into a sticky footer. We were going to be adding a highlight effect when hovering over the SVGContent not supported 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.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
Now let's get started by discussing what a sticky footer is.
+
What is a Sticky Footer?
+
A sticky footer adheres or sticks 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 homepage, then the footer will still stick to the bottom of the page instead of appearing directly below the content above it.
+
There are multiple ways to add a sticky footer to your site, but we're only going to discuss how to use the CSS calc() function. If you're interested in learning about the other ways of adding a sticky footer, then check out Sticky Footer, Five WaysContent not supported.
+
Sticky Footer Styling
+
Here's what the index.styl file looks like after adding the sticky footer styling:
The div tag with a class of theme-container contains all of the content of the blog except for the footer tag.
+
So, here we're using min-height: calc(100vh - 10.3125rem) to set the minimum height of the content inside of the div tag with a class of theme-container to be 100vh minus 10.3125rem which is the height of the Footer component including the top and bottom padding.
+
The unit of vh is relative to 1% of the height of the viewport which is the browser window size, so 100vh is 100% of the height of the viewport.
+
So, when we subtract 10.3125rem from 100vh, we're subtracting the height of the Footer component from 100% of the viewport height.
+
This means the minimum height of the content inside of the div tag with a class of theme-container will be the entire homepage height minus the height of the Footer component.
+
After setting this style, notice how the Footer component is now pushed to the bottom of the page. This is how we get the Footer component to stick to the bottom of the page.
+
Also, since we added this style to the index.styl file, this style will be applied globally to the blog which is fine since the Footer component will be used on every page in the blog.
+
Using a Fixed Footer Size
+
We're using a fixed size for the height of the Footer 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 Footer component, then it may be worth looking into implementing the flexbox or grid methods for adding a sticky footer which you can find in the Sticky Footer, Five WaysContent not supported post.
+
+
If you have questions about the CSS discussed above, then check out these resources:
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 SVGContent not supported icons.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-05T20:04:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 12 - Highlight SVGs on Hover
+ https://codemonkeys.tech/vuepress-tutorial-12/
+
+ 2024-07-17T04:15:09.578Z
+ 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! 🍌🐒
+
VuePress Tutorial 12 - Highlight SVGs on Hover
+
What We're Doing
+
We're now ready to add a highlight effect when hovering over the SVGContent not supported icons. The method we'll be using doesn't require a lot of styling, but it does require us to edit the fill attribute of the SVGContent not supported icons.
+
We'll demonstrate how to edit the fill attribute by manually editing the files as well as using a Command-line Interface (CLI) command provided by vuepress-plugin-svg-iconsContent not supported which will automate the process and optimize the files.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Now let's begin by manually editing one of the icon files.
+
Manual Editing
+
When we downloaded the icons from iconfontContent not supported we downloaded them with a fill attribute which will override the color we set for the hover effect.
+
To fix this issue we can manually remove the fill attribute from each icon file.
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 fill attribute or search for fill in the file to be able to easily find and remove it.
+
+
Icon Styles
+
Now that we have removed the fill attribute from the file, we can add the styling to highlight the icon when hovering over it.
+
Here's what the Footer.vue file looks like after adding the hover effect:
svg:hover applies the hover pseudo-class to the svg selector which will apply the styles defined inside of it when the user hovers their pointer over the svg tag.
+
fill: $accentColor changes the fill of the svg tag to be the accent color.
+
+
Notice the icon fill is now set to be the accent color even if you're not hovering over the icon.
+
This is because we haven't set a fill attribute value for when the user isn't hovering over the icon, so it falls back to the value set in svg:hover.
+
To fix this issue we'll add the following styling to the Footer.vue file:
fill: $textColor sets the fill of the svg to be the text color when the user isn't hovering over the icon.
+
+
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.
+
To set the hover effect for the other icons, you will need to remove the fill attribute from the other icon files.
+
If you have questions about the CSS discussed above, then check out these resources:
After running the script, the SVGContent not supported files will be optimized which includes removing the fill attribute from the files.
+
The hover effect should now be applied to each icon assuming you added the styling from the section above.
+
If you have any questions or want to learn more about the plugin, then check out the guideContent not supported.
+
You can also check out SVGOContent not supported if you want to learn more about the optimization tool including CLI usage, configuration, API usage, etc.
+
Optimized Icon Example
+
Here's the contents of the optimized GitHub.svg file:
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.
+
+
If you compare the optimized file with the original file above, you'll notice a lot of unnecessary information was removed including the fill attribute without affecting the rendering of the icons.
+
Next Steps
+
In the next tutorial we'll be styling the navbar by updating the background color, height, border, etc.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-08T18:18:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 14 - Dropdown Menu Styling
+ https://codemonkeys.tech/vuepress-tutorial-14/
+
+ 2024-07-17T04:15:09.584Z
+ 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! 🍌🐒
+
VuePress Tutorial 14 - Dropdown Menu Styling
+
What We're Doing
+
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 nav-dropdown and dropdown-item which are provided by the default themeContent not supported.
+
To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Before we start styling the dropdown menu, we're going to force an element state of hover on the div tag with a class of dropdown-wrapper. This will ensure we can see the changes we're making to the dropdown menu even when we move the cursor away from the dropdown-wrapper class.
+
To do this we need to select the dropdown-wrapper class in the Elements tab.
+
Here's the location of the dropdown-wrapper class in the HTML:
After selecting the dropdown-wrapper class in the Elements tab, we need to go to the Styles tab, click on the :hov tab, then force the element state of hover by checking the :hover checkbox.
+
The dropdown menu should now be shown even when the cursor is moved away from the dropdown-wrapper class.
+
Nav Dropdown
+
We're now ready to begin styling the dropdown menu.
+
HTML Location
+
We're going to begin the styling by locating where the nav-dropdown class is in the HTML:
From the HTML above we can see that the nav-dropdown class is attached to a ul tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.
+
Styling
+
This means in the index.styl file we can nest the nav-dropdown class inside of the nav-item class and apply the following styles:
text-align: center horizontally aligns the text in the dropdown menu.
+
background-color: $backgroundColor sets the background color of the dropdown menu to be $backgroundColor which is a global styling variable we set in the palette.styl file.
+
border: 0.125rem solid $borderColor adds a border around the dropdown menu with a thickness of 0.125rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
+
padding: 0.8rem 0 adds a padding of 0.8rem to the top and bottom and 0 to the left and right of the dropdown menu.
+
+
Dropdown Item
+
We're now ready to style the dropdown-item class.
+
HTML Location
+
Here's the location of the dropdown-item class in the HTML:
From the HTML above we can see that there are two dropdown-item classes. Each one is attached to an li tag and is a child of the ul tag with a class of nav-dropdown.
+
Also, notice the h4 tag which is a child of the li tag with a class of dropdown-item. We'll be styling this h4 tag as well.
+
Styling
+
In the index.styl file we can nest the dropdown-item class inside of the nav-dropdown class as well as nest the h4 tag inside of the dropdown-item class and apply the following styles:
padding-bottom: 0.4rem adds a padding of 0.4rem to the bottom of each of the dropdown items.
+
border-top: 0.0625rem solid $borderColor adds a border to the top of the h4 tag, i.e., the By Topics text with a thickness of 0.0625rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
+
cursor: text sets the cursor when pointing over the h4 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.
+
margin: 0.45rem 0.375rem 0 adds a margin of 0.45rem to the top, 0.375rem to the left and right, and 0 to the bottom of the h4 tag, i.e., the By Topics text.
+
+
If you have questions about the CSS discussed above, then check out these resources:
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-15T22:17:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 13 - Navbar Styling
+ https://codemonkeys.tech/vuepress-tutorial-13/
+
+ 2024-07-17T04:15:09.596Z
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to style the navbar for your VuePress site, then check out VuePress Tutorial 13 - Navbar Styling! 🍌🐒
+
VuePress Tutorial 13 - Navbar Styling
+
What We're Doing
+
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 default themeContent not supported: navbar, site-name, links, search-box, nav-links, nav-item, and dropdown-title.
+
To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
display: flex defines a flex container for all of the direct children of the header tag with a class of navbar.
+
align-items: center vertically centers the flex items, i.e., the direct children of the header tag with a class of navbar.
+
height: 4.5rem sets the height of the navbar to be 4.5rem.
+
background-color: $backgroundColor sets the background color of the navbar to be $backgroundColor which is a global styling variable we set in the palette.styl file.
+
border-bottom-width: 0.125rem sets the border bottom width of the navbar to be 0.125rem.
+
+
Site Name Class
+
After locating and styling the navbar class, we're ready to move on to the site-name class.
+
HTML Location
+
Here's the location of the site-name class in the HTML:
From the HTML above we can see that the site-name class is attached to a span tag and is a child of the a tag with a class of home-link which is a child of the header tag with a class of navbar.
+
Styling
+
This means in the index.styl file we can nest the site-name class inside of the navbar class and apply the following style:
background-color: transparent sets the background color behind the search box and of the links on the right side of the navbar to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the links class.
+
height: 3rem sets the height of the div tag which contains the search box and the links on the right side of the navbar to be 3rem.
+
align-items: center vertically centers the flex items, i.e., the direct children of the div tag with a class of links which was given a style of display: flex by the default themeContent not supported.
+
+
Search Box Class
+
We've finished styling the links class, so let's begin the styling of the search-box class.
+
HTML Location
+
Here's the location of the search-box class in the HTML:
margin-right: 1.5rem adds a margin of 1.5rem to the right of the search box.
+
font-size: 1.125rem sets the font size of the text in the input tag to be 1.125rem.
+
background-color: transparent sets the background color of the input tag to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the input tag.
+
border-width: 0.125rem sets the width of the border around the input tag to be 0.125rem.
+
color: $textColor sets the color of the text in the input tag to be $textColor which is a global styling variable we set in the palette.styl file.
+
+
Viewing the font-size and color Styles
+
To see the font-size and color 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 $accentColor which is a global styling variable we set in the palette.styl file. This effect is provided by the default themeContent not supported and uses the focus pseudo-class.
+
+
Nav Links Class
+
Now that we have styled the search-box class and its child input tag, we're ready to move on to the styling of the nav-links class.
+
HTML Location
+
Here's the location of the nav-links class in the HTML:
From the HTML above we can see that there are four nav-item classes. Each one is attached to a div tag and is a child of the nav tag with a class of nav-links.
+
Styling
+
This means in the index.styl file we can nest the nav-item class inside of the nav-links class and apply the following styles:
.nav-item:first-child applies the first-child pseudo-class to the .nav-item selector. The first-child 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 div tag with a class of nav-item in the group of sibling div tags that have the class of nav-item.
+
margin-left: 0 adds a margin of 0 to the left of the first div tag with a class of nav-item within the group of sibling div tags that have a class of nav-item.
+
margin-left: 1.75rem adds a margin of 1.75rem to the left of all of the div tags that have a class of nav-item except for the first one since that is being styled by the first-child pseudo-class.
+
+
Dropdown Title Class
+
After finishing the styling for the nav-item class, we're now ready to move on to the styling of the dropdown-title class.
+
HTML Location
+
Here's the location of the dropdown-title class in the HTML:
From the HTML above we can see that the dropdown-title class is attached to a button tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.
+
Styling
+
This means in the index.styl file we can nest the dropdown-title class inside of the nav-item class and apply the following style:
In the next tutorial we'll be styling the dropdown menu in the navbar by updating the background color, border, padding, etc.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-11T17:11:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 15 - Blog Plugin
+ https://codemonkeys.tech/vuepress-tutorial-15/
+
+ 2024-07-17T04:15:09.609Z
+ 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! 🍌🐒
+
VuePress Tutorial 15 - Blog Plugin
+
What We're Doing
+
It's now time to install and begin the process of configuring @vuepress/plugin-blogContent not supported. 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 document classification, permalinks, and directory classification.
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
PaginationContent not supported which allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.
+
Client APIContent not supported which allows you to access global variables that contain data about pagination, frontmatter, and the various services the plugin provides.
+
+
We'll be discussing pagination and the Client API in more detail in future tutorials.
+
Installation
+
We're now ready to discuss the installation of the plugin.
+
Using the Tutorials Repo
+
If you're following along with the tutorials, then when you switch to the tutorial-15 branch you can run the following command to install the package instead of running the installation command:
+
+
+
yarn
+
+
1
+
+
npminstall
+
+
1
+
+
This will ensure you have the same version used in the blog since the command uses the version specified in the yarn.lock file during the installation.
+
Using the Installation Command
+
To install the blog plugin in your own project you can run the following command:
+
+
+
yarnadd -D @vuepress/plugin-blog
+
+
1
+
+
npminstall -D @vuepress/plugin-blog
+
+
1
+
+
Installing the Same Blog Plugin Version
+
If you want to ensure you're installing the same version being used in the tutorials and blog, then run yarn upgrade @vuepress/plugin-blog@1.9.4.
+
+
Updated package.json File
+
After installing the plugin, the package.json file should look something like this:
+
+
+
{
+ "name":"code-monkeys-blog-tutorials",
+ "version":"1.0.0",
+ "description":"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!",
+ "main":"index.js",
+ "repository":{
+ "type":"git",
+ "url":"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git"
+ },
+ "author":{
+ "name":"J the Code Monkey",
+ "email":"support@codemonkeys.tech",
+ "url":"https://www.codemonkeys.tech/"
+ },
+ "license":"GPL-3.0-or-later",
+ "scripts":{
+ "docs:dev":"vuepress dev docs",
+ "docs:build":"vuepress build docs",
+ "svgo":"vuepress svgo docs"
+ },
+ "devDependencies":{
+ "@goy/vuepress-plugin-svg-icons":"^4.2.3",
+ "@vuepress/plugin-blog":"^1.9.4",
+ "vuepress":"1.8.2"
+ }
+}
+
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.
+
The plugins will only be used though if you enable them in the config.js file.
+
They can also be installed as standalone plugins, so you don't need to use the blog plugin to use them for your site.
+
We'll be discussing these plugins in more detail in future tutorials.
+
Usage
+
To use the blog plugin we need to add the following to the config.js file which should now look something like this:
The blog plugin provides a document classifier which is a set of functions that handles the classifications of pages with the same characteristics.
+
These characteristics for pages in a blog may consist of:
+
+
Pages in the same directory, e.g., a _posts directory.
+
Pages containing the same frontmatter key, e.g., tag: js which signifies those pages contain content related to js, i.e., JavaScript.
+
+
Another common requirement is the ability to group all pages as well as pages with specific tags for pagination.
+
Before discussing directory classification, we're going to first define what a permalink is as well as discuss how they're built and configured. This will give us a better understanding of how the blog plugin uses permalinks to build customizable links for blog posts which is preferable to using the default way of creating links.
+
Permalinks
+
A permalink is a URL that is intended to remain unchanged for a long time. This leads to links that are less susceptible to link rotContent not supported 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.
+
VuePress v1Content not supported provided support for creating customizable links by introducing the ability to build permalinks.
+
Template Variables
+
We're able to build permalinks by using the following template variables:
+
+
+
+
Variable
+
Description
+
+
+
+
+
:year
+
Published year of post (4-digit)
+
+
+
:month
+
Published month of post (2-digit)
+
+
+
:i_month
+
Published month of post (without leading zeros)
+
+
+
:day
+
Published day of post (2-digit)
+
+
+
:i_day
+
Published day of post (without leading zeros)
+
+
+
:slug
+
Slugified file path (without extension)
+
+
+
:regular
+
Permalink generated by VuePress by default.
+
+
+
+
Default Configuration
+
The default configuration for permalinks is /:regular.
+
The :regular template variable will first check if the Markdown files in the documents directory which in our case is the docs directory are index files, i.e., README.md or index.md.
+
+
If they're index files, they get converted to URLs without extensions that are based on the file hierarchy.
+
If they're not index files, they get converted to URLs with html extensions that are based on the file hierarchy.
+
+
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 docs directory:
+
+
+
+
Relative Path
+
Page Routing
+
+
+
+
+
/README.md
+
/
+
+
+
/foo/README.md
+
/foo/
+
+
+
/foo.md
+
/foo.html
+
+
+
/foo/bar.md
+
/foo/bar.html
+
+
+
+
Using Vue Files
+
Files with a vue extension follow the same conventions described for Markdown files above, e.g., /README.vue gets converted to /.
We'll be leaving the permalink property with the default value of /:regular, and we'll use the configuration provided by the blog plugin to customize the permalinks for each blog post.
+
+
Local Configuration
+
It's also possible to set a permalink locally for a single page which overrides any globally set configuration.
+
This is done be setting the permalink property in the frontmatter of the Markdown file:
+
+
+
---
+title: Local Permalink
+permalink: /using-a-local-permalink
+---
+
1 2 3 4
+
+
This will set the permalink property to be /using-a-local-permalink instead of following the global configuration.
+
Now that we have an understanding of document classification and permalinks, let's move onto the directory classifier which handles classifying pages placed in the same directory.
+
Directory Classification
+
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 _posts directory inside of the docs directory. The docs directory for your site should now look something like this:
By default VuePressContent not supported will create the following page URLs since it uses the /:regular template variable described above when building the links:
+
+
/_posts/2020-07-03-example-page-1.html
+
/_posts/2021-11-16-example-page-2.html
+
/_posts/2022-05-08-example-page-3.html
+
+
You should now be able to navigate to these pages in the browser:
The customized permalinks 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 config.js file. We'll be discussing these other properties and their default values below.
+
The previously provided links still work because they get converted to the customized permalinks when navigating to those pages.
+
Unknown Custom Element
+
When navigating to the links if you inspect the browser then go to the Console, you'll see the following error: Unknown custom element: <Post>.
+
+
This error is occurring because the plugin is looking for a Post layout component in the layouts directory which we haven't created yet.
+
Before creating a Post layout component to fix this error, we're going to first add the path property.
+
path
+
The path 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.
+
The expected type is a string, and the default value is /${id}/ where ${id} is the value of the id property we previously set.
+
This means you don't need to explicitly set the path property if you're going to be using the same value as the id property. We'll be using a value of /posts/ for the path 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.
Notice this link has the value of the path property in it, i.e., /posts/. 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.
+
Currently, when navigating to that link the Layout component provided by the default themeContent not supported is displayed. The blog plugin will fallback to using the Layout component if it's unable to find an IndexPost layout component in the layouts directory.
+
This means we can create an IndexPost layout component that specifically handles the layout of the paginated list of all of the posts instead of using the Layout component.
+
Creating the IndexPost Layout
+
To create the IndexPost layout component we're going to add an IndexPost.vue file inside of the layouts directory. The layouts directory for your site should now look something like this:
We'll continue developing the IndexPost layout component in a future tutorial.
+
layout
+
We're now ready to add the layout property which is used to specify which layout to use for the entry page.
+
The expected type is a string, and the default value is 'IndexPost' || 'Layout'.
+
From the default value we can see why the entry page originally defaulted to using the Layout component before we created the IndexPost layout component. Since the blog plugin looks for the IndexPost 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.
+
It's also possible to use a custom value for the layout property, e.g., you could use a value of MyIndexPost which you would have to explicitly set in the config.js file. Then you would have to create a MyIndexPost.vue file inside of the layouts directory.
We're now going to fix the Unknown Custom Element error we got after adding the dirname property. To fix this error we need to create the previously mentioned Post layout component.
+
Creating the Post Layout
+
The Post layout component is used to handle the layout for individual post pages.
+
To create the Post layout component we're going to add a Post.vue file inside of the layouts directory. The layouts directory for your site should now look something like this:
We'll continue developing the Post layout component in a future tutorial.
+
itemLayout
+
We're now ready to add the itemLayout property which is used to specify which layout to use for individual post pages.
+
The expected type is a string, and the default value is 'Post'.
+
From the default value we can see why the blog plugin looks for a Post layout component. Since the blog plugin looks for the Post 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.
+
It's also possible to use a custom value for the itemLayout property, e.g., you could use a value of MyPost which you would have to explicitly set in the config.js file. Then you would have to create a MyPost.vue file inside of the layouts directory.
We're now ready to add the itemPermalink property which is used to build customized permalinks for each blog post.
+
The expected type is a string, and the default value is '/:year/:month/:day/:slug'.
+
From the default value we can see how the blog plugin built the customized permalinks after only setting the dirname 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.
Here's a table that summarizes the relationship between the page URLs the blog plugin builds using customized permalinks and the layout components.
+
+
+
+
URLs
+
Layouts
+
+
+
+
+
/posts/
+
IndexPost (falls back to Layout)
+
+
+
/2020/07/03/example-page-1/
+
Post
+
+
+
/2021/11/16/example-page-2/
+
Post
+
+
+
/2022/05/08/example-page-3/
+
Post
+
+
+
+
Next Steps
+
In the next tutorial we'll be discussing the configuration for the pagination property as well as how to access the pagination data in the layout components by using the Client API.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-21T12:26:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 16 - Pagination
+ https://codemonkeys.tech/vuepress-tutorial-16/
+
+ 2024-07-17T04:15:09.616Z
+ Hey fellow Code Monkeys!!! 🐵 Ready to learn about the pagination feature provided by the blog plugin, then check out VuePress Tutorial 16 - Pagination! 🍌🐒
+
VuePress Tutorial 16 - Pagination
+
What We're Doing
+
Now it's time to learn more about the pagination feature and the Client API provided by @vuepress/plugin-blogContent not supported. In this tutorial we're going to begin the configuration of the pagination property as well as discuss the globally scoped $pagination variable provided by the Client API.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
As mentioned in the previous tutorial pagination allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.
Next, we'll add the lengthPerPage property which sets the maximum number of posts to display per page.
+
The expected type is a number, and the default value is 10.
+
When the number of posts is greater than the lengthPerPage value, the blog plugin will generate the necessary pages to display all of the posts.
+
The blog plugin does this by adding page/n/ onto the end of the entry page where n represents the number of the page.
+
So, the second page in the paginated list of pages would be page/2/.
+
If you remember from the previous tutorial VuePress Tutorial 15 - Blog Plugin, the entry page is set by the path property which was given a value of /posts/.
+
This means in our case the blog plugin will generate pages with the following format: /posts/page/n/ where n once again represents the number of the page.
+
We also created the following posts in the _posts directory in the previous tutorial:
+
+
2020-07-03-example-page-1.md
+
2021-11-16-example-page-2.md
+
2022-05-08-example-page-3.md
+
+
Since we only have three posts and the default value for lengthPerPage is 10, the blog plugin won't generate any more pages. You can test this by attempting to navigate to the following page:
In a future tutorial we'll be updating the value of lengthPerPage to be 5 which is the current value being used in the blog.
+
+
layout
+
Now we're going to add the layout property which is used to specify which layout component to use for the pagination pages except for the entry page. The entry page uses the IndexPost layout component which we set in the previous tutorial.
+
The expected type is a string, and the default value is 'DirectoryPagination' || 'Layout'.
+
Since we haven't created a DirectoryPagination layout component in the layouts directory, the layout property uses the other default value which is the Layout component. In our case the Layout component is provided by the default themeContent not supported.
+
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:
If you want your pagination pages except for the entry page to use a layout specifically designed for them, then you can create a DirectoryPagination.vue file inside of the layouts directory. Since DirectoryPagination is the default value for the layout property you won't need to explicitly set it in the config.js file.
+
We'll be using the same layout for the entry page and for the other pagination pages, so we're going to provide a custom value of IndexPost to the layout property.
Here's a table that summarizes the relationship between the pagination and post page URLs the blog plugin builds and the layout components:
+
+
+
+
URLs
+
Layouts
+
+
+
+
+
/posts/
+
IndexPost (falls back to Layout)
+
+
+
/posts/page/2/
+
IndexPost (falls back to DirectoryPagination or Layout)
+
+
+
/2020/07/03/example-page-1/
+
Post
+
+
+
/2021/11/16/example-page-2/
+
Post
+
+
+
/2022/05/08/example-page-3/
+
Post
+
+
+
+
Post Pages Reminder
+
The post pages were given the URLs above by building customized permalinks using the format specified by the itemPermalink property, and the layout components used by the post pages were set by the itemLayout property. Both of these properties can be found in the config.js file, and you can refer to the previous tutorial VuePress Tutorial 15 - Blog Plugin if you have any questions about the post pages.
+
+
prevText
+
Now we'll add the prevText 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 pagination pages.
+
The expected type is a string, and the default value is 'Prev'.
+
We'll be using the default value of 'Prev' for the prevText 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.
+
It's also possible to use a custom value for the prevText property, e.g., you could use a value of Older which you would have to explicitly set in the config.js file.
We're now ready to add the nextText 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 pagination pages.
+
The expected type is a string, and the default value is 'Next'.
+
We'll be using the default value of 'Next' for the nextText 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.
+
It's also possible to use a custom value for the nextText property, e.g., you could use a value of Newer which you would have to explicitly set in the config.js file.
We're now going to take a look at how to use the Client API to access the pagination data in the layout components used by the blog plugin.
+
The Client API 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 Using Vue in MarkdownContent not supported documentation if you're interested.
+
The Client API provides the following globally scoped variables: $pagination, $frontmatterKey, and $service. We'll be focusing on the $pagination variable in this tutorial.
+
If you have any questions or want to learn more about the Client API, then check out the Client APIContent not supported documentation.
+
$pagination
+
We're going to discuss each property the $pagination variable exposes as well as demonstrate how to access the properties in the layout components.
+
To get a better understanding of the pagination data we're going to log each property to the console. The logging will be added to the created lifecycle hook in the script tag. To view the data in the console we're going to inspect the browser then go to the Console tab.
+
If you have questions about the created lifecycle hook, then check out this resources:
If you access the $pagination variable at a route which doesn't match any classification, i.e., the route isn't a pagination page, then the value of $pagination will be null.
+
This means when developing layout components you should check if $pagination has a value of null before using the variable.
+
+
pages
+
The $pagination.pages property is an array of objects where each object contains data related to post pages that are accessible on the current pagination page.
+
Since the $pagination.pages property contains data related to post pages that are accessible on the current pagination page, the data of $pagination.pages will be different depending on which pagination page is being viewed.
+
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.
+
Here are the links to both the entry page and the second page:
Let's add the code to log the $pagination.pages property in the layout component which in our case is being used by both the entry page and the second page, i.e., the IndexPost.vue file:
If you're using different layout components for your entry page and the other pagination pages, then you'll need to add the logging of the $pagination.pages property to both of the files.
+
+
After adding the above code to the IndexPost.vue file and navigating to the entry page, the console should log an array of page objects with the following data:
Since the lengthPerPage property was given a value of 2 and we have three post pages, the $pagination.pages property for the entry page contains two page objects one for each post.
+
Formatting Differences
+
The log in the Console tab will be formatted differently than the $pagination.pages data shown here which was formatted using JSONContent not supported. The properties and values will be the same though.
+
+
After navigating to the second page, the console should log an array consisting of one page object with the following data:
layout: Layout component used by the post pages which is set using the itemLayout property in the config.js file.
+
permalink: Permalink format used for the post pages which is set using the itemPermalink property in the config.js file.
+
id: Unique id for the current classifier which is set using the id property in the config.js file.
+
key: Unique key generated for each page in the site.
+
path: Path for the post page which uses a customized permalink built from the format specified by the itemPermalink property found in the config.js file.
+
pid: Represents the pid for the current classifier which is set using the id property in the config.js file.
+
regularPath: Default path for the post page which is built using the :regular template variable.
+
relativePath: Location of the post page Markdown file relative to the documents directory which in our case is the docs directory.
+
+
The $page Variable
+
The page objects in the $pagination.pages property are the same page objects found by logging the globally scoped $page variable in the Post layout component. After writing the code to log the $page variable, you can view the log by navigating to a post page, e.g., http://localhost:8080/2020/07/03/example-page-1/Content not supported.
+
To learn more about the $page variable and other globally scoped variables you can take a look at the Global ComputedContent not supported documentation.
+
+
length
+
The $pagination.length property is a number whose value is determined by the number of pagination pages.
+
Let's add the code to log the $pagination.length property in the IndexPost.vue file:
If we navigate to either the entry page or the second page, the console should log a value of 2 since in our case there are a total of two pagination pages.
+
hasPrev
+
The $pagination.hasPrev property is a boolean which has a value of true when a previous pagination page exists and a value of false when a previous pagination page doesn't exist.
+
Let's add the code to log the $pagination.hasPrev property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of false. This makes sense since the entry page is the first pagination page which means there is no previous pagination page.
+
If we navigate to the second page, the console should log a value of true which makes sense since the entry page is before the second page.
+
prevLink
+
The $pagination.prevLink property is a string whose value is the previous pagination page path if a previous pagination page exists and a value of null when a previous pagination page doesn't exist.
+
Let's add the code to log the $pagination.prevLink property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of null. This makes sense since the entry page is the first pagination page which means there is no link to a previous pagination page.
+
If we navigate to the second page, the console should log a value of /posts/ which makes sense since the previous link before the second page is the entry page which has a path of /posts/.
+
hasNext
+
The $pagination.hasNext property is a boolean which has a value of true when a pagination page exists after the current pagination page and a value of false when a pagination page doesn't exist after the current pagination page.
+
Let's add the code to log the $pagination.hasNext property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of true. This makes sense since there is a next page in the paginated list of pages, i.e., the second page.
+
If we navigate to the second page, the console should log a value of false which makes sense since in our case there is no pagination page after the second page.
+
nextLink
+
The $pagination.nextLink property is a string whose value is the path of the next pagination page if it exists and a value of null when the next pagination page doesn't exist.
+
Let's add the code to log the $pagination.nextLink property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of /posts/page/2/. This makes sense since the entry page is the first pagination page, and in our case there is a link to the next pagination page, i.e., the second page.
+
If we navigate to the second page, the console should log a value of null. This makes sense since in our case the second page is the last page in the list of pagination pages which means there is no link to the next pagination page.
+
getSpecificPageLink()
+
The $pagination.getSpecificPageLink() is a method that accepts a page number and returns the path of a pagination page. The page numbers start at 0, so to get the entry page path you need to provide a value of 0. If an input is provided that is unable to return a path to a pagination page, then an error is thrown which can be found in the Console tab.
+
Let's add the code to log the output of the $pagination.getSpecificPageLink() method in the IndexPost.vue file:
Since we used a page number of 0 in the code above, the console should log a value of /posts/. This makes sense since a value of 0 refers to the entry page which has a path of /posts/.
+
If we want to get the path of the second page, then we can use a value of 1 as the page number, so the console should log a value of /posts/page/2/. This makes sense since a value of 1 refers to the second page which has a path of /posts/page/2/.
+
Next Steps
+
In the next tutorial we'll begin the development of the IndexPost layout component which will involve using the $pagination variable provided by the Client API.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-09-30T20:07:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 17 - IndexPost Layout
+ https://codemonkeys.tech/vuepress-tutorial-17/
+
+ 2024-07-17T04:15:09.623Z
+ Hey fellow Code Monkeys!!! 🐵 Ready to start developing the IndexPost layout component, then check out VuePress Tutorial 17 - IndexPost Layout! 🍌🐒
+
VuePress Tutorial 17 - IndexPost Layout
+
What We're Doing
+
We're now ready to begin the development of the IndexPost layout component. We'll be using the globally scoped $pagination variable provided by the blog plugin Client APIContent not supported to access the pagination data. In this tutorial we'll be focusing on the post title and preview pagination data. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Before accessing and displaying the pagination data, we're going to first give the component a name and remove the created lifecycle hook which we were using in the previous tutorial to log the pagination data to the console.
To display the pagination data we're going to loop over the $pagination.pages property which if you remember from the previous tutorial VuePress Tutorial 16 - Pagination is an array of objects where each object contains data related to post pages that are accessible on the current pagination page.
+
Using the v-for Directive
+
Since $pagination.pages is an array that we want to loop over, we're going to use the v-for directive to render a list of post pages based on the data within the array. The v-for directive uses the following syntax v-for="item in items" where items is the array you want to loop over, and item is an alias for the array element being iterated on. Here, items corresponds to $pagination.pages, and we'll use post as the alias for the array element being iterated on. This means our v-for directive will be v-for="post in $pagination.pages".
+
Using the key Attribute
+
When using the v-for directive the common best practice is to bind a key attribute where each value given to the key attribute should be unique. The key attribute uses the following syntax :key="item.id" where id is a property with a unique value for every item in the items array.
+
You really only need to use the key attribute when the rendered list relies on child component state or temporary Document Object Model (DOM)Content not supported state, e.g., form input values . This means we don't actually need to include the key attribute since we're currently just rendering a static list.
+
However, we're going to bind the key attribute in case we ever need to use it in the future. To ensure the key attribute has a unique value for each item in the list, we're going to use the key property which is a unique value generated for each page object within the $pagination.pages array. Here's what the key attribute will look like in our case :key="post.key".
+
Determining a Tag
+
Now we need to determine what tag we want to add our v-for directive and key attribute to. We're going to add them to a div tag which will allow us to wrap the pagination data for each post in the list of post pages. Here's what the div tag is going to look like after adding the v-for directive and key attribute <div v-for="post in $pagination.pages" :key="post.key"></div>.
+
Using a Root Element
+
Since the div tag uses the v-for 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 template tag because the template tag can only have one root element. To resolve this issue we're going to wrap the div tag that's using the v-for directive within another div tag which will serve as the root element.
+
Adding the Loop
+
Here's what the IndexPost.vue file should now look like:
After updating the IndexPost.vue file with the code above, if you navigate to the entry page http://localhost:8080/posts/Content not supported you won't notice any changes on the page. This is because we've rendered div tags without any of the pagination data inside of them.
+
If you navigate to the entry page, inspect the browser, and go to the Elements tab, the HTML for the body tag should now look something like this:
Notice how the entry page consists of two div tags wrapped inside of the div tag that's being used as the root element of the template tag. Each of those div tags inside of the parent div tag corresponds to a post page that is accessible on the entry page.
+
Page 2 HTML
+
If you navigate to the second page http://localhost:8080/posts/page/2/Content not supported you also won't notice any changes on the page. This is because we've rendered a div tag without any of the pagination data inside of it.
+
The HTML for the body tag for the second page should now look something like this:
Notice how the second page consists of one div tag wrapped inside of the div tag that's being used as the root element of the template tag. There is only one div tag since we have one post page accessible on the second page.
+
Post Titles
+
Before we can access the post title data using the $pagination.pages property, we need to first add titles to the post files we created in the _posts directory:
+
+
2020-07-03-example-page-1.md
+
2021-11-16-example-page-2.md
+
2022-05-08-example-page-3.md
+
+
Adding Titles to Post Files
+
Since the post files are Markdown files, we can add titles to the files by adding a heading level one, e.g., # Heading Level 1 to each file which gets converted to the following HTML <h1>Heading Level 1</h1>.
+
Here's what the post files look like after adding the titles:
+
+
+
# Example Post 1
+
+
1
+
+
+
+
# Example Post 2
+
+
1
+
+
+
+
# Example Post 3
+
+
1
+
+
If you have any questions or want to learn more about Markdown headings, then check out the Basic SyntaxContent not supported guide.
+
Adding Titles to $page Variables
+
When VuePressContent not supported encounters a heading level one in a Markdown file it automatically adds a title property to the globally scoped $page variable.
+
The page objects in the $pagination.pages property are the same as the $page variables used by the post pages which means each page object will now have a title property that we can access in the IndexPost layout component.
+
You can take a look at the Global ComputedContent not supported documentation to learn more about the $page variable and other globally scoped variables.
+
Displaying Post Titles
+
Now that we can access the post titles in the $pagination.pages property, we're ready to render the post titles on the pagination pages.
+
We're going to display the post titles as h2 tags which we'll be wrapping inside of two div tags. We'll be using the div tags to add styling to the list of post pages in a future tutorial.
+
To display the post titles we'll be using Text InterpolationContent not supported which allows us to use variables inside of HTML tags by using the "Mustache" syntax. The "Mustache" syntax consists of wrapping a variable inside of double curly braces.
+
We can access the title property on each page object in our loop by using post.title. We can then display this by using the text interpolation described above.
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 $pagination.pages property, we need to first add previews to the post files we created in the _posts directory:
+
+
2020-07-03-example-page-1.md
+
2021-11-16-example-page-2.md
+
2022-05-08-example-page-3.md
+
+
Adding Previews to Post Files
+
Since the post files are Markdown files, we can use YAMLContent not supported frontmatter blocks in the files and define a custom variable preview.
+
Here's what the post files look like after adding the preview variables:
+
+
+
---
+preview: Example Post 1 preview
+---
+
+# Example Post 1
+
1 2 3 4 5
+
+
+
+
---
+preview: Example Post 2 preview
+---
+
+# Example Post 2
+
1 2 3 4 5
+
+
+
+
---
+preview: Example Post 3 preview
+---
+
+# Example Post 3
+
The value for each post preview 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.
The page objects in the $pagination.pages property are the same as the $page variables used by the post pages which means each page object will now have a frontmatter.preview property that we can access in the IndexPost layout component.
+
You can take a look at the Global ComputedContent not supported documentation to learn more about the $page variable and other globally scoped variables.
+
Content Excerpt
+
Instead of defining the custom variable preview in the YAMLContent not supported frontmatter blocks of Markdown files, VuePressContent not supported provides the ability to use a Content ExcerptContent not supported by adding a <!-- more --> comment to a Markdown file. Any content above the comment gets extracted and exposed as a globally scoped $page.excerpt variable. This variable can then be used to render the list of post pages with excerpts for each post just like our custom variable preview. I prefer to use the custom variable preview because the <!-- more --> comment takes all of the content above it which includes any HTML as opposed to using just the text of a post.
+
+
Displaying Post Previews
+
Now that we can access the post previews in the $pagination.pages property, we're ready to render the post previews on the pagination pages.
+
We're going to display the post previews as p tags which we'll place underneath the parent div tag of the h2 tag.
When viewing the pagination 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 theme-default-content to the outermost div tag.
.theme-default-content:not(.custom) is used to select tags that have a class of theme-default-content and that don't have a class of custom by using the :not() pseudo-class. This selector is defined by the default themeContent not supported since other pages can use the theme-default-content class along with a class of custom to apply different styles than the ones shown here. The homepage is an example of a page that uses the theme-default-content class along with a class of custom to apply different styles.
+
max-width: 740px; sets the maximum width of the div tag to be 740px. If the content is greater than the max-width, then the height of the div tag will automatically be changed. If the content is smaller than the max-width, then the max-width property has no effect.
+
margin: 0 auto; sets the margins for the div tag by setting the top and bottom margins to be 0 and the left and right margins to a value of auto. The value of auto means the browser will automatically set the left and right margins to horizontally center the div tag.
+
padding: 2rem 2.5rem; sets the padding for the div tag by setting the top and bottom paddings to be 2rem and the left and right paddings to be 2.5rem.
+
@media (max-width: 959px) 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 959px.
+
padding: 2rem; sets the padding for all of the sides of the div tag to be 2rem when the width of the display area is less than or equal to 959px.
+
@media (max-width: 419px) 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 419px.
+
padding: 1.5rem; sets the padding for all of the sides of the div tag to be 1.5rem when the width of the display area is less than or equal to 419px.
+
+
If you have any questions about the CSS discussed above, then check out these resources:
The theme-default-content class is used on the global Content component within the Page and Home components provided by the default themeContent not supported. If you look at the HTML on the homepage, you'll see the theme-default-content class being used on a div tag within the main tag with a class of home. We'll be discussing the global Content component, the Page component, and the Home component in more detail in future tutorials.
+
+
IndexPost Heading
+
We're now going to add a heading to the pagination pages. This heading will be displayed on each pagination page.
+
Displaying the Heading
+
We're going to display the heading as an h1 tag which we'll be adding as the first child tag of the outermost div tag.
In the next tutorial we'll be continuing the development of the IndexPost layout component by using the $pagination variable to add images to each post in the list of post pages.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-10-17T14:12:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 18 - IndexPost Images
+ https://codemonkeys.tech/vuepress-tutorial-18/
+
+ 2024-07-17T04:15:09.626Z
+ Hey fellow Code Monkeys!!! 🐵 Ready to learn how to add images to the IndexPost layout component, then check out VuePress Tutorial 18 - IndexPost Images! 🍌🐒
+
VuePress Tutorial 18 - IndexPost Images
+
What We're Doing
+
In this tutorial we're going to continue the development of the IndexPost layout component by using the globally scoped $pagination variable to access pagination data related to images. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag like we did in the previous tutorial.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Before we can access the pagination 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.
+
Each post image has a width of 155px and a height of 185px. Using the same width and height for the post images makes the list of post pages look consistent.
The images were created using CanvaContent not supported. 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 GIMPContent not supported.
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. CanvaContent not supported and GIMPContent not supported, and some of the other image tools mentioned above offer the ability to compress your images.
+
Here are some other useful online tools for image compression:
Let's start by creating an examples directory inside of the images directory. The examples directory will be used to store the post images for each example post.
+
The directory structure for your site should now look something like this:
After adding the examples 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 examples directory. Then we'll add the post images to the directories of each example post.
+
We're going to start with the first example post by adding an example-post-1 directory inside of the examples directory. Then we'll add the image for the first example post which is named example-post-1.png inside of the example-post-1 directory.
+
The directory structure for your site should now look something like this:
For the second example post we'll be adding an example-post-2 directory inside of the examples directory. Then we'll add the image for the second example post which is named example-post-2.png inside of the example-post-2 directory.
+
The directory structure for your site should now look something like this:
For the third example post we'll be adding an example-post-3 directory inside of the examples directory. Then we'll add the image for the third example post which is named example-post-3.png inside of the example-post-3 directory.
+
The directory structure for your site should now look something like this:
After adding the post images to the blog, we now need to add a way to access each image in the IndexPost layout component which we'll accomplish by adding a custom variable img to the YAMLContent not supported frontmatter blocks of each post file. The value of the img custom variable will be the path to the image in the project.
+
We're also going to add another custom variable of alt to the YAMLContent not supported frontmatter blocks of each post file. The value of the alt custom variable will be a description of the image.
Here's what the post files look like after adding the img and alt custom variables:
+
+
+
---
+preview: Example Post 1 preview
+img: examples/example-post-1/example-post-1.png
+alt: Example Post 1 Post Picture
+---
+
+# Example Post 1
+
1 2 3 4 5 6 7
+
+
+
+
---
+preview: Example Post 2 preview
+img: examples/example-post-2/example-post-2.png
+alt: Example Post 2 Post Picture
+---
+
+# Example Post 2
+
1 2 3 4 5 6 7
+
+
+
+
---
+preview: Example Post 3 preview
+img: examples/example-post-3/example-post-3.png
+alt: Example Post 3 Post Picture
+---
+
+# Example Post 3
+
1 2 3 4 5 6 7
+
+
Adding Img and Alt to $page Variables
+
As mentioned in the previous tutorial when VuePressContent not supported encounters a YAMLContent not supported frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped $page.frontmatter variable.
+
Since the page objects in the $pagination.pages property are the same as the $page variables used by the post pages, we will now have a frontmatter.img property and a frontmatter.alt property that we can access in the IndexPost layout component.
+
Displaying Images
+
Now that we can access the values of the img and alt custom variables in the $pagination.pages property, we're ready to render the images on the pagination pages.
+
We're going to display the images using the img tag which we'll place in a div tag underneath the parent div tag of the p tag.
+
The img tag allows us to embed an image into the page. We'll be using the src and alt attributes provided by the img tag.
+
The src 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.
+
The alt attribute is optional and consists of a text description of the image which is useful for accessibilityContent not supported 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.
Here we're binding the src and alt attributes by placing a : before them which is shorthand for v-bind. This allows us to bind the JavaScript expressions to the HTML attributes.
+
Also, notice /images/ was added to the beginning of the path to the post images which we need to add since they're all located in the images directory. We don't need to include .vuepress/public in the path to the post images though because whenever you reference assets stored in the public directory that gets added automatically.
+
We also added an alternative value for the post image alt attribute in case the alt custom variable isn't present in the frontmatter of a post. This is done by using a logical OR operator, i.e., ||. Here, we're using "post.frontmatter.alt || 'Post Picture'" which means if the alt property evaluates to a falsyContent not supported value, then we'll display the Post Picture text instead.
+
If you have any questions or want to learn more about v-bind or the logical OR operator, then check these resources:
In the next tutorial we'll be continuing the development of the IndexPost layout component by beginning the process of adding the pagination buttons to the pagination pages.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-11-09T22:15:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 19 - Pagination Links
+ https://codemonkeys.tech/vuepress-tutorial-19/
+
+ 2024-07-17T04:15:09.633Z
+ 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! 🍌🐒
+
VuePress Tutorial 19 - Pagination Links
+
What We're Doing
+
Every time we navigate to the entry page or the second page in the list of pagination 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 pagination links to each of the pagination pages.
Before, we use the properties to add the pagination links, we're going to add two more example posts to the blog. This will allow us to view the pagination 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.
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.
+
Here's what the 2022-07-14-example-page-4.md file and the 2022-11-10-example-page-5.md file look like after adding the titles and frontmatter:
+
+
+
---
+preview: Example Post 4 preview
+img: examples/example-post-4/example-post-4.png
+alt: Example Post 4 Post Picture
+---
+
+# Example Post 4
+
+
1 2 3 4 5 6 7
+
+
+
+
---
+preview: Example Post 5 preview
+img: examples/example-post-5/example-post-5.png
+alt: Example Post 5 Post Picture
+---
+
+# Example Post 5
+
+
1 2 3 4 5 6 7
+
+
Adding Images
+
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 examples directory. Then we'll add the post images to the directories for each example post.
For the fourth example post we'll be adding an example-post-4 directory inside of the examples directory. Then we'll add the image for the fourth example post which is named example-post-4.png inside of the example-post-4 directory.
+
The directory structure for your site should now look something like this:
For the fifth example post we'll be adding an example-post-5 directory inside of the examples directory. Then we'll add the image for the fifth example post which is named example-post-5.png inside of the example-post-5 directory.
+
The directory structure for your site should now look something like this:
Having these three pagination pages will allow us to view the pagination links in every scenario that we mentioned in the beginning of the post.
+
Order of Posts
+
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 date property to sort the posts which it looks for on the frontmatter of each post page. Since we haven't added a date 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 date custom variable to the frontmatter blocks of the post pages.
+
+
If you have any questions about adding the example pages to the _posts 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:
We're now ready to use the properties provided by the blog plugin Client APIContent not supported to add the pagination links to the pagination pages.
+
We're going to display the pagination links using two router-link components one for the previous page and one for the next page. We'll be wrapping each router-link component in a div tag.
+
We'll then wrap the div tags inside another div tag which we'll place underneath the div tag that is being used to loop over the pagination pages.
+
The router-link component is provided by Vue RouterContent not supported which gets installed when installing VuePressContent not supported. The router-link component is used for enabling user navigation for the site. The target location for the link is specified by using the to prop, and it renders as an a tag with the specified href by default.
To display the pagination link for the previous page we'll be using the $pagination.hasPrev property to check if the current pagination page has a previous page. We'll use the $pagination.prevLink property to provide the path of the previous pagination page to the router-link component to prop.
+
Similarly, to display the pagination link for the next page we'll be using the $pagination.hasNext property to check if the current pagination page has a next page. We'll use the $pagination.nextLink property to provide the path of the next pagination page to the router-link component to prop.
+
We discussed the properties above in detail in the VuePress Tutorial 16 - Pagination post, so if you need a refresher or if you have any questions read through the relevant sections in that post.
Here we're using the v-if directive to conditionally render the pagination links by using the values of the $pagination.hasPrev and $pagination.hasNext properties. The block of code using the v-if directive will only be rendered if the expression provided to it returns a truthyContent not supported value.
+
We're also binding the to prop by placing a : before it which is shorthand for v-bind. Using v-bind allows us to bind JavaScript expressions to the HTML attributes.
+
If you have any questions or want to learn more about conditional rendering or v-bind, then check these resources:
You should be able to click on the Prev pagination link, and it should take you to the previous page. You should also be able to click on the Next pagination link, and it should take you to the next page.
+
The HTML for the body tag for the second page should now look something like this:
+
+
+
<body>
+ <divid="app">
+ <divid="global-layout">
+ <divclass="theme-default-content">
+ <h1>The Scribblings of a Monkey!!!</h1>
+ <div>
+ <div>
+ <div>
+ <h2> Example Post 3 </h2>
+ </div>
+ <p> Example Post 3 preview </p>
+ </div>
+ <div>
+ <imgsrc="/images/examples/example-post-3/example-post-3.png"
+ alt="Exmple Post 3 Post Picture">
+ </div>
+ </div>
+ <div>
+ <div>
+ <div>
+ <h2> Example Post 4 </h2>
+ </div>
+ <p> Example Post 4 preview </p>
+ </div>
+ <div>
+ <imgsrc="/images/examples/example-post-4/example-post-4.png"
+ alt="Example Post 4 Post Picture">
+ </div>
+ </div>
+ <div>
+ <div>
+ <ahref="/posts/"class="router-link-active"> Prev </a>
+ </div>
+ <div>
+ <ahref="/posts/page/3/"class> Next </a>
+ </div>
+ </div>
+ </div>
+ <footerdata-v-60ae214aclass="footer">...</footer>
+ </div>
+ ...
+ </div>
+ ...
+</body>
+
You may have noticed the styling of the Prev and Next pagination 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 pagination links, respectively.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-11-19T20:47:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 2 - Why Use VuePress?
+ https://codemonkeys.tech/vuepress-tutorial-2/
+
+ 2024-07-17T04:15:09.636Z
+ Hey fellow Code Monkeys!!! 🐵 Wondering if you should use VuePress, then check out VuePress Tutorial 2 - Why Use VuePress? 🍌🐒
+
As well has being useful for writing technical documentation, it also has a blog pluginContent not supported which we'll be looking at in more detail in future tutorials.
After that we'll provide a list of some of the features of VuePressContent not supported, and then we'll give some quick comparisons with similar technologies.
+
Different Types of Websites
+
Before we define what an SSG 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 SSG.
+
We'll mainly be looking at each type of website in terms of search engine optimization (SEO), speed, and ease of updating.
+
Static Website
+
+
Uses static HTML pages with possible CSS and JavaScript
+
Pages are uploaded to a content delivery network (CDN) or a web host
+
+
Here's a simple diagram illustrating the process:
+
+ Content not supported
+
+
Pros
+
+
SEO-friendly since a search engine can crawl the site and fully rendered HTML pages with content are provided
+
+
Cons
+
+
Need to do a request to the server for each page a user visits which slows down the site
+
Difficult to update since you need to rewrite the same code on multiple pages, e.g., the footer
+
Has limited functionality and generally doesn't contain dynamic data
Returns an HTML page that is built on the fly for each request using templates and data
+
Each page returned is a static HTML page
+
+
Simple diagram illustrating the process:
+
+ Content not supported
+
+
Pros
+
+
SEO-friendly since each request returns a fully rendered HTML page, so a search engine can easily crawl and index the site
+
Easy to update since the server is using a templating system
+
+
Cons
+
+
Since the server has to send back fully rendered HTML pages for each request, it can slow down the page rendering
+
+
Static Site Generator (SSG)
+
+
An SSG creates pre-rendered static HTML pages using a combination of templates, components, and data
+
These static HTML pages are generated at build-time, i.e., before deployment
+
The static pages are then deployed to the web
+
+
Simple diagram illustrating the process:
+
+ Content not supported
+
+
Pros
+
+
SEO-friendly since it returns fully rendered HTML which can then be crawled and indexed
+
Navigating to new pages is fast since after the initial request the site behaves like a normal SPA
+
Easy to update since the site is component driven
+
+
Cons
+
+
Have to rebuild the static pages evey time a change is made to the site, and the build time will increase as more pages are added
+
+
Use Cases for SSGs
+
Since SSGs create static HTML pages at build-time then behave like an SPA, they are suited for websites that don't have a lot of frequent content changes.
+
+
Here are some examples:
+
+
Personal Website/Portfolio
+
Documentation
+
Blog
+
+
+
+
How it Works in VuePress
+
Like other SSGs, the static HTML pages are rendered at build-time. Then the static HTML pages are deployed to the web.
Within a theme you are able to create directories that handle global components, components, layouts, styles, and templates. You can also create files for theme configurations and app level enhancements. 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 npmContent not supported package which allows other people to easily install it.
+
The Code Monkeys Blog is currently a child theme inherited from the default theme. Eventually, I would like to look into publishing it as an npmContent not supported package.
+
We'll go over the directory structure, what each directory in a theme is used for, theme configuration, app level enhancement, and theme inheritanceContent not supported in future tutorials.
Designed for building applications whereas VuePressContent not supported is focused on content-centric static sites with a focus on technical documentation
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2021-11-24T20:50:30.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 20 - Pagination Links Styling
+ https://codemonkeys.tech/vuepress-tutorial-20/
+
+ 2024-07-17T04:15:09.639Z
+ Hey fellow Code Monkeys!!! 🐵 Ready to learn how to style the pagination links, then check out VuePress Tutorial 20 - Pagination Links Styling! 🍌🐒
+
VuePress Tutorial 20 - Pagination Links Styling
+
What We're Doing
+
We're going to begin the process of styling the Prev and Next pagination links that we added to each of the pagination pages in the previous tutorial. To implement the styling we'll be adding the following CSS classes pagination, left-arrow, and right-arrow to the IndexPost layout component.
+
The pagination class will be used to properly space out the Prev and Next pagination links. The left-arrow and right-arrow classes will be used to add some styling to the left arrow and right arrow icons which we'll be adding using the global vp-icon component which is provided by vuepress-plugin-svg-iconsContent not supported.
+
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.
scoped is used to only apply the styles to the current component, i.e., the IndexPost layout component. We're scoping these styles since they currently only apply to the IndexPost layout component.
+
display: flex defines a flex container for all of the direct children of the div tag with a class of pagination.
+
justify-content: space-between 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 div tag with a class of pagination, i.e., the div tags that are wrapping the router-link components.
+
padding-top: 2rem adds a padding of 2rem to the top of the div tag with a class of pagination.
+
+
The pagination links should now be properly spaced out, and you can view the styling updates by navigating to the pagination pages:
We're now ready to add the left and right arrow icons to the pagination links.
+
Downloading the Icons
+
To add the left and right arrow icons to the site we need to first download the icons. To find icons for your site vuepress-plugin-svg-iconsContent not supported recommends using iconfontContent not supported. 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 #e6e6e6 and a size of 200 which is the default size.
To easily download the left and right arrow icons you can also install the browser extension SVG ExportContent not supported. 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.
+
+
Updating the Icons Directory
+
After downloading the left and right arrow icons, we'll need to add them to the icons directory which should now look something like this:
After adding the left and right arrow icons to the icons directory, the plugin will automatically load the icons and provides the global vp-icon component. To use the vp-icon component we need to pass a name attribute to it where the value is the name of the SVG file we want to use.
+
Here, the value for the name attribute will be leftArrow for the Prev pagination link and rightArrow for the Next pagination link.
+
We're going to be adding the vp-icon components inside of the corresponding router-link components.
Notice how the left arrow icon is being displayed to the left of the Prev pagination text and how the right arrow icon is being displayed to the right of the Next pagination text. This ensures the arrows and the text look correct when being displayed.
+
Styling the Icons
+
We're now going to add some styling to the left and right arrow icons. The IndexPost.vue file should now look like this:
If you downloaded the left and right arrow icons from the repository or by using the SVG ExportContent not supported browser extension, then the icons should already be optimized and you shouldn't have to run the CLI command.
+
+
Here's the CLI command you can run to optimize the icons vuepress svgo [docsDir] where [docsDir] is the docs directory for your project which in our case is docs.
After running the script, the icons should be optimized.
+
If you have questions about how the plugin implements the CLI command or about the plugin in general, then checkout the guideContent not supported.
+
You can also check out SVGOContent not supported which is the optimization tool being used by the plugin to optimize the icons.
+
Next Steps
+
In the next tutorial we're going to continue styling the IndexPost layout component by making each post in the list of posts look like a card.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-11-23T19:23:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 3 - Set Up and Installation
+ https://codemonkeys.tech/vuepress-tutorial-3/
+
+ 2024-07-17T04:15:09.645Z
+ Hey fellow Code Monkeys!!! 🐵 Ready to set up and install VuePress, then check out VuePress Tutorial 3 - Set Up and Installation! 🍌🐒
+
VuePress Tutorial 3 - Set Up and Installation
+
Setting Up and Using GitHub
+
First we'll be going over how to create a repository on GitHubContent not supported. 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.
+
Each tutorial in this series involving code will also have a branch in the code-monkeys-blog-tutorialsContent not supported 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.
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 GitHubContent not supported.
+
If you want to create your own repository for your own project, then you need to:
+
+
Go to your profile page, click on the Repositories tab, then click the New button or on any page in the upper right corner, click the + drop-down menu, then select New repository
+
Type a short and descriptive name in the Repository name field
+
Type a description in the Description field (optional)
+
Choose if you want the repository to be Public or Private
+
Add a README.md file which you can use to describe your project in more detail and to document how to install and use your project
+
Add a .gitignore file which is used to ignore specified files and directories when making a commit, I recommend selecting the Node template from the drop-down menu
+
Add your preferred license which is used to tell others how they can use your code
+
You can also choose a different default branch name, e.g., master instead of main by clicking on the settings link
After successfully cloning the repository, you can run the following command to list both the remote-tracking and local branches:
+
+
+
git branch -a
+
+
1
+
+
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:
+
+
+
git fetch
+
+
1
+
+
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:
+
+
+
git switch <branch-name>
+
+
1
+
+
If you get an error when running the above command and the provided branch name exists, then check your version of git by running git --version. You need to be using at least Git 2.23Content not supported to use the switch command.
+
If you have an older version of git or if you prefer to not use the switch command, you can alternatively run the following command to work on the code for a remote-tracking branch:
+
+
+
git checkout [branch-name]
+
+
1
+
+
The recommended way to switch branches is with the switch command since the checkout command does more than just switching branches which can lead to confusion.
+
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:
+
+
+
git pull
+
+
1
+
+
If you edit the code for a branch and attempt to pull, you may run into merge conflicts. You can check out About Merge ConflictsContent not supported to learn more about what they are and how to resolve them.
You're going to be closely following along with these turtorials in which case I recommend using v1.22.17 since it's the same version being used by the Code Monkeys Blog. This will allow you to avoid any potential issues with packages and with the GitHub ActionsContent not supported workflow which is used when deploying the site.
+
+
Using the Locally Set Version of Yarn in the Repositories
+
The code-monkeys-blog-tutorialsContent not supported and the code-monkeys-blogContent not supported repositories both have a local version of yarn set to v1.22.17 in a .yarn/releases directory. This means if you use the code from the repositories, then you'll be able to use the locally set version of yarn instead of having to install the specific local version of yarn yourself.
+
+
The next sections will show you how to check your current versions of node and yarn.
+
If you don't have node or yarn installed or you want to change the versions, then check out the provided resources explaining how to install specific versions.
+
Checking Node Version
+
To check if you have node installed run the following command:
+
+
+
node -v
+
+
1
+
+
If you see an output of v10.xx.xx or greater, then you can continue on with the VuePressContent not supported installation.
+
Code Monkeys Blog Node Version
+
The Code Monkeys Blog is currently using Node.js v16.11.1Content not supported. If you're going to be closely following along with these turtorials, then I recommend using the same version to avoid any potential issues.
+
+
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 node.
+
To install a system version of node you can go to Node.jsContent not supported and download a compatible version.
+
If you previously installed a system version of node from Node.jsContent not supported, then you can go back to the site and download a newer version to upgrade your current version.
+
If you're a developer that needs to use multiple versions of node when working on different projects, then I recommend using a node version manager. Before installing a node version manager like nvmContent not supported or fnmContent not supported, I recommend uninstalling your system version of node, npm, and any globally installed npm packages to avoid potential issues.
After installing a compatible version of node, you will now have npm the default package manager for node. If you prefer you can use npm to install VuePressContent not supported. However, if you're going to be closely following along with these tutorials, then I recommend using yarn.
+
Checking Yarn Version
+
To check if you have yarn installed run the following command:
+
+
+
yarn -v
+
+
1
+
+
If you don't see your preferred version of yarn, then it's recommended to install or upgrade a global version of Yarn 1Content not supported which can then be used to set a local version of yarn for the project.
+
To learn more about how to install a global version of Yarn 1Content not supported, how to use the global version to set a local version of yarn for a project, and other commonly used commands check out the Installing Yarn 1 post.
+
If you created your own repository and are using a locally set version of yarn, then be sure to update your .gitignore file and add a .gitattributes file as described in the Installing Yarn 1 post.
+
Recommended Version and Repositories Reminder
+
Remember the recommended version of yarn to use with your project if you're closely following along with these tutorials is v1.22.17. Also, if you use the code from the repositories, then there will be a provided local version of yarn which you can use instead of installing the specific local version yourself.
If the version of yarn is v1.22.17, then you can install all of the packages being used in the project by running the following command in the root project directory:
+
+
+
yarn
+
+
1
+
+
Make sure you're not using the master branch when checking the version since it doesn't have the .yarn directory and that you have a global version of yarn installed.
+
If you're using your own repository and want to install VuePressContent not supported yourself, then use one of the installation methods described below.
Using the generator will help scaffold a basic site structure for you by creating common directories and files found in VuePressContent not supported sites.
+
+
To use the generator run the following command in your preferred directory using your preferred package manager:
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 quick-start-project:
+
+
+
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 in38.23s.
+
The scaffolded basic site is created in a docs directory in your current directory which in the example above was quick-start-project. All of the created directories and files are listed above.
+
If you're using npm you'll see a .npmignore file in the docs directory instead of a .gitignore file.
+
Using an Optional Directory Name
+
If you passed an optional directory name, then the scaffolded basic site is created in the given directory in a docs directory.
+
+
The answers given to the questions can be found in the docs directory in the package.json file which contains your site's metadata.
+
Here's the contents of the package.json file from the example above:
We'll be covering the contents of the package.json file in the next tutorial. If you're interested in learning more now, then check out the package.json guideContent not supported.
+
+
To see your newly created site, navigate to the docs directory:
+
+
+
+
cd docs
+
+
1
+
+
+
Install your site's packages using your preferred package manager:
+
+
+
+
yarn
+
+
1
+
+
npminstall
+
+
1
+
+
Installing the Same VuePress Version
+
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 yarn upgrade vuepress@1.8.2.
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.
+
As mentioned above, the following tutorials will be based off of the manual installation method.
+
Using an Existing Project
+
If you already have an existing project and you would like to keep the documentation inside of it, then start from the third command.
+
+
+
Navigate to your preferred directory which should be where you cloned your site's repository:
+
+
+
+
cd<preferred-directory>
+
+
1
+
+
+
Initialize your project with your preferred package manager:
+
+
+
+
yarn init
+
+
1
+
+
npm init
+
+
1
+
+
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 project-directory:
+
+
+
question name (project-directory):
+question version (1.0.0):
+question description: Learning VuePress
+question entry point (index.js):
+question repository url: https://github.com/github-username/project-directory.git
+question author: Your Name
+question license (MIT):
+question private:
+success Saved package.json
+Done in40.63s.
+
+
1 2 3 4 5 6 7 8 9 10
+
+
After answering all of the questions, a package.json file containing the answers is created. The package.json file is used to describe metadata about your site.
+
Here's the contents of the package.json file from the example above:
We'll be covering the contents of the package.json file in the next tutorial. If you're interested in learning more now, then check out the package.json guideContent not supported.
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 yarn upgrade vuepress@1.8.2.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-01-16T05:40:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 6 - Homepage Layout
+ https://codemonkeys.tech/vuepress-tutorial-6/
+
+ 2024-07-17T04:15:09.651Z
+ Hey fellow Code Monkeys!!! 🐵 Want to learn about the default theme homepage layout for VuePress, then check out VuePress Tutorial 6 - Homepage Layout! 🍌🐒
+
VuePress Tutorial 6 - Homepage Layout
+
What is a VuePress Theme?
+
In this tutorial we'll be discussing how to configure the homepage layout by using the options exposed by the default themeContent not supported which comes with the installation of VuePressContent not supported and is designed for technical documentation. Along with the homepage the default themeContent not supported also allows customization for the navbar, sidebar, search box, etc. We'll discuss those customizations in more detail in future tutorials.
+
Before moving on to the homepage layout, we're going to first describe what a theme is. If you remember from the VuePress Tutorial 2 - Why Use VuePress? post, a VuePressContent not supported theme allows you to control how your project is structured. Within a theme you are able to create directories that handle global components, components, layouts, styles, and templates. You can also create files for theme configuration and app level enhancements. So, a theme handles all of the layout and interactivity details for your site.
+
Now that we have a good understanding of what a theme is, let's move on to configuring the homepage layout.
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported to see the changes to your site. If the changes aren't appearing after you save them, then try restarting your local development server.
+
Using the Homepage Layout
+
To use the homepage layout open the README.md file in the docs directory of your project then you need to add home: true to a YAMLContent not supported frontmatter block at the top of the page.
+
We're also going to remove the # Hello VuePress line from the file since we're going to start customizing the homepage.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+---
+
+
1 2 3
+
+
Before discussing the changes to the site, let's first describe what YAMLContent not supported and frontmatter are.
+
YAML Frontmatter Blocks
+
YAMLContent not supported is a recursive acroynym for "YAML Ain't Markup Language", 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.
When you add a YAMLContent not supported frontmatter block to a page you need to declare it at the top of a Markdown file, and the content must adhere to proper YAMLContent not supported formatting between a set of triple-dashed lines, i.e., --- like the example above.
We'll be using the YAMLContent not supported syntax throughout the tutorials, but if you're interested here's how to set the homepage layout using the other supported syntaxes.
Now that we have a better understanding of YAMLContent not supported frontmatter blocks, let's discuss the changes to the site after specifying the homepage layout.
+
Homepage Layout Changes
+
Before specifying the homepage layout, the HTML for the homepage consists of the following:
+
+
+
<htmllang="en-US">
+ <head>
+ <title>Hello VuePress | Code Monkeys</title>
+ ...
+ <metaname="description"content="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! 🐵">
+ <metaname="author"content="J the Code Monkey">
+ ...
+ </head>
+ <body>
+ <divid="app">
+ <divclass="theme-container no-sidebar">
+ <headerclass="navbar">...</header>
+ <divclass="sidebar-mask"></div>
+ <asideclass="sidebar">...</aside>
+ <mainclass="page">
+ <divclass="theme-default-content content__default">
+ <h1id="hello-vuepress">
+ <ahref="#hello-vuepress"class="header-anchor">#</a>
+ " Hello VuePress"
+ </h1>
+ </div>
+ <footerclass="page-edit">
+ <!---->
+ <!---->
+ </footer>
+ <!---->
+ </main>
+ </div>
+ <divclass="global-ui"></div>
+ </div>
+ ...
+ </body>
+</html>
+
Here are the changes in the HTML after specifying the homepage layout:
+
+
Line 3: The initial title tag that was set to Hello VuePress | Code Monkeys is now set to Code Monkeys.
+
Line 15: The initial main tag had a class of "page", and it now has a class of "home" and an attribute of aria-labelledby="main-title".
+
Line 16: The initial child elements of the div tag are removed since the # Hello VuePress line was removed from the README.md file, and the div tag is moved to line 25 with an added class of "custom". Line 16 now consists of a header tag with a class of "hero", and the child tags of <h1 id="main-title">Code Monkeys</h1> and <p class="description">" Learn to Code like a Monkey... "</p>.
+
Line 22: The initial footer tag is removed from the page.
+
+
Adding an Image
+
Before adding a homepage image, we're going to first create a public directory inside of the .vuepress directory.
+
The directory structure for your site should now look something like this:
The public directory is a static resource directory which is useful in the following cases:
+
+
You need to provide static assests that aren't directly referenced in any of your Markdown or component files, e.g., favicons and PWA icons which we'll discuss in more detail in future tutorials.
+
You need to serve shared static assets that are referenced outside of your site, e.g., logo images.
+
You want to reference images using absolute URLs in your Markdown and component files.
+
+
In a future tutorial we'll discuss what absolute URLs are in more detail as well as relative URLs, the base URL, and how to use aliases. If you're interested in learning more now, then check out the Assest HandlingContent not supported documentation.
+
The image we're going to be adding to the homepage is the Code Monkeys full logo. We're going to create an images directory in the public directory. Then we're going to create a code-monkeys-logos directory inside of the images 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-monkeys-logos directory, we're going to add the full Code Monkeys logo which is named code-monkeys-full-logo.png.
+
After adding those directories and the image, the directory structure for your site should now look something like this:
The logo was created using CanvaContent not supported. 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 GIMPContent not supported.
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. CanvaContent not supported and GIMPContent not supported, and some of the other image tools mentioned above offer the ability to compress your images.
+
Here are some other useful online tools for image compression:
After adding the logo to the site, we can reference the logo in our homepage by adding heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png to the frontmatter.
+
Notice you don't need to include .vuepress/public in the path to the logo because whenever you reference assets stored in the public directory it's added automatically.
Since we already added a site title property in the config.js file, we already have a title on the homepage which has the same value as the site title property.
+
If you prefer to have the site title property and the title on the homepage to be different, then you can add heroText: Homepage Title to the frontmatter.
+
The README.md file would look like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+heroText: Homepage Title
+---
+
+
1 2 3 4 5
+
+
For the Code Monkeys Blog we'll be using the value of the site title property for the homepage title, so the README.md file will look the same as before:
Since we already added a site description property in the config.js file, we already have a tagline on the homepage which has the same value as the site description property.
+
If you prefer to have the site description property and the tagline on the homepage to be different, then you can add tagline: Your tagline to the frontmatter.
+
We're going to update the tagline on the homepage from the value of the site description to be tagline: Let's get down to Monkey Business.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+---
+
+
1 2 3 4 5
+
+
Here's the HTML with the homepage tagline highlighted:
+
+
+
<mainaria-labelledby="main-title"class="home">
+ <headerclass="hero">
+ <imgsrc="/images/code-monkeys-logos/code-monkeys-full-logo.png"alt="hero">
+ <h1id="main-title"> Code Monkeys </h1>
+ <pclass="description"> Let's get down to Monkey Business </p>
+ <!---->
+ </header>
+ <!---->
+ <divclass="theme-default-content custom content__default"></div>
+ <!---->
+</main>
+
1 2 3 4 5 6 7 8 9 10 11
+
+
Adding an Action Button
+
An action button provides a link to a preferred page on your site, and it's placed directly below the tagline.
+
To add an action button you need to add actionText: Text on Action Button and actionLink: /preferred-page/ to the frontmatter.
+
We're going to add the actionText: Learn to Code like a Monkey → and the actionLink: /topics/ to the homepage of the site.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+actionText: Learn to Code like a Monkey →
+actionLink: /topics/
+---
+
+
1 2 3 4 5 6 7
+
+
Here's the HTML with the action button highlighted:
+
+
+
<mainaria-labelledby="main-title"class="home">
+ <headerclass="hero">
+ <imgsrc="/images/code-monkeys-logos/code-monkeys-full-logo.png"alt="hero">
+ <h1id="main-title"> Code Monkeys </h1>
+ <pclass="description"> Let's get down to Monkey Business </p>
+ <pclass="action">
+ <ahref="/topics/"class="nav-link action-button"> Learn to Code like a Monkey → </a>
+ </p>
+ </header>
+ <!---->
+ <divclass="theme-default-content custom content__default"></div>
+ <!---->
+</main>
+
1 2 3 4 5 6 7 8 9 10 11 12 13
+
+
404 When Clicking the Action Button
+
If you click the action button, it will show the 404 layout because we haven't set up the route to /topics/. In a future tutorial we'll create the Topics page which will fix this issue.
+
+
Adding Features
+
Features are text that get displayed under the action button that are used to provide a summary of what your site is about.
+
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.
+
Here's the format for adding features with titles and details to the frontmatter of your page:
We're going to be adding only the feature titles to the homepage of the site.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+actionText: Learn to Code like a Monkey →
+actionLink: /topics/
+features:
+ -title: Learn
+ -title: Code
+ -title: Crush
+---
+
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.
+
If you do decide to add a footer using the frontmatter in the homepage, then the HTML will look like this:
Here's the contents of the README.md file for the homepage after adding all of the desired frontmatter:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+actionText: Learn to Code like a Monkey →
+actionLink: /topics/
+features:
+ -title: Learn
+ -title: Code
+ -title: Crush
+---
+
+
1 2 3 4 5 6 7 8 9 10 11
+
+
The contents of your README.md file may be different depending on what metadata you decide to use in the frontmatter of your homepage.
+
Homepage Layout Notes
+
Here are some general notes about the homepage layout:
+
+
You can disable any frontmatter by setting any of the options to null.
+
Any content after the frontmatter block gets parsed as normal Markdown and will be rendered after the features section.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-02-03T05:06:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 4 - Directory Structure
+ https://codemonkeys.tech/vuepress-tutorial-4/
+
+ 2024-07-17T04:15:09.654Z
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to structure your VuePress site, then check out VuePress Tutorial 4 - Directory Structure! 🍌🐒
+
VuePress Tutorial 4 - Directory Structure
+
Current Directory Structure
+
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 VuePressContent not supported site.
+
The current directory structure of the project is based off of creating a repository for your project on GitHubContent not supported, cloning the repository, setting a local version of yarn for your project, and doing a manual installation of VuePressContent not supported. This means if you're not using a local version of yarn and/or did a quick start installation your current directory structure will be a little different.
+
Here's the current directory structure of the project:
.yarn/releases: Stores a local version of yarn for the project which ensures everyone working on the project is using the same version. If you didn't set a local version of yarn for your project, you won't have this directory.
docs/README.md: The first document for the site which will be used as the homepage.
+
node_modules: Contains all of the code for the installed packages.
+
.gitattributes: Used to prevent git from showing large diffs when you add or update local versions of yarn. If you didn't set a local version of yarn for your project, you won't have this file.
+
.gitignore: Ignores specified files and directories when making a commit to your repository.
+
.yarnrc: Instructs your global version of yarn to use the specified local version in the project. If you didn't set a local version of yarn for your project, you won't have this file.
+
LICENSE: Tells others how they can use your code.
+
package.json: Describes metadata about your site.
+
README.md: Used to describe your project in more detail and to document how to install and use your project.
+
yarn.lock: Keeps track of the exact versions of packages installed in the project. If you're using npm you'll have a package-lock.json file instead.
+
+
Reminder to Update the .gitattributes and .gitignore Files
+
If you created your own repository and are using a locally set version of yarn, then be sure to update your .gitignore file and add a .gitattributes file as described in the Installing Yarn 1 post.
+
+
Contents of the package.json File
+
Before moving on to the recommended directory structure, we're going to first go over the contents of the package.json file and add some simple updates.
+
The properties of your package.json 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 package.json file directly.
{
+ "name":"code-monkeys-blog-tutorials",
+ "version":"1.0.0",
+ "description":"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!",
+ "main":"index.js",
+ "repository":"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git",
+ "author":"J the Code Monkey",
+ "license":"GPL-3.0-or-later",
+ "scripts":{
+ "docs:dev":"vuepress dev docs",
+ "docs:build":"vuepress build docs"
+ },
+ "devDependencies":{
+ "vuepress":"1.8.2"
+ }
+}
+
+
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
+
+
The package.json file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow semantic versioning (semver)Content not supported.
+
Let's describe each property in a little more detail:
+
+
name is the name given to your project
+
version indicates the current version of your project
+
description is used to describe and provide more information about your project
+
main is a JavaScript file that starts the execution of your project
+
repository describes the location of the project repository containing the code
+
+
You can explicitly set the URL and a version control type in the package.json file by adding, e.g., "repository": { "type": "git", "url": "https://github.com/github-username/your-project" }
+
+
+
author describes the creator or owner of the project
+
+
You can explicitly set the author name, email, and website in the package.json file by adding, e.g., "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }
+
+
+
license indicates the type of license being used by the project
+
scripts 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
+
devDependencies are dependencies you need during development only, i.e., not during production
+
+
Installing the Same VuePress Version
+
If you see a different version of VuePressContent not supported and want to install the same version being used in the tutorials and blog, then you can run yarn upgrade vuepress@1.8.2.
+
+
Now, let's make some simple updates to the package.json file.
+
To start we're going to be adding a version control type to the repository property by updating it to be "repository": { "type": "git", "url": "https://github.com/github-username/your-project" }.
+
Next we're going to be adding an optional email and url to the author property by updating it to be "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }.
+
If you prefer you can also shorten the author property to be one string by defining it like this "author": "Your Name <youremail@example.com> (https://your-website.com)".
+
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.
docs/README.md: The first document for the site which will be used as the homepage (same file described in the current directory structure section).
+
docs/example-page/README.md: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., /example-page/.
+
package.json: Describes metadata about your site (same file described in the current directory structure section).
+
+
Using the Recommended Directory Structure for Themes
+
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 VuePressContent not supported site.
Here's the recommended directory structure if you plan on writing your own theme for your site. Since the Code Monkeys Blog is a child theme inherited from the default themeContent not supported, we'll be using the recommended directory structure for themes when developing the blog.
+
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 Theme InheritanceContent not supported documentation.
+
If you're not using a theme when developing your site, you have the option of using the recommended directory structure for a standard VuePressContent not supported site. There should only be minor differences when following along with these tutorials.
+
Only the Layout.vue file is mandatory when writing a theme, but we'll be using the other recommended directories as we continue to develop the blog.
When creating these directories and files be sure to follow the capitalization to prevent any potential issues.
+
+
+
docs/.vuepress: Stores the global configuration, theme, static resources, etc.
+
docs/.vuepress/public: Static resource directory.
+
docs/.vuepress/theme: Stores the theme of the site.
+
theme/components: Stores the Vue components.
+
theme/global-components: The Vue components in this directory automatically get registered as global components.
+
theme/layouts: Stores the layout components used by the theme.
+
theme/layouts/Layout.vue: Mandatory layout component used by the theme.
+
theme/styles: Stores style related files.
+
theme/styles/index.styl: Used to add global styles that can override the default styles.
+
theme/styles/palette.styl: Used to define global styling variables and override the default styling variables.
+
theme/templates: Stores HTML template files.
+
theme/templates/dev.html: HTML template file for development environment.
+
theme/templates/ssr.html: HTML template file used in the build time.
+
theme/enhanceApp.js: Theme level enhancement.
+
theme/index.js: Entry file for theme configuration.
+
docs/.vuepress/config.js: Entry file for configuration, can also be yml or toml.
+
docs/README.md: The first document for the site which will be used as the homepage (same file described in the current directory structure section).
+
docs/example-page/README.md: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., /example-page/.
+
package.json: Describes metadata about your site (same file described in the current directory structure section).
+
+
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 ThemeContent not supported documentation.
+
Default Page Routing
+
In the directory structure above we used the docs directory as the targetDir. If you want to learn more about how the targetDir is used, then take a look at the Command-line InterfaceContent not supported documentation.
+
To see an example of the docs directory being used as the targetDir we can take a look at the scripts object we defined in the package.json file which is in the root directory of the project. Notice the targetDir gets set as the docs directory for the docs:dev and docs:build scripts:
All the relative paths are relative to the docs directory. Here are the relative paths and the default page routing paths for the directory structure described above:
+
+
+
+
Relative Path
+
Page Routing
+
+
+
+
+
/README.md
+
/
+
+
+
/example-page/README.md
+
/example-page/
+
+
+
+
From the table we can see the relative path for the homepage is /README.md and the default page routing path for the homepage is /. We can also see the relative path for the example page is /example-page/README.md, and the default page routing path for the example page is /example-page/.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-01-22T16:55:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 7 - Navbar Logo and Links
+ https://codemonkeys.tech/vuepress-tutorial-7/
+
+ 2024-07-17T04:15:09.664Z
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to configure the navbar for VuePress, then check out VuePress Tutorial 7 - Navbar Logo and Links! 🍌🐒
+
VuePress Tutorial 7 - Navbar Logo and Links
+
What is a Navbar?
+
In this tutorial we'll be discussing how to configure the navbar by using the options exposed by the default themeContent not supported. 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.
+
The navbar for a site made with VuePressContent not supported can consist of a logo, a site title, a search box, internal links, languages the site can be translated to, and external links. 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 logo, site title, internal links, and external links. We'll also discuss how to disable the navbar globally as well as locally for specific pages.
+
Take a look at the navbar on this page to see what we'll be designing for the Code Monkeys Blog. To see another example you can check out the VuePressContent not supported site navbar as well.
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
Navbar Logo and Site Title
+
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-monkeys-head-and-shoulders-logo.png to the code-monkeys-logos directory.
+
The site title in the navbar also provides a link to the homepage, and it's being set by the value of the title property in the config.js file which we set up in a previous tutorial.
+
After adding the image, the directory structure for your site should now look something like this:
If the directory structure is confusing you, then be sure to take a look at the Adding an Image 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.
Notice you don't need to include .vuepress/public in the path to the navbar logo because whenever you reference assets stored in the public directory it's added automatically.
+
Also, notice the value of the site title is being set here by using the title property.
+
Here's what the HTML looks like after adding the navbar logo:
You should now see the navbar logo in the upper left of the page.
+
Navbar Links
+
To add links to the navbar other than to the homepage we need to add a nav property to the themeConfig object. The nav property expects an array of navbar link objects. We're going to start by adding internal links.
+
Internal Links
+
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.
+
To add an internal link you need to add { text: 'Link Name', link: '/path-to-page/' } to the nav property where the text defines the name of the link in the navbar and link defines the path to the preferred page.
+
For our site we're going to add the following internal links: Topics, Posts, Resources, and Donate.
+
Here's what the config.js file looks like after adding the internal links:
Your navbar should now have Topics, Posts, Resources, and Donate links to the right of the search box.
+
404 When Clicking the Links
+
If you click the links they will show the 404 layout because we haven't set up the pages for Topics, Posts, Resources, and Donate yet. In future tutorials we'll create these pages which will fix these issues.
+
+
External Links
+
An external link is a link that points to a page outside of the same site or domain.
+
Adding an external link is the same as adding an internal link except the value provided to the link property is a URL to an external site.
+
External links automatically get target="_blank" rel="noopener noreferrer" attributes added to the <a> tag. The target attribute specifies where to open the linked document, and the rel attribute specifies the relationship between the current document and the linked document.
+
These attributes are used to prevent a vulnerability known as reverse tabnabbingContent not supported 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.
+
You can also customize the values for the target and rel attributes by specifying them as properties in the external link. You can disable the rel attribute for a link by setting it like this rel: false.
Currently, the Code Monkeys Blog doesn't include an external link in the navbar, but in the future one may be added for the code-monkeys-blogContent not supported repository using the default values for external links mentioned above.
+
+
Dropdown Menus
+
The links in the navbar can also be dropdown menus if an items property which expects an array of navbar link objects is used instead of just a link property.
+
For example, the Posts link we made earlier can be turned into a dropdown menu containing links to pages for All Posts and for posts By Topic.
+
Here's what the config.js file looks like after turning the Posts link into a dropdown menu:
Your navbar should now have a Posts dropdown menu containing All Posts and By Topic links.
+
Dropdown Menu Subgroups
+
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 items property which expects an array of navbar link objects instead of using just a link property for a dropdown menu entry.
+
For example, the By Topic 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 LeetCode, Node.js, and VuePress, so we'll add each of these as an entry to the By Topic subgroup in our dropdown menu.
+
Here's what the config.js file looks like after turning the By Topic link in the dropdown menu into a subgroup:
Your navbar should now have a By Topic subgroup in the dropdown menu containing these links LeetCode, Node.js, and VuePress.
+
To add more links to the By Topic subgroup all you need to do is add another element into its items array.
+
404 Reminder When Clicking the Links
+
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.
+
+
Disabling the Navbar
+
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.
+
Globally
+
To disable the navbar globally add the following to your config.js file:
To disable the navbar locally for a specific page you can add the following to the page's frontmatter:
+
+
+
---
+navbar:false
+---
+
+
1 2 3
+
+
Next Steps
+
In the next tutorial we'll begin the development of the Footer component which will stick to the bottom of the page and consist of social media icons and a made by message.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-03-12T17:46:45.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 8 - Custom Footer
+ https://codemonkeys.tech/vuepress-tutorial-8/
+
+ 2024-07-17T04:15:09.677Z
+ 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! 🍌🐒
+
VuePress Tutorial 8 - Custom Footer
+
What is a Footer?
+
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 VuePressContent not supported and the @vuepress/theme-blogContent not supported.
+
A footer is located at the bottom of a page, and it typically contains:
+
+
Authorship Information
+
Copyright Information
+
Contact Information
+
Sitemap (Important Links Regardless of Current Page - Similar to Global Navbar)
+
+
For the Code Monkeys Blog 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.
+
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 VuePressContent not supported site footer as well.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
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.
Since we'll be using social media sites that are not currently supported by the footer.contactContent not supported option, we won't be using this footer. You can contribute social media contact types by making a pull request to the vuepress-theme-blogContent not supported repository though if you're interested.
+
Custom Footer
+
Before designing the custom footer component, we need to have an understanding of the following topics:
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.
+
Writing a Theme
+
In VuePressContent not supported you have the ability to make your site into a theme. This gives you the option to publish your site as an npmContent not supported package which allows other developers to easily install and use your theme.
+
To write your own theme you need to create a theme directory in the .vuepress directory. The docs directory for your site should now look something like this:
From here you can develop your site like any other VueContent not supported 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:
Here's a description for each directory and file in the theme directory:
+
+
components: Local components used in your theme.
+
global-components: Components in this directory automatically get registered as global, so you don't need to explicitly import them in a file when using them.
+
layouts: Layout components used in your theme.
+
+
Layout.vue: A mandatory layout file for every theme.
+
+
+
styles: Stores files related to styling your theme.
+
+
index.styl: Overrides any default styling and allows you to globally style your site.
+
palette.styl: Overrides any default styling variables and allows you to add any global styling variables.
+
+
+
templates: Stores HTML template files.
+
+
dev.html: HTML template file for development environment.
+
ssr.html: HTML template file used in the build time.
+
+
+
enhanceApp.js: Enhances the theme of your site by giving you the ability to install Vue plugins, add router hooks, etc.
+
index.js: Entry file for for theme configuration.
+
+
Reviewing the Recommended Directory Structure for Themes
When creating the custom footer component we'll use the global-components directory, the index.js file, and the layouts directory. The global-components directory will be where we add the custom footer component since we want the footer to be available globally. The index.js file will be used to inherit the default themeContent not supported using theme inheritanceContent not supported. Finally, the layouts directory will be where we add the GlobalLayout.vue file which allows us to add our custom footer component to the global layout of the site.
To use a plugin you need to first install it by using either yarn or npm. We'll be using yarn to install all of the plugins for the blog, but the commands for installing the plugins with npm will also be provided. After installing a plugin, you can configure it by adding it to the config.js file.
If you're following along with the tutorials, then when you switch to the tutorial-8 branch you can run the following command to install the package instead of running the installation command:
+
+
+
yarn
+
+
1
+
+
npminstall
+
+
1
+
+
This will ensure you have the same version used in the blog since the command uses the version specified in the yarn.lock file during the installation.
+
Using the Installation Command
+
To install the plugin in your own project you can run the following command:
+
+
+
yarnadd @goy/vuepress-plugin-svg-icons -D
+
+
1
+
+
npminstall @goy/vuepress-plugin-svg-icons -D
+
+
1
+
+
Installing the Same Plugin Version
+
If you want to ensure you're installing the same version being used in the tutorials and blog, then run yarn upgrade @goy/vuepress-plugin-svg-icons@4.2.3.
+
+
After installing the plugin, the package.json file should look something like this:
To add the social media icons to the site we need to create an icons directory in the docs directory. Here's what the docs directory should look like after adding the icons directory:
The plugin recommends using iconfontContent not supported to find Scalable Vector Graphics (SVGs)Content not supported 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 #e6e6e6 and a size of 200 which is the default size.
To easily download the icons used in the footer you can also install the browser extension SVG ExportContent not supported. 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.
+
+
We'll be using icons for these social media sites as well as to an RSS feed for Code Monkeys in the footer:
After adding the icons to icons directory, the plugin will automically load the icons and will provide a global component named vp-icon. To use the vp-icon component you need to pass a name attribute to it where the value is the name of the SVG file you want to use.
+
If you're interested in learning more about the plugin, then check out the vuepress-plugin-svg-iconsContent not supported documentation which contains more information about configuration options, component props, and command-line interface (CLI) commands.
+
We're now ready to create the custom footer component.
+
Footer Component
+
The custom footer component will be added to the global-components directory. Here's what the theme directory will look like after adding the Footer.vue file:
Here we're creating a *.vue file which is known as a Single-File Component (SFC)Content not supported. This is a special file format that allows you to encapsulate the HTML in a template tag, the JavaScript in a script tag, and the CSS in a style tag for the component.
+
Here's what the Footer.vue file looks like after adding these three main sections:
To start we'll add the HTML to the template tag. The contents of the footer will be wrapped in a footer tag containing two child tags a div tag and a p tag. The div tag will contain seven child a tags one for each of the social media icons. The p tag will contain authorship information for the blog.
+
Each a tag will have the following attributes: href, target, and rel. The href specifies the URL of the page the link goes to, the target specifies where to open the link, and the rel specifies the relationship between the current page and the link. Each a tag will also have a child vp-icon tag which will have the name attribute discussed earlier.
+
Here's what the Footer.vue file looks like after adding the HTML to the template tag:
Each href has a value of the related URL for the social media site. Each target has a value of _blank, and each rel has a value of noopener noreferrer.
+
As mentioned in the previous post these values for the target and rel attributes are used to prevent a vulnerability known as reverse tabnabbingContent not supported 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.
+
Each name attribute has a value of the name of the related SVG file with the .svg extension omitted.
+
Next we'll export the JavaScript in the script tag and give the component a name. Here's what the Footer.vue file looks like after updating the script tag:
Finally, we'll style the component by adding the following CSS classes: "footer", "icons", and "made-by". We'll be adding the "footer" class to the footer tag, the "icons" class to the div tag, and the "made-by" class to the p tag. Then we'll add styling for each of the CSS classes in the style tag. Here's what the Footer.vue file looks like after styling:
A scoped attribute is also used in the style tag which means all of the styling only applies to the current component. Take a look at Scoped CSSContent not supported to learn more about the scoped attribute.
+
The "footer" class is given display: flex which defines a flex container for all of the direct children of the tag where the "footer" class is used. In this case the "footer" class is used on the footer tag which means the div tag and p tag will be in a flex container. The "footer" class is also given flex-direction: column which means the flex items in the flex container, i.e., the div tag and the p 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 align-items: center which will horizontally center the flex items since the flex direction is set to column. The "footer" class is then given padding: 2.5rem 2.5rem 2rem which will set a padding of 2.5rem for the top, 2.5rem for the left and right, and 2rem for the bottom.
The "icons" class is also given display: flex which means each a tag will be in a flex container since they're all direct children of the div tag which has the "icons" class. The "icons" class is also given margin-bottom: 1.75rem and font-size: 2rem which increases the size of the icons. The CSS selector .icons > a:not(:last-child) is then used which selects all a tags where the parent tag has a class of "icons" except for the last a tag. Each a tag that is selected is given margin-right: 4.6875rem.
Finally, the "made-by" class is given margin: 0 which removes the margin from the p tag.
+
If you didn't feel comfortable with the CSS discussed above, then here's a good resource to go through CSS TutorialContent not supported.
+
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.
After adding the global-components directory to the theme directory, you may have noticed the site is rendering a blank page. This is because we created a directory in the theme directory, so VuePressContent not supported is now looking for a Layout.vue file in the theme directory.
You may have noticed that the Layout.vue file is listed as a mandatory file, but we didn't need to create one in the theme directory. This is because you don't need to explicitly create the Layout.vue file when you're inheriting it from the default themeContent not supported.
+
+
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 GlobalLayout.vue file by using the same name for the file in the child theme and the code provided by the documentation.
+
Now let's create the layouts directory in the theme directory. This is where we'll be adding the GlobalLayout.vue file which again allows us to add our custom footer component to the global layout of the site.
+
Using the Global Layout
+
Here's what the theme directory will look like after creating the GlobalLayout.vue file in the layouts directory:
The GlobalLayout.vue file is responsible for handling the global layout of the site. Here's the path to the default GlobalLayout.vue file provided by VuePressContent not supportednode_modules/@vuepress/core/lib/client/components. You can also view the code for the default global layout hereContent not supported.
+
The default global layout gives you the ability to render different layouts depending on if $page.path is defined, i.e., the URL of the page is valid and if $page.frontmatter.layout is defined. If only the $page.path is defined, then the default layout will be used which is Layout. If $page.frontmatter.layout is defined, then the specific layout for that page will be used. If $page.path is not defined, then the NotFound layout is used which is the layout for the 404 page provided by VuePressContent not supported. 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.
+
To override and edit the GlobalLayout.vue file we're going to use the code provided by the globalLayoutContent not supported section from the documentation. The code provided by the documentation basically uses a computed propertyContent not supported 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.
+
Here's the code from the documentation:
+
+
+
<template>
+ <divid="global-layout">
+ <header><h1>Header</h1></header>
+ <component:is="layout"/>
+ <footer><h1>Footer</h1></footer>
+ </div>
+</template>
+
+<script>
+exportdefault{
+ computed:{
+ layout(){
+ if(this.$page.path){
+ if(this.$frontmatter.layout){
+ // You can also check whether layout exists first as the default global layout does.
+ returnthis.$frontmatter.layout
+ }
+ return'Layout'
+ }
+ return'NotFound'
+ }
+ }
+}
+</script>
+
Notice that we don't need to explicitly import the footer component since we made it a global component by adding it to the global-components directory in the theme directory.
+
+
Next Steps
+
In the next tutorial we'll discuss how to override the index.styl and palette.styl files to add our own global styling to the site. The global styling will include background color, accent color, text color, etc.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-04-06T16:58:30.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 5 - Configuration Basics
+ https://codemonkeys.tech/vuepress-tutorial-5/
+
+ 2024-07-17T04:15:09.679Z
+ Hey fellow Code Monkeys!!! 🐵 Want to learn about the configuration basics for VuePress, then check out VuePress Tutorial 5 - Configuration Basics! 🍌🐒
+
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.
+
Before adding the config file, let's first create a .vuepress directory in the docs directory. The .vuepress directory will be used to store all VuePressContent not supported specific directories and files.
+
The directory structure for your site should now look something like this:
The config.js file should export a JavaScript object like the following:
+
+
+
module.exports ={}
+
+
1
+
+
If you run into any issues when adding the directory and file above, then be sure to check out the ConfigurationContent not supported documentaion.
+
Alternative Config Formats
+
In this series we'll be using a JS config file format, i.e., .vuepress/config.js. However, VuePressContent not supported also supports the following config file formats: YAML - .vuepress/config.yml, TOML - .vuepress/config.toml, and TS - .vuepress/config.ts. If you want to use TS, then you need to have a VuePressContent not supported version of 1.9.0+ installed. See the TypeScript as ConfigContent not supported documentation for more details.
+
+
Config File Properties
+
Now that we have added a config.js file, we can begin to add more functionality and customization to the site by setting some of the basic config file properties.
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 Config ReferenceContent not supported.
+
Title
+
The title 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 default themeContent not supported as a link to the homepage.
+
The expected type is a string, and the default value is undefined.
+
Now let's set the title of the site:
+
+
+
module.exports ={
+ title:'Code Monkeys',
+}
+
+
1 2 3
+
+
After adding the title and saving the file, you should see Code Monkeys or whatever value you set as your site's title in the top left of the navbar as a link to the homepage.
+
You can also inspect the page, go to the Elements tab, open the <head> tag, and you'll see the following:
The value of the <title> tag will be whatever you set as the value for the title of your site.
+
Removing Hello VuePress
+
When we update the homepage in the next tutorial, we'll remove the Hello VuePress | from the <title> tag.
+
+
Description
+
The description property is used to define the description for the site. The provided value is used in a <meta> tag in the <head> tag of the site.
+
The expected type is a string, and the default value is undefined.
+
Now let's set the description of the site:
+
+
+
module.exports ={
+ 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! 🐵',
+}
+
+
1 2 3 4
+
+
After adding the description and saving the file, you can inspect the page, go to the Elements tab, open the <head> tag, and you'll see the following:
+
+
+
<head>
+ ...
+ <metaname="description"content="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! 🐵">
+ ...
+</head>
+
+
1 2 3 4 5
+
+
The value of the content attribute will be whatever you set as the value for the description of your site.
+
Head
+
The head property is used to inject extra tags into the <head> tag of the site.
+
The expected type is an array, and the default value is [].
+
You can specify a tag to inject into the <head> tag by using the following form: [tagName, { attr1Name: attr1Value, attr2Name: attr2Value, ... }].
+
Here are some examples of what can be injected into the <head> tag:
+
+
Author of the Site
+
Favicons
+
Social Media Metadata
+
Links to External Style Sheets
+
Client-Side Scripts
+
+
To start we'll set an author by using a <meta> tag in the <head> tag:
To change the author for your site you can use a different value for the content attribute.
+
We'll be injecting more tags into the <head> tag as we develop the site.
+
Updated Config File
+
Here's the content of the config.js file after adding the title, description, and author:
+
+
+
module.exports ={
+ title:'Code Monkeys',
+ 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! 🐵',
+ head:[
+ [
+ 'meta',
+ {
+ name:'author',
+ content:'J the Code Monkey',
+ },
+ ],
+ ],
+}
+
+
1 2 3 4 5 6 7 8 9 10 11 12 13 14
+
+
Be sure to substitute the values with the preferred values for your site.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-01-26T17:54:00.000Z
+ Copyright by J the Code Monkey
+
+
+ VuePress Tutorial 9 - Styling the Homepage
+ https://codemonkeys.tech/vuepress-tutorial-9/
+
+ 2024-07-17T04:15:09.685Z
+ 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! 🍌🐒
+
VuePress Tutorial 9 - Styling the Homepage
+
Styling Files
+
The next step we'll be taking in developing the blog is learning how to override the palette.styl and index.styl files which will allow us to add our own global styling to the blog.
+
To do this we're going to first discuss what the index.styl and palette.styl files are used for. Then we'll take a look at the predefined styling files provided by the default themeContent not supported, 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.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
palette.styl
+
The palette.styl file is used to define global styling variables and override the predefined styling variables which in our case are being provided by the default themeContent not supported.
+
Here are some of the predefined styling variables available to use and override in your site:
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.
+
Here's a link to the full palette.styl fileContent not supported if you're interested. You can also view the full file by navigating to node_modules/@vuepress/core/lib/client/style/config.styl in your project.
+
Only Define Variables in palette.styl
+
You should ONLY define variables in the palette.styl 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
+
+
Creating the palette.styl File
+
Now that we have a good understanding of the palette.styl file, we're going to create the file by first creating a styles directory in the theme directory. The docs directory for your site should now look something like this:
If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your palette.styl file in the following location .vuepress/styles/palette.styl.
+
+
We'll be updating the palette.styl file later on in this post, but first we're going to take a look at the index.styl file.
+
index.styl
+
The index.styl file is used to add global styles as well as override predefined styles which in our case are being provided by the default themeContent not supported.
We won't discuss the predefined index.styl 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.
+
Here's the predefined index.styl which you can override and add your own styles to:
Here's a link to the index.styl fileContent not supported as well and the path to the file in your project node_modules/@vuepress/theme-default/styles/index.styl.
+
As we develop the blog we'll be using and overriding some of these predefined styles as well as defining our own styles.
+
Importing and Requiring Stylus and CSS Files
+
You may have noticed in the index.styl file that we're requiring other files, e.g., @require './config'. We'll discuss how to import and require .styl and .css files in a future post.
+
+
Creating the index.styl File
+
Now that we have a good understanding of the index.styl file, we're going to create the file for the blog inside of the styles directory that we previously created. The docs directory for your site should now look something like this:
If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your index.styl file in the following location .vuepress/styles/index.styl.
+
+
We'll be updating the index.styl file we just created later on in this post, but first we're going to take a look at the overriding priority.
+
Overriding
+
Both the palette.styl and index.styl files follow a certain overriding priority.
+
palette.styl
+
The user's palette.styl file which is located in .vuepress/styles/palette.styl has a higher priority than the theme's palette.styl file which is located in theme/styles/palette.styl. The theme's palette.styl file has a higher priority than any predefined palette.styl file which is located in node_modules/@vuepress/core/lib/client/style/config.styl in the case of the default themeContent not supported.
+
This means a theme can define it's own global styling variables and a user can override them as they see fit.
+
Here's an example of a global styling variable defined in each type of palette.styl file to make this concept clearer:
Here, the final value for $accentColor will be #ccff33.
+
Absence of User palette.styl File
+
As we develop the blog we won't be using the user's palette.styl file located in .vuepress/styles/palette.styl We'll just be using the theme's palette.styl file located in theme/styles/palette.styl which will allow us to override any predefined variables.
+
+
index.styl
+
The same overriding priority applies to the index.styl file as well. So, a user's index.styl file which is located in .vuepress/styles/index.styl has a higher priority than the theme's index.styl file which is located in theme/styles/index.styl. The theme's index.styl file has a higher priority than any predefined index.styl file which is located in node_modules/@vuepress/theme-default/styles/index.styl in the case of the default themeContent not supported.
+
This means a theme can define it's own global styles and a user can override them as they see fit.
+
Both the user's index.styl file and the theme's index.styl file will get generated into the final CSS 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.
+
Here's an example of a style defined in a user's index.styl and a style defined in a theme's index.styl file to make this concept clearer:
Notice how the user's style comes after the theme's style in the final CSS file. This is what gives the user's style a higher priority than the theme's style.
+
Absence of User index.styl File
+
As we develop the blog we won't be using the user's index.styl file located in .vuepress/styles/index.styl. Instead we'll just be using the theme's index.styl file located in theme/styles/index.styl which will allow us to override any predefined styles.
+
+
Now that we have a good understanding of how overriding works for both the palette.styl and index.styl files, we're now ready to override some predefined styling and add our own styling to the homepage of the blog.
+
Homepage Styles
+
To start the homepage styling we'll be overriding and adding global styling variables to the palette.styl file. These global styling variables will then be used in the index.styl file as well as other files as we continue the development of the blog.
+
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 Elements tab, and then locate a tag or class that you want to override.
+
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.
+
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:
$backgroundColor is used as the background color of the homepage as well as the whole blog.
+
$accentColor is used to color the action button on the homepage and to add styling to internal and external links.
+
$textColor is used to color the text on the homepage as well as the navbar text and other text throughout the blog.
+
$borderColor is used to style the border in the features section as well as the border in the navbar and other borders throughout the blog.
+
$darkBorderColor will be used to style the border and box shadow around the main card on the homepage.
+
+
Now let's take a look at overriding and adding some styles to the index.styl file.
+
index.styl
+
We're going to start by overriding the background-color in the html tag:
+
+
+
html
+ background-color: $backgroundColor
+
+
1 2
+
+
+
Updates the background-color of the content below the Footer component to be the color specified by the $backgroundColor global styling variable we just added in the palette.styl file.
+
+
Next we'll override the background-color in the body tag:
+
+
+
html
+ background-color: $backgroundColor
+ body
+ background-color: $backgroundColor
+
1 2 3 4
+
+
+
Updates the background-color of the body of the site to be the color specified by the $backgroundColor global styling variable.
+
+
Now we're going to update the padding around the main tag which we'll select using the home class:
+
+
+
html
+ background-color: $backgroundColor
+ body
+ background-color: $backgroundColor
+ .home
+ padding:0
+
1 2 3 4 5 6
+
+
+
Updates the padding of the main tag with a class of home to be zero on all sides.
+
+
We're now going to update the styles for the hero class which is given to the header tag inside of the main tag and contains the logo, the title, the description, and the action button.
margin-left: 2rem adds a margin of 2rem to the left of the header tag.
+
margin-right: 2rem adds a margin of 2rem to the right of the header tag.
+
border: 0.125rem solid $darkBorderColor adds a border around the header tag with a thickness of 0.125rem, with a style of solid, and has a color of $darkBorderColor which was defined in the palette.styl file.
+
box-shadow: 0 0.5rem 1rem 0 $darkBorderColor adds a box shadow around the header tag.
+
border-radius: 5.625rem adds a border radius to the header tag border.
+
margin-bottom: 0.625rem adds a margin of 0.625rem to the bottom of the header tag.
+
padding: 2rem adds padding of 2rem around the header tag.
Finally, we're going to update the styles for the features class which is given to the div tag inside of the main tag and contains the Learn, Code, and Crush text.
margin-left: 2rem adds a margin of 2rem to the left of the div tag.
+
margin-right: 2rem adds a margin of 2rem to the right of the div tag.
+
border-top: 0.125rem solid $borderColor adds a border to the top of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
+
border-bottom: 0.125rem solid $borderColor adds a border to the bottom of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
+
text-align: center horizontally aligns the text in each div tag with a class of feature that are inside of the div tag with a class of features.
+
font-size: 1.4rem sets a font size of 1.4rem for the h2 tags that are inside of the div tag with a class of feature.
+
+
Next Steps
+
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.
+]]>
+
+ J the Code Monkey
+
+
+ J the Code Monkey
+
+ 2022-08-31T01:45:30.000Z
+ Copyright by J the Code Monkey
+
+
+ Contact
+ https://codemonkeys.tech/contact/
+
+ 2024-07-17T04:15:09.688Z
+ 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! 📞🐒
+
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.
+
+]]>
+
+
+ Donate
+ https://codemonkeys.tech/donate/
+
+ 2024-07-17T04:15:09.689Z
+ 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!
+
Thanks for the
Bananas!!! 🍌
+
+
Crypto 🔗
+
⚠️ Sending Crypto to the Wrong Address will Result in Loss of Funds! ⚠️
+
✅ Always double check the address & amount before sending! ✅
+
🤖 Instead of using the static Bitcoin address below, improve your privacy by using a PayNym!Content not supported 🤖
+]]>
+
+
+ Free and Open Source Software (FOSS)
+ https://codemonkeys.tech/resources/foss/
+
+ 2024-07-17T04:15:09.689Z
+ 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! 💻🐒
+
Free and Open Source Software (FOSS)
💻 🐒
+
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.
+]]>
+
+
+ Resources
+ https://codemonkeys.tech/resources/
+
+ 2024-07-17T04:15:09.689Z
+ 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! 💻🐒
+
Giving Credit to the Great
Apes!!! 🦍 🍌 🐒
+
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.
+
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.
+
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.
+
I'll be updating these resources from time to time, so if you have any suggestions on how to improve them let me know.
+
+
+
Bitcoin
+
+
"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." - Satoshi Nakamoto
+
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.
+
+
+
+
Free and Open Source Software (FOSS)
+
+
“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.
+
"Open source software" 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.
+
+
+
+
Notes and Other Stuff Transmitted by Relays (Nostr)
+
+
The simplest open protocol that is able to create a censorship-resistant global "social" network once and for all.
+
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.
+
+
+
+
Privacy
+
+
“Privacy is the power to selectively reveal oneself to the world." - Eric Hughes
+
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.
+
+
+
+
Web Development
+
+
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.
+
+]]>
+
+
+ Bitcoin
+ https://codemonkeys.tech/resources/bitcoin/
+
+ 2024-07-17T04:15:09.693Z
+ 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! ₿🐒
+
Bitcoin
₿ 🐒
+
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.
+
+
Blockchain Explorers
+
Blockstream ExplorerContent not supported - 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
+
Mempool.spaceContent not supported - Open source self-hostable mempool explorer and blockchain explorer for Bitcoin that can be used with Tor to conceal your IP address
21 LessonsContent not supported - Distillation of the lessons learned after falling down the Bitcoin rabbit hole written by Gigi
+
Bitcoin: A Work in ProgressContent not supported - Focused on guiding the reader through the latest developments in Bitcoin through the eyes of Sjors Provoost one of the many Bitcoin core developers
Mastering the Lightning NetworkContent not supported - Focused on providing developers with a technical understanding of the Lightning Network written by Andreas M. Antonopoulos, Olaoluwa Osuntokun, and Rene Pickhardt
+
Programming BitcoinContent not supported - 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
+
Thank God for BitcoinContent not supported - 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
+
The Bitcoin StandardContent not supported - 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
+
The Fiat StandardContent not supported - Provides an examination of twentieth century monetary technology and explains its benefits, drawbacks, and its many modes of failure written by Saifedean Ammous
+
The Little Bitcoin BookContent not supported - 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
+
+
+
Collaborative Custody
+
Unchained CapitalContent not supported - 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
Bitcoiner.GuideContent not supported - 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
+
Bitcoin OnlyContent not supported - A collection of high quality Bitcoin resources including meetups, books, wallets, hardware, podcasts, and more
+
Bitcoin OptechContent not supported - 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
Bitcoin UniversityContent not supported - Educational content devoted to Bitcoin, financial freedom, self-sovereignty, and relevant macro and financial news
+
Bitcoin WikiContent not supported - Wiki dedicated to providing all of your Bitcoin information needs including how to get started, software, mining, exchanges, technical content, economics, and more
+
BTC SessionsContent not supported - Bitcoin educator focused on helping people gain an understanding of Bitcoin by providing tutorials on wallets, hardware, security, exchanges, and more
+
DiverterContent not supported - Focused on Bitcoin, privacy, and censorship-resistance by learning how to use the related tools
+
EconoalchemistContent not supported - Blog focused on bringing you articles about interacting with Bitcoin in a self-custodial, censorship-resistant, and private way
+
k3tanContent not supported - 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
OdellContent not supported - 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
+
We Run BTCContent not supported - Focused on providing guides and resources about Bitcoin with an emphasis on how to interact with Bitcoin in a sovereign and private way
+
+
+
Entertainment
+
Bitcoin YodaContent not supported - 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
+
+
+
Hardware Wallets
+
Coldcard Mk4Content not supported - Viewable, editable, and verifiable source code, Bitcoin-only, and has numerous security features including dual secure elements to store your private key, air-gapped, i.e., can be used without ever connecting it directly to a computer, duress PIN, comes in a tamper-evident numbered bag with the bag number recorded into the device, and more
+
SeedSignerContent not supported - 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
+
Trezor Model TContent not supported - 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
+
+
+
Jobs
+
Bitcoiner JobsContent not supported - Leading career site with the goal of helping to build the emerging Bitcoin industry and the careers of Bitcoiners within it
+
PlebLabContent not supported - Bitcoin hackerspace and community accelerator based in Austin, Texas focused on supporting early stage Bitcoin start-ups and developers building the future of Bitcoin
+
+
+
Media
+
Bitcoin MagazineContent not supported - Source of news, information and expert commentary on Bitcoin, its underlying blockchain technology and the industry that has been built up around it
+
BitcoinTVContent not supported - A repository of educational video content for the Bitcoin community, without distractions like advertising, altcoins, or third-party trackers
+
No BS BitcoinContent not supported - A news desk for Bitcoiners by Bitcoiners without ads, paywalls, or clickbait includes Bitcoin related news, updates, research, guides, weekly digest, and more
+
TFTCContent not supported - A media company focused on Bitcoin, Beauty, and Freedom in the Digital Age
+
+
+
Meetups
+
Bitcoin ParkContent not supported - Community supported campus in Nashville, Tennessee focused on grassroots Bitcoin adoption and a home for Bitcoiners to work, learn, collaborate, and build
Bitcoin Meetup GroupsContent not supported - 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
+
+
+
Nodes
+
myNodeContent not supported - 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
+
NodlContent not supported - 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
+
RaspiBoltContent not supported - Set up your own Bitcoin and Lightning node from scratch doing everything yourself. You'll learn about Linux, Bitcoin, and Lightning
+
RoninDojoContent not supported - Open source high performance plug and play full node with an emphasis on maintaining strong privacy while interacting with Bitcoin
+
Start9Content not supported - 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
+
UmbrelContent not supported - 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
+
+
+
Payment Processors
+
BTCPay ServerContent not supported - Open source self-hostable cryptocurrency payment processor focused on providing secure, private, and censorship-resistant payments
+
+
+
Peer-to-Peer (P2P) Exchanges
+
Reviews
+
KYCNOT.MEContent not supported - 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!
+
Exchanges
+
AgoraDeskContent not supported - Closed source peer-to-peer (P2P) exchange with Tor support, accepts Bitcoin, Monero, and cash, allows you to swap coins, requires an account that doesn't need to use any personally identifiable information, uses a semi-custodial wallet, no JavaScript needed to use the service, the service has an API available, and Android and iOS apps are available
+
BisqContent not supported - 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
+
Hodl HodlContent not supported - 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
+
PeachContent not supported - 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
+
RobosatsContent not supported - 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
+
+
+
Podcasts
+
Bitcoin ExplainedContent not supported - 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
+
Bitcoin Fixes ThisContent not supported - An exploration of the impact Bitcoin has had and continues to have on multiple aspects of society hosted by Jimmy Song
Citadel DispatchContent not supported - 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
What Bitcoin DidContent not supported - A tri-weekly Bitcoin podcast where host Peter McCormack interviews experts in the world of Bitcoin development, privacy, investment and adoption
+
+
+
Products
+
CoinkiteContent not supported - Company focused on designing and manufacturing bitcoin security and fun devices like the Coldcard, Opendime, Tapsigner, Satscard, Blockclock, and more
+
Crypto CloaksContent not supported - Company focused on designing and manufacturing 3D printed Bitcoin related products like node shells, hardware wallet mounts, home mining devices, and more
+
+
+
Website
+
BitcoinContent not supported - Bitcoin core website that has introductory resources for individuals, businesses, and developers, resources, ways to participate, FAQs, and more
BitplatesContent not supported - 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
+
BlockplateContent not supported - 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
+
CodlContent not supported - 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
+
Quadrat RegisterContent not supported - 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
+
SeedplateContent not supported - Single plate design, 12 words per side, etch marks chemically colored in black for better legibility, designed to be small, compatible with Seed XOR, received an overall grade of A from Jameson Lopp, and made by Coinkite in Canada
+
+
+
Software Wallets
+
Lightning and On-Chain
+
Blue WalletContent not supported - 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
+
ElectrumContent not supported - 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
+
Fully NodedContent not supported - 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
+
MuunContent not supported - 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
+
Lightning Only
+
AlbyContent not supported - 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
+
BreezContent not supported - 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
+
PhoenixContent not supported - Open source Android and iOS non-custodial Lightning wallet and node that offers many features and is powered by Eclair
+
RTLContent not supported - 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
+
ZapContent not supported - Open source non-custodial Lightning wallet available for Android, iOS, Linux, macOS, and Windows that offers many features including connecting to your own Lightning node
+
ZeusContent not supported - Open source Android and iOS non-custodial Lightning wallet that offers many features including connecting to your own Lightning node
+
On-Chain Only
+
NunchukContent not supported - 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
+
SparrowContent not supported - 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
+
SpecterContent not supported - 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
+
+
+
Statistics
+
Know Your Coin Privacy (KYCP)Content not supported - Open source online tool for users to visualize the degree of privacy in a Bitcon transaction. Their zero log policy states KYCP is a static client for OXT, no backend or third-party service involved other than OXT, queries are directly sent to OXT over HTTPS, and there is no way to see or log your searches
+
Mempool ObserverContent not supported - Interesting statistics about the Bitcoin mempool including current data, historical data, recent blocks, Segregated Witness (SegWit) data, a transaction monitor, and more
+
+
+
Support
+
Bitcoin Dev ListContent not supported - 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
+
OpenSatsContent not supported - Focused on helping to support and maintain a sustainable ecosystem of funding for free and open source projects and contributors related to Bitcoin
+
Ten31Content not supported - Venture capital fund focused exclusively on investing in the Bitcoin ecosystem
+
+]]>
+
+
+ Notes and Other Stuff Transmitted by Relays (Nostr)
+ https://codemonkeys.tech/resources/nostr/
+
+ 2024-07-17T04:15:09.693Z
+ 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! 🗒️🐒
+
Notes and Other Stuff Transmitted by Relays (Nostr)
🗒️ 🐒
+
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.
+
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.
+]]>
+
+
+ Privacy
+ https://codemonkeys.tech/resources/privacy/
+
+ 2024-07-17T04:15:09.696Z
+ 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! 🔒🐒
+
Privacy
🔒 🐒
+
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.
+
+
Android Web Browsers
+
BraveContent not supported - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
+
BromiteContent not supported - Open source Chromium based mobile browser with privacy and security focused enhancements including built-in ad blocking
+
FirefoxContent not supported - 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
+
Firefox FocusContent not supported - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking
+
TorContent not supported - 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
+
+
+
App Stores
+
F-DroidContent not supported - App store that contains free and open source software (FOSS) applications for Android
+
+
+
Card Aliasing
+
MySudoContent not supported - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution
NextcloudContent not supported - 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
+
+
+
Desktop Web Browsers
+
BraveContent not supported - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
LibreWolfContent not supported - 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
+
TorContent not supported - 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
+
UnGoogled ChromiumContent not supported - 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
+
+
+
Electronic SIM (eSIM)
+
Silent LinkContent not supported - 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
+
+
+
Email
+
ProtonMailContent not supported - 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
+
TutanotaContent not supported - 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
+
+
+
Email Aliasing
+
SimpleLoginContent not supported - Open source and self-hostable email aliasing solution built with privacy and security in mind
VeraCryptContent not supported - Open source encryption software that allows you to create virtual encrypted disks within files and to encrypt entire partitions or storage devices
OnionShareContent not supported - Open source tool that lets you securely and anonymously share files, host websites, and chat using the Tor network
+
SyncthingContent not supported - Open source continuous file synchronization tool that encrypts all communication and allows users to sync files between authenticated devices
Privacy GuidesContent not supported - 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
+
Privacy ToolsContent not supported - 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
+
Seth for PrivacyContent not supported - An individual interested in educating and learning more about privacy and technology. Check out the Opt OutContent not supported 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
+
TechloreContent not supported - 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
+
The Hitchhiker’s Guide to Online AnonymityContent not supported - 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
+
The New OilContent not supported - 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
+
+
+
iOS Web Browsers
+
BraveContent not supported - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
+
FirefoxContent not supported - 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
+
Firefox FocusContent not supported - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking
+
Onion BrowserContent not supported - 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
+
+
+
Messengers
+
BriarContent not supported - 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
MatrixContent not supported - 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 ElementContent not supported
+
SessionContent not supported - 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
+
SignalContent not supported - Open source messenger that uses end-to-end encryption (E2EE) with a simple interface that requires a phone number to create an account
+
ThreemaContent not supported - 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
+
+
+
Mobile Phone
+
CalyxContent not supported - Open source Android mobile operating system that focuses on improving privacy and security
+
GrapheneOSContent not supported - Non-profit open source mobile operating system project with Android app compatibility that focuses on improving privacy and security
+
Librem 5Content not supported - Uses PureOS which is a Linux distribution with a focus on privacy and security and it incorporates open hardware specifications when possible
+
PinePhone ProContent not supported - Uses an open source Linux based mobile operating system that incorporates open hardware specifications when possible
ArchContent not supported - 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
+
DebianContent not supported - Open source GNU/Linux distribution that offers users security, stability, and reliability
+
FedoraContent not supported - Open source GNU/Linux distribution that that focuses on providing users with strong privacy and security by default
+
Pop!_OSContent not supported - 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
+
Qubes OSContent not supported - 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
+
+
+
Operating Systems (Live)
+
TailsContent not supported - 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
+
WhonixContent not supported - 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
+
+
+
Password Managers
+
BitwardenContent not supported - Open source, self-hostable, and cloud-based option password manager that uses zero knowledge end-to-end encryption (E2EE)
+
KeePassContent not supported - Open source password manager that uses industry standard encryption and stores all password databases locally on your device
+
+
+
Phone Number Aliasing
+
HushedContent not supported - 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
+
JMP.chatContent not supported - 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
+
MySudoContent not supported - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution
+
TextverifiedContent not supported - A proprietary fully functional US phone number aliasing solution that you can use for phone and SMS verification
+
ViberContent not supported - A proprietary Voice over IP (VoIP) phone number aliasing solution that supports worldwide numbers
+
+
+
Prebuilt Computers
+
PurismContent not supported - 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
+
System76Content not supported - 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
+
+
+
Search Engines
+
Brave SearchContent not supported - Proprietary privacy-focused search engine that uses its own independent search index for search results
+
SearxContent not supported - Open source configurable and self-hostable metasearch engine which aggregates results from numerous search engines and can be used over Tor for online anonymity
+
StartpageContent not supported - Proprietary privacy-focused search engine that consists of privately proxied Google search results without the unwanted tracking, third-party cookies, and targeted ads
+
+
+
Two-Factor Authentication (2FA)
+
Software
+
AegisContent not supported - 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
+
TofuContent not supported - 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
NitrokeyContent not supported - 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
+]]>
+
+
+ Web Development
+ https://codemonkeys.tech/resources/webdev/
+
+ 2024-07-17T04:15:09.696Z
+ 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! 🕸️🐒
+
Web Development
🕸️ 🐒
+
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.
Let's start by diagramming the different ways we can climb the steps to see if we can find a pattern.
When n = 3 we have:
From the diagram we can see there are 3 distinct ways to climb to the top when n = 3 since we can ignore the scenarios where we take extra steps.
To help you see a pattern try drawing out more diagrams for larger values of n or creating a generalized diagram for any value of n.
The diagram above is an example of a recursion tree.
So, one way to solve this problem is to come up with a recursive formula that represents how many distinct ways we can climb the stairs.
Let's use the diagram to help us come up with our recursive formula.
We know we can either add 1 step or 2 steps each time we climb up the stairs, and we want to hit our target of n steps.
So, we need to keep track of how many steps we have taken which we can represent with the variable , where represents the current choice when climbing the stairs.
Initially, , here means we haven't made a choice to take 1 step or 2 steps yet.
Each time we climb the stairs we make one of the following choices:
Now, we'll let denote our function for climbing the stairs.
Here's how we can represent the different scenarios for climbing the stairs:
We're passing the + and our target value of steps to our function .
Now, we need to determine how many times we need to to call .
We know from the diagram if , then we can ignore that way of climbing the stairs
We also know if , then we have found a valid way to climb the steps.
Using this knowledge we can come up with the following:
We'll actually get a time limit exceeded error on LeetCode if we submit this.
This is because the time complexity of our solution is O(2n).
We can look at our recursion tree above and count the number of nodes to determine the time complexity.
Now, we won't count exactly 2n nodes since our recursive formula isn't exactly 2n, but when dealing with Big-Oh we only care about the behavior as n becomes very large.
We'll be improving this in the next post by drawing out recursion trees for larger values of n which will allow us to see an interesting pattern.
We previously came up with a solution for this problem by using a recursive formula that represents how many distinct ways we can climb the stairs.
The issue with the previous solution is it has a time complexity of O(2n) which is very inefficient.
To come up with a better solution we'll be drawing out multiple recursion trees to help us see a pattern.
When n = 1 we have:
From the diagram we can see there is 1 distinct way to climb to the top when n = 1 since we can ignore the scenarios where we take extra steps.
When n = 2 we have:
So, we have 2 distinct ways to climb to the top.
When n = 3 we have:
So, we have 3 distinct ways to climb to the top.
When n = 4 we have:
So, we have 5 distinct ways to climb to the top.
Now, let's take a look at our cases from n = 1 to n = 2 and see if we can find a pattern:
Here, waysToClimb denotes our function for determining how many unique ways we can climb the stairs.
This sequence of numbers follows the Fibonacci sequence with the only difference being the value of the 1st and 2nd terms.
Here, the 1st term has a value of 1 and the 2nd term has a value of 2.
Also, notice that we know we have two ways to climb the stairs to reach the nth step.
If we take 1 step, then we're n - 1 steps closer to n, and if we take 2 steps then we're n - 2 steps closer to n.
So, we can get the distinct number of ways to climb the steps by summing up the ways of climbing to the n - 1 step and the ways of climbing to the n - 2 step using the following formula:
The Fibonacci sequence is the following series of numbers:
The next number is found by adding up the two numbers before it.
For example, 5 is found by adding 2 and 3.
The first two terms are called seed numbers, which we'll denote as:
Here's the formula used to characterize the sequence:
The seed numbers for our problem are:
Now that we know our pattern of climbing the stairs follows a Fibonnaci sequence we can implement the sequence in our code using the waysToClimb formula and the seed numbers we came up with.
This will improve the time complexity of our solution from the O(2n) solution we previously came up with.
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.
By looking at the examples, the 1st thought that comes to mind may be to simply take each value in nums, and compare it with every other value.
Basically, we'll be comparing each pair of values in nums to see if a duplicate has occurred.
To do this we'll start at the first value in nums, and compare it with each value to the right until we reach the end of nums.
Then we'll take the second value in nums, and compare it with each value to the right until we reach the end of nums.
We repeat this process until we reach the end of nums in the worst case or until we find a duplicate value.
Here's a visualization for nums = [1, 2, 3] which represents a worst case scenario:
Let's take our 1st value in nums, and compare it with each value to the right of it:
1st Comparison:
2nd Comparison:
Now, let's take our 2nd value in nums, and compare it with each value to the right of it:
3rd Comparison:
The 3rd value in nums is also the last value, so there's no more comparisons to be made.
To achieve this we'll need to loop over each value in nums, and for each iteration of this loop we need to compare our current value which will denote as nums[i] with each value to the right of it.
The process of comparing nums[i] with each value to the right of it means we'll need a nested for loop that loops from nums[i + 1] to the last value in nums.
A nested for loop a time complexity of which is not efficient and will result in a Time Limit Exceeded error on LeetCode.
Before checking for duplicate values, we can realize that if we sort nums any duplicate values will be consecutive.
Let's visualize this with an example for nums = [1, 2, 3, 1]:
Sorting nums gives us:
Now, we can loop over nums and check for duplicates values.
Looping over nums has a time complexity of O(n), and the sorting algorithm can have a time complexity as good as O(nlogn) if something like heapsort is used.
So, the overall time complexity is O(nlogn) since it's the dominating factor.
Solving this problem requires the ability to efficiently search for values, and a great way to do that is to use a hash table.
A hash table is an object that maps keys to values.
The search and insert opertions in a hash table have a time complexity of O(1).
Using a hash table will allow us to store each value in nums as a key, and we can map a value of let's say true to it if it's the first time we've seen the value.
Now, to create our hash table we can loop over nums then check to see if the key is present.
If the key is present, then we have found a duplicate, and we'll return true.
If the key isn't present, then we'll store the current value of nums as a key in our hash table with a value of true.
If no key appears twice, then nums has no duplicates, and we'll return false.
Here's a visualization of creating our hash table which we'll denote as obj for nums = [1, 2, 1]:
1st Iteration:
So, we'll store the value of nums[0] as a key in our hash table with a value of true.
2nd Iteration:
So, we'll store the value of nums[1] as a key in our hash table with a value of true.
3rd Iteration:
Since the same key appeared in our hash table, a duplicate has been found in nums, so we'll return false.
We'll be going over how to install fnm(opens new window) on Linux, macOS, and Windows. If you run into any issues with installation then check out the fnm(opens new window) repository for any updates.
Before you can use fnm(opens new window), you have to first set up your shell. We'll be going over how to set up fnm(opens new window) for bash, zsh, fish, and powershell.
Windows Command Prompt and Cmder
If you're interested in using Windows Command Prompt or Cmder then check out the fnm(opens new window) repository for instructions.
Here are some useful commands to get started with fnm(opens new window). You can find more commands here(opens new window) or you can run fnm --help to see a list of subcommands and fnm <SUBCOMMAND> --help to see information for a specific subcommand.
A Node version manager allows you to easily install and switch between numerous versions of Node.js(opens new window). This is useful when a project you’re working on requires a different version of Node.js(opens new window) than what you currently have installed.
This can occur since versions installed by nvm(opens new window) will only be available to the user account it was installed on, and any other user accounts will use the system version.
If version mismatches are occurring or any other issues, then you can uninstall node and npm associated with the system version and just use versions installed by nvm(opens new window).
Be sure to uninstall any globally installed npm packages associated with the system version as well.
When using nvm(opens new window), you don't need to use sudo npm install -g <package> instead use npm install -g <package> when installing global packages.
Finally, if you're using a different node version manager like fnm(opens new window), then you may run into issues with your installed versions from nvm(opens new window). If this is the case, then uninstall the node version manager you will not be using to resolve the issues.
If you're interested, check out the nvm Additional Notes(opens new window) for information on more parameters and how to customize the install source, directory, profile, and version for the install script.
After running the command above, you'll be prompted to close and reopen your terminal to start using nvm(opens new window), or you can run the following commands to start using it in the current shell session:
Here are some useful commands to get started with nvm(opens new window). You can run nvm --help to see a list of commands, their flags, and descriptions.
Here, version 16.11.1 will get an alias of nickname:
The default version is the active version when opening new shells. The first installed version will get set as the default version. To change the default version run the command below.
Here, we're setting the default version to be 17.1.0:
Like other package managers, Yarn(opens new window) allows you to use and share code with other developers which again makes development easier. The code is shared using a package.json file which describes the dependencies used in a project.
Yarn 1(opens new window) 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 Yarn 3(opens new window).
When Yarn(opens new window) was released in 2016 it achieved its goals of being a faster, more secure, and more reliable alternative to npm(opens new window). The improved reliability was accomplished by generating a yarn.lock file which handles keeping track of the exact versions of packages used in a project.
In 2017, npm(opens new window) addressed its speed and reliability issues with the release of npm 5(opens new window). The reliability issue was addressed with the introduction of the package-lock.json file which provided similar functionality to the yarn.lock file.
In 2018, npm(opens new window) addressed its security issues with the release of npm 6(opens new window) by checking vulnerabilities before installing dependencies as well as introducing more improvements to speed and reliability.
After installing a system version or a version with a node version manager, you can run the following command to install and upgrade Yarn 1(opens new window):
This will install Yarn 1(opens new window) globally. We'll see how to install a specific local version of yarn in the root of a project directory when looking at the usage of yarn.
Resolving Permissions Error
If you're using a system version, you may get a permissions error when attempting to install with npm(opens new window). To resolve this check out the installation(opens new window) documentation for platform-specific methods for Linux, macOS, and Windows. Alternatively, you can uninstall your system version and use a node version manager instead.
If you prefer to use a platform-specific method with a node version manager, then you should only use a method that can ignore the installation of Node.js(opens new window) since it can cause conflicts.
To install and set a local version of yarn for a specific project you can use the global yarn command we installed earlier. This ensures everyone working on a project is using the exact same version of yarn which is useful to avoid any undesired behavior like producing a different yarn.lock file.
This is accomplished by using yarn policies(opens new window) which allows you to check in your Yarn 1(opens new window) 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 .yarn/releases directory. Then your yarn-path will be updated in a .yarnrc file.
Now any yarn command run in your project will be using the local version 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 Yarn 1(opens new window) as you.
If you're using an existing project, then you don't need to set the local version as long as the project has the desired version of Yarn 1(opens new window) in the .yarn/releases directory, and the yarn-path is configured properly in the .yarnrc file.
If you don't have a project directory, then run the following:
There are multiple ways to specify which version you want to use:
yarn policies set-version downloads the latest stable release
yarn policies set-version --rc downloads the latest rc release
yarn policies set-version 1.22.4 downloads a specific version
Running yarn policies set-version [version] is also the recommended way to upgrade your version of Yarn 1(opens new window).
Now run yarn --version in your project directory, and it should output the local version you just set. If you navigate out of your project directory and run yarn --version, then you should see the global version that you installed.
The global version of yarn will first check if it's in a directory with a .yarnrc file. If the directory has a .yarnrc file, then the configured yarn-path value will be used to switch the yarn version from the global version to the project specific version.
Resolving Installation Directory Issue
If you set the local version in your project's root directory and the .yarn directory and .yarnrc file aren't generated there, then delete the files that were generated and run the yarn init command in your project's root directory before setting the local version. The yarn init command is described in the Creating a New Project section.
If you're using a local version of yarn, then it's recommended to add a .gitattributes file to your project which will prevent git from showing large diffs when you add or update releases and plugins:
This is accomplished by identifying the release and plugin directories as binary content.
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.
Then run the following command:
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 project-directory:
After answering all of the questions, a package.json file containing the answers will be created. The package.json file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow semantic versioning (semver)(opens new window).
Now, let's describe each property in a little more detail:
description is used to describe and provide more information about your project
+
Especially useful to include if you plan on publishing your project to npm(opens new window)
If no value is given, it will not be set
entry point is a JavaScript file that starts the execution of your project
+
This property is called main in the package.json file
The default value is index.js
repository url describes the location of the project repository containing the code
+
This property is called repository in the package.json file
You can explicitly set the URL and a version control type in the package.json file by adding, e.g., "repository": { "type": "git", "url": "https://github.com/github-username/my-new-project" }
If no value is given, it will not be set
author describes the creator or owner of the project
+
Used to describe one person
You can explicitly set the author name, email, and website in the package.json file by adding, e.g., "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }
If no value is given, it will not be set
license indicates the type of license being used by the project
+
Allows users to know how they're permitted to use the project
When adding a package the package.json file gets updated by adding the package as a dependency to a dependencies object where each key is a package name and the value represents a range of allowed versions following semver(opens new window) notation.
A yarn.lock file will also be created if it doesn't exist or updated if it already exists. A yarn.lock 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.
Here's how to handle the yarn.lock file in your project:
The yarn.lock file should be in the root of your project directory
You shouldn't directly edit the yarn.lock file it gets auto-generated and automatically updated
When installing only the top-level yarn.lock file is used and any yarn.lock files that exist in the dependencies will be ignored
The yarn.lock file should also be checked into version control since it's used to install the exact same versions of packages across machines
To add the latest version of a package run the following command:
To add a specific version of a package run the following command:
To add the latest version of a package within a specified version range run the following command:
The latest version within the given version range is determined by the range specifier and the version number.
In the example above the range specifier is the caret symbol, i.e., ^. You can use any desired range specifier, and the added package will be the latest version within the given version range.
You can also add a package with a specific tag by running the following command:
Tags are a way to mark published versions of a package with a label. Check out the yarn tag(opens new window) documentation for more information about them.
To add a package to your development dependencies, i.e., devDependencies you can add either the --dev or -D flag to the end of the command.
Development dependencies are dependencies that you need for the development workflow, e.g., Babel(opens new window), but not while running the project.
Here's an example of adding the latest version of a package to your devDependencies:
To add a package globally to your operating system you can use the global subcommand before add:
When to Use Global
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., nodemon(opens new window). See the yarn global(opens new window) documentation for more details.
The upgrade subcommand will update the packages to their latest version based on the version ranges defined in the package.json file. See the Versions of dependencies(opens new window) documentation to get a better understanding of how version ranges are used.
After running the upgrade subcommand, the yarn.lock file will be updated with the latest versions specified by the version ranges. The versions in the package.json file will remain the same though since the upgraded packages will still be within the same version ranges.
To view the upgraded versions of your packages in a readable format you can use the yarn list command described in the previous section.
We'll see how to upgrade packages to versions outside of the specified version ranges which will update both the yarn.lock file and the package.json file.
The following command upgrades all packages within their specified version ranges:
You can also upgrade a specific package within its specified version range:
To upgrade all packages to their latest versions you can add the --latest flag:
You can also upgrade a specific package to its latest version using the --latest flag:
When using the --latest flag, the version range in the package.json 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.
Since the range versions in the package.json file are ignored, both the yarn.lock and package.json files can be updated.
Also, the range specifiers in the package.json 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., ^ will be used instead.
So, e.g., a tilde range specifier, i.e., ~ will still be used for any packages that we're using it previously.
You can also explicitly set the range specifier by passing a flag after the --latest flag, e.g., --caret.
You can also upgrade a package to a specific version with the following command:
To upgrade a package to the latest version within a specified version range run the following:
The latest version within the given version range is again determined by the range specifier and the version number.
In the example above the range specifier is the caret symbol, i.e., ^. You can again use any desired range specifier, and the package will be upgraded to the latest version within the given version range.
You can also upgrade a package to a specific tag using the following command:
Tags are again a way to mark published versions of a package with a label. Check out the yarn tag(opens new window) documentation for more information about them.
You can specify a preferred range specifier when upgrading a package with a tag by passing, e.g., --tilde flag at the end of the command.
Downgrading Packages
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.
After running the command above, the yarn.lock and package.json files will both always be updated. This ensures all developers will still be using the exact same versions of the packages.
Also, when removing a package it will be removed from all types of dependencies, e.g., dependencies, devDependencies, etc.
The following command should be run when checking out code for a new project and when another developer adds or removes a package.
Run the following command to install all of a project's packages specified in the package.json file:
You can also just run the following:
After running either one of the commands above, a node_modules directory will be created in the current directory which contains all of the code for the installed packages.
Here's how the yarn.lock file is used:
If the yarn.lock file is present and if it contains all of the packages specified in the package.json file, then the exact versions specified in the yarn.lock file will be installed.
If there is no yarn.lock file or there is one that doesn't contain all of the packages in the package.json file, then the newest versions within the version ranges specified in the package.json file will be installed. This will then update the yarn.lock file.
To ensure the yarn.lock file is not updated when installing all of a project's dependencies you can run the following:
For more information about installing all the packages in a project check out the yarn install(opens new window) documentation.
To run a script you need to first add a scripts object to your package.json 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.
Here, we have defined two scripts in our scripts object with the names of test and build and with the commands of test-script and build-script, respectively.
To run a script you can run the following command:
You can also just run the following:
Potential Shorthand Issue
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 run subcommand when running your scripts.
It's also possible to list all of the scripts available to run in your project by running the following:
In this tutorial we're going to learn how to configure various settings for a Raspberry Pi(opens new window) using standard Debian(opens new window) commands. Since we'll be using standard Debian commands, the commands will be compatible with most other hardware platforms running Debian.
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.
Raspberry Pi Imager Boot Issues
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.
We'll be configuring the following settings:
Username
Password
Secure Shell (SSH)
WiFi
Time Zone
Keyboard Layout
We'll be using the nano text editor to edit the configuration files.
Here's how to save and exit nano:
Save: press Ctrl+o, confirm the filename, and press the Enter key
There are multiple ways to update your username. We'll be updating the username by logging in as the root user. Instead of using the root user, it's also possible to create another user and log into it to update the username.
Don't Use pi for your Username
For security reasons it's recommended to not use pi 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 pi username.
You can also disable the root user if you want after updating the username which we'll demonstrate below. For security reasons it's recommended to disable the root user after updating the username.
The username has been updated, but the user's home directory will still be using the previous username. To update the home directory to reflect the updated username you need to run the following command:
Be sure to replace:
<new_username> with the updated username
You can now log out of the root user by running the logout command we used earlier, and log in using the updated username and the user's password.
You can now disable the root user if you want, but you'll first want to make sure the updated user still has sudo privileges. You can check this by running the following command:
Be sure to replace:
<new_username> with the updated username
If the user still has sudo privileges, you should see the sudo group in the output.
After confirming the updated user still has sudo privileges, you can disable the root user by running the following command:
It's recommended to not use raspberry as your password since it has been used in the past as the default password plus it isn't a secure password anyway.
Every Raspberry Pi using Raspberry Pi OS Lite (64-bit) uses the default hostname raspberrypi which isn't very helpful when you're using multiple Raspberry Pi devices that you're trying to distinguish between on your network.
hostname Restrictions
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.
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.
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.
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:
Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same.
Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the first part of the array nums. More formally, if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result. It does not matter what you leave beyond the first k elements.
Return k after placing the final result in the first k slots of nums.
Do not allocate extra space for another array. You must do this by modifying the input array in-place with O(1) extra memory.
Explanation: Your function should return k = 2, with the first two elements of nums being 1 and 2 respectively. It does not matter what you leave beyond the returned k (hence they are underscores).
Explanation: Your function should return k = 5, with the first five elements of nums being 0, 1, 2, 3, and 4 respectively. It does not matter what you leave beyond the returned k (hence they are underscores).
Let's start by defining in-place which is an algorithm that transforms input using no auxiliary data structure.
So, we cannot allocate extra space for another array, a hash table, or any other data structure.
Another way of saying this is we must use O(1) extra memory.
# Removing (or Moving) Duplicates & Maintaining Relative Order
In JavaScript we can change the length of an array by adding or removing elements, but in other languages like C for example we cannot change the length of an array after it's created.
So, to get around this we're told we can place the result in the first part of nums.
Recall the formal description from earlier: if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result, and it doesn't matter what is left after the first k elements.
The examples from earlier should make this clearer:
The output maintains the relative order again for nums by keeping the elements we care about in non-decreasing order.
And again, recall if we're moving the duplicates it doesn't matter what we leave after the kth element, so those elements were denoted with underscores.
Let's start with nums = [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.
Let's start by taking our 1st element in nums and compare it with the 2nd element, then we can compare the 2nd element with the 3rd and so on...
1st Iteration:
2nd Iteration:
3rd Iteration:
4th Iteration:
After the 4th iteration, there's nothing left to compare nums[4] with, so that's the last iteration we need.
During our iterations we had to keep track of our current element in nums which we'll call nums[i] and the next element in nums which will be nums[i + 1].
We also had to keep track of which element we needed to replace in nums if we ran into an element we hadn't seen before which we'll call nums[j].
So, to implement this we'll loop over nums from the beginning to the length of nums - 1 since when we get to the last element there's nothing else for us to compare it with.
On each iteration we'll compare the current element of nums which is nums[i] with the next element of nums which is nums[i + 1].
If they're not equal then we'll set nums[j]=nums[i + 1] where j gets initialized to 1, and we'll increment j every time nums[i] doesn't equal nums[i + 1].
We also need to remember the case of nums.length = 0 which means we have no elements in our array, so we'll just return 0.
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.
Blockstream Explorer(opens new window) - 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
Mempool.space(opens new window) - Open source self-hostable mempool explorer and blockchain explorer for Bitcoin that can be used with Tor to conceal your IP address
21 Lessons(opens new window) - Distillation of the lessons learned after falling down the Bitcoin rabbit hole written by Gigi
Bitcoin: A Work in Progress(opens new window) - Focused on guiding the reader through the latest developments in Bitcoin through the eyes of Sjors Provoost one of the many Bitcoin core developers
Mastering Bitcoin(opens new window) - Focused on providing developers with a technical understanding of Bitcoin written by Andreas M. Antonopoulos
Mastering the Lightning Network(opens new window) - Focused on providing developers with a technical understanding of the Lightning Network written by Andreas M. Antonopoulos, Olaoluwa Osuntokun, and Rene Pickhardt
Programming Bitcoin(opens new window) - 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
Thank God for Bitcoin(opens new window) - 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
The Bitcoin Standard(opens new window) - 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
The Fiat Standard(opens new window) - Provides an examination of twentieth century monetary technology and explains its benefits, drawbacks, and its many modes of failure written by Saifedean Ammous
The Little Bitcoin Book(opens new window) - 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
Unchained Capital(opens new window) - 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
Clark Moody's Dashboard(opens new window) - A single page view into the metrics of the Bitcoin ecosystem which includes market data, network data, mining data, and more
6102bitcoin(opens new window) - Pseudonymous bitcoin user and educator with the goal of accelerating bitcoin understanding
Bitcoiner.Guide(opens new window) - 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
Bitcoin Only(opens new window) - A collection of high quality Bitcoin resources including meetups, books, wallets, hardware, podcasts, and more
Bitcoin Optech(opens new window) - 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
Bitcoin University(opens new window) - Educational content devoted to Bitcoin, financial freedom, self-sovereignty, and relevant macro and financial news
Bitcoin Wiki(opens new window) - Wiki dedicated to providing all of your Bitcoin information needs including how to get started, software, mining, exchanges, technical content, economics, and more
BTC Sessions(opens new window) - Bitcoin educator focused on helping people gain an understanding of Bitcoin by providing tutorials on wallets, hardware, security, exchanges, and more
Diverter(opens new window) - Focused on Bitcoin, privacy, and censorship-resistance by learning how to use the related tools
Econoalchemist(opens new window) - Blog focused on bringing you articles about interacting with Bitcoin in a self-custodial, censorship-resistant, and private way
k3tan(opens new window) - 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
Odell(opens new window) - 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
We Run BTC(opens new window) - Focused on providing guides and resources about Bitcoin with an emphasis on how to interact with Bitcoin in a sovereign and private way
Bitcoin Yoda(opens new window) - 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
Coldcard Mk4(opens new window) - Viewable, editable, and verifiable source code, Bitcoin-only, and has numerous security features including dual secure elements to store your private key, air-gapped, i.e., can be used without ever connecting it directly to a computer, duress PIN, comes in a tamper-evident numbered bag with the bag number recorded into the device, and more
SeedSigner(opens new window) - 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
Trezor Model T(opens new window) - 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
Bitcoiner Jobs(opens new window) - Leading career site with the goal of helping to build the emerging Bitcoin industry and the careers of Bitcoiners within it
PlebLab(opens new window) - Bitcoin hackerspace and community accelerator based in Austin, Texas focused on supporting early stage Bitcoin start-ups and developers building the future of Bitcoin
Bitcoin Magazine(opens new window) - Source of news, information and expert commentary on Bitcoin, its underlying blockchain technology and the industry that has been built up around it
BitcoinTV(opens new window) - A repository of educational video content for the Bitcoin community, without distractions like advertising, altcoins, or third-party trackers
No BS Bitcoin(opens new window) - A news desk for Bitcoiners by Bitcoiners without ads, paywalls, or clickbait includes Bitcoin related news, updates, research, guides, weekly digest, and more
TFTC(opens new window) - A media company focused on Bitcoin, Beauty, and Freedom in the Digital Age
Bitcoin Park(opens new window) - Community supported campus in Nashville, Tennessee focused on grassroots Bitcoin adoption and a home for Bitcoiners to work, learn, collaborate, and build
Bitcoin Meetup Groups(opens new window) - 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
myNode(opens new window) - 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
Nodl(opens new window) - 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
RaspiBolt(opens new window) - Set up your own Bitcoin and Lightning node from scratch doing everything yourself. You'll learn about Linux, Bitcoin, and Lightning
RoninDojo(opens new window) - Open source high performance plug and play full node with an emphasis on maintaining strong privacy while interacting with Bitcoin
Start9(opens new window) - 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
Umbrel(opens new window) - 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
BTCPay Server(opens new window) - Open source self-hostable cryptocurrency payment processor focused on providing secure, private, and censorship-resistant payments
KYCNOT.ME(opens new window) - 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!
AgoraDesk(opens new window) - Closed source peer-to-peer (P2P) exchange with Tor support, accepts Bitcoin, Monero, and cash, allows you to swap coins, requires an account that doesn't need to use any personally identifiable information, uses a semi-custodial wallet, no JavaScript needed to use the service, the service has an API available, and Android and iOS apps are available
Bisq(opens new window) - 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
Hodl Hodl(opens new window) - 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
Peach(opens new window) - 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
Robosats(opens new window) - 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
Bitcoin Explained(opens new window) - 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
Bitcoin Fixes This(opens new window) - An exploration of the impact Bitcoin has had and continues to have on multiple aspects of society hosted by Jimmy Song
Citadel Dispatch(opens new window) - 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
What Bitcoin Did(opens new window) - A tri-weekly Bitcoin podcast where host Peter McCormack interviews experts in the world of Bitcoin development, privacy, investment and adoption
Coinkite(opens new window) - Company focused on designing and manufacturing bitcoin security and fun devices like the Coldcard, Opendime, Tapsigner, Satscard, Blockclock, and more
Crypto Cloaks(opens new window) - Company focused on designing and manufacturing 3D printed Bitcoin related products like node shells, hardware wallet mounts, home mining devices, and more
Bitcoin(opens new window) - Bitcoin core website that has introductory resources for individuals, businesses, and developers, resources, ways to participate, FAQs, and more
Bitplates(opens new window) - 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
Blockplate(opens new window) - 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
Codl(opens new window) - 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
Quadrat Register(opens new window) - 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
Seedplate(opens new window) - Single plate design, 12 words per side, etch marks chemically colored in black for better legibility, designed to be small, compatible with Seed XOR, received an overall grade of A from Jameson Lopp, and made by Coinkite in Canada
Blue Wallet(opens new window) - 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
Electrum(opens new window) - 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
Fully Noded(opens new window) - 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
Muun(opens new window) - 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
Alby(opens new window) - 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
Breez(opens new window) - 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
Phoenix(opens new window) - Open source Android and iOS non-custodial Lightning wallet and node that offers many features and is powered by Eclair
RTL(opens new window) - 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
Zap(opens new window) - Open source non-custodial Lightning wallet available for Android, iOS, Linux, macOS, and Windows that offers many features including connecting to your own Lightning node
Zeus(opens new window) - Open source Android and iOS non-custodial Lightning wallet that offers many features including connecting to your own Lightning node
Nunchuk(opens new window) - 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
Sparrow(opens new window) - 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
Specter(opens new window) - 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
Know Your Coin Privacy (KYCP)(opens new window) - Open source online tool for users to visualize the degree of privacy in a Bitcon transaction. Their zero log policy states KYCP is a static client for OXT, no backend or third-party service involved other than OXT, queries are directly sent to OXT over HTTPS, and there is no way to see or log your searches
Mempool Observer(opens new window) - Interesting statistics about the Bitcoin mempool including current data, historical data, recent blocks, Segregated Witness (SegWit) data, a transaction monitor, and more
Bitcoin Dev List(opens new window) - 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
OpenSats(opens new window) - Focused on helping to support and maintain a sustainable ecosystem of funding for free and open source projects and contributors related to Bitcoin
Ten31(opens new window) - Venture capital fund focused exclusively on investing in the Bitcoin ecosystem
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.
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.
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.
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.
I'll be updating these resources from time to time, so if you have any suggestions on how to improve them let me know.
"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." - Satoshi Nakamoto
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.
“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.
"Open source software" 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.
# Notes and Other Stuff Transmitted by Relays (Nostr)
The simplest open protocol that is able to create a censorship-resistant global "social" network once and for all.
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.
“Privacy is the power to selectively reveal oneself to the world." - Eric Hughes
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.
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.
# Notes and Other Stuff Transmitted by Relays (Nostr)
🗒️ 🐒
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.
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.
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.
Brave(opens new window) - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
Bromite(opens new window) - Open source Chromium based mobile browser with privacy and security focused enhancements including built-in ad blocking
Firefox(opens new window) - 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
Firefox Focus(opens new window) - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking
Tor(opens new window) - 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
MySudo(opens new window) - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution
Privacy(opens new window) - A proprietary credit/debit card aliasing solution when making online purchases
Nextcloud(opens new window) - 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
Brave(opens new window) - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
Firefox(opens new window) - 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 Firefox Profilemaker(opens new window) to adjust the settings for your needs or use the Arkenfox user.js(opens new window) file instead of the default settings. It's also recommended to download the browser releases from the Mozilla FTP(opens new window) to avoid telemetry tracking on your download
LibreWolf(opens new window) - 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
Tor(opens new window) - 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
UnGoogled Chromium(opens new window) - 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
Silent Link(opens new window) - 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
ProtonMail(opens new window) - 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
Tutanota(opens new window) - 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
GNU Privacy Guard (GnuPG)(opens new window) - Open source, complete, and free implementation of the OpenPGP standard. Allows you to encrypt and sign your data and communications
VeraCrypt(opens new window) - Open source encryption software that allows you to create virtual encrypted disks within files and to encrypt entire partitions or storage devices
OnionShare(opens new window) - Open source tool that lets you securely and anonymously share files, host websites, and chat using the Tor network
Syncthing(opens new window) - Open source continuous file synchronization tool that encrypts all communication and allows users to sync files between authenticated devices
Privacy Guides(opens new window) - 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
Privacy Tools(opens new window) - 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
Seth for Privacy(opens new window) - An individual interested in educating and learning more about privacy and technology. Check out the Opt Out(opens new window) 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
Techlore(opens new window) - 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
The Hitchhiker’s Guide to Online Anonymity(opens new window) - 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
The New Oil(opens new window) - 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
Brave(opens new window) - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
Firefox(opens new window) - 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
Firefox Focus(opens new window) - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking
Onion Browser(opens new window) - 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
Briar(opens new window) - 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
Matrix(opens new window) - 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 Element(opens new window)
Session(opens new window) - 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
Signal(opens new window) - Open source messenger that uses end-to-end encryption (E2EE) with a simple interface that requires a phone number to create an account
Threema(opens new window) - 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
Calyx(opens new window) - Open source Android mobile operating system that focuses on improving privacy and security
GrapheneOS(opens new window) - Non-profit open source mobile operating system project with Android app compatibility that focuses on improving privacy and security
Librem 5(opens new window) - Uses PureOS which is a Linux distribution with a focus on privacy and security and it incorporates open hardware specifications when possible
PinePhone Pro(opens new window) - Uses an open source Linux based mobile operating system that incorporates open hardware specifications when possible
Arch(opens new window) - 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
Debian(opens new window) - Open source GNU/Linux distribution that offers users security, stability, and reliability
Fedora(opens new window) - Open source GNU/Linux distribution that that focuses on providing users with strong privacy and security by default
Pop!_OS(opens new window) - 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
Qubes OS(opens new window) - 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
Tails(opens new window) - 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
Whonix(opens new window) - 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
Bitwarden(opens new window) - Open source, self-hostable, and cloud-based option password manager that uses zero knowledge end-to-end encryption (E2EE)
KeePass(opens new window) - Open source password manager that uses industry standard encryption and stores all password databases locally on your device
Hushed(opens new window) - 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
JMP.chat(opens new window) - 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
MySudo(opens new window) - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution
Textverified(opens new window) - A proprietary fully functional US phone number aliasing solution that you can use for phone and SMS verification
Viber(opens new window) - A proprietary Voice over IP (VoIP) phone number aliasing solution that supports worldwide numbers
Purism(opens new window) - 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
System76(opens new window) - 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
Brave Search(opens new window) - Proprietary privacy-focused search engine that uses its own independent search index for search results
Searx(opens new window) - Open source configurable and self-hostable metasearch engine which aggregates results from numerous search engines and can be used over Tor for online anonymity
Startpage(opens new window) - Proprietary privacy-focused search engine that consists of privately proxied Google search results without the unwanted tracking, third-party cookies, and targeted ads
Aegis(opens new window) - 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
Tofu(opens new window) - 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
Nitrokey(opens new window) - 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
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.
Let's take our two examples from earlier and find a way to model the reversing of the characters in s.
Let's start with Ex 1)
Initially, we have
and after reversing s our output should be:
To perform the reversal we need to swap the characters in s.
We can start by swapping the leftmost character and the rightmost character.
Then we'll move to the second leftmost character and the second rightmost character and swap them.
We'll continue this process until every character has been swapped if we have an even number of characters, or until we have one unswapped character left if we have an odd number of characters.
To perform this swapping we'll need to loop over s while there are still characters that can be swapped.
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.
1st Iteration:
Current Leftmost Character: h
Current Rightmost Character: o
Now, we can swap the characters by assigning s[0] to be s[4], but if we want to assign s[4] to be s[0], then we must first store s[0] in a temp variable.
Storing s[0] in a temp variable will allow us to still have the original character that was stored in s[0].
Here's the steps for the swapping process:
Here's s after the 1st swap:
2nd Iteration:
Current Leftmost Character: e
Current Rightmost Character: l
Now, we can swap the characters by assigning s[1] to be s[3] and by assinging s[3] to be s[1] using the swapping process from before.
Here's the steps for the swapping process:
Here's s after the 2nd swap:
There are no unswapped characters left to swap with our only remaining unswapped character, s[2], so the reversal is complete.
To perform these swaps we had to keep track of the index of our current leftmost character which we'll denote with i and the index of our current rightmost character which we'll denote with j.
Keeping track of the current leftmost index required us to start with i = 0 and to increment i on each subsequent iteration.
Keeping track of the current rightmost index required us to start with j = s.length - 1 and to decrement j on each subsequent iteration.
We continued the loop while i < j.
Let's now look at Ex 2)
Initially, we have
and after reversing s our output should be:
We need to swap the characters in s again like in Ex) 1.
Let's visualize this process to help us see how the swapping will occur for this example:
1st Iteration:
Current Leftmost Character: H
Current Rightmost Character: h
Now, we can swap the characters by assigning s[0] to be s[5] and by assinging s[5] to be s[0] using the swapping process from before.
Here's the steps for the swapping process:
Here's s after the 1st swap:
2nd Iteration:
Current Leftmost Character: a
Current Rightmost Character: a
Now, we can swap the characters by assigning s[1] to be s[4] and by assinging s[4] to be s[1] using the swapping process from before.
Here's the steps for the swapping process:
Here's s after the 2nd swap:
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.
3rd Iteration:
Current Leftmost Character: n
Current Rightmost Character: n
Now, we can swap the characters by assigning s[2] to be s[3] and by assinging s[3] to be s[2] using the swapping process from before.
Here's the steps for the swapping process:
Here's s after the 3rd swap:
Every character has been swapped, so the reversal is complete.
Notice again we continued the loop while i < j.
Using the model we described above we can come up with the following implementation:
You are climbing a staircase. It takes n steps to reach the top.
+
Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?
+
Examples
+
Ex 1) Input: n = 2 Output: 2
+
Explanation: There are two ways to climb to the top. 1. 1 step + 1 step 2. 2 steps
+
Ex 2) Input: n = 3 Output: 3
+
Explanation: There are three ways to climb to the top. 1. 1 step + 1 step + 1 step 2. 1 step + 2 steps 3. 2 steps + 1 step
+
Constraints
+
+
+
+
Thought Process
+
+
+
Let's start by diagramming the different ways we can climb the steps to see if we can find a pattern.
+
+
When n = 3 we have:
+
+
+
+
+
+
From the diagram we can see there are 3 distinct ways to climb to the top when n = 3 since we can ignore the scenarios where we take extra steps.
+
+
+
To help you see a pattern try drawing out more diagrams for larger values of n or creating a generalized diagram for any value of n.
+
+
+
The diagram above is an example of a recursion tree.
+
+
+
So, one way to solve this problem is to come up with a recursive formula that represents how many distinct ways we can climb the stairs.
+
+
+
Let's use the diagram to help us come up with our recursive formula.
+
+
+
We know we can either add 1 step or 2 steps each time we climb up the stairs, and we want to hit our target of n steps.
+
+
+
So, we need to keep track of how many steps we have taken which we can represent with the variable , where represents the current choice when climbing the stairs.
+
+
+
Initially, , here means we haven't made a choice to take 1 step or 2 steps yet.
+
+
+
Each time we climb the stairs we make one of the following choices:
+
+
+
+
+
+
+
+
Now, we'll let denote our function for climbing the stairs.
+
+
+
Here's how we can represent the different scenarios for climbing the stairs:
+
+
+
+
+
+
We're passing the + and our target value of steps to our function .
+
+
+
Now, we need to determine how many times we need to to call .
+
+
+
We know from the diagram if , then we can ignore that way of climbing the stairs
+
+
+
We also know if , then we have found a valid way to climb the steps.
+
+
+
Using this knowledge we can come up with the following:
We'll actually get a time limit exceeded error on LeetCode if we submit this.
+
+
+
This is because the time complexity of our solution is O(2n).
+
+
+
We can look at our recursion tree above and count the number of nodes to determine the time complexity.
+
+
+
Now, we won't count exactly 2n nodes since our recursive formula isn't exactly 2n, but when dealing with Big-Oh we only care about the behavior as n becomes very large.
+
+
+
We'll be improving this in the next post by drawing out recursion trees for larger values of n which will allow us to see an interesting pattern.
+
+
+]]>
+
+
+ Contains Duplicate
+ https://codemonkeys.tech/contains-duplicate/
+ https://codemonkeys.tech/contains-duplicate/
+ Contains Duplicate
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Contains Duplicate! 🍌🐒
+ Fri, 06 Aug 2021 18:24:00 GMT
+
Given an integer array nums, return true if any value appears at least twice, and return false if every element is distinct.
+
Examples
+
Ex 1) Input: nums = [1, 2, 3, 1] Output: true since 1 appears twice.
+
Ex 2) Input: nums = [1, 2, 3, 4] Output: false since no value appears twice.
+
Ex 3) Input: nums = [1, 1, 1, 3, 3, 4, 3, 2, 4, 2] Output: true since 1, 3, and 2 appear more than once.
+
Ex 4) Input: nums = [] Output: false since there are no values.
+
Constraints
+
+
+
Thought Process
+
+
+
By looking at the examples, the 1st thought that comes to mind may be to simply take each value in nums, and compare it with every other value.
+
+
+
Basically, we'll be comparing each pair of values in nums to see if a duplicate has occurred.
+
+
+
To do this we'll start at the first value in nums, and compare it with each value to the right until we reach the end of nums.
+
+
+
Then we'll take the second value in nums, and compare it with each value to the right until we reach the end of nums.
+
+
+
We repeat this process until we reach the end of nums in the worst case or until we find a duplicate value.
+
+
+
Here's a visualization for nums = [1, 2, 3] which represents a worst case scenario:
+
+
+
Let's take our 1st value in nums, and compare it with each value to the right of it:
+
+
1st Comparison:
+
+
+
+
+
2nd Comparison:
+
+
+
+
+
+
Now, let's take our 2nd value in nums, and compare it with each value to the right of it:
+
+
3rd Comparison:
+
+
+
+
+
The 3rd value in nums is also the last value, so there's no more comparisons to be made.
+
+
+
+
+
+
To achieve this we'll need to loop over each value in nums, and for each iteration of this loop we need to compare our current value which will denote as nums[i] with each value to the right of it.
+
+
+
The process of comparing nums[i] with each value to the right of it means we'll need a nested for loop that loops from nums[i + 1] to the last value in nums.
+
+
+
A nested for loop a time complexity of which is not efficient and will result in a Time Limit Exceeded error on LeetCode.
+
+
+
+
+
Before checking for duplicate values, we can realize that if we sort nums any duplicate values will be consecutive.
+
+
+
Let's visualize this with an example for nums = [1, 2, 3, 1]:
+
+
+
Sorting nums gives us:
+
+
+
+
Now, we can loop over nums and check for duplicates values.
+
+
+
+
+
Looping over nums has a time complexity of O(n), and the sorting algorithm can have a time complexity as good as O(nlogn) if something like heapsort is used.
+
+
+
So, the overall time complexity is O(nlogn) since it's the dominating factor.
+
+
+
+
+
Solving this problem requires the ability to efficiently search for values, and a great way to do that is to use a hash table.
+
+
+
A hash table is an object that maps keys to values.
+
+
+
The search and insert opertions in a hash table have a time complexity of O(1).
+
+
+
Using a hash table will allow us to store each value in nums as a key, and we can map a value of let's say true to it if it's the first time we've seen the value.
+
+
+
Now, to create our hash table we can loop over nums then check to see if the key is present.
+
+
+
If the key is present, then we have found a duplicate, and we'll return true.
+
+
+
If the key isn't present, then we'll store the current value of nums as a key in our hash table with a value of true.
+
+
+
If no key appears twice, then nums has no duplicates, and we'll return false.
+
+
+
Here's a visualization of creating our hash table which we'll denote as obj for nums = [1, 2, 1]:
+
+
1st Iteration:
+
+
+
+
+
+
So, we'll store the value of nums[0] as a key in our hash table with a value of true.
+
+
+
+
2nd Iteration:
+
+
+
+
+
+
+
So, we'll store the value of nums[1] as a key in our hash table with a value of true.
+
+
+
+
3rd Iteration:
+
+
+
+
+
+
Since the same key appeared in our hash table, a duplicate has been found in nums, so we'll return false.
You are climbing a staircase. It takes n steps to reach the top.
+
Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?
+
Examples
+
Ex 1) Input: n = 2 Output: 2
+
Explanation: There are two ways to climb to the top. 1. 1 step + 1 step 2. 2 steps
+
Ex 2) Input: n = 3 Output: 3
+
Explanation: There are three ways to climb to the top. 1. 1 step + 1 step + 1 step 2. 1 step + 2 steps 3. 2 steps + 1 step
+
Constraints
+
+
+
+
Thought Process
+
+
+
We previously came up with a solution for this problem by using a recursive formula that represents how many distinct ways we can climb the stairs.
+
+
+
The issue with the previous solution is it has a time complexity of O(2n) which is very inefficient.
+
+
+
To come up with a better solution we'll be drawing out multiple recursion trees to help us see a pattern.
+
+
+
When n = 1 we have:
+
+
+
+
+
From the diagram we can see there is 1 distinct way to climb to the top when n = 1 since we can ignore the scenarios where we take extra steps.
+
+
+
When n = 2 we have:
+
+
+
+
+
So, we have 2 distinct ways to climb to the top.
+
+
+
When n = 3 we have:
+
+
+
+
+
So, we have 3 distinct ways to climb to the top.
+
+
+
When n = 4 we have:
+
+
+
+
+
So, we have 5 distinct ways to climb to the top.
+
+
+
Now, let's take a look at our cases from n = 1 to n = 2 and see if we can find a pattern:
+
+
+
+
+
+
+
Here, waysToClimb denotes our function for determining how many unique ways we can climb the stairs.
+
+
+
This sequence of numbers follows the Fibonacci sequence with the only difference being the value of the 1st and 2nd terms.
+
+
+
Here, the 1st term has a value of 1 and the 2nd term has a value of 2.
+
+
+
Also, notice that we know we have two ways to climb the stairs to reach the nth step.
+
+
+
If we take 1 step, then we're n - 1 steps closer to n, and if we take 2 steps then we're n - 2 steps closer to n.
+
+
+
So, we can get the distinct number of ways to climb the steps by summing up the ways of climbing to the n - 1 step and the ways of climbing to the n - 2 step using the following formula:
+
+
+
+
+
The Fibonacci sequence is the following series of numbers:
+
+
+
+
+
The next number is found by adding up the two numbers before it.
+
+
+
For example, 5 is found by adding 2 and 3.
+
+
+
The first two terms are called seed numbers, which we'll denote as:
+
+
+
+
+
Here's the formula used to characterize the sequence:
+
+
+
+
The seed numbers for our problem are:
+
+
+
+
+
Now that we know our pattern of climbing the stairs follows a Fibonnaci sequence we can implement the sequence in our code using the waysToClimb formula and the seed numbers we came up with.
+
+
+
This will improve the time complexity of our solution from the O(2n) solution we previously came up with.
+
+
+
Implementation
+
+
+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));
+
+
+
+
Analysis
+
+
+
Since we're looping over the length of n - 1 our time complexity is O(n) which is a much more efficient solution!
+
+
+
See if you can come up with an even more efficient solution using more properties of the Fibonnaci sequence!
+
+
+]]>
+
+
+ Reverse String
+ https://codemonkeys.tech/reverse-string/
+ https://codemonkeys.tech/reverse-string/
+ Reverse String
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Reverse String! 🍌🐒
+ Wed, 11 Aug 2021 15:35:00 GMT
+
Write a function that reverses a string. The input string is given as an array of characters s.
+
Examples
+
Ex 1) Input: s = ["h", "e", "l", "l", "o"] Output: ["o", "l", "l", "e", "h"]
+
Ex 2) Input: s = ["H", "a", "n", "n", "a", "h"] Output: ["h", "a", "n", "n", "a", "H"]
+
Constraints
+
+
+
+
+
+
s[i] is a printable ASCII character.
+
+
+
Do not allocate extra space for another array. You must do this in-place with O(1) extra memory.
+
+
+
What is a printable ASCII Character?
+
+
+
ASCII stands for American Standard Code for Information Interchange and it consists of 33 non-printable and 95 printable characters.
+
+
+
You can check out the non-printable, printable, and extended ASCII characters hereContent not supported.
+
+
+
For this problem we only care about the printable ASCII characters.
+
+
+
What does In-Place Mean?
+
+
+
In-place refers to an algorithm that transforms input using no auxiliary data structure.
+
+
+
So, we cannot allocate extra space for another array, a hash table, or any other data structure.
+
+
+
Another way of saying this is we must use O(1) extra memory.
+
+
+
Thought Process
+
+
+
Let's take our two examples from earlier and find a way to model the reversing of the characters in s.
+
+
+
Let's start with Ex 1)
+
+
Initially, we have
+
+
+
and after reversing s our output should be:
+
+
+
+
To perform the reversal we need to swap the characters in s.
+
+
+
We can start by swapping the leftmost character and the rightmost character.
+
+
+
Then we'll move to the second leftmost character and the second rightmost character and swap them.
+
+
+
We'll continue this process until every character has been swapped if we have an even number of characters, or until we have one unswapped character left if we have an odd number of characters.
+
+
+
To perform this swapping we'll need to loop over s while there are still characters that can be swapped.
+
+
+
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.
+
+
+
1st Iteration:
+
+
+
+
Current Leftmost Character: h
+
+
+
Current Rightmost Character: o
+
+
+
Now, we can swap the characters by assigning s[0] to be s[4], but if we want to assign s[4] to be s[0], then we must first store s[0] in a temp variable.
+
+
+
Storing s[0] in a temp variable will allow us to still have the original character that was stored in s[0].
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 1st swap:
+
+
+
+
+
2nd Iteration:
+
+
+
+
Current Leftmost Character: e
+
+
+
Current Rightmost Character: l
+
+
+
Now, we can swap the characters by assigning s[1] to be s[3] and by assinging s[3] to be s[1] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 2nd swap:
+
+
+
+
There are no unswapped characters left to swap with our only remaining unswapped character, s[2], so the reversal is complete.
+
+
+
+
+
+
To perform these swaps we had to keep track of the index of our current leftmost character which we'll denote with i and the index of our current rightmost character which we'll denote with j.
+
+
+
Keeping track of the current leftmost index required us to start with i = 0 and to increment i on each subsequent iteration.
+
+
+
Keeping track of the current rightmost index required us to start with j = s.length - 1 and to decrement j on each subsequent iteration.
+
+
+
We continued the loop while i < j.
+
+
+
+
+
Let's now look at Ex 2)
+
+
Initially, we have
+
+
+
and after reversing s our output should be:
+
+
+
+
We need to swap the characters in s again like in Ex) 1.
+
+
+
Let's visualize this process to help us see how the swapping will occur for this example:
+
+
+
1st Iteration:
+
+
+
+
Current Leftmost Character: H
+
+
+
Current Rightmost Character: h
+
+
+
Now, we can swap the characters by assigning s[0] to be s[5] and by assinging s[5] to be s[0] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 1st swap:
+
+
+
+
+
2nd Iteration:
+
+
+
+
Current Leftmost Character: a
+
+
+
Current Rightmost Character: a
+
+
+
Now, we can swap the characters by assigning s[1] to be s[4] and by assinging s[4] to be s[1] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 2nd swap:
+
+
+
+
+
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.
+
+
+
3rd Iteration:
+
+
+
+
Current Leftmost Character: n
+
+
+
Current Rightmost Character: n
+
+
+
Now, we can swap the characters by assigning s[2] to be s[3] and by assinging s[3] to be s[2] using the swapping process from before.
+
+
+
Here's the steps for the swapping process:
+
+
+
+
+
+
+
Here's s after the 3rd swap:
+
+
+
+
Every character has been swapped, so the reversal is complete.
+
+
+
+
+
+
Notice again we continued the loop while i < j.
+
+
+
Using the model we described above we can come up with the following implementation:
+
+
+
+
+
Implementation
+
+
+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);
+
+
+]]>
+
+
+ Remove Duplicates from Sorted Array
+ https://codemonkeys.tech/remove-duplicates-from-sorted-array/
+ https://codemonkeys.tech/remove-duplicates-from-sorted-array/
+ Remove Duplicates from Sorted Array
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Remove Duplicates from Sorted Array! 🍌🐒
+ Sat, 03 Jul 2021 17:25:34 GMT
+
Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same.
+
Since it is impossible to change the length of the array in some languages, you must instead have the result be placed in the first part of the array nums. More formally, if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result. It does not matter what you leave beyond the first k elements.
+
Return k after placing the final result in the first k slots of nums.
+
Do not allocate extra space for another array. You must do this by modifying the input array in-place with O(1) extra memory.
Explanation: Your function should return k = 2, with the first two elements of nums being 1 and 2 respectively. It does not matter what you leave beyond the returned k (hence they are underscores).
Explanation: Your function should return k = 5, with the first five elements of nums being 0, 1, 2, 3, and 4 respectively. It does not matter what you leave beyond the returned k (hence they are underscores).
+
Constraints
+
+
+
+
+
+
+
+
+
nums is sorted in non-decreasing order.
+
+
+
What does In-Place mean?
+
+
+
Let's start by defining in-place which is an algorithm that transforms input using no auxiliary data structure.
+
+
+
So, we cannot allocate extra space for another array, a hash table, or any other data structure.
+
+
+
Another way of saying this is we must use O(1) extra memory.
+
+
+
Removing (or Moving) Duplicates & Maintaining Relative Order
+
+
+
In JavaScript we can change the length of an array by adding or removing elements, but in other languages like C for example we cannot change the length of an array after it's created.
+
+
+
So, to get around this we're told we can place the result in the first part of nums.
+
+
+
Recall the formal description from earlier: if there are k elements after removing the duplicates, then the first k elements of nums should hold the final result, and it doesn't matter what is left after the first k elements.
+
+
+
The examples from earlier should make this clearer:
The output maintains the relative order again for nums by keeping the elements we care about in non-decreasing order.
+
+
+
And again, recall if we're moving the duplicates it doesn't matter what we leave after the kth element, so those elements were denoted with underscores.
+
+
+
+
+
+
+
How to Modify nums In-Place?
+
+
+
We're told we can only modify nums in-place.
+
+
+
Let's start with nums = [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.
+
+
+
Let's start by taking our 1st element in nums and compare it with the 2nd element, then we can compare the 2nd element with the 3rd and so on...
+
+
+
1st Iteration:
+
+
+
+
+
+
2nd Iteration:
+
+
+
+
+
3rd Iteration:
+
+
+
+
+
+
4th Iteration:
+
+
+
+
+
+
After the 4th iteration, there's nothing left to compare nums[4] with, so that's the last iteration we need.
+
+
+
During our iterations we had to keep track of our current element in nums which we'll call nums[i] and the next element in nums which will be nums[i + 1].
+
+
+
We also had to keep track of which element we needed to replace in nums if we ran into an element we hadn't seen before which we'll call nums[j].
+
+
+
So, to implement this we'll loop over nums from the beginning to the length of nums - 1 since when we get to the last element there's nothing else for us to compare it with.
+
+
+
On each iteration we'll compare the current element of nums which is nums[i] with the next element of nums which is nums[i + 1].
+
+
+
If they're not equal then we'll set nums[j]=nums[i + 1] where j gets initialized to 1, and we'll increment j every time nums[i] doesn't equal nums[i + 1].
+
+
+
We also need to remember the case of nums.length = 0 which means we have no elements in our array, so we'll just return 0.
+
+]]>
+
+
+ Single Number
+ https://codemonkeys.tech/single-number/
+ https://codemonkeys.tech/single-number/
+ Single Number
+ Hey fellow Code Monkeys!!! 🐵 Check out the Solution & Notes for the LeetCode problem Single Number! 🍌🐒
+ Tue, 29 Jun 2021 17:23:42 GMT
+
Given two strings s and t, return true
+if t is an anagram of s, and false otherwise.
+
Examples
+
Ex 1) Input: s = "anagram", t = "nagaram" Output: true
+
Ex 2) Input: s = "rat", t = "car" Output: false
+
Constraints
+
+
+
s and t consist of lowercase English letters
+
+
What is an Anagram?
+
+
A word or a phrase that is formed by rearranging the letters of a different word or phrase typically using all of the original letters exactly once.
+
+
Assumptions
+
+
To clarify the provided constraints we're also assuming s and t contain no spaces, and we're only able to use each letter once.
+
+
How to Check if t is an Anagram of s?
+
+
+
Since we're assuming we can only use each letter in s and t once, then for t to be an anagram of s they must be the same length.
+
+
+
We can first check that s and t are the same length, and if they aren't we can return false.
+
+
+
Now, if s and t are the same length, they must also contain the same letters.
+
+
+
How to Check if s and t contain the same letters?
+
+
+
We're given s and t 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 s and t.
+
+
+
Ex 1) s = "anagram" sArray = ["a", "n", "a", "g", "r", "a", "m"] t = "nagaram" tArray = ["n", "a", "g", "a", "r", "a", "m"]
+
+
+
Ex 2) s = "rat" sArray = ["r", "a", "t"] t = "car" tArray = ["c", "a", "r"]
+
+
+
+
+
We can use the split() method, and pass it a pattern of "".
+
+
+
This tells split() to split our strings into substrings where a "" pattern occurs which is between each character in our strings.
+
+
+
split() will then return an array of these substrings.
+
+
+
Now, we need a way to compare the letters of sArray with the letters of tArray.
+
+
+
We could take the first value of sArray and compare it with each value of tArray. 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.
+
+
+
A simplier solution though is to realize that we can sort our arrays, and if t is an anagram of s, then our arrays will have all the same letters in the same order.
Then we can check if the letters in the arrays are equal by comparing each value at index i of sArray with each value at index i of tArray.
+
+
+
To do this we can loop over the length of one of the arrays, and if the values of our arrays at index i are not equal, then we can break the loop by returning false.
+
+
+
If the arrays are equal, then we'll loop over the entire length of our array and return true.
+
+
+
Implementation
+
+
+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));
+
+
+
+]]>
+
+
+ Installing Fast Node Manager (fnm)
+ https://codemonkeys.tech/installing-fnm/
+ https://codemonkeys.tech/installing-fnm/
+ Installing Fast Node Manager (fnm)
+ Hey fellow Code Monkeys!!! 🐵 Want to switch between Node versions extremely fast, then check out Installing Fast Node Manager (fnm)! 🍌🐒
+ Wed, 08 Dec 2021 21:27:15 GMT
+
We'll be going over how to install fnmContent not supported on Linux, macOS, and Windows. If you run into any issues with installation then check out the fnmContent not supported repository for any updates.
On Windows, the profile is located at ~\Documents\PowerShell\Microsoft.PowerShell_profile.ps1 or $PROFILE
+
On macOS and Linux, the profile is located at ~/.config/powershell/Microsoft.PowerShell_profile.ps1
+
Usage
+
Here are some useful commands to get started with fnmContent not supported. You can find more commands hereContent not supported or you can run fnm --help to see a list of subcommands and fnm <SUBCOMMAND> --help to see information for a specific subcommand.
+
+]]>
+
+
+ Installing Node Version Manager (nvm)
+ https://codemonkeys.tech/installing-nvm/
+ https://codemonkeys.tech/installing-nvm/
+ Installing Node Version Manager (nvm)
+ Hey fellow Code Monkeys!!! 🐵 Want to be able to easily install and switch between Node versions, then check out Installing Node Version Manager (nvm)! 🍌🐒
+ Tue, 07 Dec 2021 22:01:15 GMT
+
Installing Node Version Manager (nvm)
+
Why use a Node Version Manager?
+
A Node version manager allows you to easily install and switch between numerous versions of Node.jsContent not supported. This is useful when a project you’re working on requires a different version of Node.jsContent not supported than what you currently have installed.
If you run into any issues with installation, then be sure to check out the nvmContent not supported repository for any updates and troubleshooting tips.
This can occur since versions installed by nvmContent not supported will only be available to the user account it was installed on, and any other user accounts will use the system version.
+
If version mismatches are occurring or any other issues, then you can uninstall node and npm associated with the system version and just use versions installed by nvmContent not supported.
+
Be sure to uninstall any globally installed npm packages associated with the system version as well.
When using nvmContent not supported, you don't need to use sudo npm install -g <package> instead use npm install -g <package> when installing global packages.
+
Finally, if you're using a different node version manager like fnmContent not supported, then you may run into issues with your installed versions from nvmContent not supported. If this is the case, then uninstall the node version manager you will not be using to resolve the issues.
If you're interested, check out the nvm Additional NotesContent not supported for information on more parameters and how to customize the install source, directory, profile, and version for the install script.
+
+
After running the command above, you'll be prompted to close and reopen your terminal to start using nvmContent not supported, or you can run the following commands to start using it in the current shell session:
+
+
+
exportNVM_DIR="$HOME/.config/nvm"&&
+[ -s "$NVM_DIR/nvm.sh"]&&\. "$NVM_DIR/nvm.sh"&&# This loads nvm
+[ -s "$NVM_DIR/bash_completion"]&&\. "$NVM_DIR/bash_completion"# This loads nvm bash_completion
+
Here are some useful commands to get started with nvmContent not supported. You can run nvm --help to see a list of commands, their flags, and descriptions.
Here, version 16.11.1 will get an alias of nickname:
+
+
+
nvm alias nickname 16.11.1
+
+
1
+
+
The default version is the active version when opening new shells. The first installed version will get set as the default version. To change the default version run the command below.
+
Here, we're setting the default version to be 17.1.0:
Like other package managers, YarnContent not supported allows you to use and share code with other developers which again makes development easier. The code is shared using a package.json file which describes the dependencies used in a project.
Yarn 1Content not supported 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 Yarn 3Content not supported.
When YarnContent not supported was released in 2016 it achieved its goals of being a faster, more secure, and more reliable alternative to npmContent not supported. The improved reliability was accomplished by generating a yarn.lock file which handles keeping track of the exact versions of packages used in a project.
+
In 2017, npmContent not supported addressed its speed and reliability issues with the release of npm 5Content not supported. The reliability issue was addressed with the introduction of the package-lock.json file which provided similar functionality to the yarn.lock file.
+
In 2018, npmContent not supported addressed its security issues with the release of npm 6Content not supported by checking vulnerabilities before installing dependencies as well as introducing more improvements to speed and reliability.
After installing a system version or a version with a node version manager, you can run the following command to install and upgrade Yarn 1Content not supported:
+
+
+
npminstall --global yarn
+
+
1
+
+
This will install Yarn 1Content not supported globally. We'll see how to install a specific local version of yarn in the root of a project directory when looking at the usage of yarn.
+
Resolving Permissions Error
+
If you're using a system version, you may get a permissions error when attempting to install with npmContent not supported. To resolve this check out the installationContent not supported documentation for platform-specific methods for Linux, macOS, and Windows. Alternatively, you can uninstall your system version and use a node version manager instead.
If you prefer to use a platform-specific method with a node version manager, then you should only use a method that can ignore the installation of Node.jsContent not supported since it can cause conflicts.
+
Usage
+
Now we'll be discussing some useful and common commands to get you started with Yarn 1Content not supported.
+
Help Commands
+
Here's how to access the help documentation for the yarn command which is always useful and recommended to do for any installed tool.
+
Run the following command to see a list of commands, flags, and descriptions for yarn:
+
+
+
yarn --help
+
+
1
+
+
To see help information for a specific subcommand run the following:
+
+
+
yarn[subcommand] --help
+
+
1
+
+
Check Yarn Version
+
To verify your installation was successful and to check your version of yarn run the following command:
+
+
+
yarn --version
+
+
1
+
+
Setting a Local Version
+
To install and set a local version of yarn for a specific project you can use the global yarn command we installed earlier. This ensures everyone working on a project is using the exact same version of yarn which is useful to avoid any undesired behavior like producing a different yarn.lock file.
+
This is accomplished by using yarn policiesContent not supported which allows you to check in your Yarn 1Content not supported 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 .yarn/releases directory. Then your yarn-path will be updated in a .yarnrc file.
+
Now any yarn command run in your project will be using the local version 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 Yarn 1Content not supported as you.
+
If you're using an existing project, then you don't need to set the local version as long as the project has the desired version of Yarn 1Content not supported in the .yarn/releases directory, and the yarn-path is configured properly in the .yarnrc file.
+
If you don't have a project directory, then run the following:
There are multiple ways to specify which version you want to use:
+
+
yarn policies set-version downloads the latest stable release
+
yarn policies set-version --rc downloads the latest rc release
+
yarn policies set-version 1.22.4 downloads a specific version
+
+
Running yarn policies set-version [version] is also the recommended way to upgrade your version of Yarn 1Content not supported.
+
Now run yarn --version in your project directory, and it should output the local version you just set. If you navigate out of your project directory and run yarn --version, then you should see the global version that you installed.
+
The global version of yarn will first check if it's in a directory with a .yarnrc file. If the directory has a .yarnrc file, then the configured yarn-path value will be used to switch the yarn version from the global version to the project specific version.
+
Resolving Installation Directory Issue
+
If you set the local version in your project's root directory and the .yarn directory and .yarnrc file aren't generated there, then delete the files that were generated and run the yarn init command in your project's root directory before setting the local version. The yarn init command is described in the Creating a New Project section.
+
+
Updating the .gitignore File
+
After setting your local version of yarn, you should now have .yarn directory in the root of your project.
+
Some of the files yarn adds to your .yarn directory should be checked into version control, e.g., git and others should be ignored.
+
To specify which directories and files should be ignored when pushing to your repositiory you can create a .gitignore file.
+
After creating the .gitignore file, you can add the recommended basic configuration for yarn:
This will ignore the entire .yarn directory except for the directories specified after the !.
+
The yarn.lock and .yarnrc files should always be checked into version control.
+
Adding a .gitattributes File
+
If you're using a local version of yarn, then it's recommended to add a .gitattributes file to your project which will prevent git from showing large diffs when you add or update releases and plugins:
This is accomplished by identifying the release and plugin directories as binary content.
+
Creating a New Project
+
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.
+
Then run the following command:
+
+
+
yarn init
+
+
1
+
+
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 project-directory:
+
+
+
question name (project-directory): my-new-project
+question version (1.0.0): 1.2.4
+question description: Learning Yarn
+question entry point (index.js):
+question repository url: https://github.com/github-username/my-new-project
+question author: Your Name
+question license (MIT):
+question private:
+success Saved package.json
+Done in34.11s.
+
+
1 2 3 4 5 6 7 8 9 10
+
+
After answering all of the questions, a package.json file containing the answers will be created. The package.json file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow semantic versioning (semver)Content not supported.
+
Now, let's describe each property in a little more detail:
entry point is a JavaScript file that starts the execution of your project
+
+
This property is called main in the package.json file
+
The default value is index.js
+
+
+
repository url describes the location of the project repository containing the code
+
+
This property is called repository in the package.json file
+
You can explicitly set the URL and a version control type in the package.json file by adding, e.g., "repository": { "type": "git", "url": "https://github.com/github-username/my-new-project" }
+
If no value is given, it will not be set
+
+
+
author describes the creator or owner of the project
+
+
Used to describe one person
+
You can explicitly set the author name, email, and website in the package.json file by adding, e.g., "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }
+
If no value is given, it will not be set
+
+
+
license indicates the type of license being used by the project
+
+
Allows users to know how they're permitted to use the project
When adding a package the package.json file gets updated by adding the package as a dependency to a dependencies object where each key is a package name and the value represents a range of allowed versions following semverContent not supported notation.
+
A yarn.lock file will also be created if it doesn't exist or updated if it already exists. A yarn.lock 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.
+
Here's how to handle the yarn.lock file in your project:
+
+
The yarn.lock file should be in the root of your project directory
+
You shouldn't directly edit the yarn.lock file it gets auto-generated and automatically updated
+
When installing only the top-level yarn.lock file is used and any yarn.lock files that exist in the dependencies will be ignored
+
The yarn.lock file should also be checked into version control since it's used to install the exact same versions of packages across machines
+
+
To add the latest version of a package run the following command:
+
+
+
yarnadd<package-name>
+
+
1
+
+
To add a specific version of a package run the following command:
+
+
+
yarnadd<package-name>@1.2.3
+
+
1
+
+
To add the latest version of a package within a specified version range run the following command:
+
+
+
yarnadd<package-name>@"^1.2.3"
+
+
1
+
+
The latest version within the given version range is determined by the range specifier and the version number.
+
In the example above the range specifier is the caret symbol, i.e., ^. You can use any desired range specifier, and the added package will be the latest version within the given version range.
+
You can also add a package with a specific tag by running the following command:
+
+
+
yarnadd<package-name>@tag
+
+
1
+
+
Tags are a way to mark published versions of a package with a label. Check out the yarn tagContent not supported documentation for more information about them.
+
To add a package to your development dependencies, i.e., devDependencies you can add either the --dev or -D flag to the end of the command.
+
Development dependencies are dependencies that you need for the development workflow, e.g., BabelContent not supported, but not while running the project.
+
Here's an example of adding the latest version of a package to your devDependencies:
To add a package globally to your operating system you can use the global subcommand before add:
+
+
+
yarn global add<package-name>
+
+
1
+
+
When to Use Global
+
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., nodemonContent not supported. See the yarn globalContent not supported documentation for more details.
The upgrade subcommand will update the packages to their latest version based on the version ranges defined in the package.json file. See the Versions of dependenciesContent not supported documentation to get a better understanding of how version ranges are used.
+
After running the upgrade subcommand, the yarn.lock file will be updated with the latest versions specified by the version ranges. The versions in the package.json file will remain the same though since the upgraded packages will still be within the same version ranges.
+
To view the upgraded versions of your packages in a readable format you can use the yarn list command described in the previous section.
+
We'll see how to upgrade packages to versions outside of the specified version ranges which will update both the yarn.lock file and the package.json file.
+
The following command upgrades all packages within their specified version ranges:
+
+
+
yarn upgrade
+
+
1
+
+
You can also upgrade a specific package within its specified version range:
+
+
+
yarn upgrade [package-name]
+
+
1
+
+
To upgrade all packages to their latest versions you can add the --latest flag:
+
+
+
yarn upgrade --latest
+
+
1
+
+
You can also upgrade a specific package to its latest version using the --latest flag:
+
+
+
yarn upgrade [package-name] --latest
+
+
1
+
+
When using the --latest flag, the version range in the package.json 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.
+
Since the range versions in the package.json file are ignored, both the yarn.lock and package.json files can be updated.
+
Also, the range specifiers in the package.json 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., ^ will be used instead.
+
So, e.g., a tilde range specifier, i.e., ~ will still be used for any packages that we're using it previously.
+
You can also explicitly set the range specifier by passing a flag after the --latest flag, e.g., --caret.
+
You can also upgrade a package to a specific version with the following command:
+
+
+
yarn upgrade <package-name>@1.2.3
+
+
1
+
+
To upgrade a package to the latest version within a specified version range run the following:
+
+
+
yarn upgrade <package-name>"@^1.2.3"
+
+
1
+
+
The latest version within the given version range is again determined by the range specifier and the version number.
+
In the example above the range specifier is the caret symbol, i.e., ^. You can again use any desired range specifier, and the package will be upgraded to the latest version within the given version range.
+
You can also upgrade a package to a specific tag using the following command:
+
+
+
yarn upgrade <package-name>@tag
+
+
1
+
+
Tags are again a way to mark published versions of a package with a label. Check out the yarn tagContent not supported documentation for more information about them.
+
You can specify a preferred range specifier when upgrading a package with a tag by passing, e.g., --tilde flag at the end of the command.
+
Downgrading Packages
+
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.
After running the command above, the yarn.lock and package.json files will both always be updated. This ensures all developers will still be using the exact same versions of the packages.
+
Also, when removing a package it will be removed from all types of dependencies, e.g., dependencies, devDependencies, etc.
The following command should be run when checking out code for a new project and when another developer adds or removes a package.
+
Run the following command to install all of a project's packages specified in the package.json file:
+
+
+
yarninstall
+
+
1
+
+
You can also just run the following:
+
+
+
yarn
+
+
1
+
+
After running either one of the commands above, a node_modules directory will be created in the current directory which contains all of the code for the installed packages.
+
Here's how the yarn.lock file is used:
+
+
If the yarn.lock file is present and if it contains all of the packages specified in the package.json file, then the exact versions specified in the yarn.lock file will be installed.
+
If there is no yarn.lock file or there is one that doesn't contain all of the packages in the package.json file, then the newest versions within the version ranges specified in the package.json file will be installed. This will then update the yarn.lock file.
+
+
To ensure the yarn.lock file is not updated when installing all of a project's dependencies you can run the following:
To run a script you need to first add a scripts object to your package.json 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.
Here, we have defined two scripts in our scripts object with the names of test and build and with the commands of test-script and build-script, respectively.
+
To run a script you can run the following command:
+
+
+
yarn run [script-name]
+
+
1
+
+
You can also just run the following:
+
+
+
yarn[script-name]
+
+
1
+
+
Potential Shorthand Issue
+
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 run subcommand when running your scripts.
+
+
It's also possible to list all of the scripts available to run in your project by running the following:
+]]>
+
+
+ Configuring Settings
+ https://codemonkeys.tech/raspberry-pi-configuring-settings/
+ https://codemonkeys.tech/raspberry-pi-configuring-settings/
+ Configuring Settings
+ 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! 🍌🐒
+ Tue, 20 Dec 2022 15:02:00 GMT
+
Configuring Settings
+
What We're Doing
+
In this tutorial we're going to learn how to configure various settings for a Raspberry PiContent not supported using standard DebianContent not supported commands. Since we'll be using standard Debian commands, the commands will be compatible with most other hardware platforms running Debian.
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.
+
Raspberry Pi Imager Boot Issues
+
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.
+
+
We'll be configuring the following settings:
+
+
Username
+
Password
+
Secure Shell (SSH)
+
WiFi
+
Time Zone
+
Keyboard Layout
+
+
We'll be using the nano text editor to edit the configuration files.
+
Here's how to save and exit nano:
+
+
Save: press Ctrl+o, confirm the filename, and press the Enter key
The Raspberry Pi is connected to a display either a computer monitor or television
+
You have a USB keyboard plugged into the Raspberry Pi
+
+
Username
+
There are multiple ways to update your username. We'll be updating the username by logging in as the root user. Instead of using the root user, it's also possible to create another user and log into it to update the username.
+
Don't Use pi for your Username
+
For security reasons it's recommended to not use pi 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 pi username.
+
+
Enable root User
+
To update the username using the root user, you first need to enable it which you can do by running the following command:
You can also disable the root user if you want after updating the username which we'll demonstrate below. For security reasons it's recommended to disable the root user after updating the username.
+
+
Logout
+
After enabling the root user, you need to log out of the current user which you can do with the following command:
+
+
+
logout
+
+
1
+
+
Update Username
+
Now, you'll need to log in using the root user by entering root for the username and the password you just created for the root user.
+
After logging in as the root user, you're now ready to update the username by running the following command:
+
+
+
usermod -l <new_username><old_username>
+
+
1
+
+
Be sure to replace:
+
+
<new_username> with the updated username
+
<old_username> with the username you want to update
+
+
Update home Directory
+
The username has been updated, but the user's home directory will still be using the previous username. To update the home directory to reflect the updated username you need to run the following command:
You can now log out of the root user by running the logout command we used earlier, and log in using the updated username and the user's password.
+
Disable root User
+
You can now disable the root user if you want, but you'll first want to make sure the updated user still has sudo privileges. You can check this by running the following command:
+
+
+
groups<new_username>
+
+
1
+
+
Be sure to replace:
+
+
<new_username> with the updated username
+
+
If the user still has sudo privileges, you should see the sudo group in the output.
+
After confirming the updated user still has sudo privileges, you can disable the root user by running the following command:
+
+
+
sudopasswd -l root
+
+
1
+
+
Password
+
To update the password for your user you can run the following command:
+
+
+
passwd
+
+
1
+
+
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.
It's recommended to not use raspberry as your password since it has been used in the past as the default password plus it isn't a secure password anyway.
+
+
Hostname
+
Every Raspberry Pi using Raspberry Pi OS Lite (64-bit) uses the default hostname raspberrypi which isn't very helpful when you're using multiple Raspberry Pi devices that you're trying to distinguish between on your network.
+
hostname Restrictions
+
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.
+
+
hosts File
+
To update the hostname you can open the /etc/hosts file by running the following command:
Next you need to open the /etc/hostname file by running the following command:
+
+
+
sudonano /etc/hostname
+
+
1
+
+
Your hostname file should look something like this:
+
+
+
<old_hostname>
+
+
1
+
+
Be sure to replace:
+
+
<old_hostname> with the updated hostname
+
+
Then save and exit the file.
+
For the changes to take effect you need to reboot your Raspberry Pi which you can do by running the following command:
+
+
+
sudo reboot
+
+
1
+
+
After rebooting the command prompt should now display, <username>@<new_hostname>.
+
Where:
+
+
<username> is the username of the current user
+
<new_hostname> is the updated hostname
+
+
Enable and Start SSH
+
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.
+
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.
+
Enable SSH
+
To enable SSH run the following command:
+
+
+
sudo systemctl enable ssh
+
+
1
+
+
Start SSH
+
To start the SSH service run the following command:
+
+
+
sudo systemctl start ssh
+
+
1
+
+
You should now be able to SSH into the Raspberry Pi from your local computer.
+
Configure WiFi
+
To configure WiFi you need to edit the wpa_supplicant.conf file.
+
wpa_supplicant.conf
+
The wpa_supplicant.conf file should be located in the /etc/wpa_supplicant directory.
+
To open the wpa_supplicant.conf file you can run the following command:
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:
+
+
+
sudo reboot
+
+
1
+
+
Conclusion
+
After following only with this tutorial, you should now know how to configure various settings for your Raspberry Pi using standard Debian commands.
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.
+
How to Use these Tutorials
+
+
+
If you want to recreate the Code Monkeys Blog or create a very similar blog then you can simply follow these tutorials in order.
+
+
+
Each tutorial will give you some general information about a VuePressContent not supported topic and provide helpful resources.
+
+
+
Then we'll apply what we've learned to the blog as an example.
+
+
+
This way you don't have to necessarily follow the tutorials in a linear order.
+
+
+
You'll be able to just learn a VuePressContent not supported topic if you don't want to recreate the entire blog or create a very similar blog.
+]]>
+
+
+ VuePress Tutorial 10 - Homepage Styling Part 2
+ https://codemonkeys.tech/vuepress-tutorial-10/
+ https://codemonkeys.tech/vuepress-tutorial-10/
+ VuePress Tutorial 10 - Homepage Styling Part 2
+ Hey fellow Code Monkeys!!! 🐵 Ready to continue the homepage styling for your VuePress site, then check out VuePress Tutorial 10 - Homepage Styling Part 2! 🍌🐒
+ Fri, 02 Sep 2022 21:56:00 GMT
+
VuePress Tutorial 10 - Homepage Styling Part 2
+
Homepage Styling Recap
+
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 $accentColor, $textColor, and $borderColor in the palette.styl file. The colors of these variables then get applied instead of the colors originally set by the default themeContent not supported. These variables can also be used to style other elements of the blog as well.
+
We also added our own global styling variables to the palette.styl file which included the $backgroundColor and the $darkBorderColor. These variables were then used in the index.styl file.
+
In the index.styl file we used some of the global styling variables along with overriding and adding our own global styling to style the background-color of the blog, the main tag with a class of home, the header tag with a class of hero, and the div tag with a class of features.
+
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.
+
Homepage Styling Updates
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
padding: 8rem 0 0 adds a padding of 8rem to the top and a padding of 0 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.
+
+
Why not Start with this Padding?
+
In the previous tutorial we used padding: 0 to style the home class since that code was based off of a more complicated way of styling the Footer component which has now been simplified. We'll be going over this simplified Footer component styling in the next tutorial.
+
+
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.
+
Adding Hover Effects
+
To implement the hover effects we'll be adding a CSS pseudo-class of hover to the header tag with a class of hero which we'll use along with the transition property to smoothly apply the hover effects to the main card logo and to the box shadow around the main card.
.hero:hover applies the hover pseudo-class to the .hero selector which will apply the styles defined inside of it when the user hovers their pointer over the header tag with a class of hero.
+
box-shadow: 0.125rem 0.5rem 1rem 0.125rem #0b0c0f changes the box shadow style defined in the hero class.
+
transform: scale(1.1) applies the scale() method to the transform property to increase the size of the img tag to be 1.1 times the original width and height.
+
+
If you have questions about the CSS discussed above, then check out these resources:
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.
+
The hover effects are working, but they aren't that smooth. To make them smoother we're going to use the transition property.
+
The transition property allows you to change CSS property values smoothly over a specified duration. To create a transition you need to specify two values:
+
+
The CSS property you want to add the transition to
+
The duration of the transition
+
+
Here's what the index.styl file looks like after adding our transition properties:
Now that we have added our hover effects, let's add the radial gradient background to the main card.
+
Adding Gradient Background
+
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.
+
We'll be adding a circular radial gradient background to the center of the header tag with a class of hero:
background-image: radial-gradient(circle at center center, #2c303a, $backgroundColor) adds a radial gradient with a circular shape to the center of the element starting with a color of #2c303a which transitions to the $backgroundColor variable that is defined in the palette.styl file.
+
+
If you want to learn more about CSS gradients, then check out these resources:
You can also check out Gradient MagicContent not supported which is a gallery of CSS gradients that you can freely use in your own projects.
+
The background of the main card should now be a radial gradient that starts at the center of the card with a color of #2c303a that circularly transitions to the $backgroundColor.
+
Next Steps
+
In the next tutorial we'll add styling to make the Footer component stick to the bottom of the page, and we'll add a highlight effect to the SVG icons.
+]]>
+
+
+ VuePress Tutorial 11 - Sticky Footer
+ https://codemonkeys.tech/vuepress-tutorial-11/
+ https://codemonkeys.tech/vuepress-tutorial-11/
+ VuePress Tutorial 11 - Sticky Footer
+ 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! 🍌🐒
+ Mon, 05 Sep 2022 20:04:00 GMT
+
VuePress Tutorial 11 - Sticky Footer
+
What We're Doing
+
We're going to continue styling the blog by making the Footer component we created in VuePress Tutorial 8 - Custom Footer into a sticky footer. We were going to be adding a highlight effect when hovering over the SVGContent not supported 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.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
Now let's get started by discussing what a sticky footer is.
+
What is a Sticky Footer?
+
A sticky footer adheres or sticks 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 homepage, then the footer will still stick to the bottom of the page instead of appearing directly below the content above it.
+
There are multiple ways to add a sticky footer to your site, but we're only going to discuss how to use the CSS calc() function. If you're interested in learning about the other ways of adding a sticky footer, then check out Sticky Footer, Five WaysContent not supported.
+
Sticky Footer Styling
+
Here's what the index.styl file looks like after adding the sticky footer styling:
The div tag with a class of theme-container contains all of the content of the blog except for the footer tag.
+
So, here we're using min-height: calc(100vh - 10.3125rem) to set the minimum height of the content inside of the div tag with a class of theme-container to be 100vh minus 10.3125rem which is the height of the Footer component including the top and bottom padding.
+
The unit of vh is relative to 1% of the height of the viewport which is the browser window size, so 100vh is 100% of the height of the viewport.
+
So, when we subtract 10.3125rem from 100vh, we're subtracting the height of the Footer component from 100% of the viewport height.
+
This means the minimum height of the content inside of the div tag with a class of theme-container will be the entire homepage height minus the height of the Footer component.
+
After setting this style, notice how the Footer component is now pushed to the bottom of the page. This is how we get the Footer component to stick to the bottom of the page.
+
Also, since we added this style to the index.styl file, this style will be applied globally to the blog which is fine since the Footer component will be used on every page in the blog.
+
Using a Fixed Footer Size
+
We're using a fixed size for the height of the Footer 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 Footer component, then it may be worth looking into implementing the flexbox or grid methods for adding a sticky footer which you can find in the Sticky Footer, Five WaysContent not supported post.
+
+
If you have questions about the CSS discussed above, then check out these resources:
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 SVGContent not supported icons.
+]]>
+
+
+ VuePress Tutorial 12 - Highlight SVGs on Hover
+ https://codemonkeys.tech/vuepress-tutorial-12/
+ https://codemonkeys.tech/vuepress-tutorial-12/
+ VuePress Tutorial 12 - Highlight SVGs on Hover
+ 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! 🍌🐒
+ Thu, 08 Sep 2022 18:18:00 GMT
+
VuePress Tutorial 12 - Highlight SVGs on Hover
+
What We're Doing
+
We're now ready to add a highlight effect when hovering over the SVGContent not supported icons. The method we'll be using doesn't require a lot of styling, but it does require us to edit the fill attribute of the SVGContent not supported icons.
+
We'll demonstrate how to edit the fill attribute by manually editing the files as well as using a Command-line Interface (CLI) command provided by vuepress-plugin-svg-iconsContent not supported which will automate the process and optimize the files.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Now let's begin by manually editing one of the icon files.
+
Manual Editing
+
When we downloaded the icons from iconfontContent not supported we downloaded them with a fill attribute which will override the color we set for the hover effect.
+
To fix this issue we can manually remove the fill attribute from each icon file.
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 fill attribute or search for fill in the file to be able to easily find and remove it.
+
+
Icon Styles
+
Now that we have removed the fill attribute from the file, we can add the styling to highlight the icon when hovering over it.
+
Here's what the Footer.vue file looks like after adding the hover effect:
svg:hover applies the hover pseudo-class to the svg selector which will apply the styles defined inside of it when the user hovers their pointer over the svg tag.
+
fill: $accentColor changes the fill of the svg tag to be the accent color.
+
+
Notice the icon fill is now set to be the accent color even if you're not hovering over the icon.
+
This is because we haven't set a fill attribute value for when the user isn't hovering over the icon, so it falls back to the value set in svg:hover.
+
To fix this issue we'll add the following styling to the Footer.vue file:
fill: $textColor sets the fill of the svg to be the text color when the user isn't hovering over the icon.
+
+
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.
+
To set the hover effect for the other icons, you will need to remove the fill attribute from the other icon files.
+
If you have questions about the CSS discussed above, then check out these resources:
After running the script, the SVGContent not supported files will be optimized which includes removing the fill attribute from the files.
+
The hover effect should now be applied to each icon assuming you added the styling from the section above.
+
If you have any questions or want to learn more about the plugin, then check out the guideContent not supported.
+
You can also check out SVGOContent not supported if you want to learn more about the optimization tool including CLI usage, configuration, API usage, etc.
+
Optimized Icon Example
+
Here's the contents of the optimized GitHub.svg file:
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.
+
+
If you compare the optimized file with the original file above, you'll notice a lot of unnecessary information was removed including the fill attribute without affecting the rendering of the icons.
+
Next Steps
+
In the next tutorial we'll be styling the navbar by updating the background color, height, border, etc.
+]]>
+
+
+ VuePress Tutorial 14 - Dropdown Menu Styling
+ https://codemonkeys.tech/vuepress-tutorial-14/
+ https://codemonkeys.tech/vuepress-tutorial-14/
+ VuePress Tutorial 14 - Dropdown Menu Styling
+ 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! 🍌🐒
+ Thu, 15 Sep 2022 22:17:00 GMT
+
VuePress Tutorial 14 - Dropdown Menu Styling
+
What We're Doing
+
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 nav-dropdown and dropdown-item which are provided by the default themeContent not supported.
+
To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Before we start styling the dropdown menu, we're going to force an element state of hover on the div tag with a class of dropdown-wrapper. This will ensure we can see the changes we're making to the dropdown menu even when we move the cursor away from the dropdown-wrapper class.
+
To do this we need to select the dropdown-wrapper class in the Elements tab.
+
Here's the location of the dropdown-wrapper class in the HTML:
After selecting the dropdown-wrapper class in the Elements tab, we need to go to the Styles tab, click on the :hov tab, then force the element state of hover by checking the :hover checkbox.
+
The dropdown menu should now be shown even when the cursor is moved away from the dropdown-wrapper class.
+
Nav Dropdown
+
We're now ready to begin styling the dropdown menu.
+
HTML Location
+
We're going to begin the styling by locating where the nav-dropdown class is in the HTML:
From the HTML above we can see that the nav-dropdown class is attached to a ul tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.
+
Styling
+
This means in the index.styl file we can nest the nav-dropdown class inside of the nav-item class and apply the following styles:
text-align: center horizontally aligns the text in the dropdown menu.
+
background-color: $backgroundColor sets the background color of the dropdown menu to be $backgroundColor which is a global styling variable we set in the palette.styl file.
+
border: 0.125rem solid $borderColor adds a border around the dropdown menu with a thickness of 0.125rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
+
padding: 0.8rem 0 adds a padding of 0.8rem to the top and bottom and 0 to the left and right of the dropdown menu.
+
+
Dropdown Item
+
We're now ready to style the dropdown-item class.
+
HTML Location
+
Here's the location of the dropdown-item class in the HTML:
From the HTML above we can see that there are two dropdown-item classes. Each one is attached to an li tag and is a child of the ul tag with a class of nav-dropdown.
+
Also, notice the h4 tag which is a child of the li tag with a class of dropdown-item. We'll be styling this h4 tag as well.
+
Styling
+
In the index.styl file we can nest the dropdown-item class inside of the nav-dropdown class as well as nest the h4 tag inside of the dropdown-item class and apply the following styles:
padding-bottom: 0.4rem adds a padding of 0.4rem to the bottom of each of the dropdown items.
+
border-top: 0.0625rem solid $borderColor adds a border to the top of the h4 tag, i.e., the By Topics text with a thickness of 0.0625rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
+
cursor: text sets the cursor when pointing over the h4 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.
+
margin: 0.45rem 0.375rem 0 adds a margin of 0.45rem to the top, 0.375rem to the left and right, and 0 to the bottom of the h4 tag, i.e., the By Topics text.
+
+
If you have questions about the CSS discussed above, then check out these resources:
+]]>
+
+
+ VuePress Tutorial 13 - Navbar Styling
+ https://codemonkeys.tech/vuepress-tutorial-13/
+ https://codemonkeys.tech/vuepress-tutorial-13/
+ VuePress Tutorial 13 - Navbar Styling
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to style the navbar for your VuePress site, then check out VuePress Tutorial 13 - Navbar Styling! 🍌🐒
+ Sun, 11 Sep 2022 17:11:00 GMT
+
VuePress Tutorial 13 - Navbar Styling
+
What We're Doing
+
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 default themeContent not supported: navbar, site-name, links, search-box, nav-links, nav-item, and dropdown-title.
+
To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
display: flex defines a flex container for all of the direct children of the header tag with a class of navbar.
+
align-items: center vertically centers the flex items, i.e., the direct children of the header tag with a class of navbar.
+
height: 4.5rem sets the height of the navbar to be 4.5rem.
+
background-color: $backgroundColor sets the background color of the navbar to be $backgroundColor which is a global styling variable we set in the palette.styl file.
+
border-bottom-width: 0.125rem sets the border bottom width of the navbar to be 0.125rem.
+
+
Site Name Class
+
After locating and styling the navbar class, we're ready to move on to the site-name class.
+
HTML Location
+
Here's the location of the site-name class in the HTML:
From the HTML above we can see that the site-name class is attached to a span tag and is a child of the a tag with a class of home-link which is a child of the header tag with a class of navbar.
+
Styling
+
This means in the index.styl file we can nest the site-name class inside of the navbar class and apply the following style:
background-color: transparent sets the background color behind the search box and of the links on the right side of the navbar to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the links class.
+
height: 3rem sets the height of the div tag which contains the search box and the links on the right side of the navbar to be 3rem.
+
align-items: center vertically centers the flex items, i.e., the direct children of the div tag with a class of links which was given a style of display: flex by the default themeContent not supported.
+
+
Search Box Class
+
We've finished styling the links class, so let's begin the styling of the search-box class.
+
HTML Location
+
Here's the location of the search-box class in the HTML:
margin-right: 1.5rem adds a margin of 1.5rem to the right of the search box.
+
font-size: 1.125rem sets the font size of the text in the input tag to be 1.125rem.
+
background-color: transparent sets the background color of the input tag to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the input tag.
+
border-width: 0.125rem sets the width of the border around the input tag to be 0.125rem.
+
color: $textColor sets the color of the text in the input tag to be $textColor which is a global styling variable we set in the palette.styl file.
+
+
Viewing the font-size and color Styles
+
To see the font-size and color 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 $accentColor which is a global styling variable we set in the palette.styl file. This effect is provided by the default themeContent not supported and uses the focus pseudo-class.
+
+
Nav Links Class
+
Now that we have styled the search-box class and its child input tag, we're ready to move on to the styling of the nav-links class.
+
HTML Location
+
Here's the location of the nav-links class in the HTML:
From the HTML above we can see that there are four nav-item classes. Each one is attached to a div tag and is a child of the nav tag with a class of nav-links.
+
Styling
+
This means in the index.styl file we can nest the nav-item class inside of the nav-links class and apply the following styles:
.nav-item:first-child applies the first-child pseudo-class to the .nav-item selector. The first-child 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 div tag with a class of nav-item in the group of sibling div tags that have the class of nav-item.
+
margin-left: 0 adds a margin of 0 to the left of the first div tag with a class of nav-item within the group of sibling div tags that have a class of nav-item.
+
margin-left: 1.75rem adds a margin of 1.75rem to the left of all of the div tags that have a class of nav-item except for the first one since that is being styled by the first-child pseudo-class.
+
+
Dropdown Title Class
+
After finishing the styling for the nav-item class, we're now ready to move on to the styling of the dropdown-title class.
+
HTML Location
+
Here's the location of the dropdown-title class in the HTML:
From the HTML above we can see that the dropdown-title class is attached to a button tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.
+
Styling
+
This means in the index.styl file we can nest the dropdown-title class inside of the nav-item class and apply the following style:
In the next tutorial we'll be styling the dropdown menu in the navbar by updating the background color, border, padding, etc.
+]]>
+
+
+ VuePress Tutorial 15 - Blog Plugin
+ https://codemonkeys.tech/vuepress-tutorial-15/
+ https://codemonkeys.tech/vuepress-tutorial-15/
+ VuePress Tutorial 15 - Blog Plugin
+ 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! 🍌🐒
+ Wed, 21 Sep 2022 12:26:00 GMT
+
VuePress Tutorial 15 - Blog Plugin
+
What We're Doing
+
It's now time to install and begin the process of configuring @vuepress/plugin-blogContent not supported. 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 document classification, permalinks, and directory classification.
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
PaginationContent not supported which allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.
+
Client APIContent not supported which allows you to access global variables that contain data about pagination, frontmatter, and the various services the plugin provides.
+
+
We'll be discussing pagination and the Client API in more detail in future tutorials.
+
Installation
+
We're now ready to discuss the installation of the plugin.
+
Using the Tutorials Repo
+
If you're following along with the tutorials, then when you switch to the tutorial-15 branch you can run the following command to install the package instead of running the installation command:
+
+
+
yarn
+
+
1
+
+
npminstall
+
+
1
+
+
This will ensure you have the same version used in the blog since the command uses the version specified in the yarn.lock file during the installation.
+
Using the Installation Command
+
To install the blog plugin in your own project you can run the following command:
+
+
+
yarnadd -D @vuepress/plugin-blog
+
+
1
+
+
npminstall -D @vuepress/plugin-blog
+
+
1
+
+
Installing the Same Blog Plugin Version
+
If you want to ensure you're installing the same version being used in the tutorials and blog, then run yarn upgrade @vuepress/plugin-blog@1.9.4.
+
+
Updated package.json File
+
After installing the plugin, the package.json file should look something like this:
+
+
+
{
+ "name":"code-monkeys-blog-tutorials",
+ "version":"1.0.0",
+ "description":"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!",
+ "main":"index.js",
+ "repository":{
+ "type":"git",
+ "url":"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git"
+ },
+ "author":{
+ "name":"J the Code Monkey",
+ "email":"support@codemonkeys.tech",
+ "url":"https://www.codemonkeys.tech/"
+ },
+ "license":"GPL-3.0-or-later",
+ "scripts":{
+ "docs:dev":"vuepress dev docs",
+ "docs:build":"vuepress build docs",
+ "svgo":"vuepress svgo docs"
+ },
+ "devDependencies":{
+ "@goy/vuepress-plugin-svg-icons":"^4.2.3",
+ "@vuepress/plugin-blog":"^1.9.4",
+ "vuepress":"1.8.2"
+ }
+}
+
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.
+
The plugins will only be used though if you enable them in the config.js file.
+
They can also be installed as standalone plugins, so you don't need to use the blog plugin to use them for your site.
+
We'll be discussing these plugins in more detail in future tutorials.
+
Usage
+
To use the blog plugin we need to add the following to the config.js file which should now look something like this:
The blog plugin provides a document classifier which is a set of functions that handles the classifications of pages with the same characteristics.
+
These characteristics for pages in a blog may consist of:
+
+
Pages in the same directory, e.g., a _posts directory.
+
Pages containing the same frontmatter key, e.g., tag: js which signifies those pages contain content related to js, i.e., JavaScript.
+
+
Another common requirement is the ability to group all pages as well as pages with specific tags for pagination.
+
Before discussing directory classification, we're going to first define what a permalink is as well as discuss how they're built and configured. This will give us a better understanding of how the blog plugin uses permalinks to build customizable links for blog posts which is preferable to using the default way of creating links.
+
Permalinks
+
A permalink is a URL that is intended to remain unchanged for a long time. This leads to links that are less susceptible to link rotContent not supported 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.
+
VuePress v1Content not supported provided support for creating customizable links by introducing the ability to build permalinks.
+
Template Variables
+
We're able to build permalinks by using the following template variables:
+
+
+
+
Variable
+
Description
+
+
+
+
+
:year
+
Published year of post (4-digit)
+
+
+
:month
+
Published month of post (2-digit)
+
+
+
:i_month
+
Published month of post (without leading zeros)
+
+
+
:day
+
Published day of post (2-digit)
+
+
+
:i_day
+
Published day of post (without leading zeros)
+
+
+
:slug
+
Slugified file path (without extension)
+
+
+
:regular
+
Permalink generated by VuePress by default.
+
+
+
+
Default Configuration
+
The default configuration for permalinks is /:regular.
+
The :regular template variable will first check if the Markdown files in the documents directory which in our case is the docs directory are index files, i.e., README.md or index.md.
+
+
If they're index files, they get converted to URLs without extensions that are based on the file hierarchy.
+
If they're not index files, they get converted to URLs with html extensions that are based on the file hierarchy.
+
+
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 docs directory:
+
+
+
+
Relative Path
+
Page Routing
+
+
+
+
+
/README.md
+
/
+
+
+
/foo/README.md
+
/foo/
+
+
+
/foo.md
+
/foo.html
+
+
+
/foo/bar.md
+
/foo/bar.html
+
+
+
+
Using Vue Files
+
Files with a vue extension follow the same conventions described for Markdown files above, e.g., /README.vue gets converted to /.
We'll be leaving the permalink property with the default value of /:regular, and we'll use the configuration provided by the blog plugin to customize the permalinks for each blog post.
+
+
Local Configuration
+
It's also possible to set a permalink locally for a single page which overrides any globally set configuration.
+
This is done be setting the permalink property in the frontmatter of the Markdown file:
+
+
+
---
+title: Local Permalink
+permalink: /using-a-local-permalink
+---
+
1 2 3 4
+
+
This will set the permalink property to be /using-a-local-permalink instead of following the global configuration.
+
Now that we have an understanding of document classification and permalinks, let's move onto the directory classifier which handles classifying pages placed in the same directory.
+
Directory Classification
+
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 _posts directory inside of the docs directory. The docs directory for your site should now look something like this:
By default VuePressContent not supported will create the following page URLs since it uses the /:regular template variable described above when building the links:
+
+
/_posts/2020-07-03-example-page-1.html
+
/_posts/2021-11-16-example-page-2.html
+
/_posts/2022-05-08-example-page-3.html
+
+
You should now be able to navigate to these pages in the browser:
The customized permalinks 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 config.js file. We'll be discussing these other properties and their default values below.
+
The previously provided links still work because they get converted to the customized permalinks when navigating to those pages.
+
Unknown Custom Element
+
When navigating to the links if you inspect the browser then go to the Console, you'll see the following error: Unknown custom element: <Post>.
+
+
This error is occurring because the plugin is looking for a Post layout component in the layouts directory which we haven't created yet.
+
Before creating a Post layout component to fix this error, we're going to first add the path property.
+
path
+
The path 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.
+
The expected type is a string, and the default value is /${id}/ where ${id} is the value of the id property we previously set.
+
This means you don't need to explicitly set the path property if you're going to be using the same value as the id property. We'll be using a value of /posts/ for the path 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.
Notice this link has the value of the path property in it, i.e., /posts/. 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.
+
Currently, when navigating to that link the Layout component provided by the default themeContent not supported is displayed. The blog plugin will fallback to using the Layout component if it's unable to find an IndexPost layout component in the layouts directory.
+
This means we can create an IndexPost layout component that specifically handles the layout of the paginated list of all of the posts instead of using the Layout component.
+
Creating the IndexPost Layout
+
To create the IndexPost layout component we're going to add an IndexPost.vue file inside of the layouts directory. The layouts directory for your site should now look something like this:
We'll continue developing the IndexPost layout component in a future tutorial.
+
layout
+
We're now ready to add the layout property which is used to specify which layout to use for the entry page.
+
The expected type is a string, and the default value is 'IndexPost' || 'Layout'.
+
From the default value we can see why the entry page originally defaulted to using the Layout component before we created the IndexPost layout component. Since the blog plugin looks for the IndexPost 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.
+
It's also possible to use a custom value for the layout property, e.g., you could use a value of MyIndexPost which you would have to explicitly set in the config.js file. Then you would have to create a MyIndexPost.vue file inside of the layouts directory.
We're now going to fix the Unknown Custom Element error we got after adding the dirname property. To fix this error we need to create the previously mentioned Post layout component.
+
Creating the Post Layout
+
The Post layout component is used to handle the layout for individual post pages.
+
To create the Post layout component we're going to add a Post.vue file inside of the layouts directory. The layouts directory for your site should now look something like this:
We'll continue developing the Post layout component in a future tutorial.
+
itemLayout
+
We're now ready to add the itemLayout property which is used to specify which layout to use for individual post pages.
+
The expected type is a string, and the default value is 'Post'.
+
From the default value we can see why the blog plugin looks for a Post layout component. Since the blog plugin looks for the Post 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.
+
It's also possible to use a custom value for the itemLayout property, e.g., you could use a value of MyPost which you would have to explicitly set in the config.js file. Then you would have to create a MyPost.vue file inside of the layouts directory.
We're now ready to add the itemPermalink property which is used to build customized permalinks for each blog post.
+
The expected type is a string, and the default value is '/:year/:month/:day/:slug'.
+
From the default value we can see how the blog plugin built the customized permalinks after only setting the dirname 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.
Here's a table that summarizes the relationship between the page URLs the blog plugin builds using customized permalinks and the layout components.
+
+
+
+
URLs
+
Layouts
+
+
+
+
+
/posts/
+
IndexPost (falls back to Layout)
+
+
+
/2020/07/03/example-page-1/
+
Post
+
+
+
/2021/11/16/example-page-2/
+
Post
+
+
+
/2022/05/08/example-page-3/
+
Post
+
+
+
+
Next Steps
+
In the next tutorial we'll be discussing the configuration for the pagination property as well as how to access the pagination data in the layout components by using the Client API.
+]]>
+
+
+ VuePress Tutorial 16 - Pagination
+ https://codemonkeys.tech/vuepress-tutorial-16/
+ https://codemonkeys.tech/vuepress-tutorial-16/
+ VuePress Tutorial 16 - Pagination
+ Hey fellow Code Monkeys!!! 🐵 Ready to learn about the pagination feature provided by the blog plugin, then check out VuePress Tutorial 16 - Pagination! 🍌🐒
+ Fri, 30 Sep 2022 20:07:00 GMT
+
VuePress Tutorial 16 - Pagination
+
What We're Doing
+
Now it's time to learn more about the pagination feature and the Client API provided by @vuepress/plugin-blogContent not supported. In this tutorial we're going to begin the configuration of the pagination property as well as discuss the globally scoped $pagination variable provided by the Client API.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
As mentioned in the previous tutorial pagination allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.
Next, we'll add the lengthPerPage property which sets the maximum number of posts to display per page.
+
The expected type is a number, and the default value is 10.
+
When the number of posts is greater than the lengthPerPage value, the blog plugin will generate the necessary pages to display all of the posts.
+
The blog plugin does this by adding page/n/ onto the end of the entry page where n represents the number of the page.
+
So, the second page in the paginated list of pages would be page/2/.
+
If you remember from the previous tutorial VuePress Tutorial 15 - Blog Plugin, the entry page is set by the path property which was given a value of /posts/.
+
This means in our case the blog plugin will generate pages with the following format: /posts/page/n/ where n once again represents the number of the page.
+
We also created the following posts in the _posts directory in the previous tutorial:
+
+
2020-07-03-example-page-1.md
+
2021-11-16-example-page-2.md
+
2022-05-08-example-page-3.md
+
+
Since we only have three posts and the default value for lengthPerPage is 10, the blog plugin won't generate any more pages. You can test this by attempting to navigate to the following page:
In a future tutorial we'll be updating the value of lengthPerPage to be 5 which is the current value being used in the blog.
+
+
layout
+
Now we're going to add the layout property which is used to specify which layout component to use for the pagination pages except for the entry page. The entry page uses the IndexPost layout component which we set in the previous tutorial.
+
The expected type is a string, and the default value is 'DirectoryPagination' || 'Layout'.
+
Since we haven't created a DirectoryPagination layout component in the layouts directory, the layout property uses the other default value which is the Layout component. In our case the Layout component is provided by the default themeContent not supported.
+
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:
If you want your pagination pages except for the entry page to use a layout specifically designed for them, then you can create a DirectoryPagination.vue file inside of the layouts directory. Since DirectoryPagination is the default value for the layout property you won't need to explicitly set it in the config.js file.
+
We'll be using the same layout for the entry page and for the other pagination pages, so we're going to provide a custom value of IndexPost to the layout property.
Here's a table that summarizes the relationship between the pagination and post page URLs the blog plugin builds and the layout components:
+
+
+
+
URLs
+
Layouts
+
+
+
+
+
/posts/
+
IndexPost (falls back to Layout)
+
+
+
/posts/page/2/
+
IndexPost (falls back to DirectoryPagination or Layout)
+
+
+
/2020/07/03/example-page-1/
+
Post
+
+
+
/2021/11/16/example-page-2/
+
Post
+
+
+
/2022/05/08/example-page-3/
+
Post
+
+
+
+
Post Pages Reminder
+
The post pages were given the URLs above by building customized permalinks using the format specified by the itemPermalink property, and the layout components used by the post pages were set by the itemLayout property. Both of these properties can be found in the config.js file, and you can refer to the previous tutorial VuePress Tutorial 15 - Blog Plugin if you have any questions about the post pages.
+
+
prevText
+
Now we'll add the prevText 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 pagination pages.
+
The expected type is a string, and the default value is 'Prev'.
+
We'll be using the default value of 'Prev' for the prevText 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.
+
It's also possible to use a custom value for the prevText property, e.g., you could use a value of Older which you would have to explicitly set in the config.js file.
We're now ready to add the nextText 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 pagination pages.
+
The expected type is a string, and the default value is 'Next'.
+
We'll be using the default value of 'Next' for the nextText 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.
+
It's also possible to use a custom value for the nextText property, e.g., you could use a value of Newer which you would have to explicitly set in the config.js file.
We're now going to take a look at how to use the Client API to access the pagination data in the layout components used by the blog plugin.
+
The Client API 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 Using Vue in MarkdownContent not supported documentation if you're interested.
+
The Client API provides the following globally scoped variables: $pagination, $frontmatterKey, and $service. We'll be focusing on the $pagination variable in this tutorial.
+
If you have any questions or want to learn more about the Client API, then check out the Client APIContent not supported documentation.
+
$pagination
+
We're going to discuss each property the $pagination variable exposes as well as demonstrate how to access the properties in the layout components.
+
To get a better understanding of the pagination data we're going to log each property to the console. The logging will be added to the created lifecycle hook in the script tag. To view the data in the console we're going to inspect the browser then go to the Console tab.
+
If you have questions about the created lifecycle hook, then check out this resources:
If you access the $pagination variable at a route which doesn't match any classification, i.e., the route isn't a pagination page, then the value of $pagination will be null.
+
This means when developing layout components you should check if $pagination has a value of null before using the variable.
+
+
pages
+
The $pagination.pages property is an array of objects where each object contains data related to post pages that are accessible on the current pagination page.
+
Since the $pagination.pages property contains data related to post pages that are accessible on the current pagination page, the data of $pagination.pages will be different depending on which pagination page is being viewed.
+
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.
+
Here are the links to both the entry page and the second page:
Let's add the code to log the $pagination.pages property in the layout component which in our case is being used by both the entry page and the second page, i.e., the IndexPost.vue file:
If you're using different layout components for your entry page and the other pagination pages, then you'll need to add the logging of the $pagination.pages property to both of the files.
+
+
After adding the above code to the IndexPost.vue file and navigating to the entry page, the console should log an array of page objects with the following data:
Since the lengthPerPage property was given a value of 2 and we have three post pages, the $pagination.pages property for the entry page contains two page objects one for each post.
+
Formatting Differences
+
The log in the Console tab will be formatted differently than the $pagination.pages data shown here which was formatted using JSONContent not supported. The properties and values will be the same though.
+
+
After navigating to the second page, the console should log an array consisting of one page object with the following data:
layout: Layout component used by the post pages which is set using the itemLayout property in the config.js file.
+
permalink: Permalink format used for the post pages which is set using the itemPermalink property in the config.js file.
+
id: Unique id for the current classifier which is set using the id property in the config.js file.
+
key: Unique key generated for each page in the site.
+
path: Path for the post page which uses a customized permalink built from the format specified by the itemPermalink property found in the config.js file.
+
pid: Represents the pid for the current classifier which is set using the id property in the config.js file.
+
regularPath: Default path for the post page which is built using the :regular template variable.
+
relativePath: Location of the post page Markdown file relative to the documents directory which in our case is the docs directory.
+
+
The $page Variable
+
The page objects in the $pagination.pages property are the same page objects found by logging the globally scoped $page variable in the Post layout component. After writing the code to log the $page variable, you can view the log by navigating to a post page, e.g., http://localhost:8080/2020/07/03/example-page-1/Content not supported.
+
To learn more about the $page variable and other globally scoped variables you can take a look at the Global ComputedContent not supported documentation.
+
+
length
+
The $pagination.length property is a number whose value is determined by the number of pagination pages.
+
Let's add the code to log the $pagination.length property in the IndexPost.vue file:
If we navigate to either the entry page or the second page, the console should log a value of 2 since in our case there are a total of two pagination pages.
+
hasPrev
+
The $pagination.hasPrev property is a boolean which has a value of true when a previous pagination page exists and a value of false when a previous pagination page doesn't exist.
+
Let's add the code to log the $pagination.hasPrev property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of false. This makes sense since the entry page is the first pagination page which means there is no previous pagination page.
+
If we navigate to the second page, the console should log a value of true which makes sense since the entry page is before the second page.
+
prevLink
+
The $pagination.prevLink property is a string whose value is the previous pagination page path if a previous pagination page exists and a value of null when a previous pagination page doesn't exist.
+
Let's add the code to log the $pagination.prevLink property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of null. This makes sense since the entry page is the first pagination page which means there is no link to a previous pagination page.
+
If we navigate to the second page, the console should log a value of /posts/ which makes sense since the previous link before the second page is the entry page which has a path of /posts/.
+
hasNext
+
The $pagination.hasNext property is a boolean which has a value of true when a pagination page exists after the current pagination page and a value of false when a pagination page doesn't exist after the current pagination page.
+
Let's add the code to log the $pagination.hasNext property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of true. This makes sense since there is a next page in the paginated list of pages, i.e., the second page.
+
If we navigate to the second page, the console should log a value of false which makes sense since in our case there is no pagination page after the second page.
+
nextLink
+
The $pagination.nextLink property is a string whose value is the path of the next pagination page if it exists and a value of null when the next pagination page doesn't exist.
+
Let's add the code to log the $pagination.nextLink property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of /posts/page/2/. This makes sense since the entry page is the first pagination page, and in our case there is a link to the next pagination page, i.e., the second page.
+
If we navigate to the second page, the console should log a value of null. This makes sense since in our case the second page is the last page in the list of pagination pages which means there is no link to the next pagination page.
+
getSpecificPageLink()
+
The $pagination.getSpecificPageLink() is a method that accepts a page number and returns the path of a pagination page. The page numbers start at 0, so to get the entry page path you need to provide a value of 0. If an input is provided that is unable to return a path to a pagination page, then an error is thrown which can be found in the Console tab.
+
Let's add the code to log the output of the $pagination.getSpecificPageLink() method in the IndexPost.vue file:
Since we used a page number of 0 in the code above, the console should log a value of /posts/. This makes sense since a value of 0 refers to the entry page which has a path of /posts/.
+
If we want to get the path of the second page, then we can use a value of 1 as the page number, so the console should log a value of /posts/page/2/. This makes sense since a value of 1 refers to the second page which has a path of /posts/page/2/.
+
Next Steps
+
In the next tutorial we'll begin the development of the IndexPost layout component which will involve using the $pagination variable provided by the Client API.
We're now ready to begin the development of the IndexPost layout component. We'll be using the globally scoped $pagination variable provided by the blog plugin Client APIContent not supported to access the pagination data. In this tutorial we'll be focusing on the post title and preview pagination data. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Before accessing and displaying the pagination data, we're going to first give the component a name and remove the created lifecycle hook which we were using in the previous tutorial to log the pagination data to the console.
To display the pagination data we're going to loop over the $pagination.pages property which if you remember from the previous tutorial VuePress Tutorial 16 - Pagination is an array of objects where each object contains data related to post pages that are accessible on the current pagination page.
+
Using the v-for Directive
+
Since $pagination.pages is an array that we want to loop over, we're going to use the v-for directive to render a list of post pages based on the data within the array. The v-for directive uses the following syntax v-for="item in items" where items is the array you want to loop over, and item is an alias for the array element being iterated on. Here, items corresponds to $pagination.pages, and we'll use post as the alias for the array element being iterated on. This means our v-for directive will be v-for="post in $pagination.pages".
+
Using the key Attribute
+
When using the v-for directive the common best practice is to bind a key attribute where each value given to the key attribute should be unique. The key attribute uses the following syntax :key="item.id" where id is a property with a unique value for every item in the items array.
+
You really only need to use the key attribute when the rendered list relies on child component state or temporary Document Object Model (DOM)Content not supported state, e.g., form input values . This means we don't actually need to include the key attribute since we're currently just rendering a static list.
+
However, we're going to bind the key attribute in case we ever need to use it in the future. To ensure the key attribute has a unique value for each item in the list, we're going to use the key property which is a unique value generated for each page object within the $pagination.pages array. Here's what the key attribute will look like in our case :key="post.key".
+
Determining a Tag
+
Now we need to determine what tag we want to add our v-for directive and key attribute to. We're going to add them to a div tag which will allow us to wrap the pagination data for each post in the list of post pages. Here's what the div tag is going to look like after adding the v-for directive and key attribute <div v-for="post in $pagination.pages" :key="post.key"></div>.
+
Using a Root Element
+
Since the div tag uses the v-for 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 template tag because the template tag can only have one root element. To resolve this issue we're going to wrap the div tag that's using the v-for directive within another div tag which will serve as the root element.
+
Adding the Loop
+
Here's what the IndexPost.vue file should now look like:
After updating the IndexPost.vue file with the code above, if you navigate to the entry page http://localhost:8080/posts/Content not supported you won't notice any changes on the page. This is because we've rendered div tags without any of the pagination data inside of them.
+
If you navigate to the entry page, inspect the browser, and go to the Elements tab, the HTML for the body tag should now look something like this:
Notice how the entry page consists of two div tags wrapped inside of the div tag that's being used as the root element of the template tag. Each of those div tags inside of the parent div tag corresponds to a post page that is accessible on the entry page.
+
Page 2 HTML
+
If you navigate to the second page http://localhost:8080/posts/page/2/Content not supported you also won't notice any changes on the page. This is because we've rendered a div tag without any of the pagination data inside of it.
+
The HTML for the body tag for the second page should now look something like this:
Notice how the second page consists of one div tag wrapped inside of the div tag that's being used as the root element of the template tag. There is only one div tag since we have one post page accessible on the second page.
+
Post Titles
+
Before we can access the post title data using the $pagination.pages property, we need to first add titles to the post files we created in the _posts directory:
+
+
2020-07-03-example-page-1.md
+
2021-11-16-example-page-2.md
+
2022-05-08-example-page-3.md
+
+
Adding Titles to Post Files
+
Since the post files are Markdown files, we can add titles to the files by adding a heading level one, e.g., # Heading Level 1 to each file which gets converted to the following HTML <h1>Heading Level 1</h1>.
+
Here's what the post files look like after adding the titles:
+
+
+
# Example Post 1
+
+
1
+
+
+
+
# Example Post 2
+
+
1
+
+
+
+
# Example Post 3
+
+
1
+
+
If you have any questions or want to learn more about Markdown headings, then check out the Basic SyntaxContent not supported guide.
+
Adding Titles to $page Variables
+
When VuePressContent not supported encounters a heading level one in a Markdown file it automatically adds a title property to the globally scoped $page variable.
+
The page objects in the $pagination.pages property are the same as the $page variables used by the post pages which means each page object will now have a title property that we can access in the IndexPost layout component.
+
You can take a look at the Global ComputedContent not supported documentation to learn more about the $page variable and other globally scoped variables.
+
Displaying Post Titles
+
Now that we can access the post titles in the $pagination.pages property, we're ready to render the post titles on the pagination pages.
+
We're going to display the post titles as h2 tags which we'll be wrapping inside of two div tags. We'll be using the div tags to add styling to the list of post pages in a future tutorial.
+
To display the post titles we'll be using Text InterpolationContent not supported which allows us to use variables inside of HTML tags by using the "Mustache" syntax. The "Mustache" syntax consists of wrapping a variable inside of double curly braces.
+
We can access the title property on each page object in our loop by using post.title. We can then display this by using the text interpolation described above.
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 $pagination.pages property, we need to first add previews to the post files we created in the _posts directory:
+
+
2020-07-03-example-page-1.md
+
2021-11-16-example-page-2.md
+
2022-05-08-example-page-3.md
+
+
Adding Previews to Post Files
+
Since the post files are Markdown files, we can use YAMLContent not supported frontmatter blocks in the files and define a custom variable preview.
+
Here's what the post files look like after adding the preview variables:
+
+
+
---
+preview: Example Post 1 preview
+---
+
+# Example Post 1
+
1 2 3 4 5
+
+
+
+
---
+preview: Example Post 2 preview
+---
+
+# Example Post 2
+
1 2 3 4 5
+
+
+
+
---
+preview: Example Post 3 preview
+---
+
+# Example Post 3
+
The value for each post preview 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.
The page objects in the $pagination.pages property are the same as the $page variables used by the post pages which means each page object will now have a frontmatter.preview property that we can access in the IndexPost layout component.
+
You can take a look at the Global ComputedContent not supported documentation to learn more about the $page variable and other globally scoped variables.
+
Content Excerpt
+
Instead of defining the custom variable preview in the YAMLContent not supported frontmatter blocks of Markdown files, VuePressContent not supported provides the ability to use a Content ExcerptContent not supported by adding a <!-- more --> comment to a Markdown file. Any content above the comment gets extracted and exposed as a globally scoped $page.excerpt variable. This variable can then be used to render the list of post pages with excerpts for each post just like our custom variable preview. I prefer to use the custom variable preview because the <!-- more --> comment takes all of the content above it which includes any HTML as opposed to using just the text of a post.
+
+
Displaying Post Previews
+
Now that we can access the post previews in the $pagination.pages property, we're ready to render the post previews on the pagination pages.
+
We're going to display the post previews as p tags which we'll place underneath the parent div tag of the h2 tag.
When viewing the pagination 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 theme-default-content to the outermost div tag.
.theme-default-content:not(.custom) is used to select tags that have a class of theme-default-content and that don't have a class of custom by using the :not() pseudo-class. This selector is defined by the default themeContent not supported since other pages can use the theme-default-content class along with a class of custom to apply different styles than the ones shown here. The homepage is an example of a page that uses the theme-default-content class along with a class of custom to apply different styles.
+
max-width: 740px; sets the maximum width of the div tag to be 740px. If the content is greater than the max-width, then the height of the div tag will automatically be changed. If the content is smaller than the max-width, then the max-width property has no effect.
+
margin: 0 auto; sets the margins for the div tag by setting the top and bottom margins to be 0 and the left and right margins to a value of auto. The value of auto means the browser will automatically set the left and right margins to horizontally center the div tag.
+
padding: 2rem 2.5rem; sets the padding for the div tag by setting the top and bottom paddings to be 2rem and the left and right paddings to be 2.5rem.
+
@media (max-width: 959px) 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 959px.
+
padding: 2rem; sets the padding for all of the sides of the div tag to be 2rem when the width of the display area is less than or equal to 959px.
+
@media (max-width: 419px) 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 419px.
+
padding: 1.5rem; sets the padding for all of the sides of the div tag to be 1.5rem when the width of the display area is less than or equal to 419px.
+
+
If you have any questions about the CSS discussed above, then check out these resources:
The theme-default-content class is used on the global Content component within the Page and Home components provided by the default themeContent not supported. If you look at the HTML on the homepage, you'll see the theme-default-content class being used on a div tag within the main tag with a class of home. We'll be discussing the global Content component, the Page component, and the Home component in more detail in future tutorials.
+
+
IndexPost Heading
+
We're now going to add a heading to the pagination pages. This heading will be displayed on each pagination page.
+
Displaying the Heading
+
We're going to display the heading as an h1 tag which we'll be adding as the first child tag of the outermost div tag.
In the next tutorial we'll be continuing the development of the IndexPost layout component by using the $pagination variable to add images to each post in the list of post pages.
+]]>
+
+
+ VuePress Tutorial 18 - IndexPost Images
+ https://codemonkeys.tech/vuepress-tutorial-18/
+ https://codemonkeys.tech/vuepress-tutorial-18/
+ VuePress Tutorial 18 - IndexPost Images
+ Hey fellow Code Monkeys!!! 🐵 Ready to learn how to add images to the IndexPost layout component, then check out VuePress Tutorial 18 - IndexPost Images! 🍌🐒
+ Wed, 09 Nov 2022 22:15:00 GMT
+
VuePress Tutorial 18 - IndexPost Images
+
What We're Doing
+
In this tutorial we're going to continue the development of the IndexPost layout component by using the globally scoped $pagination variable to access pagination data related to images. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag like we did in the previous tutorial.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
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.
Before we can access the pagination 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.
+
Each post image has a width of 155px and a height of 185px. Using the same width and height for the post images makes the list of post pages look consistent.
The images were created using CanvaContent not supported. 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 GIMPContent not supported.
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. CanvaContent not supported and GIMPContent not supported, and some of the other image tools mentioned above offer the ability to compress your images.
+
Here are some other useful online tools for image compression:
Let's start by creating an examples directory inside of the images directory. The examples directory will be used to store the post images for each example post.
+
The directory structure for your site should now look something like this:
After adding the examples 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 examples directory. Then we'll add the post images to the directories of each example post.
+
We're going to start with the first example post by adding an example-post-1 directory inside of the examples directory. Then we'll add the image for the first example post which is named example-post-1.png inside of the example-post-1 directory.
+
The directory structure for your site should now look something like this:
For the second example post we'll be adding an example-post-2 directory inside of the examples directory. Then we'll add the image for the second example post which is named example-post-2.png inside of the example-post-2 directory.
+
The directory structure for your site should now look something like this:
For the third example post we'll be adding an example-post-3 directory inside of the examples directory. Then we'll add the image for the third example post which is named example-post-3.png inside of the example-post-3 directory.
+
The directory structure for your site should now look something like this:
After adding the post images to the blog, we now need to add a way to access each image in the IndexPost layout component which we'll accomplish by adding a custom variable img to the YAMLContent not supported frontmatter blocks of each post file. The value of the img custom variable will be the path to the image in the project.
+
We're also going to add another custom variable of alt to the YAMLContent not supported frontmatter blocks of each post file. The value of the alt custom variable will be a description of the image.
Here's what the post files look like after adding the img and alt custom variables:
+
+
+
---
+preview: Example Post 1 preview
+img: examples/example-post-1/example-post-1.png
+alt: Example Post 1 Post Picture
+---
+
+# Example Post 1
+
1 2 3 4 5 6 7
+
+
+
+
---
+preview: Example Post 2 preview
+img: examples/example-post-2/example-post-2.png
+alt: Example Post 2 Post Picture
+---
+
+# Example Post 2
+
1 2 3 4 5 6 7
+
+
+
+
---
+preview: Example Post 3 preview
+img: examples/example-post-3/example-post-3.png
+alt: Example Post 3 Post Picture
+---
+
+# Example Post 3
+
1 2 3 4 5 6 7
+
+
Adding Img and Alt to $page Variables
+
As mentioned in the previous tutorial when VuePressContent not supported encounters a YAMLContent not supported frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped $page.frontmatter variable.
+
Since the page objects in the $pagination.pages property are the same as the $page variables used by the post pages, we will now have a frontmatter.img property and a frontmatter.alt property that we can access in the IndexPost layout component.
+
Displaying Images
+
Now that we can access the values of the img and alt custom variables in the $pagination.pages property, we're ready to render the images on the pagination pages.
+
We're going to display the images using the img tag which we'll place in a div tag underneath the parent div tag of the p tag.
+
The img tag allows us to embed an image into the page. We'll be using the src and alt attributes provided by the img tag.
+
The src 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.
+
The alt attribute is optional and consists of a text description of the image which is useful for accessibilityContent not supported 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.
Here we're binding the src and alt attributes by placing a : before them which is shorthand for v-bind. This allows us to bind the JavaScript expressions to the HTML attributes.
+
Also, notice /images/ was added to the beginning of the path to the post images which we need to add since they're all located in the images directory. We don't need to include .vuepress/public in the path to the post images though because whenever you reference assets stored in the public directory that gets added automatically.
+
We also added an alternative value for the post image alt attribute in case the alt custom variable isn't present in the frontmatter of a post. This is done by using a logical OR operator, i.e., ||. Here, we're using "post.frontmatter.alt || 'Post Picture'" which means if the alt property evaluates to a falsyContent not supported value, then we'll display the Post Picture text instead.
+
If you have any questions or want to learn more about v-bind or the logical OR operator, then check these resources:
In the next tutorial we'll be continuing the development of the IndexPost layout component by beginning the process of adding the pagination buttons to the pagination pages.
+]]>
+
+
+ VuePress Tutorial 19 - Pagination Links
+ https://codemonkeys.tech/vuepress-tutorial-19/
+ https://codemonkeys.tech/vuepress-tutorial-19/
+ VuePress Tutorial 19 - Pagination Links
+ 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! 🍌🐒
+ Sat, 19 Nov 2022 20:47:00 GMT
+
VuePress Tutorial 19 - Pagination Links
+
What We're Doing
+
Every time we navigate to the entry page or the second page in the list of pagination 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 pagination links to each of the pagination pages.
Before, we use the properties to add the pagination links, we're going to add two more example posts to the blog. This will allow us to view the pagination 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.
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.
+
Here's what the 2022-07-14-example-page-4.md file and the 2022-11-10-example-page-5.md file look like after adding the titles and frontmatter:
+
+
+
---
+preview: Example Post 4 preview
+img: examples/example-post-4/example-post-4.png
+alt: Example Post 4 Post Picture
+---
+
+# Example Post 4
+
+
1 2 3 4 5 6 7
+
+
+
+
---
+preview: Example Post 5 preview
+img: examples/example-post-5/example-post-5.png
+alt: Example Post 5 Post Picture
+---
+
+# Example Post 5
+
+
1 2 3 4 5 6 7
+
+
Adding Images
+
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 examples directory. Then we'll add the post images to the directories for each example post.
For the fourth example post we'll be adding an example-post-4 directory inside of the examples directory. Then we'll add the image for the fourth example post which is named example-post-4.png inside of the example-post-4 directory.
+
The directory structure for your site should now look something like this:
For the fifth example post we'll be adding an example-post-5 directory inside of the examples directory. Then we'll add the image for the fifth example post which is named example-post-5.png inside of the example-post-5 directory.
+
The directory structure for your site should now look something like this:
Having these three pagination pages will allow us to view the pagination links in every scenario that we mentioned in the beginning of the post.
+
Order of Posts
+
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 date property to sort the posts which it looks for on the frontmatter of each post page. Since we haven't added a date 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 date custom variable to the frontmatter blocks of the post pages.
+
+
If you have any questions about adding the example pages to the _posts 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:
We're now ready to use the properties provided by the blog plugin Client APIContent not supported to add the pagination links to the pagination pages.
+
We're going to display the pagination links using two router-link components one for the previous page and one for the next page. We'll be wrapping each router-link component in a div tag.
+
We'll then wrap the div tags inside another div tag which we'll place underneath the div tag that is being used to loop over the pagination pages.
+
The router-link component is provided by Vue RouterContent not supported which gets installed when installing VuePressContent not supported. The router-link component is used for enabling user navigation for the site. The target location for the link is specified by using the to prop, and it renders as an a tag with the specified href by default.
To display the pagination link for the previous page we'll be using the $pagination.hasPrev property to check if the current pagination page has a previous page. We'll use the $pagination.prevLink property to provide the path of the previous pagination page to the router-link component to prop.
+
Similarly, to display the pagination link for the next page we'll be using the $pagination.hasNext property to check if the current pagination page has a next page. We'll use the $pagination.nextLink property to provide the path of the next pagination page to the router-link component to prop.
+
We discussed the properties above in detail in the VuePress Tutorial 16 - Pagination post, so if you need a refresher or if you have any questions read through the relevant sections in that post.
Here we're using the v-if directive to conditionally render the pagination links by using the values of the $pagination.hasPrev and $pagination.hasNext properties. The block of code using the v-if directive will only be rendered if the expression provided to it returns a truthyContent not supported value.
+
We're also binding the to prop by placing a : before it which is shorthand for v-bind. Using v-bind allows us to bind JavaScript expressions to the HTML attributes.
+
If you have any questions or want to learn more about conditional rendering or v-bind, then check these resources:
You should be able to click on the Prev pagination link, and it should take you to the previous page. You should also be able to click on the Next pagination link, and it should take you to the next page.
+
The HTML for the body tag for the second page should now look something like this:
+
+
+
<body>
+ <divid="app">
+ <divid="global-layout">
+ <divclass="theme-default-content">
+ <h1>The Scribblings of a Monkey!!!</h1>
+ <div>
+ <div>
+ <div>
+ <h2> Example Post 3 </h2>
+ </div>
+ <p> Example Post 3 preview </p>
+ </div>
+ <div>
+ <imgsrc="/images/examples/example-post-3/example-post-3.png"
+ alt="Exmple Post 3 Post Picture">
+ </div>
+ </div>
+ <div>
+ <div>
+ <div>
+ <h2> Example Post 4 </h2>
+ </div>
+ <p> Example Post 4 preview </p>
+ </div>
+ <div>
+ <imgsrc="/images/examples/example-post-4/example-post-4.png"
+ alt="Example Post 4 Post Picture">
+ </div>
+ </div>
+ <div>
+ <div>
+ <ahref="/posts/"class="router-link-active"> Prev </a>
+ </div>
+ <div>
+ <ahref="/posts/page/3/"class> Next </a>
+ </div>
+ </div>
+ </div>
+ <footerdata-v-60ae214aclass="footer">...</footer>
+ </div>
+ ...
+ </div>
+ ...
+</body>
+
You may have noticed the styling of the Prev and Next pagination 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 pagination links, respectively.
+]]>
+
+
+ VuePress Tutorial 2 - Why Use VuePress?
+ https://codemonkeys.tech/vuepress-tutorial-2/
+ https://codemonkeys.tech/vuepress-tutorial-2/
+ VuePress Tutorial 2 - Why Use VuePress?
+ Hey fellow Code Monkeys!!! 🐵 Wondering if you should use VuePress, then check out VuePress Tutorial 2 - Why Use VuePress? 🍌🐒
+ Wed, 24 Nov 2021 20:50:30 GMT
+
As well has being useful for writing technical documentation, it also has a blog pluginContent not supported which we'll be looking at in more detail in future tutorials.
After that we'll provide a list of some of the features of VuePressContent not supported, and then we'll give some quick comparisons with similar technologies.
+
Different Types of Websites
+
Before we define what an SSG 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 SSG.
+
We'll mainly be looking at each type of website in terms of search engine optimization (SEO), speed, and ease of updating.
+
Static Website
+
+
Uses static HTML pages with possible CSS and JavaScript
+
Pages are uploaded to a content delivery network (CDN) or a web host
+
+
Here's a simple diagram illustrating the process:
+
+ Content not supported
+
+
Pros
+
+
SEO-friendly since a search engine can crawl the site and fully rendered HTML pages with content are provided
+
+
Cons
+
+
Need to do a request to the server for each page a user visits which slows down the site
+
Difficult to update since you need to rewrite the same code on multiple pages, e.g., the footer
+
Has limited functionality and generally doesn't contain dynamic data
Returns an HTML page that is built on the fly for each request using templates and data
+
Each page returned is a static HTML page
+
+
Simple diagram illustrating the process:
+
+ Content not supported
+
+
Pros
+
+
SEO-friendly since each request returns a fully rendered HTML page, so a search engine can easily crawl and index the site
+
Easy to update since the server is using a templating system
+
+
Cons
+
+
Since the server has to send back fully rendered HTML pages for each request, it can slow down the page rendering
+
+
Static Site Generator (SSG)
+
+
An SSG creates pre-rendered static HTML pages using a combination of templates, components, and data
+
These static HTML pages are generated at build-time, i.e., before deployment
+
The static pages are then deployed to the web
+
+
Simple diagram illustrating the process:
+
+ Content not supported
+
+
Pros
+
+
SEO-friendly since it returns fully rendered HTML which can then be crawled and indexed
+
Navigating to new pages is fast since after the initial request the site behaves like a normal SPA
+
Easy to update since the site is component driven
+
+
Cons
+
+
Have to rebuild the static pages evey time a change is made to the site, and the build time will increase as more pages are added
+
+
Use Cases for SSGs
+
Since SSGs create static HTML pages at build-time then behave like an SPA, they are suited for websites that don't have a lot of frequent content changes.
+
+
Here are some examples:
+
+
Personal Website/Portfolio
+
Documentation
+
Blog
+
+
+
+
How it Works in VuePress
+
Like other SSGs, the static HTML pages are rendered at build-time. Then the static HTML pages are deployed to the web.
Within a theme you are able to create directories that handle global components, components, layouts, styles, and templates. You can also create files for theme configurations and app level enhancements. 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 npmContent not supported package which allows other people to easily install it.
+
The Code Monkeys Blog is currently a child theme inherited from the default theme. Eventually, I would like to look into publishing it as an npmContent not supported package.
+
We'll go over the directory structure, what each directory in a theme is used for, theme configuration, app level enhancement, and theme inheritanceContent not supported in future tutorials.
Designed for building applications whereas VuePressContent not supported is focused on content-centric static sites with a focus on technical documentation
+]]>
+
+
+ VuePress Tutorial 20 - Pagination Links Styling
+ https://codemonkeys.tech/vuepress-tutorial-20/
+ https://codemonkeys.tech/vuepress-tutorial-20/
+ VuePress Tutorial 20 - Pagination Links Styling
+ Hey fellow Code Monkeys!!! 🐵 Ready to learn how to style the pagination links, then check out VuePress Tutorial 20 - Pagination Links Styling! 🍌🐒
+ Wed, 23 Nov 2022 19:23:00 GMT
+
VuePress Tutorial 20 - Pagination Links Styling
+
What We're Doing
+
We're going to begin the process of styling the Prev and Next pagination links that we added to each of the pagination pages in the previous tutorial. To implement the styling we'll be adding the following CSS classes pagination, left-arrow, and right-arrow to the IndexPost layout component.
+
The pagination class will be used to properly space out the Prev and Next pagination links. The left-arrow and right-arrow classes will be used to add some styling to the left arrow and right arrow icons which we'll be adding using the global vp-icon component which is provided by vuepress-plugin-svg-iconsContent not supported.
+
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.
scoped is used to only apply the styles to the current component, i.e., the IndexPost layout component. We're scoping these styles since they currently only apply to the IndexPost layout component.
+
display: flex defines a flex container for all of the direct children of the div tag with a class of pagination.
+
justify-content: space-between 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 div tag with a class of pagination, i.e., the div tags that are wrapping the router-link components.
+
padding-top: 2rem adds a padding of 2rem to the top of the div tag with a class of pagination.
+
+
The pagination links should now be properly spaced out, and you can view the styling updates by navigating to the pagination pages:
We're now ready to add the left and right arrow icons to the pagination links.
+
Downloading the Icons
+
To add the left and right arrow icons to the site we need to first download the icons. To find icons for your site vuepress-plugin-svg-iconsContent not supported recommends using iconfontContent not supported. 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 #e6e6e6 and a size of 200 which is the default size.
To easily download the left and right arrow icons you can also install the browser extension SVG ExportContent not supported. 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.
+
+
Updating the Icons Directory
+
After downloading the left and right arrow icons, we'll need to add them to the icons directory which should now look something like this:
After adding the left and right arrow icons to the icons directory, the plugin will automatically load the icons and provides the global vp-icon component. To use the vp-icon component we need to pass a name attribute to it where the value is the name of the SVG file we want to use.
+
Here, the value for the name attribute will be leftArrow for the Prev pagination link and rightArrow for the Next pagination link.
+
We're going to be adding the vp-icon components inside of the corresponding router-link components.
Notice how the left arrow icon is being displayed to the left of the Prev pagination text and how the right arrow icon is being displayed to the right of the Next pagination text. This ensures the arrows and the text look correct when being displayed.
+
Styling the Icons
+
We're now going to add some styling to the left and right arrow icons. The IndexPost.vue file should now look like this:
If you downloaded the left and right arrow icons from the repository or by using the SVG ExportContent not supported browser extension, then the icons should already be optimized and you shouldn't have to run the CLI command.
+
+
Here's the CLI command you can run to optimize the icons vuepress svgo [docsDir] where [docsDir] is the docs directory for your project which in our case is docs.
After running the script, the icons should be optimized.
+
If you have questions about how the plugin implements the CLI command or about the plugin in general, then checkout the guideContent not supported.
+
You can also check out SVGOContent not supported which is the optimization tool being used by the plugin to optimize the icons.
+
Next Steps
+
In the next tutorial we're going to continue styling the IndexPost layout component by making each post in the list of posts look like a card.
+]]>
+
+
+ VuePress Tutorial 3 - Set Up and Installation
+ https://codemonkeys.tech/vuepress-tutorial-3/
+ https://codemonkeys.tech/vuepress-tutorial-3/
+ VuePress Tutorial 3 - Set Up and Installation
+ Hey fellow Code Monkeys!!! 🐵 Ready to set up and install VuePress, then check out VuePress Tutorial 3 - Set Up and Installation! 🍌🐒
+ Sun, 16 Jan 2022 05:40:00 GMT
+
VuePress Tutorial 3 - Set Up and Installation
+
Setting Up and Using GitHub
+
First we'll be going over how to create a repository on GitHubContent not supported. 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.
+
Each tutorial in this series involving code will also have a branch in the code-monkeys-blog-tutorialsContent not supported 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.
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 GitHubContent not supported.
+
If you want to create your own repository for your own project, then you need to:
+
+
Go to your profile page, click on the Repositories tab, then click the New button or on any page in the upper right corner, click the + drop-down menu, then select New repository
+
Type a short and descriptive name in the Repository name field
+
Type a description in the Description field (optional)
+
Choose if you want the repository to be Public or Private
+
Add a README.md file which you can use to describe your project in more detail and to document how to install and use your project
+
Add a .gitignore file which is used to ignore specified files and directories when making a commit, I recommend selecting the Node template from the drop-down menu
+
Add your preferred license which is used to tell others how they can use your code
+
You can also choose a different default branch name, e.g., master instead of main by clicking on the settings link
After successfully cloning the repository, you can run the following command to list both the remote-tracking and local branches:
+
+
+
git branch -a
+
+
1
+
+
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:
+
+
+
git fetch
+
+
1
+
+
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:
+
+
+
git switch <branch-name>
+
+
1
+
+
If you get an error when running the above command and the provided branch name exists, then check your version of git by running git --version. You need to be using at least Git 2.23Content not supported to use the switch command.
+
If you have an older version of git or if you prefer to not use the switch command, you can alternatively run the following command to work on the code for a remote-tracking branch:
+
+
+
git checkout [branch-name]
+
+
1
+
+
The recommended way to switch branches is with the switch command since the checkout command does more than just switching branches which can lead to confusion.
+
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:
+
+
+
git pull
+
+
1
+
+
If you edit the code for a branch and attempt to pull, you may run into merge conflicts. You can check out About Merge ConflictsContent not supported to learn more about what they are and how to resolve them.
You're going to be closely following along with these turtorials in which case I recommend using v1.22.17 since it's the same version being used by the Code Monkeys Blog. This will allow you to avoid any potential issues with packages and with the GitHub ActionsContent not supported workflow which is used when deploying the site.
+
+
Using the Locally Set Version of Yarn in the Repositories
+
The code-monkeys-blog-tutorialsContent not supported and the code-monkeys-blogContent not supported repositories both have a local version of yarn set to v1.22.17 in a .yarn/releases directory. This means if you use the code from the repositories, then you'll be able to use the locally set version of yarn instead of having to install the specific local version of yarn yourself.
+
+
The next sections will show you how to check your current versions of node and yarn.
+
If you don't have node or yarn installed or you want to change the versions, then check out the provided resources explaining how to install specific versions.
+
Checking Node Version
+
To check if you have node installed run the following command:
+
+
+
node -v
+
+
1
+
+
If you see an output of v10.xx.xx or greater, then you can continue on with the VuePressContent not supported installation.
+
Code Monkeys Blog Node Version
+
The Code Monkeys Blog is currently using Node.js v16.11.1Content not supported. If you're going to be closely following along with these turtorials, then I recommend using the same version to avoid any potential issues.
+
+
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 node.
+
To install a system version of node you can go to Node.jsContent not supported and download a compatible version.
+
If you previously installed a system version of node from Node.jsContent not supported, then you can go back to the site and download a newer version to upgrade your current version.
+
If you're a developer that needs to use multiple versions of node when working on different projects, then I recommend using a node version manager. Before installing a node version manager like nvmContent not supported or fnmContent not supported, I recommend uninstalling your system version of node, npm, and any globally installed npm packages to avoid potential issues.
After installing a compatible version of node, you will now have npm the default package manager for node. If you prefer you can use npm to install VuePressContent not supported. However, if you're going to be closely following along with these tutorials, then I recommend using yarn.
+
Checking Yarn Version
+
To check if you have yarn installed run the following command:
+
+
+
yarn -v
+
+
1
+
+
If you don't see your preferred version of yarn, then it's recommended to install or upgrade a global version of Yarn 1Content not supported which can then be used to set a local version of yarn for the project.
+
To learn more about how to install a global version of Yarn 1Content not supported, how to use the global version to set a local version of yarn for a project, and other commonly used commands check out the Installing Yarn 1 post.
+
If you created your own repository and are using a locally set version of yarn, then be sure to update your .gitignore file and add a .gitattributes file as described in the Installing Yarn 1 post.
+
Recommended Version and Repositories Reminder
+
Remember the recommended version of yarn to use with your project if you're closely following along with these tutorials is v1.22.17. Also, if you use the code from the repositories, then there will be a provided local version of yarn which you can use instead of installing the specific local version yourself.
If the version of yarn is v1.22.17, then you can install all of the packages being used in the project by running the following command in the root project directory:
+
+
+
yarn
+
+
1
+
+
Make sure you're not using the master branch when checking the version since it doesn't have the .yarn directory and that you have a global version of yarn installed.
+
If you're using your own repository and want to install VuePressContent not supported yourself, then use one of the installation methods described below.
Using the generator will help scaffold a basic site structure for you by creating common directories and files found in VuePressContent not supported sites.
+
+
To use the generator run the following command in your preferred directory using your preferred package manager:
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 quick-start-project:
+
+
+
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 in38.23s.
+
The scaffolded basic site is created in a docs directory in your current directory which in the example above was quick-start-project. All of the created directories and files are listed above.
+
If you're using npm you'll see a .npmignore file in the docs directory instead of a .gitignore file.
+
Using an Optional Directory Name
+
If you passed an optional directory name, then the scaffolded basic site is created in the given directory in a docs directory.
+
+
The answers given to the questions can be found in the docs directory in the package.json file which contains your site's metadata.
+
Here's the contents of the package.json file from the example above:
We'll be covering the contents of the package.json file in the next tutorial. If you're interested in learning more now, then check out the package.json guideContent not supported.
+
+
To see your newly created site, navigate to the docs directory:
+
+
+
+
cd docs
+
+
1
+
+
+
Install your site's packages using your preferred package manager:
+
+
+
+
yarn
+
+
1
+
+
npminstall
+
+
1
+
+
Installing the Same VuePress Version
+
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 yarn upgrade vuepress@1.8.2.
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.
+
As mentioned above, the following tutorials will be based off of the manual installation method.
+
Using an Existing Project
+
If you already have an existing project and you would like to keep the documentation inside of it, then start from the third command.
+
+
+
Navigate to your preferred directory which should be where you cloned your site's repository:
+
+
+
+
cd<preferred-directory>
+
+
1
+
+
+
Initialize your project with your preferred package manager:
+
+
+
+
yarn init
+
+
1
+
+
npm init
+
+
1
+
+
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 project-directory:
+
+
+
question name (project-directory):
+question version (1.0.0):
+question description: Learning VuePress
+question entry point (index.js):
+question repository url: https://github.com/github-username/project-directory.git
+question author: Your Name
+question license (MIT):
+question private:
+success Saved package.json
+Done in40.63s.
+
+
1 2 3 4 5 6 7 8 9 10
+
+
After answering all of the questions, a package.json file containing the answers is created. The package.json file is used to describe metadata about your site.
+
Here's the contents of the package.json file from the example above:
We'll be covering the contents of the package.json file in the next tutorial. If you're interested in learning more now, then check out the package.json guideContent not supported.
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 yarn upgrade vuepress@1.8.2.
+]]>
+
+
+ VuePress Tutorial 6 - Homepage Layout
+ https://codemonkeys.tech/vuepress-tutorial-6/
+ https://codemonkeys.tech/vuepress-tutorial-6/
+ VuePress Tutorial 6 - Homepage Layout
+ Hey fellow Code Monkeys!!! 🐵 Want to learn about the default theme homepage layout for VuePress, then check out VuePress Tutorial 6 - Homepage Layout! 🍌🐒
+ Thu, 03 Feb 2022 05:06:00 GMT
+
VuePress Tutorial 6 - Homepage Layout
+
What is a VuePress Theme?
+
In this tutorial we'll be discussing how to configure the homepage layout by using the options exposed by the default themeContent not supported which comes with the installation of VuePressContent not supported and is designed for technical documentation. Along with the homepage the default themeContent not supported also allows customization for the navbar, sidebar, search box, etc. We'll discuss those customizations in more detail in future tutorials.
+
Before moving on to the homepage layout, we're going to first describe what a theme is. If you remember from the VuePress Tutorial 2 - Why Use VuePress? post, a VuePressContent not supported theme allows you to control how your project is structured. Within a theme you are able to create directories that handle global components, components, layouts, styles, and templates. You can also create files for theme configuration and app level enhancements. So, a theme handles all of the layout and interactivity details for your site.
+
Now that we have a good understanding of what a theme is, let's move on to configuring the homepage layout.
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported to see the changes to your site. If the changes aren't appearing after you save them, then try restarting your local development server.
+
Using the Homepage Layout
+
To use the homepage layout open the README.md file in the docs directory of your project then you need to add home: true to a YAMLContent not supported frontmatter block at the top of the page.
+
We're also going to remove the # Hello VuePress line from the file since we're going to start customizing the homepage.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+---
+
+
1 2 3
+
+
Before discussing the changes to the site, let's first describe what YAMLContent not supported and frontmatter are.
+
YAML Frontmatter Blocks
+
YAMLContent not supported is a recursive acroynym for "YAML Ain't Markup Language", 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.
When you add a YAMLContent not supported frontmatter block to a page you need to declare it at the top of a Markdown file, and the content must adhere to proper YAMLContent not supported formatting between a set of triple-dashed lines, i.e., --- like the example above.
We'll be using the YAMLContent not supported syntax throughout the tutorials, but if you're interested here's how to set the homepage layout using the other supported syntaxes.
Now that we have a better understanding of YAMLContent not supported frontmatter blocks, let's discuss the changes to the site after specifying the homepage layout.
+
Homepage Layout Changes
+
Before specifying the homepage layout, the HTML for the homepage consists of the following:
+
+
+
<htmllang="en-US">
+ <head>
+ <title>Hello VuePress | Code Monkeys</title>
+ ...
+ <metaname="description"content="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! 🐵">
+ <metaname="author"content="J the Code Monkey">
+ ...
+ </head>
+ <body>
+ <divid="app">
+ <divclass="theme-container no-sidebar">
+ <headerclass="navbar">...</header>
+ <divclass="sidebar-mask"></div>
+ <asideclass="sidebar">...</aside>
+ <mainclass="page">
+ <divclass="theme-default-content content__default">
+ <h1id="hello-vuepress">
+ <ahref="#hello-vuepress"class="header-anchor">#</a>
+ " Hello VuePress"
+ </h1>
+ </div>
+ <footerclass="page-edit">
+ <!---->
+ <!---->
+ </footer>
+ <!---->
+ </main>
+ </div>
+ <divclass="global-ui"></div>
+ </div>
+ ...
+ </body>
+</html>
+
Here are the changes in the HTML after specifying the homepage layout:
+
+
Line 3: The initial title tag that was set to Hello VuePress | Code Monkeys is now set to Code Monkeys.
+
Line 15: The initial main tag had a class of "page", and it now has a class of "home" and an attribute of aria-labelledby="main-title".
+
Line 16: The initial child elements of the div tag are removed since the # Hello VuePress line was removed from the README.md file, and the div tag is moved to line 25 with an added class of "custom". Line 16 now consists of a header tag with a class of "hero", and the child tags of <h1 id="main-title">Code Monkeys</h1> and <p class="description">" Learn to Code like a Monkey... "</p>.
+
Line 22: The initial footer tag is removed from the page.
+
+
Adding an Image
+
Before adding a homepage image, we're going to first create a public directory inside of the .vuepress directory.
+
The directory structure for your site should now look something like this:
The public directory is a static resource directory which is useful in the following cases:
+
+
You need to provide static assests that aren't directly referenced in any of your Markdown or component files, e.g., favicons and PWA icons which we'll discuss in more detail in future tutorials.
+
You need to serve shared static assets that are referenced outside of your site, e.g., logo images.
+
You want to reference images using absolute URLs in your Markdown and component files.
+
+
In a future tutorial we'll discuss what absolute URLs are in more detail as well as relative URLs, the base URL, and how to use aliases. If you're interested in learning more now, then check out the Assest HandlingContent not supported documentation.
+
The image we're going to be adding to the homepage is the Code Monkeys full logo. We're going to create an images directory in the public directory. Then we're going to create a code-monkeys-logos directory inside of the images 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-monkeys-logos directory, we're going to add the full Code Monkeys logo which is named code-monkeys-full-logo.png.
+
After adding those directories and the image, the directory structure for your site should now look something like this:
The logo was created using CanvaContent not supported. 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 GIMPContent not supported.
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. CanvaContent not supported and GIMPContent not supported, and some of the other image tools mentioned above offer the ability to compress your images.
+
Here are some other useful online tools for image compression:
After adding the logo to the site, we can reference the logo in our homepage by adding heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png to the frontmatter.
+
Notice you don't need to include .vuepress/public in the path to the logo because whenever you reference assets stored in the public directory it's added automatically.
Since we already added a site title property in the config.js file, we already have a title on the homepage which has the same value as the site title property.
+
If you prefer to have the site title property and the title on the homepage to be different, then you can add heroText: Homepage Title to the frontmatter.
+
The README.md file would look like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+heroText: Homepage Title
+---
+
+
1 2 3 4 5
+
+
For the Code Monkeys Blog we'll be using the value of the site title property for the homepage title, so the README.md file will look the same as before:
Since we already added a site description property in the config.js file, we already have a tagline on the homepage which has the same value as the site description property.
+
If you prefer to have the site description property and the tagline on the homepage to be different, then you can add tagline: Your tagline to the frontmatter.
+
We're going to update the tagline on the homepage from the value of the site description to be tagline: Let's get down to Monkey Business.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+---
+
+
1 2 3 4 5
+
+
Here's the HTML with the homepage tagline highlighted:
+
+
+
<mainaria-labelledby="main-title"class="home">
+ <headerclass="hero">
+ <imgsrc="/images/code-monkeys-logos/code-monkeys-full-logo.png"alt="hero">
+ <h1id="main-title"> Code Monkeys </h1>
+ <pclass="description"> Let's get down to Monkey Business </p>
+ <!---->
+ </header>
+ <!---->
+ <divclass="theme-default-content custom content__default"></div>
+ <!---->
+</main>
+
1 2 3 4 5 6 7 8 9 10 11
+
+
Adding an Action Button
+
An action button provides a link to a preferred page on your site, and it's placed directly below the tagline.
+
To add an action button you need to add actionText: Text on Action Button and actionLink: /preferred-page/ to the frontmatter.
+
We're going to add the actionText: Learn to Code like a Monkey → and the actionLink: /topics/ to the homepage of the site.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+actionText: Learn to Code like a Monkey →
+actionLink: /topics/
+---
+
+
1 2 3 4 5 6 7
+
+
Here's the HTML with the action button highlighted:
+
+
+
<mainaria-labelledby="main-title"class="home">
+ <headerclass="hero">
+ <imgsrc="/images/code-monkeys-logos/code-monkeys-full-logo.png"alt="hero">
+ <h1id="main-title"> Code Monkeys </h1>
+ <pclass="description"> Let's get down to Monkey Business </p>
+ <pclass="action">
+ <ahref="/topics/"class="nav-link action-button"> Learn to Code like a Monkey → </a>
+ </p>
+ </header>
+ <!---->
+ <divclass="theme-default-content custom content__default"></div>
+ <!---->
+</main>
+
1 2 3 4 5 6 7 8 9 10 11 12 13
+
+
404 When Clicking the Action Button
+
If you click the action button, it will show the 404 layout because we haven't set up the route to /topics/. In a future tutorial we'll create the Topics page which will fix this issue.
+
+
Adding Features
+
Features are text that get displayed under the action button that are used to provide a summary of what your site is about.
+
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.
+
Here's the format for adding features with titles and details to the frontmatter of your page:
We're going to be adding only the feature titles to the homepage of the site.
+
The README.md file now looks like this:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+actionText: Learn to Code like a Monkey →
+actionLink: /topics/
+features:
+ -title: Learn
+ -title: Code
+ -title: Crush
+---
+
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.
+
If you do decide to add a footer using the frontmatter in the homepage, then the HTML will look like this:
Here's the contents of the README.md file for the homepage after adding all of the desired frontmatter:
+
+
+
---
+home:true
+heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png
+tagline: Let's get down to Monkey Business
+actionText: Learn to Code like a Monkey →
+actionLink: /topics/
+features:
+ -title: Learn
+ -title: Code
+ -title: Crush
+---
+
+
1 2 3 4 5 6 7 8 9 10 11
+
+
The contents of your README.md file may be different depending on what metadata you decide to use in the frontmatter of your homepage.
+
Homepage Layout Notes
+
Here are some general notes about the homepage layout:
+
+
You can disable any frontmatter by setting any of the options to null.
+
Any content after the frontmatter block gets parsed as normal Markdown and will be rendered after the features section.
+]]>
+
+
+ VuePress Tutorial 4 - Directory Structure
+ https://codemonkeys.tech/vuepress-tutorial-4/
+ https://codemonkeys.tech/vuepress-tutorial-4/
+ VuePress Tutorial 4 - Directory Structure
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to structure your VuePress site, then check out VuePress Tutorial 4 - Directory Structure! 🍌🐒
+ Sat, 22 Jan 2022 16:55:00 GMT
+
VuePress Tutorial 4 - Directory Structure
+
Current Directory Structure
+
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 VuePressContent not supported site.
+
The current directory structure of the project is based off of creating a repository for your project on GitHubContent not supported, cloning the repository, setting a local version of yarn for your project, and doing a manual installation of VuePressContent not supported. This means if you're not using a local version of yarn and/or did a quick start installation your current directory structure will be a little different.
+
Here's the current directory structure of the project:
.yarn/releases: Stores a local version of yarn for the project which ensures everyone working on the project is using the same version. If you didn't set a local version of yarn for your project, you won't have this directory.
docs/README.md: The first document for the site which will be used as the homepage.
+
node_modules: Contains all of the code for the installed packages.
+
.gitattributes: Used to prevent git from showing large diffs when you add or update local versions of yarn. If you didn't set a local version of yarn for your project, you won't have this file.
+
.gitignore: Ignores specified files and directories when making a commit to your repository.
+
.yarnrc: Instructs your global version of yarn to use the specified local version in the project. If you didn't set a local version of yarn for your project, you won't have this file.
+
LICENSE: Tells others how they can use your code.
+
package.json: Describes metadata about your site.
+
README.md: Used to describe your project in more detail and to document how to install and use your project.
+
yarn.lock: Keeps track of the exact versions of packages installed in the project. If you're using npm you'll have a package-lock.json file instead.
+
+
Reminder to Update the .gitattributes and .gitignore Files
+
If you created your own repository and are using a locally set version of yarn, then be sure to update your .gitignore file and add a .gitattributes file as described in the Installing Yarn 1 post.
+
+
Contents of the package.json File
+
Before moving on to the recommended directory structure, we're going to first go over the contents of the package.json file and add some simple updates.
+
The properties of your package.json 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 package.json file directly.
{
+ "name":"code-monkeys-blog-tutorials",
+ "version":"1.0.0",
+ "description":"Learn VuePress and how to create the Code Monkeys Blog by following along with these tutorials!",
+ "main":"index.js",
+ "repository":"https://github.com/codemonkeysio/code-monkeys-blog-tutorials.git",
+ "author":"J the Code Monkey",
+ "license":"GPL-3.0-or-later",
+ "scripts":{
+ "docs:dev":"vuepress dev docs",
+ "docs:build":"vuepress build docs"
+ },
+ "devDependencies":{
+ "vuepress":"1.8.2"
+ }
+}
+
+
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
+
+
The package.json file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow semantic versioning (semver)Content not supported.
+
Let's describe each property in a little more detail:
+
+
name is the name given to your project
+
version indicates the current version of your project
+
description is used to describe and provide more information about your project
+
main is a JavaScript file that starts the execution of your project
+
repository describes the location of the project repository containing the code
+
+
You can explicitly set the URL and a version control type in the package.json file by adding, e.g., "repository": { "type": "git", "url": "https://github.com/github-username/your-project" }
+
+
+
author describes the creator or owner of the project
+
+
You can explicitly set the author name, email, and website in the package.json file by adding, e.g., "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }
+
+
+
license indicates the type of license being used by the project
+
scripts 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
+
devDependencies are dependencies you need during development only, i.e., not during production
+
+
Installing the Same VuePress Version
+
If you see a different version of VuePressContent not supported and want to install the same version being used in the tutorials and blog, then you can run yarn upgrade vuepress@1.8.2.
+
+
Now, let's make some simple updates to the package.json file.
+
To start we're going to be adding a version control type to the repository property by updating it to be "repository": { "type": "git", "url": "https://github.com/github-username/your-project" }.
+
Next we're going to be adding an optional email and url to the author property by updating it to be "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }.
+
If you prefer you can also shorten the author property to be one string by defining it like this "author": "Your Name <youremail@example.com> (https://your-website.com)".
+
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.
docs/README.md: The first document for the site which will be used as the homepage (same file described in the current directory structure section).
+
docs/example-page/README.md: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., /example-page/.
+
package.json: Describes metadata about your site (same file described in the current directory structure section).
+
+
Using the Recommended Directory Structure for Themes
+
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 VuePressContent not supported site.
Here's the recommended directory structure if you plan on writing your own theme for your site. Since the Code Monkeys Blog is a child theme inherited from the default themeContent not supported, we'll be using the recommended directory structure for themes when developing the blog.
+
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 Theme InheritanceContent not supported documentation.
+
If you're not using a theme when developing your site, you have the option of using the recommended directory structure for a standard VuePressContent not supported site. There should only be minor differences when following along with these tutorials.
+
Only the Layout.vue file is mandatory when writing a theme, but we'll be using the other recommended directories as we continue to develop the blog.
When creating these directories and files be sure to follow the capitalization to prevent any potential issues.
+
+
+
docs/.vuepress: Stores the global configuration, theme, static resources, etc.
+
docs/.vuepress/public: Static resource directory.
+
docs/.vuepress/theme: Stores the theme of the site.
+
theme/components: Stores the Vue components.
+
theme/global-components: The Vue components in this directory automatically get registered as global components.
+
theme/layouts: Stores the layout components used by the theme.
+
theme/layouts/Layout.vue: Mandatory layout component used by the theme.
+
theme/styles: Stores style related files.
+
theme/styles/index.styl: Used to add global styles that can override the default styles.
+
theme/styles/palette.styl: Used to define global styling variables and override the default styling variables.
+
theme/templates: Stores HTML template files.
+
theme/templates/dev.html: HTML template file for development environment.
+
theme/templates/ssr.html: HTML template file used in the build time.
+
theme/enhanceApp.js: Theme level enhancement.
+
theme/index.js: Entry file for theme configuration.
+
docs/.vuepress/config.js: Entry file for configuration, can also be yml or toml.
+
docs/README.md: The first document for the site which will be used as the homepage (same file described in the current directory structure section).
+
docs/example-page/README.md: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., /example-page/.
+
package.json: Describes metadata about your site (same file described in the current directory structure section).
+
+
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 ThemeContent not supported documentation.
+
Default Page Routing
+
In the directory structure above we used the docs directory as the targetDir. If you want to learn more about how the targetDir is used, then take a look at the Command-line InterfaceContent not supported documentation.
+
To see an example of the docs directory being used as the targetDir we can take a look at the scripts object we defined in the package.json file which is in the root directory of the project. Notice the targetDir gets set as the docs directory for the docs:dev and docs:build scripts:
All the relative paths are relative to the docs directory. Here are the relative paths and the default page routing paths for the directory structure described above:
+
+
+
+
Relative Path
+
Page Routing
+
+
+
+
+
/README.md
+
/
+
+
+
/example-page/README.md
+
/example-page/
+
+
+
+
From the table we can see the relative path for the homepage is /README.md and the default page routing path for the homepage is /. We can also see the relative path for the example page is /example-page/README.md, and the default page routing path for the example page is /example-page/.
+]]>
+
+
+ VuePress Tutorial 7 - Navbar Logo and Links
+ https://codemonkeys.tech/vuepress-tutorial-7/
+ https://codemonkeys.tech/vuepress-tutorial-7/
+ VuePress Tutorial 7 - Navbar Logo and Links
+ Hey fellow Code Monkeys!!! 🐵 Want to learn how to configure the navbar for VuePress, then check out VuePress Tutorial 7 - Navbar Logo and Links! 🍌🐒
+ Sat, 12 Mar 2022 17:46:45 GMT
+
VuePress Tutorial 7 - Navbar Logo and Links
+
What is a Navbar?
+
In this tutorial we'll be discussing how to configure the navbar by using the options exposed by the default themeContent not supported. 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.
+
The navbar for a site made with VuePressContent not supported can consist of a logo, a site title, a search box, internal links, languages the site can be translated to, and external links. 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 logo, site title, internal links, and external links. We'll also discuss how to disable the navbar globally as well as locally for specific pages.
+
Take a look at the navbar on this page to see what we'll be designing for the Code Monkeys Blog. To see another example you can check out the VuePressContent not supported site navbar as well.
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
Navbar Logo and Site Title
+
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-monkeys-head-and-shoulders-logo.png to the code-monkeys-logos directory.
+
The site title in the navbar also provides a link to the homepage, and it's being set by the value of the title property in the config.js file which we set up in a previous tutorial.
+
After adding the image, the directory structure for your site should now look something like this:
If the directory structure is confusing you, then be sure to take a look at the Adding an Image 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.
Notice you don't need to include .vuepress/public in the path to the navbar logo because whenever you reference assets stored in the public directory it's added automatically.
+
Also, notice the value of the site title is being set here by using the title property.
+
Here's what the HTML looks like after adding the navbar logo:
You should now see the navbar logo in the upper left of the page.
+
Navbar Links
+
To add links to the navbar other than to the homepage we need to add a nav property to the themeConfig object. The nav property expects an array of navbar link objects. We're going to start by adding internal links.
+
Internal Links
+
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.
+
To add an internal link you need to add { text: 'Link Name', link: '/path-to-page/' } to the nav property where the text defines the name of the link in the navbar and link defines the path to the preferred page.
+
For our site we're going to add the following internal links: Topics, Posts, Resources, and Donate.
+
Here's what the config.js file looks like after adding the internal links:
Your navbar should now have Topics, Posts, Resources, and Donate links to the right of the search box.
+
404 When Clicking the Links
+
If you click the links they will show the 404 layout because we haven't set up the pages for Topics, Posts, Resources, and Donate yet. In future tutorials we'll create these pages which will fix these issues.
+
+
External Links
+
An external link is a link that points to a page outside of the same site or domain.
+
Adding an external link is the same as adding an internal link except the value provided to the link property is a URL to an external site.
+
External links automatically get target="_blank" rel="noopener noreferrer" attributes added to the <a> tag. The target attribute specifies where to open the linked document, and the rel attribute specifies the relationship between the current document and the linked document.
+
These attributes are used to prevent a vulnerability known as reverse tabnabbingContent not supported 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.
+
You can also customize the values for the target and rel attributes by specifying them as properties in the external link. You can disable the rel attribute for a link by setting it like this rel: false.
Currently, the Code Monkeys Blog doesn't include an external link in the navbar, but in the future one may be added for the code-monkeys-blogContent not supported repository using the default values for external links mentioned above.
+
+
Dropdown Menus
+
The links in the navbar can also be dropdown menus if an items property which expects an array of navbar link objects is used instead of just a link property.
+
For example, the Posts link we made earlier can be turned into a dropdown menu containing links to pages for All Posts and for posts By Topic.
+
Here's what the config.js file looks like after turning the Posts link into a dropdown menu:
Your navbar should now have a Posts dropdown menu containing All Posts and By Topic links.
+
Dropdown Menu Subgroups
+
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 items property which expects an array of navbar link objects instead of using just a link property for a dropdown menu entry.
+
For example, the By Topic 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 LeetCode, Node.js, and VuePress, so we'll add each of these as an entry to the By Topic subgroup in our dropdown menu.
+
Here's what the config.js file looks like after turning the By Topic link in the dropdown menu into a subgroup:
Your navbar should now have a By Topic subgroup in the dropdown menu containing these links LeetCode, Node.js, and VuePress.
+
To add more links to the By Topic subgroup all you need to do is add another element into its items array.
+
404 Reminder When Clicking the Links
+
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.
+
+
Disabling the Navbar
+
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.
+
Globally
+
To disable the navbar globally add the following to your config.js file:
To disable the navbar locally for a specific page you can add the following to the page's frontmatter:
+
+
+
---
+navbar:false
+---
+
+
1 2 3
+
+
Next Steps
+
In the next tutorial we'll begin the development of the Footer component which will stick to the bottom of the page and consist of social media icons and a made by message.
+]]>
+
+
+ VuePress Tutorial 8 - Custom Footer
+ https://codemonkeys.tech/vuepress-tutorial-8/
+ https://codemonkeys.tech/vuepress-tutorial-8/
+ VuePress Tutorial 8 - Custom Footer
+ 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! 🍌🐒
+ Wed, 06 Apr 2022 16:58:30 GMT
+
VuePress Tutorial 8 - Custom Footer
+
What is a Footer?
+
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 VuePressContent not supported and the @vuepress/theme-blogContent not supported.
+
A footer is located at the bottom of a page, and it typically contains:
+
+
Authorship Information
+
Copyright Information
+
Contact Information
+
Sitemap (Important Links Regardless of Current Page - Similar to Global Navbar)
+
+
For the Code Monkeys Blog 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.
+
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 VuePressContent not supported site footer as well.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
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.
Since we'll be using social media sites that are not currently supported by the footer.contactContent not supported option, we won't be using this footer. You can contribute social media contact types by making a pull request to the vuepress-theme-blogContent not supported repository though if you're interested.
+
Custom Footer
+
Before designing the custom footer component, we need to have an understanding of the following topics:
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.
+
Writing a Theme
+
In VuePressContent not supported you have the ability to make your site into a theme. This gives you the option to publish your site as an npmContent not supported package which allows other developers to easily install and use your theme.
+
To write your own theme you need to create a theme directory in the .vuepress directory. The docs directory for your site should now look something like this:
From here you can develop your site like any other VueContent not supported 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:
Here's a description for each directory and file in the theme directory:
+
+
components: Local components used in your theme.
+
global-components: Components in this directory automatically get registered as global, so you don't need to explicitly import them in a file when using them.
+
layouts: Layout components used in your theme.
+
+
Layout.vue: A mandatory layout file for every theme.
+
+
+
styles: Stores files related to styling your theme.
+
+
index.styl: Overrides any default styling and allows you to globally style your site.
+
palette.styl: Overrides any default styling variables and allows you to add any global styling variables.
+
+
+
templates: Stores HTML template files.
+
+
dev.html: HTML template file for development environment.
+
ssr.html: HTML template file used in the build time.
+
+
+
enhanceApp.js: Enhances the theme of your site by giving you the ability to install Vue plugins, add router hooks, etc.
+
index.js: Entry file for for theme configuration.
+
+
Reviewing the Recommended Directory Structure for Themes
When creating the custom footer component we'll use the global-components directory, the index.js file, and the layouts directory. The global-components directory will be where we add the custom footer component since we want the footer to be available globally. The index.js file will be used to inherit the default themeContent not supported using theme inheritanceContent not supported. Finally, the layouts directory will be where we add the GlobalLayout.vue file which allows us to add our custom footer component to the global layout of the site.
To use a plugin you need to first install it by using either yarn or npm. We'll be using yarn to install all of the plugins for the blog, but the commands for installing the plugins with npm will also be provided. After installing a plugin, you can configure it by adding it to the config.js file.
If you're following along with the tutorials, then when you switch to the tutorial-8 branch you can run the following command to install the package instead of running the installation command:
+
+
+
yarn
+
+
1
+
+
npminstall
+
+
1
+
+
This will ensure you have the same version used in the blog since the command uses the version specified in the yarn.lock file during the installation.
+
Using the Installation Command
+
To install the plugin in your own project you can run the following command:
+
+
+
yarnadd @goy/vuepress-plugin-svg-icons -D
+
+
1
+
+
npminstall @goy/vuepress-plugin-svg-icons -D
+
+
1
+
+
Installing the Same Plugin Version
+
If you want to ensure you're installing the same version being used in the tutorials and blog, then run yarn upgrade @goy/vuepress-plugin-svg-icons@4.2.3.
+
+
After installing the plugin, the package.json file should look something like this:
To add the social media icons to the site we need to create an icons directory in the docs directory. Here's what the docs directory should look like after adding the icons directory:
The plugin recommends using iconfontContent not supported to find Scalable Vector Graphics (SVGs)Content not supported 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 #e6e6e6 and a size of 200 which is the default size.
To easily download the icons used in the footer you can also install the browser extension SVG ExportContent not supported. 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.
+
+
We'll be using icons for these social media sites as well as to an RSS feed for Code Monkeys in the footer:
After adding the icons to icons directory, the plugin will automically load the icons and will provide a global component named vp-icon. To use the vp-icon component you need to pass a name attribute to it where the value is the name of the SVG file you want to use.
+
If you're interested in learning more about the plugin, then check out the vuepress-plugin-svg-iconsContent not supported documentation which contains more information about configuration options, component props, and command-line interface (CLI) commands.
+
We're now ready to create the custom footer component.
+
Footer Component
+
The custom footer component will be added to the global-components directory. Here's what the theme directory will look like after adding the Footer.vue file:
Here we're creating a *.vue file which is known as a Single-File Component (SFC)Content not supported. This is a special file format that allows you to encapsulate the HTML in a template tag, the JavaScript in a script tag, and the CSS in a style tag for the component.
+
Here's what the Footer.vue file looks like after adding these three main sections:
To start we'll add the HTML to the template tag. The contents of the footer will be wrapped in a footer tag containing two child tags a div tag and a p tag. The div tag will contain seven child a tags one for each of the social media icons. The p tag will contain authorship information for the blog.
+
Each a tag will have the following attributes: href, target, and rel. The href specifies the URL of the page the link goes to, the target specifies where to open the link, and the rel specifies the relationship between the current page and the link. Each a tag will also have a child vp-icon tag which will have the name attribute discussed earlier.
+
Here's what the Footer.vue file looks like after adding the HTML to the template tag:
Each href has a value of the related URL for the social media site. Each target has a value of _blank, and each rel has a value of noopener noreferrer.
+
As mentioned in the previous post these values for the target and rel attributes are used to prevent a vulnerability known as reverse tabnabbingContent not supported 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.
+
Each name attribute has a value of the name of the related SVG file with the .svg extension omitted.
+
Next we'll export the JavaScript in the script tag and give the component a name. Here's what the Footer.vue file looks like after updating the script tag:
Finally, we'll style the component by adding the following CSS classes: "footer", "icons", and "made-by". We'll be adding the "footer" class to the footer tag, the "icons" class to the div tag, and the "made-by" class to the p tag. Then we'll add styling for each of the CSS classes in the style tag. Here's what the Footer.vue file looks like after styling:
A scoped attribute is also used in the style tag which means all of the styling only applies to the current component. Take a look at Scoped CSSContent not supported to learn more about the scoped attribute.
+
The "footer" class is given display: flex which defines a flex container for all of the direct children of the tag where the "footer" class is used. In this case the "footer" class is used on the footer tag which means the div tag and p tag will be in a flex container. The "footer" class is also given flex-direction: column which means the flex items in the flex container, i.e., the div tag and the p 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 align-items: center which will horizontally center the flex items since the flex direction is set to column. The "footer" class is then given padding: 2.5rem 2.5rem 2rem which will set a padding of 2.5rem for the top, 2.5rem for the left and right, and 2rem for the bottom.
The "icons" class is also given display: flex which means each a tag will be in a flex container since they're all direct children of the div tag which has the "icons" class. The "icons" class is also given margin-bottom: 1.75rem and font-size: 2rem which increases the size of the icons. The CSS selector .icons > a:not(:last-child) is then used which selects all a tags where the parent tag has a class of "icons" except for the last a tag. Each a tag that is selected is given margin-right: 4.6875rem.
Finally, the "made-by" class is given margin: 0 which removes the margin from the p tag.
+
If you didn't feel comfortable with the CSS discussed above, then here's a good resource to go through CSS TutorialContent not supported.
+
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.
After adding the global-components directory to the theme directory, you may have noticed the site is rendering a blank page. This is because we created a directory in the theme directory, so VuePressContent not supported is now looking for a Layout.vue file in the theme directory.
You may have noticed that the Layout.vue file is listed as a mandatory file, but we didn't need to create one in the theme directory. This is because you don't need to explicitly create the Layout.vue file when you're inheriting it from the default themeContent not supported.
+
+
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 GlobalLayout.vue file by using the same name for the file in the child theme and the code provided by the documentation.
+
Now let's create the layouts directory in the theme directory. This is where we'll be adding the GlobalLayout.vue file which again allows us to add our custom footer component to the global layout of the site.
+
Using the Global Layout
+
Here's what the theme directory will look like after creating the GlobalLayout.vue file in the layouts directory:
The GlobalLayout.vue file is responsible for handling the global layout of the site. Here's the path to the default GlobalLayout.vue file provided by VuePressContent not supportednode_modules/@vuepress/core/lib/client/components. You can also view the code for the default global layout hereContent not supported.
+
The default global layout gives you the ability to render different layouts depending on if $page.path is defined, i.e., the URL of the page is valid and if $page.frontmatter.layout is defined. If only the $page.path is defined, then the default layout will be used which is Layout. If $page.frontmatter.layout is defined, then the specific layout for that page will be used. If $page.path is not defined, then the NotFound layout is used which is the layout for the 404 page provided by VuePressContent not supported. 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.
+
To override and edit the GlobalLayout.vue file we're going to use the code provided by the globalLayoutContent not supported section from the documentation. The code provided by the documentation basically uses a computed propertyContent not supported 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.
+
Here's the code from the documentation:
+
+
+
<template>
+ <divid="global-layout">
+ <header><h1>Header</h1></header>
+ <component:is="layout"/>
+ <footer><h1>Footer</h1></footer>
+ </div>
+</template>
+
+<script>
+exportdefault{
+ computed:{
+ layout(){
+ if(this.$page.path){
+ if(this.$frontmatter.layout){
+ // You can also check whether layout exists first as the default global layout does.
+ returnthis.$frontmatter.layout
+ }
+ return'Layout'
+ }
+ return'NotFound'
+ }
+ }
+}
+</script>
+
Notice that we don't need to explicitly import the footer component since we made it a global component by adding it to the global-components directory in the theme directory.
+
+
Next Steps
+
In the next tutorial we'll discuss how to override the index.styl and palette.styl files to add our own global styling to the site. The global styling will include background color, accent color, text color, etc.
+]]>
+
+
+ VuePress Tutorial 5 - Configuration Basics
+ https://codemonkeys.tech/vuepress-tutorial-5/
+ https://codemonkeys.tech/vuepress-tutorial-5/
+ VuePress Tutorial 5 - Configuration Basics
+ Hey fellow Code Monkeys!!! 🐵 Want to learn about the configuration basics for VuePress, then check out VuePress Tutorial 5 - Configuration Basics! 🍌🐒
+ Wed, 26 Jan 2022 17:54:00 GMT
+
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.
+
Before adding the config file, let's first create a .vuepress directory in the docs directory. The .vuepress directory will be used to store all VuePressContent not supported specific directories and files.
+
The directory structure for your site should now look something like this:
The config.js file should export a JavaScript object like the following:
+
+
+
module.exports ={}
+
+
1
+
+
If you run into any issues when adding the directory and file above, then be sure to check out the ConfigurationContent not supported documentaion.
+
Alternative Config Formats
+
In this series we'll be using a JS config file format, i.e., .vuepress/config.js. However, VuePressContent not supported also supports the following config file formats: YAML - .vuepress/config.yml, TOML - .vuepress/config.toml, and TS - .vuepress/config.ts. If you want to use TS, then you need to have a VuePressContent not supported version of 1.9.0+ installed. See the TypeScript as ConfigContent not supported documentation for more details.
+
+
Config File Properties
+
Now that we have added a config.js file, we can begin to add more functionality and customization to the site by setting some of the basic config file properties.
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 Config ReferenceContent not supported.
+
Title
+
The title 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 default themeContent not supported as a link to the homepage.
+
The expected type is a string, and the default value is undefined.
+
Now let's set the title of the site:
+
+
+
module.exports ={
+ title:'Code Monkeys',
+}
+
+
1 2 3
+
+
After adding the title and saving the file, you should see Code Monkeys or whatever value you set as your site's title in the top left of the navbar as a link to the homepage.
+
You can also inspect the page, go to the Elements tab, open the <head> tag, and you'll see the following:
The value of the <title> tag will be whatever you set as the value for the title of your site.
+
Removing Hello VuePress
+
When we update the homepage in the next tutorial, we'll remove the Hello VuePress | from the <title> tag.
+
+
Description
+
The description property is used to define the description for the site. The provided value is used in a <meta> tag in the <head> tag of the site.
+
The expected type is a string, and the default value is undefined.
+
Now let's set the description of the site:
+
+
+
module.exports ={
+ 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! 🐵',
+}
+
+
1 2 3 4
+
+
After adding the description and saving the file, you can inspect the page, go to the Elements tab, open the <head> tag, and you'll see the following:
+
+
+
<head>
+ ...
+ <metaname="description"content="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! 🐵">
+ ...
+</head>
+
+
1 2 3 4 5
+
+
The value of the content attribute will be whatever you set as the value for the description of your site.
+
Head
+
The head property is used to inject extra tags into the <head> tag of the site.
+
The expected type is an array, and the default value is [].
+
You can specify a tag to inject into the <head> tag by using the following form: [tagName, { attr1Name: attr1Value, attr2Name: attr2Value, ... }].
+
Here are some examples of what can be injected into the <head> tag:
+
+
Author of the Site
+
Favicons
+
Social Media Metadata
+
Links to External Style Sheets
+
Client-Side Scripts
+
+
To start we'll set an author by using a <meta> tag in the <head> tag:
To change the author for your site you can use a different value for the content attribute.
+
We'll be injecting more tags into the <head> tag as we develop the site.
+
Updated Config File
+
Here's the content of the config.js file after adding the title, description, and author:
+
+
+
module.exports ={
+ title:'Code Monkeys',
+ 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! 🐵',
+ head:[
+ [
+ 'meta',
+ {
+ name:'author',
+ content:'J the Code Monkey',
+ },
+ ],
+ ],
+}
+
+
1 2 3 4 5 6 7 8 9 10 11 12 13 14
+
+
Be sure to substitute the values with the preferred values for your site.
+]]>
+
+
+ VuePress Tutorial 9 - Styling the Homepage
+ https://codemonkeys.tech/vuepress-tutorial-9/
+ https://codemonkeys.tech/vuepress-tutorial-9/
+ VuePress Tutorial 9 - Styling the Homepage
+ 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! 🍌🐒
+ Wed, 31 Aug 2022 01:45:30 GMT
+
VuePress Tutorial 9 - Styling the Homepage
+
Styling Files
+
The next step we'll be taking in developing the blog is learning how to override the palette.styl and index.styl files which will allow us to add our own global styling to the blog.
+
To do this we're going to first discuss what the index.styl and palette.styl files are used for. Then we'll take a look at the predefined styling files provided by the default themeContent not supported, 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.
+
Make sure you start the local development server which should be running at http://localhost:8080/Content not supported 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.
+
palette.styl
+
The palette.styl file is used to define global styling variables and override the predefined styling variables which in our case are being provided by the default themeContent not supported.
+
Here are some of the predefined styling variables available to use and override in your site:
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.
+
Here's a link to the full palette.styl fileContent not supported if you're interested. You can also view the full file by navigating to node_modules/@vuepress/core/lib/client/style/config.styl in your project.
+
Only Define Variables in palette.styl
+
You should ONLY define variables in the palette.styl 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
+
+
Creating the palette.styl File
+
Now that we have a good understanding of the palette.styl file, we're going to create the file by first creating a styles directory in the theme directory. The docs directory for your site should now look something like this:
If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your palette.styl file in the following location .vuepress/styles/palette.styl.
+
+
We'll be updating the palette.styl file later on in this post, but first we're going to take a look at the index.styl file.
+
index.styl
+
The index.styl file is used to add global styles as well as override predefined styles which in our case are being provided by the default themeContent not supported.
We won't discuss the predefined index.styl 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.
+
Here's the predefined index.styl which you can override and add your own styles to:
Here's a link to the index.styl fileContent not supported as well and the path to the file in your project node_modules/@vuepress/theme-default/styles/index.styl.
+
As we develop the blog we'll be using and overriding some of these predefined styles as well as defining our own styles.
+
Importing and Requiring Stylus and CSS Files
+
You may have noticed in the index.styl file that we're requiring other files, e.g., @require './config'. We'll discuss how to import and require .styl and .css files in a future post.
+
+
Creating the index.styl File
+
Now that we have a good understanding of the index.styl file, we're going to create the file for the blog inside of the styles directory that we previously created. The docs directory for your site should now look something like this:
If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your index.styl file in the following location .vuepress/styles/index.styl.
+
+
We'll be updating the index.styl file we just created later on in this post, but first we're going to take a look at the overriding priority.
+
Overriding
+
Both the palette.styl and index.styl files follow a certain overriding priority.
+
palette.styl
+
The user's palette.styl file which is located in .vuepress/styles/palette.styl has a higher priority than the theme's palette.styl file which is located in theme/styles/palette.styl. The theme's palette.styl file has a higher priority than any predefined palette.styl file which is located in node_modules/@vuepress/core/lib/client/style/config.styl in the case of the default themeContent not supported.
+
This means a theme can define it's own global styling variables and a user can override them as they see fit.
+
Here's an example of a global styling variable defined in each type of palette.styl file to make this concept clearer:
Here, the final value for $accentColor will be #ccff33.
+
Absence of User palette.styl File
+
As we develop the blog we won't be using the user's palette.styl file located in .vuepress/styles/palette.styl We'll just be using the theme's palette.styl file located in theme/styles/palette.styl which will allow us to override any predefined variables.
+
+
index.styl
+
The same overriding priority applies to the index.styl file as well. So, a user's index.styl file which is located in .vuepress/styles/index.styl has a higher priority than the theme's index.styl file which is located in theme/styles/index.styl. The theme's index.styl file has a higher priority than any predefined index.styl file which is located in node_modules/@vuepress/theme-default/styles/index.styl in the case of the default themeContent not supported.
+
This means a theme can define it's own global styles and a user can override them as they see fit.
+
Both the user's index.styl file and the theme's index.styl file will get generated into the final CSS 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.
+
Here's an example of a style defined in a user's index.styl and a style defined in a theme's index.styl file to make this concept clearer:
Notice how the user's style comes after the theme's style in the final CSS file. This is what gives the user's style a higher priority than the theme's style.
+
Absence of User index.styl File
+
As we develop the blog we won't be using the user's index.styl file located in .vuepress/styles/index.styl. Instead we'll just be using the theme's index.styl file located in theme/styles/index.styl which will allow us to override any predefined styles.
+
+
Now that we have a good understanding of how overriding works for both the palette.styl and index.styl files, we're now ready to override some predefined styling and add our own styling to the homepage of the blog.
+
Homepage Styles
+
To start the homepage styling we'll be overriding and adding global styling variables to the palette.styl file. These global styling variables will then be used in the index.styl file as well as other files as we continue the development of the blog.
+
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 Elements tab, and then locate a tag or class that you want to override.
+
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.
+
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:
$backgroundColor is used as the background color of the homepage as well as the whole blog.
+
$accentColor is used to color the action button on the homepage and to add styling to internal and external links.
+
$textColor is used to color the text on the homepage as well as the navbar text and other text throughout the blog.
+
$borderColor is used to style the border in the features section as well as the border in the navbar and other borders throughout the blog.
+
$darkBorderColor will be used to style the border and box shadow around the main card on the homepage.
+
+
Now let's take a look at overriding and adding some styles to the index.styl file.
+
index.styl
+
We're going to start by overriding the background-color in the html tag:
+
+
+
html
+ background-color: $backgroundColor
+
+
1 2
+
+
+
Updates the background-color of the content below the Footer component to be the color specified by the $backgroundColor global styling variable we just added in the palette.styl file.
+
+
Next we'll override the background-color in the body tag:
+
+
+
html
+ background-color: $backgroundColor
+ body
+ background-color: $backgroundColor
+
1 2 3 4
+
+
+
Updates the background-color of the body of the site to be the color specified by the $backgroundColor global styling variable.
+
+
Now we're going to update the padding around the main tag which we'll select using the home class:
+
+
+
html
+ background-color: $backgroundColor
+ body
+ background-color: $backgroundColor
+ .home
+ padding:0
+
1 2 3 4 5 6
+
+
+
Updates the padding of the main tag with a class of home to be zero on all sides.
+
+
We're now going to update the styles for the hero class which is given to the header tag inside of the main tag and contains the logo, the title, the description, and the action button.
margin-left: 2rem adds a margin of 2rem to the left of the header tag.
+
margin-right: 2rem adds a margin of 2rem to the right of the header tag.
+
border: 0.125rem solid $darkBorderColor adds a border around the header tag with a thickness of 0.125rem, with a style of solid, and has a color of $darkBorderColor which was defined in the palette.styl file.
+
box-shadow: 0 0.5rem 1rem 0 $darkBorderColor adds a box shadow around the header tag.
+
border-radius: 5.625rem adds a border radius to the header tag border.
+
margin-bottom: 0.625rem adds a margin of 0.625rem to the bottom of the header tag.
+
padding: 2rem adds padding of 2rem around the header tag.
Finally, we're going to update the styles for the features class which is given to the div tag inside of the main tag and contains the Learn, Code, and Crush text.
margin-left: 2rem adds a margin of 2rem to the left of the div tag.
+
margin-right: 2rem adds a margin of 2rem to the right of the div tag.
+
border-top: 0.125rem solid $borderColor adds a border to the top of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
+
border-bottom: 0.125rem solid $borderColor adds a border to the bottom of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
+
text-align: center horizontally aligns the text in each div tag with a class of feature that are inside of the div tag with a class of features.
+
font-size: 1.4rem sets a font size of 1.4rem for the h2 tags that are inside of the div tag with a class of feature.
+
+
Next Steps
+
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.
+]]>
+
+
+ Contact
+ https://codemonkeys.tech/contact/
+ https://codemonkeys.tech/contact/
+ Contact
+ 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! 📞🐒
+
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.
+
+]]>
+
+
+ Donate
+ https://codemonkeys.tech/donate/
+ https://codemonkeys.tech/donate/
+ Donate
+ 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!
+
Thanks for the
Bananas!!! 🍌
+
+
Crypto 🔗
+
⚠️ Sending Crypto to the Wrong Address will Result in Loss of Funds! ⚠️
+
✅ Always double check the address & amount before sending! ✅
+
🤖 Instead of using the static Bitcoin address below, improve your privacy by using a PayNym!Content not supported 🤖
+]]>
+
+
+ Free and Open Source Software (FOSS)
+ https://codemonkeys.tech/resources/foss/
+ https://codemonkeys.tech/resources/foss/
+ Free and Open Source Software (FOSS)
+ 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! 💻🐒
+
Free and Open Source Software (FOSS)
💻 🐒
+
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.
+]]>
+
+
+ Resources
+ https://codemonkeys.tech/resources/
+ https://codemonkeys.tech/resources/
+ Resources
+ 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! 💻🐒
+
Giving Credit to the Great
Apes!!! 🦍 🍌 🐒
+
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.
+
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.
+
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.
+
I'll be updating these resources from time to time, so if you have any suggestions on how to improve them let me know.
+
+
+
Bitcoin
+
+
"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." - Satoshi Nakamoto
+
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.
+
+
+
+
Free and Open Source Software (FOSS)
+
+
“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.
+
"Open source software" 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.
+
+
+
+
Notes and Other Stuff Transmitted by Relays (Nostr)
+
+
The simplest open protocol that is able to create a censorship-resistant global "social" network once and for all.
+
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.
+
+
+
+
Privacy
+
+
“Privacy is the power to selectively reveal oneself to the world." - Eric Hughes
+
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.
+
+
+
+
Web Development
+
+
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.
+
+]]>
+
+
+ Bitcoin
+ https://codemonkeys.tech/resources/bitcoin/
+ https://codemonkeys.tech/resources/bitcoin/
+ Bitcoin
+ 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! ₿🐒
+
Bitcoin
₿ 🐒
+
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.
+
+
Blockchain Explorers
+
Blockstream ExplorerContent not supported - 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
+
Mempool.spaceContent not supported - Open source self-hostable mempool explorer and blockchain explorer for Bitcoin that can be used with Tor to conceal your IP address
21 LessonsContent not supported - Distillation of the lessons learned after falling down the Bitcoin rabbit hole written by Gigi
+
Bitcoin: A Work in ProgressContent not supported - Focused on guiding the reader through the latest developments in Bitcoin through the eyes of Sjors Provoost one of the many Bitcoin core developers
Mastering the Lightning NetworkContent not supported - Focused on providing developers with a technical understanding of the Lightning Network written by Andreas M. Antonopoulos, Olaoluwa Osuntokun, and Rene Pickhardt
+
Programming BitcoinContent not supported - 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
+
Thank God for BitcoinContent not supported - 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
+
The Bitcoin StandardContent not supported - 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
+
The Fiat StandardContent not supported - Provides an examination of twentieth century monetary technology and explains its benefits, drawbacks, and its many modes of failure written by Saifedean Ammous
+
The Little Bitcoin BookContent not supported - 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
+
+
+
Collaborative Custody
+
Unchained CapitalContent not supported - 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
Bitcoiner.GuideContent not supported - 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
+
Bitcoin OnlyContent not supported - A collection of high quality Bitcoin resources including meetups, books, wallets, hardware, podcasts, and more
+
Bitcoin OptechContent not supported - 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
Bitcoin UniversityContent not supported - Educational content devoted to Bitcoin, financial freedom, self-sovereignty, and relevant macro and financial news
+
Bitcoin WikiContent not supported - Wiki dedicated to providing all of your Bitcoin information needs including how to get started, software, mining, exchanges, technical content, economics, and more
+
BTC SessionsContent not supported - Bitcoin educator focused on helping people gain an understanding of Bitcoin by providing tutorials on wallets, hardware, security, exchanges, and more
+
DiverterContent not supported - Focused on Bitcoin, privacy, and censorship-resistance by learning how to use the related tools
+
EconoalchemistContent not supported - Blog focused on bringing you articles about interacting with Bitcoin in a self-custodial, censorship-resistant, and private way
+
k3tanContent not supported - 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
OdellContent not supported - 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
+
We Run BTCContent not supported - Focused on providing guides and resources about Bitcoin with an emphasis on how to interact with Bitcoin in a sovereign and private way
+
+
+
Entertainment
+
Bitcoin YodaContent not supported - 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
+
+
+
Hardware Wallets
+
Coldcard Mk4Content not supported - Viewable, editable, and verifiable source code, Bitcoin-only, and has numerous security features including dual secure elements to store your private key, air-gapped, i.e., can be used without ever connecting it directly to a computer, duress PIN, comes in a tamper-evident numbered bag with the bag number recorded into the device, and more
+
SeedSignerContent not supported - 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
+
Trezor Model TContent not supported - 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
+
+
+
Jobs
+
Bitcoiner JobsContent not supported - Leading career site with the goal of helping to build the emerging Bitcoin industry and the careers of Bitcoiners within it
+
PlebLabContent not supported - Bitcoin hackerspace and community accelerator based in Austin, Texas focused on supporting early stage Bitcoin start-ups and developers building the future of Bitcoin
+
+
+
Media
+
Bitcoin MagazineContent not supported - Source of news, information and expert commentary on Bitcoin, its underlying blockchain technology and the industry that has been built up around it
+
BitcoinTVContent not supported - A repository of educational video content for the Bitcoin community, without distractions like advertising, altcoins, or third-party trackers
+
No BS BitcoinContent not supported - A news desk for Bitcoiners by Bitcoiners without ads, paywalls, or clickbait includes Bitcoin related news, updates, research, guides, weekly digest, and more
+
TFTCContent not supported - A media company focused on Bitcoin, Beauty, and Freedom in the Digital Age
+
+
+
Meetups
+
Bitcoin ParkContent not supported - Community supported campus in Nashville, Tennessee focused on grassroots Bitcoin adoption and a home for Bitcoiners to work, learn, collaborate, and build
Bitcoin Meetup GroupsContent not supported - 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
+
+
+
Nodes
+
myNodeContent not supported - 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
+
NodlContent not supported - 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
+
RaspiBoltContent not supported - Set up your own Bitcoin and Lightning node from scratch doing everything yourself. You'll learn about Linux, Bitcoin, and Lightning
+
RoninDojoContent not supported - Open source high performance plug and play full node with an emphasis on maintaining strong privacy while interacting with Bitcoin
+
Start9Content not supported - 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
+
UmbrelContent not supported - 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
+
+
+
Payment Processors
+
BTCPay ServerContent not supported - Open source self-hostable cryptocurrency payment processor focused on providing secure, private, and censorship-resistant payments
+
+
+
Peer-to-Peer (P2P) Exchanges
+
Reviews
+
KYCNOT.MEContent not supported - 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!
+
Exchanges
+
AgoraDeskContent not supported - Closed source peer-to-peer (P2P) exchange with Tor support, accepts Bitcoin, Monero, and cash, allows you to swap coins, requires an account that doesn't need to use any personally identifiable information, uses a semi-custodial wallet, no JavaScript needed to use the service, the service has an API available, and Android and iOS apps are available
+
BisqContent not supported - 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
+
Hodl HodlContent not supported - 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
+
PeachContent not supported - 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
+
RobosatsContent not supported - 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
+
+
+
Podcasts
+
Bitcoin ExplainedContent not supported - 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
+
Bitcoin Fixes ThisContent not supported - An exploration of the impact Bitcoin has had and continues to have on multiple aspects of society hosted by Jimmy Song
Citadel DispatchContent not supported - 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
What Bitcoin DidContent not supported - A tri-weekly Bitcoin podcast where host Peter McCormack interviews experts in the world of Bitcoin development, privacy, investment and adoption
+
+
+
Products
+
CoinkiteContent not supported - Company focused on designing and manufacturing bitcoin security and fun devices like the Coldcard, Opendime, Tapsigner, Satscard, Blockclock, and more
+
Crypto CloaksContent not supported - Company focused on designing and manufacturing 3D printed Bitcoin related products like node shells, hardware wallet mounts, home mining devices, and more
+
+
+
Website
+
BitcoinContent not supported - Bitcoin core website that has introductory resources for individuals, businesses, and developers, resources, ways to participate, FAQs, and more
BitplatesContent not supported - 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
+
BlockplateContent not supported - 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
+
CodlContent not supported - 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
+
Quadrat RegisterContent not supported - 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
+
SeedplateContent not supported - Single plate design, 12 words per side, etch marks chemically colored in black for better legibility, designed to be small, compatible with Seed XOR, received an overall grade of A from Jameson Lopp, and made by Coinkite in Canada
+
+
+
Software Wallets
+
Lightning and On-Chain
+
Blue WalletContent not supported - 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
+
ElectrumContent not supported - 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
+
Fully NodedContent not supported - 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
+
MuunContent not supported - 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
+
Lightning Only
+
AlbyContent not supported - 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
+
BreezContent not supported - 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
+
PhoenixContent not supported - Open source Android and iOS non-custodial Lightning wallet and node that offers many features and is powered by Eclair
+
RTLContent not supported - 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
+
ZapContent not supported - Open source non-custodial Lightning wallet available for Android, iOS, Linux, macOS, and Windows that offers many features including connecting to your own Lightning node
+
ZeusContent not supported - Open source Android and iOS non-custodial Lightning wallet that offers many features including connecting to your own Lightning node
+
On-Chain Only
+
NunchukContent not supported - 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
+
SparrowContent not supported - 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
+
SpecterContent not supported - 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
+
+
+
Statistics
+
Know Your Coin Privacy (KYCP)Content not supported - Open source online tool for users to visualize the degree of privacy in a Bitcon transaction. Their zero log policy states KYCP is a static client for OXT, no backend or third-party service involved other than OXT, queries are directly sent to OXT over HTTPS, and there is no way to see or log your searches
+
Mempool ObserverContent not supported - Interesting statistics about the Bitcoin mempool including current data, historical data, recent blocks, Segregated Witness (SegWit) data, a transaction monitor, and more
+
+
+
Support
+
Bitcoin Dev ListContent not supported - 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
+
OpenSatsContent not supported - Focused on helping to support and maintain a sustainable ecosystem of funding for free and open source projects and contributors related to Bitcoin
+
Ten31Content not supported - Venture capital fund focused exclusively on investing in the Bitcoin ecosystem
+
+]]>
+
+
+ Notes and Other Stuff Transmitted by Relays (Nostr)
+ https://codemonkeys.tech/resources/nostr/
+ https://codemonkeys.tech/resources/nostr/
+ Notes and Other Stuff Transmitted by Relays (Nostr)
+ 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! 🗒️🐒
+
Notes and Other Stuff Transmitted by Relays (Nostr)
🗒️ 🐒
+
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.
+
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.
+]]>
+
+
+ Privacy
+ https://codemonkeys.tech/resources/privacy/
+ https://codemonkeys.tech/resources/privacy/
+ Privacy
+ 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! 🔒🐒
+
Privacy
🔒 🐒
+
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.
+
+
Android Web Browsers
+
BraveContent not supported - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
+
BromiteContent not supported - Open source Chromium based mobile browser with privacy and security focused enhancements including built-in ad blocking
+
FirefoxContent not supported - 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
+
Firefox FocusContent not supported - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking
+
TorContent not supported - 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
+
+
+
App Stores
+
F-DroidContent not supported - App store that contains free and open source software (FOSS) applications for Android
+
+
+
Card Aliasing
+
MySudoContent not supported - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution
NextcloudContent not supported - 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
+
+
+
Desktop Web Browsers
+
BraveContent not supported - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
LibreWolfContent not supported - 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
+
TorContent not supported - 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
+
UnGoogled ChromiumContent not supported - 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
+
+
+
Electronic SIM (eSIM)
+
Silent LinkContent not supported - 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
+
+
+
Email
+
ProtonMailContent not supported - 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
+
TutanotaContent not supported - 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
+
+
+
Email Aliasing
+
SimpleLoginContent not supported - Open source and self-hostable email aliasing solution built with privacy and security in mind
VeraCryptContent not supported - Open source encryption software that allows you to create virtual encrypted disks within files and to encrypt entire partitions or storage devices
OnionShareContent not supported - Open source tool that lets you securely and anonymously share files, host websites, and chat using the Tor network
+
SyncthingContent not supported - Open source continuous file synchronization tool that encrypts all communication and allows users to sync files between authenticated devices
Privacy GuidesContent not supported - 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
+
Privacy ToolsContent not supported - 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
+
Seth for PrivacyContent not supported - An individual interested in educating and learning more about privacy and technology. Check out the Opt OutContent not supported 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
+
TechloreContent not supported - 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
+
The Hitchhiker’s Guide to Online AnonymityContent not supported - 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
+
The New OilContent not supported - 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
+
+
+
iOS Web Browsers
+
BraveContent not supported - Open source Chromium based browser with good privacy and security defaults, and the cryptocurrency features within the browser can also be disabled if desired
+
FirefoxContent not supported - 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
+
Firefox FocusContent not supported - Open source privacy-focused mobile browser based on Firefox that comes with automatic tracking protection and ad blocking
+
Onion BrowserContent not supported - 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
+
+
+
Messengers
+
BriarContent not supported - 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
MatrixContent not supported - 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 ElementContent not supported
+
SessionContent not supported - 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
+
SignalContent not supported - Open source messenger that uses end-to-end encryption (E2EE) with a simple interface that requires a phone number to create an account
+
ThreemaContent not supported - 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
+
+
+
Mobile Phone
+
CalyxContent not supported - Open source Android mobile operating system that focuses on improving privacy and security
+
GrapheneOSContent not supported - Non-profit open source mobile operating system project with Android app compatibility that focuses on improving privacy and security
+
Librem 5Content not supported - Uses PureOS which is a Linux distribution with a focus on privacy and security and it incorporates open hardware specifications when possible
+
PinePhone ProContent not supported - Uses an open source Linux based mobile operating system that incorporates open hardware specifications when possible
ArchContent not supported - 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
+
DebianContent not supported - Open source GNU/Linux distribution that offers users security, stability, and reliability
+
FedoraContent not supported - Open source GNU/Linux distribution that that focuses on providing users with strong privacy and security by default
+
Pop!_OSContent not supported - 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
+
Qubes OSContent not supported - 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
+
+
+
Operating Systems (Live)
+
TailsContent not supported - 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
+
WhonixContent not supported - 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
+
+
+
Password Managers
+
BitwardenContent not supported - Open source, self-hostable, and cloud-based option password manager that uses zero knowledge end-to-end encryption (E2EE)
+
KeePassContent not supported - Open source password manager that uses industry standard encryption and stores all password databases locally on your device
+
+
+
Phone Number Aliasing
+
HushedContent not supported - 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
+
JMP.chatContent not supported - 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
+
MySudoContent not supported - A proprietary Voice over IP (VoIP) US, Canadian, and UK phone number, handle, email, browser, and credit/debit card aliasing solution
+
TextverifiedContent not supported - A proprietary fully functional US phone number aliasing solution that you can use for phone and SMS verification
+
ViberContent not supported - A proprietary Voice over IP (VoIP) phone number aliasing solution that supports worldwide numbers
+
+
+
Prebuilt Computers
+
PurismContent not supported - 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
+
System76Content not supported - 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
+
+
+
Search Engines
+
Brave SearchContent not supported - Proprietary privacy-focused search engine that uses its own independent search index for search results
+
SearxContent not supported - Open source configurable and self-hostable metasearch engine which aggregates results from numerous search engines and can be used over Tor for online anonymity
+
StartpageContent not supported - Proprietary privacy-focused search engine that consists of privately proxied Google search results without the unwanted tracking, third-party cookies, and targeted ads
+
+
+
Two-Factor Authentication (2FA)
+
Software
+
AegisContent not supported - 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
+
TofuContent not supported - 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
NitrokeyContent not supported - 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
+]]>
+
+
+ Web Development
+ https://codemonkeys.tech/resources/webdev/
+ https://codemonkeys.tech/resources/webdev/
+ Web Development
+ 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! 🕸️🐒
+
Web Development
🕸️ 🐒
+
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.
Since we're assuming we can only use each letter in s and t once, then for t to be an anagram of s they must be the same length.
We can first check that s and t are the same length, and if they aren't we can return false.
Now, if s and t are the same length, they must also contain the same letters.
# How to Check if s and t contain the same letters?
We're given s and t 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 s and t.
Ex 1) s = "anagram" sArray = ["a", "n", "a", "g", "r", "a", "m"] t = "nagaram" tArray = ["n", "a", "g", "a", "r", "a", "m"]
Ex 2) s = "rat" sArray = ["r", "a", "t"] t = "car" tArray = ["c", "a", "r"]
We can use the split() method, and pass it a pattern of "".
This tells split() to split our strings into substrings where a "" pattern occurs which is between each character in our strings.
split() will then return an array of these substrings.
Now, we need a way to compare the letters of sArray with the letters of tArray.
We could take the first value of sArray and compare it with each value of tArray. 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.
A simplier solution though is to realize that we can sort our arrays, and if t is an anagram of s, then our arrays will have all the same letters in the same order.
Then we can check if the letters in the arrays are equal by comparing each value at index i of sArray with each value at index i of tArray.
To do this we can loop over the length of one of the arrays, and if the values of our arrays at index i are not equal, then we can break the loop by returning false.
If the arrays are equal, then we'll loop over the entire length of our array and return true.
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.
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 $accentColor, $textColor, and $borderColor in the palette.styl file. The colors of these variables then get applied instead of the colors originally set by the default theme(opens new window). These variables can also be used to style other elements of the blog as well.
We also added our own global styling variables to the palette.styl file which included the $backgroundColor and the $darkBorderColor. These variables were then used in the index.styl file.
In the index.styl file we used some of the global styling variables along with overriding and adding our own global styling to style the background-color of the blog, the main tag with a class of home, the header tag with a class of hero, and the div tag with a class of features.
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.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
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 padding in the home class:
padding: 8rem 0 0 adds a padding of 8rem to the top and a padding of 0 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.
Why not Start with this Padding?
In the previous tutorial we used padding: 0 to style the home class since that code was based off of a more complicated way of styling the Footer component which has now been simplified. We'll be going over this simplified Footer component styling in the next tutorial.
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.
To implement the hover effects we'll be adding a CSS pseudo-class of hover to the header tag with a class of hero which we'll use along with the transition property to smoothly apply the hover effects to the main card logo and to the box shadow around the main card.
First, let's add the hover pseudo-class:
.hero:hover applies the hover pseudo-class to the .hero selector which will apply the styles defined inside of it when the user hovers their pointer over the header tag with a class of hero.
box-shadow: 0.125rem 0.5rem 1rem 0.125rem #0b0c0f changes the box shadow style defined in the hero class.
transform: scale(1.1) applies the scale() method to the transform property to increase the size of the img tag to be 1.1 times the original width and height.
If you have questions about the CSS discussed above, then check out these resources:
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.
The hover effects are working, but they aren't that smooth. To make them smoother we're going to use the transition property.
The transition property allows you to change CSS property values smoothly over a specified duration. To create a transition you need to specify two values:
The CSS property you want to add the transition to
The duration of the transition
Here's what the index.styl file looks like after adding our transition properties:
transition: box-shadow 0.2s adds the transition effect to the box-shadow property with a specified duration of 0.2s.
transition: transform 0.2s adds the transition effect to the transform property used by the img tag with a specified duration of 0.2s.
When you hover your pointer over the main card, the hover effects should look much smoother.
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.
We'll be adding a circular radial gradient background to the center of the header tag with a class of hero:
background-image: radial-gradient(circle at center center, #2c303a, $backgroundColor) adds a radial gradient with a circular shape to the center of the element starting with a color of #2c303a which transitions to the $backgroundColor variable that is defined in the palette.styl file.
If you want to learn more about CSS gradients, then check out these resources:
You can also check out Gradient Magic(opens new window) which is a gallery of CSS gradients that you can freely use in your own projects.
The background of the main card should now be a radial gradient that starts at the center of the card with a color of #2c303a that circularly transitions to the $backgroundColor.
In the next tutorial we'll add styling to make the Footer component stick to the bottom of the page, and we'll add a highlight effect to the SVG icons.
We're going to continue styling the blog by making the Footer component we created in VuePress Tutorial 8 - Custom Footer into a sticky footer. We were going to be adding a highlight effect when hovering over the SVG(opens new window) 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.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
A sticky footer adheres or sticks 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 homepage, then the footer will still stick to the bottom of the page instead of appearing directly below the content above it.
There are multiple ways to add a sticky footer to your site, but we're only going to discuss how to use the CSS calc() function. If you're interested in learning about the other ways of adding a sticky footer, then check out Sticky Footer, Five Ways(opens new window).
Here's what the index.styl file looks like after adding the sticky footer styling:
Here we added min-height: calc(100vh - 10.3125rem) to a div tag with a class of theme-container.
If you inspect the browser and go to the Elements tab, you can see where the div tag with a class of theme-container is in the HTML of the blog.
The div tag with a class of theme-container contains all of the content of the blog except for the footer tag.
So, here we're using min-height: calc(100vh - 10.3125rem) to set the minimum height of the content inside of the div tag with a class of theme-container to be 100vh minus 10.3125rem which is the height of the Footer component including the top and bottom padding.
The unit of vh is relative to 1% of the height of the viewport which is the browser window size, so 100vh is 100% of the height of the viewport.
So, when we subtract 10.3125rem from 100vh, we're subtracting the height of the Footer component from 100% of the viewport height.
This means the minimum height of the content inside of the div tag with a class of theme-container will be the entire homepage height minus the height of the Footer component.
After setting this style, notice how the Footer component is now pushed to the bottom of the page. This is how we get the Footer component to stick to the bottom of the page.
Also, since we added this style to the index.styl file, this style will be applied globally to the blog which is fine since the Footer component will be used on every page in the blog.
Using a Fixed Footer Size
We're using a fixed size for the height of the Footer 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 Footer component, then it may be worth looking into implementing the flexbox or grid methods for adding a sticky footer which you can find in the Sticky Footer, Five Ways(opens new window) post.
If you have questions about the CSS discussed above, then check out these resources:
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 SVG(opens new window) icons.
We're now ready to add a highlight effect when hovering over the SVG(opens new window) icons. The method we'll be using doesn't require a lot of styling, but it does require us to edit the fill attribute of the SVG(opens new window) icons.
We'll demonstrate how to edit the fill attribute by manually editing the files as well as using a Command-line Interface (CLI) command provided by vuepress-plugin-svg-icons(opens new window) which will automate the process and optimize the files.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
When we downloaded the icons from iconfont(opens new window) we downloaded them with a fill attribute which will override the color we set for the hover effect.
To fix this issue we can manually remove the fill attribute from each icon file.
After removing fill="e6e6e6", the file will look like this:
SVG File Formatting
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 fill attribute or search for fill in the file to be able to easily find and remove it.
Now that we have removed the fill attribute from the file, we can add the styling to highlight the icon when hovering over it.
Here's what the Footer.vue file looks like after adding the hover effect:
svg:hover applies the hover pseudo-class to the svg selector which will apply the styles defined inside of it when the user hovers their pointer over the svg tag.
fill: $accentColor changes the fill of the svg tag to be the accent color.
Notice the icon fill is now set to be the accent color even if you're not hovering over the icon.
This is because we haven't set a fill attribute value for when the user isn't hovering over the icon, so it falls back to the value set in svg:hover.
To fix this issue we'll add the following styling to the Footer.vue file:
svg is the selector used to target the icon.
fill: $textColor sets the fill of the svg to be the text color when the user isn't hovering over the icon.
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.
To set the hover effect for the other icons, you will need to remove the fill attribute from the other icon files.
If you have questions about the CSS discussed above, then check out these resources:
Here's the CLI command you need to run vuepress svgo [docsDir] where [docsDir] is the docs directory for your project which in our case is docs.
You can add the CLI command to the scripts object in the package.json file:
Then you can run the script using:
After running the script, the SVG(opens new window) files will be optimized which includes removing the fill attribute from the files.
The hover effect should now be applied to each icon assuming you added the styling from the section above.
If you have any questions or want to learn more about the plugin, then check out the guide(opens new window).
You can also check out SVGO(opens new window) if you want to learn more about the optimization tool including CLI usage, configuration, API usage, etc.
Here's the contents of the optimized GitHub.svg file:
SVG File Formatting
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.
If you compare the optimized file with the original file above, you'll notice a lot of unnecessary information was removed including the fill attribute without affecting the rendering of the icons.
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 default theme(opens new window): navbar, site-name, links, search-box, nav-links, nav-item, and dropdown-title.
To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
This means in the index.styl file we can nest the navbar class inside of the theme-container class and apply the following styles:
display: flex defines a flex container for all of the direct children of the header tag with a class of navbar.
align-items: center vertically centers the flex items, i.e., the direct children of the header tag with a class of navbar.
height: 4.5rem sets the height of the navbar to be 4.5rem.
background-color: $backgroundColor sets the background color of the navbar to be $backgroundColor which is a global styling variable we set in the palette.styl file.
border-bottom-width: 0.125rem sets the border bottom width of the navbar to be 0.125rem.
Here's the location of the site-name class in the HTML:
From the HTML above we can see that the site-name class is attached to a span tag and is a child of the a tag with a class of home-link which is a child of the header tag with a class of navbar.
This means in the index.styl file we can nest the links class inside of the navbar class and apply the following styles:
background-color: transparent sets the background color behind the search box and of the links on the right side of the navbar to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the links class.
height: 3rem sets the height of the div tag which contains the search box and the links on the right side of the navbar to be 3rem.
align-items: center vertically centers the flex items, i.e., the direct children of the div tag with a class of links which was given a style of display: flex by the default theme(opens new window).
This means in the index.styl file we can nest the search-box class inside of the links class and apply the following styles:
margin-right: 1.5rem adds a margin of 1.5rem to the right of the search box.
font-size: 1.125rem sets the font size of the text in the input tag to be 1.125rem.
background-color: transparent sets the background color of the input tag to be transparent. This has the effect of showing the background color set in the navbar class since it's no longer being covered by the background color set in the input tag.
border-width: 0.125rem sets the width of the border around the input tag to be 0.125rem.
color: $textColor sets the color of the text in the input tag to be $textColor which is a global styling variable we set in the palette.styl file.
Viewing the font-size and color Styles
To see the font-size and color 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 $accentColor which is a global styling variable we set in the palette.styl file. This effect is provided by the default theme(opens new window) and uses the focus pseudo-class.
Here's the location of the nav-item class in the HTML:
From the HTML above we can see that there are four nav-item classes. Each one is attached to a div tag and is a child of the nav tag with a class of nav-links.
This means in the index.styl file we can nest the nav-item class inside of the nav-links class and apply the following styles:
.nav-item:first-child applies the first-child pseudo-class to the .nav-item selector. The first-child 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 div tag with a class of nav-item in the group of sibling div tags that have the class of nav-item.
margin-left: 0 adds a margin of 0 to the left of the first div tag with a class of nav-item within the group of sibling div tags that have a class of nav-item.
margin-left: 1.75rem adds a margin of 1.75rem to the left of all of the div tags that have a class of nav-item except for the first one since that is being styled by the first-child pseudo-class.
Here's the location of the dropdown-title class in the HTML:
From the HTML above we can see that the dropdown-title class is attached to a button tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.
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 nav-dropdown and dropdown-item which are provided by the default theme(opens new window).
To locate these classes we're going to take a look at the HTML of the blog by inspecting the browser, going to the Elements tab, and then selecting an element on the page. After locating the classes, we'll be applying the styling to the index.styl file which will globally apply the styles. Finally, we'll be describing the styling in detail.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
Before we start styling the dropdown menu, we're going to force an element state of hover on the div tag with a class of dropdown-wrapper. This will ensure we can see the changes we're making to the dropdown menu even when we move the cursor away from the dropdown-wrapper class.
To do this we need to select the dropdown-wrapper class in the Elements tab.
Here's the location of the dropdown-wrapper class in the HTML:
After selecting the dropdown-wrapper class in the Elements tab, we need to go to the Styles tab, click on the :hov tab, then force the element state of hover by checking the :hover checkbox.
The dropdown menu should now be shown even when the cursor is moved away from the dropdown-wrapper class.
We're going to begin the styling by locating where the nav-dropdown class is in the HTML:
From the HTML above we can see that the nav-dropdown class is attached to a ul tag and is a child of the div tag with a class of dropdown-wrapper which is a child tag of the div tag with a class of nav-item.
This means in the index.styl file we can nest the nav-dropdown class inside of the nav-item class and apply the following styles:
text-align: center horizontally aligns the text in the dropdown menu.
background-color: $backgroundColor sets the background color of the dropdown menu to be $backgroundColor which is a global styling variable we set in the palette.styl file.
border: 0.125rem solid $borderColor adds a border around the dropdown menu with a thickness of 0.125rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
padding: 0.8rem 0 adds a padding of 0.8rem to the top and bottom and 0 to the left and right of the dropdown menu.
Here's the location of the dropdown-item class in the HTML:
From the HTML above we can see that there are two dropdown-item classes. Each one is attached to an li tag and is a child of the ul tag with a class of nav-dropdown.
Also, notice the h4 tag which is a child of the li tag with a class of dropdown-item. We'll be styling this h4 tag as well.
In the index.styl file we can nest the dropdown-item class inside of the nav-dropdown class as well as nest the h4 tag inside of the dropdown-item class and apply the following styles:
padding-bottom: 0.4rem adds a padding of 0.4rem to the bottom of each of the dropdown items.
border-top: 0.0625rem solid $borderColor adds a border to the top of the h4 tag, i.e., the By Topics text with a thickness of 0.0625rem, a style of solid, and a color of $borderColor which was defined in the palette.styl file.
cursor: text sets the cursor when pointing over the h4 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.
margin: 0.45rem 0.375rem 0 adds a margin of 0.45rem to the top, 0.375rem to the left and right, and 0 to the bottom of the h4 tag, i.e., the By Topics text.
If you have questions about the CSS discussed above, then check out these resources:
It's now time to install and begin the process of configuring @vuepress/plugin-blog(opens new window). 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 document classification, permalinks, and directory classification.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
Pagination(opens new window) which allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.
Client API(opens new window) which allows you to access global variables that contain data about pagination, frontmatter, and the various services the plugin provides.
We'll be discussing pagination and the Client API in more detail in future tutorials.
If you're following along with the tutorials, then when you switch to the tutorial-15 branch you can run the following command to install the package instead of running the installation command:
This will ensure you have the same version used in the blog since the command uses the version specified in the yarn.lock file during the installation.
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.
The plugins will only be used though if you enable them in the config.js file.
They can also be installed as standalone plugins, so you don't need to use the blog plugin to use them for your site.
We'll be discussing these plugins in more detail in future tutorials.
The blog plugin provides a document classifier which is a set of functions that handles the classifications of pages with the same characteristics.
These characteristics for pages in a blog may consist of:
Pages in the same directory, e.g., a _posts directory.
Pages containing the same frontmatter key, e.g., tag: js which signifies those pages contain content related to js, i.e., JavaScript.
Another common requirement is the ability to group all pages as well as pages with specific tags for pagination.
Before discussing directory classification, we're going to first define what a permalink is as well as discuss how they're built and configured. This will give us a better understanding of how the blog plugin uses permalinks to build customizable links for blog posts which is preferable to using the default way of creating links.
A permalink is a URL that is intended to remain unchanged for a long time. This leads to links that are less susceptible to link rot(opens new window) 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.
VuePress v1(opens new window) provided support for creating customizable links by introducing the ability to build permalinks.
The default configuration for permalinks is /:regular.
The :regular template variable will first check if the Markdown files in the documents directory which in our case is the docs directory are index files, i.e., README.md or index.md.
If they're index files, they get converted to URLs without extensions that are based on the file hierarchy.
If they're not index files, they get converted to URLs with html extensions that are based on the file hierarchy.
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 docs directory:
Relative Path
Page Routing
/README.md
/
/foo/README.md
/foo/
/foo.md
/foo.html
/foo/bar.md
/foo/bar.html
Using Vue Files
Files with a vue extension follow the same conventions described for Markdown files above, e.g., /README.vue gets converted to /.
To globally change the default configuration for permalinks for your site you can add the permalink property to the config.js file.
We can build a permalink to use in the config.js file by using the template variables.
For example we can use the template variables to build the following permalink: /:year/:month/:day/:slug.
We can then set this as the value for the permalink property in the config.js file:
Using the Default Configuration
We'll be leaving the permalink property with the default value of /:regular, and we'll use the configuration provided by the blog plugin to customize the permalinks for each blog post.
It's also possible to set a permalink locally for a single page which overrides any globally set configuration.
This is done be setting the permalink property in the frontmatter of the Markdown file:
This will set the permalink property to be /using-a-local-permalink instead of following the global configuration.
Now that we have an understanding of document classification and permalinks, let's move onto the directory classifier which handles classifying pages placed in the same directory.
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 _posts directory inside of the docs directory. The docs directory for your site should now look something like this:
By default VuePress(opens new window) will create the following page URLs since it uses the /:regular template variable described above when building the links:
/_posts/2020-07-03-example-page-1.html
/_posts/2021-11-16-example-page-2.html
/_posts/2022-05-08-example-page-3.html
You should now be able to navigate to these pages in the browser:
The customized permalinks 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 config.js file. We'll be discussing these other properties and their default values below.
The previously provided links still work because they get converted to the customized permalinks when navigating to those pages.
Unknown Custom Element
When navigating to the links if you inspect the browser then go to the Console, you'll see the following error: Unknown custom element: <Post>.
This error is occurring because the plugin is looking for a Post layout component in the layouts directory which we haven't created yet.
Before creating a Post layout component to fix this error, we're going to first add the path property.
The path 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.
The expected type is a string, and the default value is /${id}/ where ${id} is the value of the id property we previously set.
This means you don't need to explicitly set the path property if you're going to be using the same value as the id property. We'll be using a value of /posts/ for the path 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.
Here's the updated config.js file:
You can navigate to the entry page by using the following link:
Notice this link has the value of the path property in it, i.e., /posts/. 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.
Currently, when navigating to that link the Layout component provided by the default theme(opens new window) is displayed. The blog plugin will fallback to using the Layout component if it's unable to find an IndexPost layout component in the layouts directory.
This means we can create an IndexPost layout component that specifically handles the layout of the paginated list of all of the posts instead of using the Layout component.
To create the IndexPost layout component we're going to add an IndexPost.vue file inside of the layouts directory. The layouts directory for your site should now look something like this:
We're now ready to add the layout property which is used to specify which layout to use for the entry page.
The expected type is a string, and the default value is 'IndexPost' || 'Layout'.
From the default value we can see why the entry page originally defaulted to using the Layout component before we created the IndexPost layout component. Since the blog plugin looks for the IndexPost 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.
It's also possible to use a custom value for the layout property, e.g., you could use a value of MyIndexPost which you would have to explicitly set in the config.js file. Then you would have to create a MyIndexPost.vue file inside of the layouts directory.
Here's the updated config.js file:
We're now going to fix the Unknown Custom Element error we got after adding the dirname property. To fix this error we need to create the previously mentioned Post layout component.
The Post layout component is used to handle the layout for individual post pages.
To create the Post layout component we're going to add a Post.vue file inside of the layouts directory. The layouts directory for your site should now look something like this:
We're now ready to add the itemLayout property which is used to specify which layout to use for individual post pages.
The expected type is a string, and the default value is 'Post'.
From the default value we can see why the blog plugin looks for a Post layout component. Since the blog plugin looks for the Post 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.
It's also possible to use a custom value for the itemLayout property, e.g., you could use a value of MyPost which you would have to explicitly set in the config.js file. Then you would have to create a MyPost.vue file inside of the layouts directory.
We're now ready to add the itemPermalink property which is used to build customized permalinks for each blog post.
The expected type is a string, and the default value is '/:year/:month/:day/:slug'.
From the default value we can see how the blog plugin built the customized permalinks after only setting the dirname 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.
In the next tutorial we'll be discussing the configuration for the pagination property as well as how to access the pagination data in the layout components by using the Client API.
Now it's time to learn more about the pagination feature and the Client API provided by @vuepress/plugin-blog(opens new window). In this tutorial we're going to begin the configuration of the pagination property as well as discuss the globally scoped $pagination variable provided by the Client API.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
As mentioned in the previous tutorial pagination allows you to break up the display of your posts into multiple pages. This provides easier navigation and a better user experience.
Next, we'll add the lengthPerPage property which sets the maximum number of posts to display per page.
The expected type is a number, and the default value is 10.
When the number of posts is greater than the lengthPerPage value, the blog plugin will generate the necessary pages to display all of the posts.
The blog plugin does this by adding page/n/ onto the end of the entry page where n represents the number of the page.
So, the second page in the paginated list of pages would be page/2/.
If you remember from the previous tutorial VuePress Tutorial 15 - Blog Plugin, the entry page is set by the path property which was given a value of /posts/.
This means in our case the blog plugin will generate pages with the following format: /posts/page/n/ where n once again represents the number of the page.
We also created the following posts in the _posts directory in the previous tutorial:
2020-07-03-example-page-1.md
2021-11-16-example-page-2.md
2022-05-08-example-page-3.md
Since we only have three posts and the default value for lengthPerPage is 10, the blog plugin won't generate any more pages. You can test this by attempting to navigate to the following page:
Now we're going to add the layout property which is used to specify which layout component to use for the pagination pages except for the entry page. The entry page uses the IndexPost layout component which we set in the previous tutorial.
The expected type is a string, and the default value is 'DirectoryPagination' || 'Layout'.
Since we haven't created a DirectoryPagination layout component in the layouts directory, the layout property uses the other default value which is the Layout component. In our case the Layout component is provided by the default theme(opens new window).
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:
If you want your pagination pages except for the entry page to use a layout specifically designed for them, then you can create a DirectoryPagination.vue file inside of the layouts directory. Since DirectoryPagination is the default value for the layout property you won't need to explicitly set it in the config.js file.
We'll be using the same layout for the entry page and for the other pagination pages, so we're going to provide a custom value of IndexPost to the layout property.
Here's the updated config.js file:
When navigating to the following page you should now see the IndexPost layout component being used instead of the Layout component:
Here's a table that summarizes the relationship between the pagination and post page URLs the blog plugin builds and the layout components:
URLs
Layouts
/posts/
IndexPost (falls back to Layout)
/posts/page/2/
IndexPost (falls back to DirectoryPagination or Layout)
/2020/07/03/example-page-1/
Post
/2021/11/16/example-page-2/
Post
/2022/05/08/example-page-3/
Post
Post Pages Reminder
The post pages were given the URLs above by building customized permalinks using the format specified by the itemPermalink property, and the layout components used by the post pages were set by the itemLayout property. Both of these properties can be found in the config.js file, and you can refer to the previous tutorial VuePress Tutorial 15 - Blog Plugin if you have any questions about the post pages.
Now we'll add the prevText 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 pagination pages.
The expected type is a string, and the default value is 'Prev'.
We'll be using the default value of 'Prev' for the prevText 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.
It's also possible to use a custom value for the prevText property, e.g., you could use a value of Older which you would have to explicitly set in the config.js file.
We're now ready to add the nextText 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 pagination pages.
The expected type is a string, and the default value is 'Next'.
We'll be using the default value of 'Next' for the nextText 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.
It's also possible to use a custom value for the nextText property, e.g., you could use a value of Newer which you would have to explicitly set in the config.js file.
We're now going to take a look at how to use the Client API to access the pagination data in the layout components used by the blog plugin.
The Client API 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 Using Vue in Markdown(opens new window) documentation if you're interested.
The Client API provides the following globally scoped variables: $pagination, $frontmatterKey, and $service. We'll be focusing on the $pagination variable in this tutorial.
If you have any questions or want to learn more about the Client API, then check out the Client API(opens new window) documentation.
We're going to discuss each property the $pagination variable exposes as well as demonstrate how to access the properties in the layout components.
To get a better understanding of the pagination data we're going to log each property to the console. The logging will be added to the created lifecycle hook in the script tag. To view the data in the console we're going to inspect the browser then go to the Console tab.
If you have questions about the created lifecycle hook, then check out this resources:
If you access the $pagination variable at a route which doesn't match any classification, i.e., the route isn't a pagination page, then the value of $pagination will be null.
This means when developing layout components you should check if $pagination has a value of null before using the variable.
The $pagination.pages property is an array of objects where each object contains data related to post pages that are accessible on the current pagination page.
Since the $pagination.pages property contains data related to post pages that are accessible on the current pagination page, the data of $pagination.pages will be different depending on which pagination page is being viewed.
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.
Here are the links to both the entry page and the second page:
Let's add the code to log the $pagination.pages property in the layout component which in our case is being used by both the entry page and the second page, i.e., the IndexPost.vue file:
Using Different Layout Components
If you're using different layout components for your entry page and the other pagination pages, then you'll need to add the logging of the $pagination.pages property to both of the files.
After adding the above code to the IndexPost.vue file and navigating to the entry page, the console should log an array of page objects with the following data:
Since the lengthPerPage property was given a value of 2 and we have three post pages, the $pagination.pages property for the entry page contains two page objects one for each post.
Formatting Differences
The log in the Console tab will be formatted differently than the $pagination.pages data shown here which was formatted using JSON(opens new window). The properties and values will be the same though.
After navigating to the second page, the console should log an array consisting of one page object with the following data:
Now let's describe what each property in the $pagination.pages data represents:
layout: Layout component used by the post pages which is set using the itemLayout property in the config.js file.
permalink: Permalink format used for the post pages which is set using the itemPermalink property in the config.js file.
id: Unique id for the current classifier which is set using the id property in the config.js file.
key: Unique key generated for each page in the site.
path: Path for the post page which uses a customized permalink built from the format specified by the itemPermalink property found in the config.js file.
pid: Represents the pid for the current classifier which is set using the id property in the config.js file.
regularPath: Default path for the post page which is built using the :regular template variable.
relativePath: Location of the post page Markdown file relative to the documents directory which in our case is the docs directory.
The $page Variable
The page objects in the $pagination.pages property are the same page objects found by logging the globally scoped $page variable in the Post layout component. After writing the code to log the $page variable, you can view the log by navigating to a post page, e.g., http://localhost:8080/2020/07/03/example-page-1/(opens new window).
To learn more about the $page variable and other globally scoped variables you can take a look at the Global Computed(opens new window) documentation.
The $pagination.length property is a number whose value is determined by the number of pagination pages.
Let's add the code to log the $pagination.length property in the IndexPost.vue file:
If we navigate to either the entry page or the second page, the console should log a value of 2 since in our case there are a total of two pagination pages.
The $pagination.hasPrev property is a boolean which has a value of true when a previous pagination page exists and a value of false when a previous pagination page doesn't exist.
Let's add the code to log the $pagination.hasPrev property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of false. This makes sense since the entry page is the first pagination page which means there is no previous pagination page.
If we navigate to the second page, the console should log a value of true which makes sense since the entry page is before the second page.
The $pagination.prevLink property is a string whose value is the previous pagination page path if a previous pagination page exists and a value of null when a previous pagination page doesn't exist.
Let's add the code to log the $pagination.prevLink property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of null. This makes sense since the entry page is the first pagination page which means there is no link to a previous pagination page.
If we navigate to the second page, the console should log a value of /posts/ which makes sense since the previous link before the second page is the entry page which has a path of /posts/.
The $pagination.hasNext property is a boolean which has a value of true when a pagination page exists after the current pagination page and a value of false when a pagination page doesn't exist after the current pagination page.
Let's add the code to log the $pagination.hasNext property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of true. This makes sense since there is a next page in the paginated list of pages, i.e., the second page.
If we navigate to the second page, the console should log a value of false which makes sense since in our case there is no pagination page after the second page.
The $pagination.nextLink property is a string whose value is the path of the next pagination page if it exists and a value of null when the next pagination page doesn't exist.
Let's add the code to log the $pagination.nextLink property in the IndexPost.vue file:
If we navigate to the entry page, the console should log a value of /posts/page/2/. This makes sense since the entry page is the first pagination page, and in our case there is a link to the next pagination page, i.e., the second page.
If we navigate to the second page, the console should log a value of null. This makes sense since in our case the second page is the last page in the list of pagination pages which means there is no link to the next pagination page.
The $pagination.getSpecificPageLink() is a method that accepts a page number and returns the path of a pagination page. The page numbers start at 0, so to get the entry page path you need to provide a value of 0. If an input is provided that is unable to return a path to a pagination page, then an error is thrown which can be found in the Console tab.
Let's add the code to log the output of the $pagination.getSpecificPageLink() method in the IndexPost.vue file:
Since we used a page number of 0 in the code above, the console should log a value of /posts/. This makes sense since a value of 0 refers to the entry page which has a path of /posts/.
If we want to get the path of the second page, then we can use a value of 1 as the page number, so the console should log a value of /posts/page/2/. This makes sense since a value of 1 refers to the second page which has a path of /posts/page/2/.
In the next tutorial we'll begin the development of the IndexPost layout component which will involve using the $pagination variable provided by the Client API.
We're now ready to begin the development of the IndexPost layout component. We'll be using the globally scoped $pagination variable provided by the blog plugin Client API(opens new window) to access the pagination data. In this tutorial we'll be focusing on the post title and preview pagination data. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
Before accessing and displaying the pagination data, we're going to first give the component a name and remove the created lifecycle hook which we were using in the previous tutorial to log the pagination data to the console.
To display the pagination data we're going to loop over the $pagination.pages property which if you remember from the previous tutorial VuePress Tutorial 16 - Pagination is an array of objects where each object contains data related to post pages that are accessible on the current pagination page.
Since $pagination.pages is an array that we want to loop over, we're going to use the v-for directive to render a list of post pages based on the data within the array. The v-for directive uses the following syntax v-for="item in items" where items is the array you want to loop over, and item is an alias for the array element being iterated on. Here, items corresponds to $pagination.pages, and we'll use post as the alias for the array element being iterated on. This means our v-for directive will be v-for="post in $pagination.pages".
When using the v-for directive the common best practice is to bind a key attribute where each value given to the key attribute should be unique. The key attribute uses the following syntax :key="item.id" where id is a property with a unique value for every item in the items array.
You really only need to use the key attribute when the rendered list relies on child component state or temporary Document Object Model (DOM)(opens new window) state, e.g., form input values . This means we don't actually need to include the key attribute since we're currently just rendering a static list.
However, we're going to bind the key attribute in case we ever need to use it in the future. To ensure the key attribute has a unique value for each item in the list, we're going to use the key property which is a unique value generated for each page object within the $pagination.pages array. Here's what the key attribute will look like in our case :key="post.key".
Now we need to determine what tag we want to add our v-for directive and key attribute to. We're going to add them to a div tag which will allow us to wrap the pagination data for each post in the list of post pages. Here's what the div tag is going to look like after adding the v-for directive and key attribute <div v-for="post in $pagination.pages" :key="post.key"></div>.
Since the div tag uses the v-for 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 template tag because the template tag can only have one root element. To resolve this issue we're going to wrap the div tag that's using the v-for directive within another div tag which will serve as the root element.
After updating the IndexPost.vue file with the code above, if you navigate to the entry page http://localhost:8080/posts/(opens new window) you won't notice any changes on the page. This is because we've rendered div tags without any of the pagination data inside of them.
If you navigate to the entry page, inspect the browser, and go to the Elements tab, the HTML for the body tag should now look something like this:
Notice how the entry page consists of two div tags wrapped inside of the div tag that's being used as the root element of the template tag. Each of those div tags inside of the parent div tag corresponds to a post page that is accessible on the entry page.
If you navigate to the second page http://localhost:8080/posts/page/2/(opens new window) you also won't notice any changes on the page. This is because we've rendered a div tag without any of the pagination data inside of it.
The HTML for the body tag for the second page should now look something like this:
Notice how the second page consists of one div tag wrapped inside of the div tag that's being used as the root element of the template tag. There is only one div tag since we have one post page accessible on the second page.
Before we can access the post title data using the $pagination.pages property, we need to first add titles to the post files we created in the _posts directory:
Since the post files are Markdown files, we can add titles to the files by adding a heading level one, e.g., # Heading Level 1 to each file which gets converted to the following HTML <h1>Heading Level 1</h1>.
Here's what the post files look like after adding the titles:
If you have any questions or want to learn more about Markdown headings, then check out the Basic Syntax(opens new window) guide.
When VuePress(opens new window) encounters a heading level one in a Markdown file it automatically adds a title property to the globally scoped $page variable.
The page objects in the $pagination.pages property are the same as the $page variables used by the post pages which means each page object will now have a title property that we can access in the IndexPost layout component.
You can take a look at the Global Computed(opens new window) documentation to learn more about the $page variable and other globally scoped variables.
Now that we can access the post titles in the $pagination.pages property, we're ready to render the post titles on the pagination pages.
We're going to display the post titles as h2 tags which we'll be wrapping inside of two div tags. We'll be using the div tags to add styling to the list of post pages in a future tutorial.
To display the post titles we'll be using Text Interpolation(opens new window) which allows us to use variables inside of HTML tags by using the "Mustache" syntax. The "Mustache" syntax consists of wrapping a variable inside of double curly braces.
We can access the title property on each page object in our loop by using post.title. We can then display this by using the text interpolation described above.
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 $pagination.pages property, we need to first add previews to the post files we created in the _posts directory:
The value for each post preview 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.
When VuePress(opens new window) encounters a YAML(opens new window) frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped $page.frontmatter variable.
The page objects in the $pagination.pages property are the same as the $page variables used by the post pages which means each page object will now have a frontmatter.preview property that we can access in the IndexPost layout component.
You can take a look at the Global Computed(opens new window) documentation to learn more about the $page variable and other globally scoped variables.
Content Excerpt
Instead of defining the custom variable preview in the YAML(opens new window) frontmatter blocks of Markdown files, VuePress(opens new window) provides the ability to use a Content Excerpt(opens new window) by adding a <!-- more --> comment to a Markdown file. Any content above the comment gets extracted and exposed as a globally scoped $page.excerpt variable. This variable can then be used to render the list of post pages with excerpts for each post just like our custom variable preview. I prefer to use the custom variable preview because the <!-- more --> comment takes all of the content above it which includes any HTML as opposed to using just the text of a post.
When viewing the pagination 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 theme-default-content to the outermost div tag.
.theme-default-content:not(.custom) is used to select tags that have a class of theme-default-content and that don't have a class of custom by using the :not() pseudo-class. This selector is defined by the default theme(opens new window) since other pages can use the theme-default-content class along with a class of custom to apply different styles than the ones shown here. The homepage is an example of a page that uses the theme-default-content class along with a class of custom to apply different styles.
max-width: 740px; sets the maximum width of the div tag to be 740px. If the content is greater than the max-width, then the height of the div tag will automatically be changed. If the content is smaller than the max-width, then the max-width property has no effect.
margin: 0 auto; sets the margins for the div tag by setting the top and bottom margins to be 0 and the left and right margins to a value of auto. The value of auto means the browser will automatically set the left and right margins to horizontally center the div tag.
padding: 2rem 2.5rem; sets the padding for the div tag by setting the top and bottom paddings to be 2rem and the left and right paddings to be 2.5rem.
@media (max-width: 959px) 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 959px.
padding: 2rem; sets the padding for all of the sides of the div tag to be 2rem when the width of the display area is less than or equal to 959px.
@media (max-width: 419px) 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 419px.
padding: 1.5rem; sets the padding for all of the sides of the div tag to be 1.5rem when the width of the display area is less than or equal to 419px.
If you have any questions about the CSS discussed above, then check out these resources:
The theme-default-content class is used on the global Content component within the Page and Home components provided by the default theme(opens new window). If you look at the HTML on the homepage, you'll see the theme-default-content class being used on a div tag within the main tag with a class of home. We'll be discussing the global Content component, the Page component, and the Home component in more detail in future tutorials.
In the next tutorial we'll be continuing the development of the IndexPost layout component by using the $pagination variable to add images to each post in the list of post pages.
In this tutorial we're going to continue the development of the IndexPost layout component by using the globally scoped $pagination variable to access pagination data related to images. To display the data on the pagination pages we'll be updating the IndexPost layout component's template tag like we did in the previous tutorial.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
Before we can access the pagination 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.
Each post image has a width of 155px and a height of 185px. Using the same width and height for the post images makes the list of post pages look consistent.
The images were created using Canva(opens new window). 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 GIMP(opens new window).
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. Canva(opens new window) and GIMP(opens new window), and some of the other image tools mentioned above offer the ability to compress your images.
Here are some other useful online tools for image compression:
Let's start by creating an examples directory inside of the images directory. The examples directory will be used to store the post images for each example post.
The directory structure for your site should now look something like this:
After adding the examples 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 examples directory. Then we'll add the post images to the directories of each example post.
We're going to start with the first example post by adding an example-post-1 directory inside of the examples directory. Then we'll add the image for the first example post which is named example-post-1.png inside of the example-post-1 directory.
The directory structure for your site should now look something like this:
For the second example post we'll be adding an example-post-2 directory inside of the examples directory. Then we'll add the image for the second example post which is named example-post-2.png inside of the example-post-2 directory.
The directory structure for your site should now look something like this:
For the third example post we'll be adding an example-post-3 directory inside of the examples directory. Then we'll add the image for the third example post which is named example-post-3.png inside of the example-post-3 directory.
The directory structure for your site should now look something like this:
After adding the post images to the blog, we now need to add a way to access each image in the IndexPost layout component which we'll accomplish by adding a custom variable img to the YAML(opens new window) frontmatter blocks of each post file. The value of the img custom variable will be the path to the image in the project.
We're also going to add another custom variable of alt to the YAML(opens new window) frontmatter blocks of each post file. The value of the alt custom variable will be a description of the image.
As mentioned in the previous tutorial when VuePress(opens new window) encounters a YAML(opens new window) frontmatter block in a Markdown file it automatically adds each variable as a property to the globally scoped $page.frontmatter variable.
Since the page objects in the $pagination.pages property are the same as the $page variables used by the post pages, we will now have a frontmatter.img property and a frontmatter.alt property that we can access in the IndexPost layout component.
Now that we can access the values of the img and alt custom variables in the $pagination.pages property, we're ready to render the images on the pagination pages.
We're going to display the images using the img tag which we'll place in a div tag underneath the parent div tag of the p tag.
The img tag allows us to embed an image into the page. We'll be using the src and alt attributes provided by the img tag.
The src 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.
The alt attribute is optional and consists of a text description of the image which is useful for accessibility(opens new window) 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.
We can access the img and alt properties on each page object in our loop by using post.frontmatter.img and post.frontmatter.alt, respectively.
The IndexPost.vue file should now look like this:
Here we're binding the src and alt attributes by placing a : before them which is shorthand for v-bind. This allows us to bind the JavaScript expressions to the HTML attributes.
Also, notice /images/ was added to the beginning of the path to the post images which we need to add since they're all located in the images directory. We don't need to include .vuepress/public in the path to the post images though because whenever you reference assets stored in the public directory that gets added automatically.
We also added an alternative value for the post image alt attribute in case the alt custom variable isn't present in the frontmatter of a post. This is done by using a logical OR operator, i.e., ||. Here, we're using "post.frontmatter.alt || 'Post Picture'" which means if the alt property evaluates to a falsy(opens new window) value, then we'll display the Post Picture text instead.
If you have any questions or want to learn more about v-bind or the logical OR operator, then check these resources:
In the next tutorial we'll be continuing the development of the IndexPost layout component by beginning the process of adding the pagination buttons to the pagination pages.
Every time we navigate to the entry page or the second page in the list of pagination 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 pagination links to each of the pagination pages.
To accomplish this we'll be using the following properties provided by the blog plugin Client API(opens new window):
$pagination.hasPrev
$pagintaion.prevLink
$pagination.hasNext
$pagintaion.nextLink
Before, we use the properties to add the pagination links, we're going to add two more example posts to the blog. This will allow us to view the pagination 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.
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 examples directory. Then we'll add the post images to the directories for each example post.
For the fourth example post we'll be adding an example-post-4 directory inside of the examples directory. Then we'll add the image for the fourth example post which is named example-post-4.png inside of the example-post-4 directory.
The directory structure for your site should now look something like this:
For the fifth example post we'll be adding an example-post-5 directory inside of the examples directory. Then we'll add the image for the fifth example post which is named example-post-5.png inside of the example-post-5 directory.
The directory structure for your site should now look something like this:
Having these three pagination pages will allow us to view the pagination links in every scenario that we mentioned in the beginning of the post.
Order of Posts
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 date property to sort the posts which it looks for on the frontmatter of each post page. Since we haven't added a date 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 date custom variable to the frontmatter blocks of the post pages.
If you have any questions about adding the example pages to the _posts 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:
We're now ready to use the properties provided by the blog plugin Client API(opens new window) to add the pagination links to the pagination pages.
We're going to display the pagination links using two router-link components one for the previous page and one for the next page. We'll be wrapping each router-link component in a div tag.
We'll then wrap the div tags inside another div tag which we'll place underneath the div tag that is being used to loop over the pagination pages.
The router-link component is provided by Vue Router(opens new window) which gets installed when installing VuePress(opens new window). The router-link component is used for enabling user navigation for the site. The target location for the link is specified by using the to prop, and it renders as an a tag with the specified href by default.
If you want to learn more about the router-link component, then check out the <router-link>(opens new window) documentation.
To display the pagination link for the previous page we'll be using the $pagination.hasPrev property to check if the current pagination page has a previous page. We'll use the $pagination.prevLink property to provide the path of the previous pagination page to the router-link component to prop.
Similarly, to display the pagination link for the next page we'll be using the $pagination.hasNext property to check if the current pagination page has a next page. We'll use the $pagination.nextLink property to provide the path of the next pagination page to the router-link component to prop.
We discussed the properties above in detail in the VuePress Tutorial 16 - Pagination post, so if you need a refresher or if you have any questions read through the relevant sections in that post.
The IndexPost.vue file should now look like this:
Here we're using the v-if directive to conditionally render the pagination links by using the values of the $pagination.hasPrev and $pagination.hasNext properties. The block of code using the v-if directive will only be rendered if the expression provided to it returns a truthy(opens new window) value.
We're also binding the to prop by placing a : before it which is shorthand for v-bind. Using v-bind allows us to bind JavaScript expressions to the HTML attributes.
If you have any questions or want to learn more about conditional rendering or v-bind, then check these resources:
You should be able to click on the Prev pagination link, and it should take you to the previous page. You should also be able to click on the Next pagination link, and it should take you to the next page.
The HTML for the body tag for the second page should now look something like this:
You may have noticed the styling of the Prev and Next pagination 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 pagination links, respectively.
As well has being useful for writing technical documentation, it also has a blog plugin(opens new window) which we'll be looking at in more detail in future tutorials.
After that we'll provide a list of some of the features of VuePress(opens new window), and then we'll give some quick comparisons with similar technologies.
Before we define what an SSG 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 SSG.
We'll mainly be looking at each type of website in terms of search engine optimization (SEO), speed, and ease of updating.
Since SSGs create static HTML pages at build-time then behave like an SPA, they are suited for websites that don't have a lot of frequent content changes.
Each Markdown file gets compiled into HTML with markdown-it(opens new window) which is then processed as the template of a Vue(opens new window) component. This is what enables you to use Vue(opens new window) directly in your Markdown files and also makes it possible to embed dynamic content.
Within a theme you are able to create directories that handle global components, components, layouts, styles, and templates. You can also create files for theme configurations and app level enhancements. 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 npm(opens new window) package which allows other people to easily install it.
The Code Monkeys Blog is currently a child theme inherited from the default theme. Eventually, I would like to look into publishing it as an npm(opens new window) package.
We'll go over the directory structure, what each directory in a theme is used for, theme configuration, app level enhancement, and theme inheritance(opens new window) in future tutorials.
Designed for building applications whereas VuePress(opens new window) is focused on content-centric static sites with a focus on technical documentation
We're going to begin the process of styling the Prev and Next pagination links that we added to each of the pagination pages in the previous tutorial. To implement the styling we'll be adding the following CSS classes pagination, left-arrow, and right-arrow to the IndexPost layout component.
The pagination class will be used to properly space out the Prev and Next pagination links. The left-arrow and right-arrow classes will be used to add some styling to the left arrow and right arrow icons which we'll be adding using the global vp-icon component which is provided by vuepress-plugin-svg-icons(opens new window).
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.
We're going to start by adding the pagination class to the div tag that is wrapping both of the router-link components in the IndexPost.vue file.
Then we'll apply the following styles:
lang="stylus" is used to specify which pre-processor we want to use in the component which in our case is Stylus(opens new window) which is the default pre-processor used by VuePress(opens new window).
scoped is used to only apply the styles to the current component, i.e., the IndexPost layout component. We're scoping these styles since they currently only apply to the IndexPost layout component.
display: flex defines a flex container for all of the direct children of the div tag with a class of pagination.
justify-content: space-between 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 div tag with a class of pagination, i.e., the div tags that are wrapping the router-link components.
padding-top: 2rem adds a padding of 2rem to the top of the div tag with a class of pagination.
The pagination links should now be properly spaced out, and you can view the styling updates by navigating to the pagination pages:
To add the left and right arrow icons to the site we need to first download the icons. To find icons for your site vuepress-plugin-svg-icons(opens new window) recommends using iconfont(opens new window). 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 #e6e6e6 and a size of 200 which is the default size.
To easily download the left and right arrow icons you can also install the browser extension SVG Export(opens new window). 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.
After adding the left and right arrow icons to the icons directory, the plugin will automatically load the icons and provides the global vp-icon component. To use the vp-icon component we need to pass a name attribute to it where the value is the name of the SVG file we want to use.
Here, the value for the name attribute will be leftArrow for the Prev pagination link and rightArrow for the Next pagination link.
We're going to be adding the vp-icon components inside of the corresponding router-link components.
The IndexPost.vue file should now look like this:
To view the left and right arrow icons navigate to the pagination pages:
Notice how the left arrow icon is being displayed to the left of the Prev pagination text and how the right arrow icon is being displayed to the right of the Next pagination text. This ensures the arrows and the text look correct when being displayed.
If you downloaded the left and right arrow icons from the repository or by using the SVG Export(opens new window) browser extension, then the icons should already be optimized and you shouldn't have to run the CLI command.
Here's the CLI command you can run to optimize the icons vuepress svgo [docsDir] where [docsDir] is the docs directory for your project which in our case is docs.
First we'll be going over how to create a repository on GitHub(opens new window). 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.
Each tutorial in this series involving code will also have a branch in the code-monkeys-blog-tutorials(opens new window) 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.
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 GitHub(opens new window).
If you want to create your own repository for your own project, then you need to:
Go to your profile page, click on the Repositories tab, then click the New button or on any page in the upper right corner, click the + drop-down menu, then select New repository
Type a short and descriptive name in the Repository name field
Type a description in the Description field (optional)
Choose if you want the repository to be Public or Private
Add a README.md file which you can use to describe your project in more detail and to document how to install and use your project
Add a .gitignore file which is used to ignore specified files and directories when making a commit, I recommend selecting the Node template from the drop-down menu
Add your preferred license which is used to tell others how they can use your code
You can also choose a different default branch name, e.g., master instead of main by clicking on the settings link
After successfully cloning the repository, you can run the following command to list both the remote-tracking and local branches:
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:
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:
If you get an error when running the above command and the provided branch name exists, then check your version of git by running git --version. You need to be using at least Git 2.23(opens new window) to use the switch command.
If you have an older version of git or if you prefer to not use the switch command, you can alternatively run the following command to work on the code for a remote-tracking branch:
The recommended way to switch branches is with the switch command since the checkout command does more than just switching branches which can lead to confusion.
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:
If you edit the code for a branch and attempt to pull, you may run into merge conflicts. You can check out About Merge Conflicts(opens new window) to learn more about what they are and how to resolve them.
You're going to be closely following along with these turtorials in which case I recommend using v1.22.17 since it's the same version being used by the Code Monkeys Blog. This will allow you to avoid any potential issues with packages and with the GitHub Actions(opens new window) workflow which is used when deploying the site.
Using the Locally Set Version of Yarn in the Repositories
The code-monkeys-blog-tutorials(opens new window) and the code-monkeys-blog(opens new window) repositories both have a local version of yarn set to v1.22.17 in a .yarn/releases directory. This means if you use the code from the repositories, then you'll be able to use the locally set version of yarn instead of having to install the specific local version of yarn yourself.
The next sections will show you how to check your current versions of node and yarn.
If you don't have node or yarn installed or you want to change the versions, then check out the provided resources explaining how to install specific versions.
To check if you have node installed run the following command:
If you see an output of v10.xx.xx or greater, then you can continue on with the VuePress(opens new window) installation.
Code Monkeys Blog Node Version
The Code Monkeys Blog is currently using Node.js v16.11.1(opens new window). If you're going to be closely following along with these turtorials, then I recommend using the same version to avoid any potential issues.
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 node.
To install a system version of node you can go to Node.js(opens new window) and download a compatible version.
If you previously installed a system version of node from Node.js(opens new window), then you can go back to the site and download a newer version to upgrade your current version.
If you're a developer that needs to use multiple versions of node when working on different projects, then I recommend using a node version manager. Before installing a node version manager like nvm(opens new window) or fnm(opens new window), I recommend uninstalling your system version of node, npm, and any globally installed npm packages to avoid potential issues.
After installing a compatible version of node, you will now have npm the default package manager for node. If you prefer you can use npm to install VuePress(opens new window). However, if you're going to be closely following along with these tutorials, then I recommend using yarn.
To check if you have yarn installed run the following command:
If you don't see your preferred version of yarn, then it's recommended to install or upgrade a global version of Yarn 1(opens new window) which can then be used to set a local version of yarn for the project.
To learn more about how to install a global version of Yarn 1(opens new window), how to use the global version to set a local version of yarn for a project, and other commonly used commands check out the Installing Yarn 1 post.
If you created your own repository and are using a locally set version of yarn, then be sure to update your .gitignore file and add a .gitattributes file as described in the Installing Yarn 1 post.
Recommended Version and Repositories Reminder
Remember the recommended version of yarn to use with your project if you're closely following along with these tutorials is v1.22.17. Also, if you use the code from the repositories, then there will be a provided local version of yarn which you can use instead of installing the specific local version yourself.
If you downloaded or cloned the code from the code-monkeys-blog-tutorials(opens new window), first check your version of yarn by running the following command in the project directory:
If the version of yarn is v1.22.17, then you can install all of the packages being used in the project by running the following command in the root project directory:
Make sure you're not using the master branch when checking the version since it doesn't have the .yarn directory and that you have a global version of yarn installed.
If you're using your own repository and want to install VuePress(opens new window) yourself, then use one of the installation methods described below.
When installing VuePress(opens new window) you have the option to use the create-vuepress-site generator(opens new window) 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.
Using the generator will help scaffold a basic site structure for you by creating common directories and files found in VuePress(opens new window) sites.
To use the generator run the following command in your preferred directory using your preferred package manager:
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 quick-start-project:
The scaffolded basic site is created in a docs directory in your current directory which in the example above was quick-start-project. All of the created directories and files are listed above.
If you're using npm you'll see a .npmignore file in the docs directory instead of a .gitignore file.
Using an Optional Directory Name
If you passed an optional directory name, then the scaffolded basic site is created in the given directory in a docs directory.
The answers given to the questions can be found in the docs directory in the package.json file which contains your site's metadata.
Here's the contents of the package.json file from the example above:
We'll be covering the contents of the package.json file in the next tutorial. If you're interested in learning more now, then check out the package.json guide(opens new window).
To see your newly created site, navigate to the docs directory:
Install your site's packages using your preferred package manager:
Installing the Same VuePress Version
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 yarn upgrade vuepress@1.8.2.
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.
As mentioned above, the following tutorials will be based off of the manual installation method.
Using an Existing Project
If you already have an existing project and you would like to keep the documentation inside of it, then start from the third command.
Navigate to your preferred directory which should be where you cloned your site's repository:
Initialize your project with your preferred package manager:
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 project-directory:
After answering all of the questions, a package.json file containing the answers is created. The package.json file is used to describe metadata about your site.
Here's the contents of the package.json file from the example above:
We'll be covering the contents of the package.json file in the next tutorial. If you're interested in learning more now, then check out the package.json guide(opens new window).
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 yarn upgrade vuepress@1.8.2.
Create a docs directory and your first document:
Add the following scripts object to your package.json file:
Here's the contents of the package.json file from the example above after installing VuePress(opens new window) and adding the scripts object:
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 VuePress(opens new window) site.
The current directory structure of the project is based off of creating a repository for your project on GitHub(opens new window), cloning the repository, setting a local version of yarn for your project, and doing a manual installation of VuePress(opens new window). This means if you're not using a local version of yarn and/or did a quick start installation your current directory structure will be a little different.
Here's the current directory structure of the project:
.yarn/releases: Stores a local version of yarn for the project which ensures everyone working on the project is using the same version. If you didn't set a local version of yarn for your project, you won't have this directory.
docs/README.md: The first document for the site which will be used as the homepage.
node_modules: Contains all of the code for the installed packages.
.gitattributes: Used to prevent git from showing large diffs when you add or update local versions of yarn. If you didn't set a local version of yarn for your project, you won't have this file.
.gitignore: Ignores specified files and directories when making a commit to your repository.
.yarnrc: Instructs your global version of yarn to use the specified local version in the project. If you didn't set a local version of yarn for your project, you won't have this file.
LICENSE: Tells others how they can use your code.
package.json: Describes metadata about your site.
README.md: Used to describe your project in more detail and to document how to install and use your project.
yarn.lock: Keeps track of the exact versions of packages installed in the project. If you're using npm you'll have a package-lock.json file instead.
Reminder to Update the .gitattributes and .gitignore Files
If you created your own repository and are using a locally set version of yarn, then be sure to update your .gitignore file and add a .gitattributes file as described in the Installing Yarn 1 post.
Before moving on to the recommended directory structure, we're going to first go over the contents of the package.json file and add some simple updates.
The properties of your package.json 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 package.json file directly.
The package.json file contains metadata about your project. This metadata includes information used to identify and describe your project and the packages you install which follow semantic versioning (semver)(opens new window).
Let's describe each property in a little more detail:
name is the name given to your project
version indicates the current version of your project
+
description is used to describe and provide more information about your project
main is a JavaScript file that starts the execution of your project
repository describes the location of the project repository containing the code
+
You can explicitly set the URL and a version control type in the package.json file by adding, e.g., "repository": { "type": "git", "url": "https://github.com/github-username/your-project" }
author describes the creator or owner of the project
+
You can explicitly set the author name, email, and website in the package.json file by adding, e.g., "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }
license indicates the type of license being used by the project
scripts 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
devDependencies are dependencies you need during development only, i.e., not during production
Installing the Same VuePress Version
If you see a different version of VuePress(opens new window) and want to install the same version being used in the tutorials and blog, then you can run yarn upgrade vuepress@1.8.2.
Now, let's make some simple updates to the package.json file.
To start we're going to be adding a version control type to the repository property by updating it to be "repository": { "type": "git", "url": "https://github.com/github-username/your-project" }.
Next we're going to be adding an optional email and url to the author property by updating it to be "author": { "name": "Your Name", "email": "youremail@example.com", "url": "https://your-website.com" }.
If you prefer you can also shorten the author property to be one string by defining it like this "author": "Your Name <youremail@example.com> (https://your-website.com)".
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.
docs/README.md: The first document for the site which will be used as the homepage (same file described in the current directory structure section).
docs/example-page/README.md: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., /example-page/.
package.json: Describes metadata about your site (same file described in the current directory structure section).
Using the Recommended Directory Structure for Themes
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 VuePress(opens new window) site.
Here's the recommended directory structure if you plan on writing your own theme for your site. Since the Code Monkeys Blog is a child theme inherited from the default theme(opens new window), we'll be using the recommended directory structure for themes when developing the blog.
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 Theme Inheritance(opens new window) documentation.
If you're not using a theme when developing your site, you have the option of using the recommended directory structure for a standard VuePress(opens new window) site. There should only be minor differences when following along with these tutorials.
Only the Layout.vue file is mandatory when writing a theme, but we'll be using the other recommended directories as we continue to develop the blog.
When creating these directories and files be sure to follow the capitalization to prevent any potential issues.
docs/.vuepress: Stores the global configuration, theme, static resources, etc.
docs/.vuepress/public: Static resource directory.
docs/.vuepress/theme: Stores the theme of the site.
theme/components: Stores the Vue components.
theme/global-components: The Vue components in this directory automatically get registered as global components.
theme/layouts: Stores the layout components used by the theme.
theme/layouts/Layout.vue: Mandatory layout component used by the theme.
theme/styles: Stores style related files.
theme/styles/index.styl: Used to add global styles that can override the default styles.
theme/styles/palette.styl: Used to define global styling variables and override the default styling variables.
theme/templates: Stores HTML template files.
theme/templates/dev.html: HTML template file for development environment.
theme/templates/ssr.html: HTML template file used in the build time.
theme/enhanceApp.js: Theme level enhancement.
theme/index.js: Entry file for theme configuration.
docs/.vuepress/config.js: Entry file for configuration, can also be yml or toml.
docs/README.md: The first document for the site which will be used as the homepage (same file described in the current directory structure section).
docs/example-page/README.md: An example document which is used as another page for the site. Here, the route for the page is the directory name, i.e., /example-page/.
package.json: Describes metadata about your site (same file described in the current directory structure section).
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 Theme(opens new window) documentation.
In the directory structure above we used the docs directory as the targetDir. If you want to learn more about how the targetDir is used, then take a look at the Command-line Interface(opens new window) documentation.
To see an example of the docs directory being used as the targetDir we can take a look at the scripts object we defined in the package.json file which is in the root directory of the project. Notice the targetDir gets set as the docs directory for the docs:dev and docs:build scripts:
All the relative paths are relative to the docs directory. Here are the relative paths and the default page routing paths for the directory structure described above:
Relative Path
Page Routing
/README.md
/
/example-page/README.md
/example-page/
From the table we can see the relative path for the homepage is /README.md and the default page routing path for the homepage is /. We can also see the relative path for the example page is /example-page/README.md, and the default page routing path for the example page is /example-page/.
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.
Before adding the config file, let's first create a .vuepress directory in the docs directory. The .vuepress directory will be used to store all VuePress(opens new window) specific directories and files.
The directory structure for your site should now look something like this:
The config.js file should export a JavaScript object like the following:
If you run into any issues when adding the directory and file above, then be sure to check out the Configuration(opens new window) documentaion.
Alternative Config Formats
In this series we'll be using a JS config file format, i.e., .vuepress/config.js. However, VuePress(opens new window) also supports the following config file formats: YAML - .vuepress/config.yml, TOML - .vuepress/config.toml, and TS - .vuepress/config.ts. If you want to use TS, then you need to have a VuePress(opens new window) version of 1.9.0+ installed. See the TypeScript as Config(opens new window) documentation for more details.
Now that we have added a config.js file, we can begin to add more functionality and customization to the site by setting some of the basic config file properties.
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 Config Reference(opens new window).
The title 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 default theme(opens new window) as a link to the homepage.
The expected type is a string, and the default value is undefined.
Now let's set the title of the site:
After adding the title and saving the file, you should see Code Monkeys or whatever value you set as your site's title in the top left of the navbar as a link to the homepage.
You can also inspect the page, go to the Elements tab, open the <head> tag, and you'll see the following:
The value of the <title> tag will be whatever you set as the value for the title of your site.
Removing Hello VuePress
When we update the homepage in the next tutorial, we'll remove the Hello VuePress | from the <title> tag.
In this tutorial we'll be discussing how to configure the homepage layout by using the options exposed by the default theme(opens new window) which comes with the installation of VuePress(opens new window) and is designed for technical documentation. Along with the homepage the default theme(opens new window) also allows customization for the navbar, sidebar, search box, etc. We'll discuss those customizations in more detail in future tutorials.
Before moving on to the homepage layout, we're going to first describe what a theme is. If you remember from the VuePress Tutorial 2 - Why Use VuePress? post, a VuePress(opens new window) theme allows you to control how your project is structured. Within a theme you are able to create directories that handle global components, components, layouts, styles, and templates. You can also create files for theme configuration and app level enhancements. So, a theme handles all of the layout and interactivity details for your site.
Now that we have a good understanding of what a theme is, let's move on to configuring the homepage layout.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) to see the changes to your site. If the changes aren't appearing after you save them, then try restarting your local development server.
To use the homepage layout open the README.md file in the docs directory of your project then you need to add home: true to a YAML(opens new window) frontmatter block at the top of the page.
We're also going to remove the # Hello VuePress line from the file since we're going to start customizing the homepage.
The README.md file now looks like this:
Before discussing the changes to the site, let's first describe what YAML(opens new window) and frontmatter are.
YAML(opens new window) is a recursive acroynym for "YAML Ain't Markup Language", 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.
When you add a YAML(opens new window) frontmatter block to a page you need to declare it at the top of a Markdown file, and the content must adhere to proper YAML(opens new window) formatting between a set of triple-dashed lines, i.e., --- like the example above.
We'll be using the YAML(opens new window) syntax throughout the tutorials, but if you're interested here's how to set the homepage layout using the other supported syntaxes.
Now that we have a better understanding of YAML(opens new window) frontmatter blocks, let's discuss the changes to the site after specifying the homepage layout.
Before specifying the homepage layout, the HTML for the homepage consists of the following:
The highlighted lines refer to what gets changed after specifying the homepage layout.
After specifying the homepage layout, the HTML for the homepage consists of the following:
Here are the changes in the HTML after specifying the homepage layout:
Line 3: The initial title tag that was set to Hello VuePress | Code Monkeys is now set to Code Monkeys.
Line 15: The initial main tag had a class of "page", and it now has a class of "home" and an attribute of aria-labelledby="main-title".
Line 16: The initial child elements of the div tag are removed since the # Hello VuePress line was removed from the README.md file, and the div tag is moved to line 25 with an added class of "custom". Line 16 now consists of a header tag with a class of "hero", and the child tags of <h1 id="main-title">Code Monkeys</h1> and <p class="description">" Learn to Code like a Monkey... "</p>.
Line 22: The initial footer tag is removed from the page.
The public directory is a static resource directory which is useful in the following cases:
You need to provide static assests that aren't directly referenced in any of your Markdown or component files, e.g., favicons and PWA icons which we'll discuss in more detail in future tutorials.
You need to serve shared static assets that are referenced outside of your site, e.g., logo images.
You want to reference images using absolute URLs in your Markdown and component files.
In a future tutorial we'll discuss what absolute URLs are in more detail as well as relative URLs, the base URL, and how to use aliases. If you're interested in learning more now, then check out the Assest Handling(opens new window) documentation.
The image we're going to be adding to the homepage is the Code Monkeys full logo. We're going to create an images directory in the public directory. Then we're going to create a code-monkeys-logos directory inside of the images 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-monkeys-logos directory, we're going to add the full Code Monkeys logo which is named code-monkeys-full-logo.png.
After adding those directories and the image, the directory structure for your site should now look something like this:
The logo was created using Canva(opens new window). 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 GIMP(opens new window).
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. Canva(opens new window) and GIMP(opens new window), and some of the other image tools mentioned above offer the ability to compress your images.
Here are some other useful online tools for image compression:
After adding the logo to the site, we can reference the logo in our homepage by adding heroImage: /images/code-monkeys-logos/code-monkeys-full-logo.png to the frontmatter.
Notice you don't need to include .vuepress/public in the path to the logo because whenever you reference assets stored in the public directory it's added automatically.
The README.md file now looks like this:
The homepage image is added as a child element of the <header> tag that has a class of "hero".
Here's what the HTML looks like after adding the homepage image:
Since we already added a site title property in the config.js file, we already have a title on the homepage which has the same value as the site title property.
If you prefer to have the site title property and the title on the homepage to be different, then you can add heroText: Homepage Title to the frontmatter.
The README.md file would look like this:
For the Code Monkeys Blog we'll be using the value of the site title property for the homepage title, so the README.md file will look the same as before:
Here's the HTML with the homepage title highlighted:
Since we already added a site description property in the config.js file, we already have a tagline on the homepage which has the same value as the site description property.
If you prefer to have the site description property and the tagline on the homepage to be different, then you can add tagline: Your tagline to the frontmatter.
We're going to update the tagline on the homepage from the value of the site description to be tagline: Let's get down to Monkey Business.
The README.md file now looks like this:
Here's the HTML with the homepage tagline highlighted:
An action button provides a link to a preferred page on your site, and it's placed directly below the tagline.
To add an action button you need to add actionText: Text on Action Button and actionLink: /preferred-page/ to the frontmatter.
We're going to add the actionText: Learn to Code like a Monkey → and the actionLink: /topics/ to the homepage of the site.
The README.md file now looks like this:
Here's the HTML with the action button highlighted:
404 When Clicking the Action Button
If you click the action button, it will show the 404 layout because we haven't set up the route to /topics/. In a future tutorial we'll create the Topics page which will fix this issue.
Features are text that get displayed under the action button that are used to provide a summary of what your site is about.
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.
Here's the format for adding features with titles and details to the frontmatter of your page:
We're going to be adding only the feature titles to the homepage of the site.
Sitemap (Important Links Regardless of Current Page - Similar to Global Navbar)
Here's how to add a footer to the frontmatter of your page:
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.
If you do decide to add a footer using the frontmatter in the homepage, then the HTML will look like this:
In this tutorial we'll be discussing how to configure the navbar by using the options exposed by the default theme(opens new window). 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.
The navbar for a site made with VuePress(opens new window) can consist of a logo, a site title, a search box, internal links, languages the site can be translated to, and external links. 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 logo, site title, internal links, and external links. We'll also discuss how to disable the navbar globally as well as locally for specific pages.
Take a look at the navbar on this page to see what we'll be designing for the Code Monkeys Blog. To see another example you can check out the VuePress(opens new window) site navbar as well.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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-monkeys-head-and-shoulders-logo.png to the code-monkeys-logos directory.
The site title in the navbar also provides a link to the homepage, and it's being set by the value of the title property in the config.js file which we set up in a previous tutorial.
After adding the image, the directory structure for your site should now look something like this:
If the directory structure is confusing you, then be sure to take a look at the Adding an Image 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.
After adding the image to the site, we can reference it in the config.js file as follows:
Notice you don't need to include .vuepress/public in the path to the navbar logo because whenever you reference assets stored in the public directory it's added automatically.
Also, notice the value of the site title is being set here by using the title property.
Here's what the HTML looks like after adding the navbar logo:
You should now see the navbar logo in the upper left of the page.
To add links to the navbar other than to the homepage we need to add a nav property to the themeConfig object. The nav property expects an array of navbar link objects. We're going to start by adding internal links.
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.
To add an internal link you need to add { text: 'Link Name', link: '/path-to-page/' } to the nav property where the text defines the name of the link in the navbar and link defines the path to the preferred page.
For our site we're going to add the following internal links: Topics, Posts, Resources, and Donate.
Here's what the config.js file looks like after adding the internal links:
Here's what the HTML looks like after adding the internal links:
Your navbar should now have Topics, Posts, Resources, and Donate links to the right of the search box.
404 When Clicking the Links
If you click the links they will show the 404 layout because we haven't set up the pages for Topics, Posts, Resources, and Donate yet. In future tutorials we'll create these pages which will fix these issues.
An external link is a link that points to a page outside of the same site or domain.
Adding an external link is the same as adding an internal link except the value provided to the link property is a URL to an external site.
External links automatically get target="_blank" rel="noopener noreferrer" attributes added to the <a> tag. The target attribute specifies where to open the linked document, and the rel attribute specifies the relationship between the current document and the linked document.
These attributes are used to prevent a vulnerability known as reverse tabnabbing(opens new window) 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.
You can also customize the values for the target and rel attributes by specifying them as properties in the external link. You can disable the rel attribute for a link by setting it like this rel: false.
For example, we could add an external link to the code-monkeys-blog(opens new window) repository on our site with custom values for target and rel.
Here's what the config.js file looks like after adding the external link:
Here's what the HTML looks like after adding the external link:
No External Link in Navbar
Currently, the Code Monkeys Blog doesn't include an external link in the navbar, but in the future one may be added for the code-monkeys-blog(opens new window) repository using the default values for external links mentioned above.
The links in the navbar can also be dropdown menus if an items property which expects an array of navbar link objects is used instead of just a link property.
For example, the Posts link we made earlier can be turned into a dropdown menu containing links to pages for All Posts and for posts By Topic.
Here's what the config.js file looks like after turning the Posts link into a dropdown menu:
Here's what the HTML looks like after adding a dropdown menu:
Your navbar should now have a Posts dropdown menu containing All Posts and By Topic links.
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 items property which expects an array of navbar link objects instead of using just a link property for a dropdown menu entry.
For example, the By Topic 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 LeetCode, Node.js, and VuePress, so we'll add each of these as an entry to the By Topic subgroup in our dropdown menu.
Here's what the config.js file looks like after turning the By Topic link in the dropdown menu into a subgroup:
Final config.js File
This is how the config.js file should look at the end of this tutorial if you're following along with the building of the blog.
Here's what the HTML looks like after adding a subgroup to the dropdown menu:
Your navbar should now have a By Topic subgroup in the dropdown menu containing these links LeetCode, Node.js, and VuePress.
To add more links to the By Topic subgroup all you need to do is add another element into its items array.
404 Reminder When Clicking the Links
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.
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.
In the next tutorial we'll begin the development of the Footer component which will stick to the bottom of the page and consist of social media icons and a made by message.
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 VuePress(opens new window) and the @vuepress/theme-blog(opens new window).
A footer is located at the bottom of a page, and it typically contains:
Authorship Information
Copyright Information
Contact Information
Sitemap (Important Links Regardless of Current Page - Similar to Global Navbar)
For the Code Monkeys Blog 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.
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 VuePress(opens new window) site footer as well.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
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.
Since we'll be using social media sites that are not currently supported by the footer.contact(opens new window) option, we won't be using this footer. You can contribute social media contact types by making a pull request to the vuepress-theme-blog(opens new window) repository though if you're interested.
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.
In VuePress(opens new window) you have the ability to make your site into a theme. This gives you the option to publish your site as an npm(opens new window) package which allows other developers to easily install and use your theme.
To write your own theme you need to create a theme directory in the .vuepress directory. The docs directory for your site should now look something like this:
From here you can develop your site like any other Vue(opens new window) 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:
Here's a description for each directory and file in the theme directory:
components: Local components used in your theme.
global-components: Components in this directory automatically get registered as global, so you don't need to explicitly import them in a file when using them.
layouts: Layout components used in your theme.
+
Layout.vue: A mandatory layout file for every theme.
styles: Stores files related to styling your theme.
+
index.styl: Overrides any default styling and allows you to globally style your site.
palette.styl: Overrides any default styling variables and allows you to add any global styling variables.
templates: Stores HTML template files.
+
dev.html: HTML template file for development environment.
ssr.html: HTML template file used in the build time.
enhanceApp.js: Enhances the theme of your site by giving you the ability to install Vue plugins, add router hooks, etc.
index.js: Entry file for for theme configuration.
Reviewing the Recommended Directory Structure for Themes
When creating the custom footer component we'll use the global-components directory, the index.js file, and the layouts directory. The global-components directory will be where we add the custom footer component since we want the footer to be available globally. The index.js file will be used to inherit the default theme(opens new window) using theme inheritance(opens new window). Finally, the layouts directory will be where we add the GlobalLayout.vue file which allows us to add our custom footer component to the global layout of the site.
To use a plugin you need to first install it by using either yarn or npm. We'll be using yarn to install all of the plugins for the blog, but the commands for installing the plugins with npm will also be provided. After installing a plugin, you can configure it by adding it to the config.js file.
If you're following along with the tutorials, then when you switch to the tutorial-8 branch you can run the following command to install the package instead of running the installation command:
This will ensure you have the same version used in the blog since the command uses the version specified in the yarn.lock file during the installation.
To install the plugin in your own project you can run the following command:
Installing the Same Plugin Version
If you want to ensure you're installing the same version being used in the tutorials and blog, then run yarn upgrade @goy/vuepress-plugin-svg-icons@4.2.3.
After installing the plugin, the package.json file should look something like this:
Next we need to configure the plugin by editing the config.js file:
To add the social media icons to the site we need to create an icons directory in the docs directory. Here's what the docs directory should look like after adding the icons directory:
The plugin recommends using iconfont(opens new window) to find Scalable Vector Graphics (SVGs)(opens new window) 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 #e6e6e6 and a size of 200 which is the default size.
To easily download the icons used in the footer you can also install the browser extension SVG Export(opens new window). 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.
We'll be using icons for these social media sites as well as to an RSS feed for Code Monkeys in the footer:
After adding the icons to icons directory, the plugin will automically load the icons and will provide a global component named vp-icon. To use the vp-icon component you need to pass a name attribute to it where the value is the name of the SVG file you want to use.
If you're interested in learning more about the plugin, then check out the vuepress-plugin-svg-icons(opens new window) documentation which contains more information about configuration options, component props, and command-line interface (CLI) commands.
We're now ready to create the custom footer component.
The custom footer component will be added to the global-components directory. Here's what the theme directory will look like after adding the Footer.vue file:
Here we're creating a *.vue file which is known as a Single-File Component (SFC)(opens new window). This is a special file format that allows you to encapsulate the HTML in a template tag, the JavaScript in a script tag, and the CSS in a style tag for the component.
Here's what the Footer.vue file looks like after adding these three main sections:
To start we'll add the HTML to the template tag. The contents of the footer will be wrapped in a footer tag containing two child tags a div tag and a p tag. The div tag will contain seven child a tags one for each of the social media icons. The p tag will contain authorship information for the blog.
Each a tag will have the following attributes: href, target, and rel. The href specifies the URL of the page the link goes to, the target specifies where to open the link, and the rel specifies the relationship between the current page and the link. Each a tag will also have a child vp-icon tag which will have the name attribute discussed earlier.
Here's what the Footer.vue file looks like after adding the HTML to the template tag:
Each href has a value of the related URL for the social media site. Each target has a value of _blank, and each rel has a value of noopener noreferrer.
As mentioned in the previous post these values for the target and rel attributes are used to prevent a vulnerability known as reverse tabnabbing(opens new window) 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.
Each name attribute has a value of the name of the related SVG file with the .svg extension omitted.
Next we'll export the JavaScript in the script tag and give the component a name. Here's what the Footer.vue file looks like after updating the script tag:
Finally, we'll style the component by adding the following CSS classes: "footer", "icons", and "made-by". We'll be adding the "footer" class to the footer tag, the "icons" class to the div tag, and the "made-by" class to the p tag. Then we'll add styling for each of the CSS classes in the style tag. Here's what the Footer.vue file looks like after styling:
A scoped attribute is also used in the style tag which means all of the styling only applies to the current component. Take a look at Scoped CSS(opens new window) to learn more about the scoped attribute.
The "footer" class is given display: flex which defines a flex container for all of the direct children of the tag where the "footer" class is used. In this case the "footer" class is used on the footer tag which means the div tag and p tag will be in a flex container. The "footer" class is also given flex-direction: column which means the flex items in the flex container, i.e., the div tag and the p 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 align-items: center which will horizontally center the flex items since the flex direction is set to column. The "footer" class is then given padding: 2.5rem 2.5rem 2rem which will set a padding of 2.5rem for the top, 2.5rem for the left and right, and 2rem for the bottom.
The "icons" class is also given display: flex which means each a tag will be in a flex container since they're all direct children of the div tag which has the "icons" class. The "icons" class is also given margin-bottom: 1.75rem and font-size: 2rem which increases the size of the icons. The CSS selector .icons > a:not(:last-child) is then used which selects all a tags where the parent tag has a class of "icons" except for the last a tag. Each a tag that is selected is given margin-right: 4.6875rem.
Finally, the "made-by" class is given margin: 0 which removes the margin from the p tag.
If you didn't feel comfortable with the CSS discussed above, then here's a good resource to go through CSS Tutorial(opens new window).
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.
Here's what the Footer.vue file should look like:
After adding the global-components directory to the theme directory, you may have noticed the site is rendering a blank page. This is because we created a directory in the theme directory, so VuePress(opens new window) is now looking for a Layout.vue file in the theme directory.
You may have noticed that the Layout.vue file is listed as a mandatory file, but we didn't need to create one in the theme directory. This is because you don't need to explicitly create the Layout.vue file when you're inheriting it from the default theme(opens new window).
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 GlobalLayout.vue file by using the same name for the file in the child theme and the code provided by the documentation.
Now let's create the layouts directory in the theme directory. This is where we'll be adding the GlobalLayout.vue file which again allows us to add our custom footer component to the global layout of the site.
The GlobalLayout.vue file is responsible for handling the global layout of the site. Here's the path to the default GlobalLayout.vue file provided by VuePress(opens new window)node_modules/@vuepress/core/lib/client/components. You can also view the code for the default global layout here(opens new window).
The default global layout gives you the ability to render different layouts depending on if $page.path is defined, i.e., the URL of the page is valid and if $page.frontmatter.layout is defined. If only the $page.path is defined, then the default layout will be used which is Layout. If $page.frontmatter.layout is defined, then the specific layout for that page will be used. If $page.path is not defined, then the NotFound layout is used which is the layout for the 404 page provided by VuePress(opens new window). 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.
To override and edit the GlobalLayout.vue file we're going to use the code provided by the globalLayout(opens new window) section from the documentation. The code provided by the documentation basically uses a computed property(opens new window) 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.
Here's the code from the documentation:
We're going to remove the example header tag and replace the example footer tag with our previously created footer component.
Here's what the GlobalLayout.vue file should look like after the changes:
Importing the Footer Component
Notice that we don't need to explicitly import the footer component since we made it a global component by adding it to the global-components directory in the theme directory.
In the next tutorial we'll discuss how to override the index.styl and palette.styl files to add our own global styling to the site. The global styling will include background color, accent color, text color, etc.
The next step we'll be taking in developing the blog is learning how to override the palette.styl and index.styl files which will allow us to add our own global styling to the blog.
To do this we're going to first discuss what the index.styl and palette.styl files are used for. Then we'll take a look at the predefined styling files provided by the default theme(opens new window), 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.
Make sure you start the local development server which should be running at http://localhost:8080/(opens new window) 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.
The palette.styl file is used to define global styling variables and override the predefined styling variables which in our case are being provided by the default theme(opens new window).
Here are some of the predefined styling variables available to use and override in your site:
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.
Here's a link to the full palette.styl file(opens new window) if you're interested. You can also view the full file by navigating to node_modules/@vuepress/core/lib/client/style/config.styl in your project.
Only Define Variables in palette.styl
You should ONLY define variables in the palette.styl 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
Now that we have a good understanding of the palette.styl file, we're going to create the file by first creating a styles directory in the theme directory. The docs directory for your site should now look something like this:
If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your palette.styl file in the following location .vuepress/styles/palette.styl.
We'll be updating the palette.styl file later on in this post, but first we're going to take a look at the index.styl file.
The index.styl file is used to add global styles as well as override predefined styles which in our case are being provided by the default theme(opens new window).
Even though it's a Stylus(opens new window) file, you can also use normal CSS syntax if you prefer.
We won't discuss the predefined index.styl 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.
Here's the predefined index.styl which you can override and add your own styles to:
Here's a link to the index.styl file(opens new window) as well and the path to the file in your project node_modules/@vuepress/theme-default/styles/index.styl.
As we develop the blog we'll be using and overriding some of these predefined styles as well as defining our own styles.
Importing and Requiring Stylus and CSS Files
You may have noticed in the index.styl file that we're requiring other files, e.g., @require './config'. We'll discuss how to import and require .styl and .css files in a future post.
Now that we have a good understanding of the index.styl file, we're going to create the file for the blog inside of the styles directory that we previously created. The docs directory for your site should now look something like this:
If you recall from the VuePress Tutorial 4 - Directory Structure post, you also have the option of creating your index.styl file in the following location .vuepress/styles/index.styl.
We'll be updating the index.styl file we just created later on in this post, but first we're going to take a look at the overriding priority.
The user's palette.styl file which is located in .vuepress/styles/palette.styl has a higher priority than the theme's palette.styl file which is located in theme/styles/palette.styl. The theme's palette.styl file has a higher priority than any predefined palette.styl file which is located in node_modules/@vuepress/core/lib/client/style/config.styl in the case of the default theme(opens new window).
This means a theme can define it's own global styling variables and a user can override them as they see fit.
Here's an example of a global styling variable defined in each type of palette.styl file to make this concept clearer:
Here, the final value for $accentColor will be #ccff33.
Absence of User palette.styl File
As we develop the blog we won't be using the user's palette.styl file located in .vuepress/styles/palette.styl We'll just be using the theme's palette.styl file located in theme/styles/palette.styl which will allow us to override any predefined variables.
The same overriding priority applies to the index.styl file as well. So, a user's index.styl file which is located in .vuepress/styles/index.styl has a higher priority than the theme's index.styl file which is located in theme/styles/index.styl. The theme's index.styl file has a higher priority than any predefined index.styl file which is located in node_modules/@vuepress/theme-default/styles/index.styl in the case of the default theme(opens new window).
This means a theme can define it's own global styles and a user can override them as they see fit.
Both the user's index.styl file and the theme's index.styl file will get generated into the final CSS 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.
Here's an example of a style defined in a user's index.styl and a style defined in a theme's index.styl file to make this concept clearer:
Here's the final CSS file generated for the site:
Notice how the user's style comes after the theme's style in the final CSS file. This is what gives the user's style a higher priority than the theme's style.
Absence of User index.styl File
As we develop the blog we won't be using the user's index.styl file located in .vuepress/styles/index.styl. Instead we'll just be using the theme's index.styl file located in theme/styles/index.styl which will allow us to override any predefined styles.
Now that we have a good understanding of how overriding works for both the palette.styl and index.styl files, we're now ready to override some predefined styling and add our own styling to the homepage of the blog.
To start the homepage styling we'll be overriding and adding global styling variables to the palette.styl file. These global styling variables will then be used in the index.styl file as well as other files as we continue the development of the blog.
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 Elements tab, and then locate a tag or class that you want to override.
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.
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:
We're going to start by overriding the background-color in the html tag:
Updates the background-color of the content below the Footer component to be the color specified by the $backgroundColor global styling variable we just added in the palette.styl file.
Next we'll override the background-color in the body tag:
Updates the background-color of the body of the site to be the color specified by the $backgroundColor global styling variable.
Now we're going to update the padding around the main tag which we'll select using the home class:
Updates the padding of the main tag with a class of home to be zero on all sides.
We're now going to update the styles for the hero class which is given to the header tag inside of the main tag and contains the logo, the title, the description, and the action button.
margin-left: 2rem adds a margin of 2rem to the left of the header tag.
margin-right: 2rem adds a margin of 2rem to the right of the header tag.
border: 0.125rem solid $darkBorderColor adds a border around the header tag with a thickness of 0.125rem, with a style of solid, and has a color of $darkBorderColor which was defined in the palette.styl file.
box-shadow: 0 0.5rem 1rem 0 $darkBorderColor adds a box shadow around the header tag.
border-radius: 5.625rem adds a border radius to the header tag border.
margin-bottom: 0.625rem adds a margin of 0.625rem to the bottom of the header tag.
padding: 2rem adds padding of 2rem around the header tag.
Finally, we're going to update the styles for the features class which is given to the div tag inside of the main tag and contains the Learn, Code, and Crush text.
margin-left: 2rem adds a margin of 2rem to the left of the div tag.
margin-right: 2rem adds a margin of 2rem to the right of the div tag.
border-top: 0.125rem solid $borderColor adds a border to the top of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
border-bottom: 0.125rem solid $borderColor adds a border to the bottom of the div tag with a thickness of 0.125rem, with a style of solid, and has a color of $borderColor which was defined in the palette.styl file.
text-align: center horizontally aligns the text in each div tag with a class of feature that are inside of the div tag with a class of features.
font-size: 1.4rem sets a font size of 1.4rem for the h2 tags that are inside of the div tag with a class of feature.
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.
