diff options
| author | Bradley Taunt <bt@btxx.org> | 2024-07-20 12:13:49 -0400 |
|---|---|---|
| committer | Bradley Taunt <bt@btxx.org> | 2024-07-20 12:13:49 -0400 |
| commit | b810d9a0b47dd49a90cc8ec7bf1b05f59ff945b3 (patch) | |
| tree | d4e70797a7c1237a7e8a9be0d025e878d2601160 | |
| parent | f39a84524d77bcc2a83adfab01716c67cc7e983b (diff) | |
Crude testing with blogrb
88 files changed, 1759 insertions, 811 deletions
@@ -1,8 +1,7 @@ image: alpine/latest oauth: pages.sr.ht/PAGES:RW packages: -- coreutils -- rsync +- ruby - go - hut environment: @@ -10,11 +9,8 @@ site: bt.srht.site sources: - https://git.sr.ht/~bt/btxx.org tasks: -- install-smu: | - git clone https://git.sr.ht/~bt/smu - cd smu - sudo make - sudo make install +- install-gems: | + sudo gem install kramdown fileutils - build: | cd btxx.org make build @@ -1,6 +1,6 @@ build: rm -rf build && mkdir build - sh ./barf + ruby blog.rb rsync -r public/ build/public rsync style.css build/style.css @@ -1,150 +0,0 @@ -#!/bin/sh - -domain="https://btxx.org" - -set -eu -MARKDOWN=smu -IFS=' ' - -# Create tab-separated file with filename, title, creation date, last update -index_tsv() { - for f in "$1"/*.md - do - title=$(sed -n '/^# /{s/# //p; q}' "$f") - printf '%s\t%s\t%s\t%s\n' "$f" "${title:="No Title"}" - done -} - -index_html() { - # Print header - title=$(sed -n '/^# /{s/# //p; q}' index.md) - sed "s/{{TITLE}}/$title/" header.html - - # Intro text - $MARKDOWN index.md - - echo "<ul class='posts'>" - - # Posts - while read -r f title created; do - link=$(echo "$f" | sed -E 's|.*/(.*).md|posts/\1/|') - created=$(echo $(head -3 "$f" | tail -1)) - echo "<li><span>$created</span><a href=\"$link\">$title</a></li>" - done < "$1" | sort -r - - echo "</ul>" - - # Print footer after post list - cat footer.html -} - -atom_xml() { - uri=$(sed -rn '/atom.xml/ s/.*href="([^"]*)".*/\1/ p' header.html) - first_commit_date=$(git log --pretty='format:%ai' . | cut -d ' ' -f1 | tail -1) - - cat <<EOF -<?xml version="1.0" encoding="utf-8"?> -<feed xmlns="http://www.w3.org/2005/Atom"> - <title>$(sed -n '/^# /{s/# //p; q}' index.md)</title> - <link href="$domain/atom.xml" rel="self" /> - <updated>$(date +%FT%TZ)</updated> - <author> - <name>$(git config user.name)</name> - </author> - <id>$domain,$first_commit_date:default-atom-feed/</id> -EOF - - while read -r f title created; do - content=$($MARKDOWN "$f" | sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g') - post_link=$(echo "$f" | sed -E 's|posts/(.*).md|posts/\1|') - basic_date=$(echo $(head -3 "$f" | tail -1)) - published_date=$(date -d $basic_date -u +%Y-%m-%dT10:%M:%SZ) - - cat <<EOF - <entry> - <title>$title</title> - <content type="html">$content</content> - <link href="$domain/$post_link"/> - <id>$domain/$post_link</id> - <updated>$published_date</updated> - <published>$published_date</published> - </entry> -EOF - done < "$1" - - echo '</feed>' -} - -rss_xml() { - uri=$(sed -rn '/rss.xml/ s/.*href="([^"]*)".*/\1/ p' header.html) - first_commit_date=$(git log --pretty='format:%ai' . | cut -d ' ' -f1 | tail -1) - - cat <<EOF -<?xml version="1.0" encoding="utf-8"?> -<rss version="2.0"> - <channel> - <title>$(sed -n '/^# /{s/# //p; q}' index.md)</title> - <link>$domain/rss.xml</link> - <description>Feed description here</description> - <lastBuildDate>$(date -u +"%a, %d %b %Y %H:%M:%S %z")</lastBuildDate> - <pubDate>$(date -u +"%a, %d %b %Y %H:%M:%S %z")</pubDate> - <generator>Custom RSS Generator</generator> - <ttl>1800</ttl> -EOF - - while read -r f title created; do - content=$($MARKDOWN "$f" | sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g') - post_link=$(echo "$f" | sed -E 's|posts/(.*).md|posts/\1|') - basic_date=$(echo $(head -3 "$f" | tail -1)) - published_date=$(date -d "$basic_date" -u +"%a, %d %b %Y %H:%M:%S %z") - - cat <<EOF - <item> - <title>$title</title> - <description>$content</description> - <link>$domain/$post_link</link> - <guid isPermaLink="false">$domain/$post_link</guid> - <pubDate>$published_date</pubDate> - </item> -EOF - done < "$1" - - echo '</channel>' - echo '</rss>' -} - -write_page() { - filename=$1 - directory=$(echo $(basename "$filename" .md)) - if echo "$filename" | grep -q "^posts/"; then - # Create a directory under build/posts - $(mkdir -p build/posts/$directory) - target=$(echo "$filename" | sed -r 's|posts/(.*).md|build/posts/\1/index.html|') - else - # Create a directory under build for pages - $(mkdir -p build/$directory) - target=$(echo "$filename" | sed -r 's|pages/(.*).md|build/\1/index.html|') - fi - created=$(echo $(head -3 "$filename" | tail -1)) - title=$2 - - $MARKDOWN "$filename" | \ - cat header.html - |\ - sed "s|{{TITLE}}|$title|" \ - > "$target" && cat footer.html >> "$target" -} - -# Blog posts -index_tsv posts | sort -rt " " -k 3 > build/posts.tsv -index_html build/posts.tsv > build/index.html -atom_xml build/posts.tsv > build/atom.xml -rss_xml build/posts.tsv > build/rss.xml -while read -r f title created; do - write_page "$f" "$title" "$created" -done < build/posts.tsv - -# Pages -index_tsv pages > build/pages.tsv -while read -r f title created; do - write_page "$f" "$title" "$created" -done < build/pages.tsv @@ -0,0 +1,135 @@ +require 'kramdown' +require 'fileutils' +require 'date' + +# Define all the things +posts_dir = 'posts' +pages_dir = 'pages' +wiki_dir = 'pages/wiki' +recipes_dir = 'pages/recipes' +output_dir = 'build' +posts_output_dir = "#{output_dir}/posts" +pages_output_dir = "#{output_dir}/" +wiki_output_dir = "#{output_dir}/wiki/" +recipes_output_dir = "#{output_dir}/recipes/" +header_file = 'header.html' +footer_file = 'footer.html' +root_index_file = 'index.md' + +# Make sure output directories exist +FileUtils.mkdir_p(posts_output_dir) +FileUtils.mkdir_p(pages_output_dir) +FileUtils.mkdir_p(wiki_output_dir) +FileUtils.mkdir_p(recipes_output_dir) + +# Read footer +footer_content = File.read(footer_file) + +# Initialize an array to hold post and page data +posts = [] +pages = [] +wiki = [] +recipes = [] + +# Replace title placeholder +def replace_title_placeholder(header_content, title) + header_content.gsub('<title>{{TITLE}}</title>', "<title>#{title}</title>") +end + +# Grab title from the first line of a Markdown file +def extract_title_from_md(lines) + first_line = lines[0] + if first_line && first_line.start_with?('# ') + title = first_line[2..-1].strip + else + title = 'Blog Index' + end + title +end + +# Process Markdown files +def process_markdown_files(input_directory, output_directory, content_array, header_file, footer_content) + Dir.glob("#{input_directory}/*.md").each do |md_file| + # Read the content of the Markdown file + md_content = File.read(md_file) + lines = md_content.lines + + # Grab title from the first line + title = extract_title_from_md(lines) + + # Grab date from the third line + third_line = lines[2] + if third_line + date = Date.parse(third_line.strip) rescue Date.today + else + date = Date.today + end + + # Convert markdown to HTML + html_content = Kramdown::Document.new(md_content).to_html + + # Create output directory and file name + file_name = File.basename(md_file, '.md') + item_dir = "#{output_directory}/#{file_name}" + output_file = "#{item_dir}/index.html" + + # Make sure item directory exists + FileUtils.mkdir_p(item_dir) + + # Read and replace title in header content + header_content = replace_title_placeholder(File.read(header_file), title) + + # Write to output file and add header and footer templates + File.open(output_file, 'w') do |file| + file.write(header_content) + file.write(html_content) + file.write(footer_content) + end + + # Add item information to the array + content_array << { title: title, date: date, link: "#{output_directory.split('/').last}/#{file_name}/" } + end +end + +# Process markdown files in posts and pages directories +process_markdown_files(posts_dir, posts_output_dir, posts, header_file, footer_content) +process_markdown_files(pages_dir, pages_output_dir, pages, header_file, footer_content) +process_markdown_files(wiki_dir, wiki_output_dir, wiki, header_file, footer_content) +process_markdown_files(recipes_dir, recipes_output_dir, recipes, header_file, footer_content) + +# Sort posts by date from newest to oldest +posts.sort_by! { |post| -post[:date].to_time.to_i } + +# Read the root index.md file +root_index_content = File.read(root_index_file) +root_index_lines = root_index_content.lines + +# Grab title from root index.md +root_title = extract_title_from_md(root_index_lines) + +# Convert root index.md to HTML +root_index_html = Kramdown::Document.new(root_index_content).to_html + +# Read and replace title in header content for the root index +header_content = replace_title_placeholder(File.read(header_file), root_title) + +# Build out index content with header and root index content +index_content = header_content +index_content << root_index_html +index_content << "<ul class=\"posts\">\n" + +# Add posts to root index +posts.each do |post| + index_content << "<li><span>#{post[:date]}</span><a href='#{post[:link]}'>#{post[:title]}</a></li>\n" +end + +# Finalize index content with footer +index_content << "</ul>\n" +index_content << footer_content + +# Write the index file +File.open("#{output_dir}/index.html", 'w') do |file| + file.write(index_content) +end + +puts "Blog built successfully in '#{output_dir}' folder. Have a great day!" diff --git a/pages/recipes.md b/pages/recipes.md new file mode 100644 index 0000000..ba4374a --- /dev/null +++ b/pages/recipes.md @@ -0,0 +1,42 @@ +# Recipes + +This page contains a collection of Taunt family recipes (AKA my wife's recipes) + +## Desserts + +* [Apple Pie](/recipes/Apple_Pie) +* [[recipes/Apple_Sauce_Oat_Muffins]] +* [[recipes/Butter_Cream_Icing]] +* [[recipes/Best_Brownies]] +* [[recipes/Brownies]] +* [[recipes/Carrot_Cake]] +* [[recipes/Carrot_Muffins]] +* [[recipes/Cherry_Jelly]] +* [[recipes/Chocolate_Avocado_Muffins]] +* [[recipes/Chocolate_Banana_Bread]] +* [[recipes/Cinnamon_Rolls]] +* [[recipes/Cream_Cheese_Frosting]] +* [[recipes/Easter_Babka]] +* [[recipes/French_Apple_Cake]] +* [[recipes/Frozen_Yogurt]] +* [[recipes/Healthy_Banana_Muffins]] +* [[recipes/Lemon_Tarts]] +* [[recipes/One_Bowl_Chocolate_Cake]] +* [[recipes/Peanut_Butter_Balls]] +* [[recipes/Pumpkin_Cheesecake]] +* [[recipes/Pumpkin_Cupcakes]] +* [[recipes/Rocky_Road_Fudge]] +* [[recipes/Skor_Bark]] +* [[recipes/Smores_Cookies]] +* [[recipes/Spiced_Pears]] +* [[recipes/Steel_Cut_Oatmeal_Cookies]] +* [[recipes/Strawberry_Cake]] +* [[recipes/Sugar_Cookie_Icing]] +* [[recipes/Sugar_Cookies]] +* [[recipes/Vanilla_Cake]] + +## Meals + +* [[recipes/Burgers]] +* [[recipes/Homemade_Frozen_Pizza]] +* [[recipes/Spinach_Beef_Cannelloni]] diff --git a/pages/recipes/Apple_Pie.md b/pages/recipes/Apple_Pie.md new file mode 100644 index 0000000..3096b87 --- /dev/null +++ b/pages/recipes/Apple_Pie.md @@ -0,0 +1,18 @@ +# Apple Pie + +## Ingredients + +- 6-7 cups of apples +- ¼ cup of brown sugar +- ½ cup of white sugar +- 2 tbsp of flour +- 1 tsp of cinnamon +- 1 tsp of nutmeg +- lemon juice (optional) + +## Instructions + +1. Peel, core and slice apples +2. Mix all ingredients together (can freeze at this point) +3. Place slices on bottom crust, cover with top. Slice vent holes into top +4. Bake at 375° for 20 minutes, then 350° for 45 minutes to 1 hour diff --git a/pages/recipes/Apple_Sauce_Oat_Muffins.mdwn b/pages/recipes/Apple_Sauce_Oat_Muffins.mdwn new file mode 100644 index 0000000..1a8623b --- /dev/null +++ b/pages/recipes/Apple_Sauce_Oat_Muffins.mdwn @@ -0,0 +1,24 @@ +## Ingredients: + +- 1 ¼ cups old-fashioned rolled oats +- 1 ¼ cups unsweetened applesauce +- 1/2 cup milk +- 1 large egg +- 1 teaspoon vanilla extract +- 4 Tablespoons butter , melted (or coconut oil) +- 1/3 cup granulated sugar +- 1 cup whole wheat flour +- 1 teaspoon baking powder +- 3/4 teaspoon baking soda +- 1 teaspoon ground cinnamon +- 1/4 teaspoon salt +- 1/2 cup raisins , or craisins, or chocolate chips + +## Instructions: + +- Preheat oven to 375 degrees F. Line a 12-cup muffin tin with liners or grease with non-stick cooking spray. Set aside. +- In a medium bowl, stir together the oats, applesauce, milk, egg, vanilla, butter and sugar. +- In a large bowl, mix the flour, baking powder, baking soda, cinnamon, salt and cranberries or raisins. +- Make a well in the center of the dry ingredients and pour in the applesauce mixture. Stir just until combined (don't overmix!) +- Spoon the batter evenly into the muffin cups. Bake for 15-20 minutes or until a toothpick inserted in the center comes out clean. +- Don't over-bake or the muffins will be dry. Remove them to a cooling rack. Cool completely before freezing in a ziplock freezer bag. diff --git a/pages/recipes/Best_Brownies.mdwn b/pages/recipes/Best_Brownies.mdwn new file mode 100644 index 0000000..c7f20bb --- /dev/null +++ b/pages/recipes/Best_Brownies.mdwn @@ -0,0 +1,27 @@ +## Ingredients: + +Brownie + +- 1/2 cup of butter +- 1 cup of white sugar +- 2 eggs +- 1 tsp of vanilla extract +- 1/3 cup unsweetened cocoa powder +- 1/2 cup all-purpose flour +- 1/4 tsp of salt +- 1/4 tsp of baking powder + +Frosting + +- 3 tbsp of butter (softened) +- 3 tbsp of unsweetended cocoa powder +- 1 tbsp of honey +- 1 tsp of vanilla extract +- 1 cup of confectioners' sugars + +## Instructions: + +- Preheat oven to 350 degrees F (175 degrees C). Grease and flour an 8-inch square pan +- In a large saucepan, melt 1/2 cup butter. Remove from heat, and stir in sugar, eggs, and 1 teaspoon vanilla. Beat in 1/3 cup cocoa, 1/2 cup flour, salt, and baking powder. Spread batter into prepared pan +- Bake in preheated oven for 25 to 30 minutes. Do not overcook +- To Make Frosting; Combine 3 tablespoons softened butter, 3 tablespoons cocoa, honey, 1 teaspoon vanilla extract, and 1 cup confectioners' sugar. Stir until smooth. Frost brownies while they are still warm diff --git a/pages/recipes/Brownies.mdwn b/pages/recipes/Brownies.mdwn new file mode 100644 index 0000000..e8835e7 --- /dev/null +++ b/pages/recipes/Brownies.mdwn @@ -0,0 +1,24 @@ +## Ingredients: + +Cake + +- 1/2 cup of butter +- 1 cup of white sugar +- 2 eggs +- 1 tsp of vanilla +- 1/3 cup of cocoa powder +- 1/2 cup of flour +- 1/4 tsp of salt, baking powder + +Frosting + +- 3 tbsp of butter, cocoa +- 1 tbsp of honey +- 1 tsp vanilla +- 1 cup of confectioners sugar + +## Instructions: +- Preheat oven to 350°. Grease and flour an 8x8 pan +- Melt butter and add sugar. Beat in remaining ingredients and pour into pan +- Bake for 25-30 minutes +- If adding frosting, frost while brownies are still warm diff --git a/pages/recipes/Burgers.mdwn b/pages/recipes/Burgers.mdwn new file mode 100644 index 0000000..32212dd --- /dev/null +++ b/pages/recipes/Burgers.mdwn @@ -0,0 +1,11 @@ +## Ingredients: +- 1 tsp mustard +- 1 tbsp Worcestershire sauce +- 1 clove garlic, minced (or 1 tsp garlic powder) +- 1 1/2 tsp salt +- 1/2 tsp pepper +- 1 ½ lb ground beef + +## Instructions: +- Mix everything super well and pat into 4 jumbo patties (or more small patties if you don't like amazingly huge burgers) +- Place on parchment paper on a baking sheet and cover with plastic wrap. Place in freezer, and be sure to let them freeze before grilling :) diff --git a/pages/recipes/Butter_Cream_Icing.mdwn b/pages/recipes/Butter_Cream_Icing.mdwn new file mode 100644 index 0000000..fb7cb8c --- /dev/null +++ b/pages/recipes/Butter_Cream_Icing.mdwn @@ -0,0 +1,12 @@ +## Ingredients + +- ½ cup unsalted butter, softened +- 1½ tsp vanilla extract +- 2 cups of confectioner's sugar, sifted +- 2 tbp of milk +- 3 drops of food coloring (optional) + +## Instructions + +1. Cream room temperature butter with a hand mixer, the paddle attachment of a stand mixer, or a wooden spoon until smooth and fluffy. Gradually beat in confectioners' sugar until fully incorporated. Beat in vanilla extract. +2. Pour in milk and beat for an additional 3 to 4 minutes. Add food coloring, if using, and beat for thirty seconds until smooth or until desired color is reached. diff --git a/pages/recipes/Carrot_Cake.mdwn b/pages/recipes/Carrot_Cake.mdwn new file mode 100644 index 0000000..ca62f9e --- /dev/null +++ b/pages/recipes/Carrot_Cake.mdwn @@ -0,0 +1,34 @@ +## Ingredients: + +Cake + +- 2 cups of flour +- 2 tsp of baking powder +- 1 tsp of baking soda +- 2 tsp of cinnamon +- 1/2 tsp of nutmeg +- 1 tsp of salt +- 3/4 cup of sugar +- 3/4 cup of brown sugar +- 3 eggs +- 3/4 cup of vegetable oil +- 1 tsp of vanilla +- 2 cups of grated carrots +- 1 cup of pineapple juice (canned) +- 1/2 cup of chopped pecans + +Icing + +- 1 x 8 ounce package of cream cheese +- 1/4 cup of butter +- 1/2 tsp vanilla +- 1 cup of icing sugar + +## Instructions: + +- Grease and flour one 13x9 inches *or* 2x8 inches pan +- Mix dry ingredients +- Mix eggs, sugar, oil and vanilla. Pour over dry ingredients. Stir until just moistened, then add carrots, pineapple and pecans. +- Spread into prepared pan +- Bake at 350° for 40 minutes, let cool +- Spread with icing diff --git a/pages/recipes/Carrot_Muffins.mdwn b/pages/recipes/Carrot_Muffins.mdwn new file mode 100644 index 0000000..4dbbc60 --- /dev/null +++ b/pages/recipes/Carrot_Muffins.mdwn @@ -0,0 +1,19 @@ +## Ingredients: + +- 1 cup of flour +- 1/2 tsp of baking soda +- 1 tsp of baking powder +- 1/4 tsp of nutmeg and all spice +- 1/2 cup of brown sugar +- 2 eggs +- 1/2 cup of olive oil +- 1 tsp of vanilla +- 2 carrots (grated) + +## Instructions: + +- Preheat oven to 350 degrees +- Sift dry ingredients +- In a mixer, beat eggs and sugar until fluffy. Add remaining wet ingredients +- Fold carrots in, *just* until combined +- Bake for 15-20 minutes diff --git a/pages/recipes/Cherry_Jelly.mdwn b/pages/recipes/Cherry_Jelly.mdwn new file mode 100644 index 0000000..d874bcf --- /dev/null +++ b/pages/recipes/Cherry_Jelly.mdwn @@ -0,0 +1,14 @@ +## Ingredients: +- 3 1/2 pounds of sour cherries +- 1/2 cup of water (or juice) +- 2 tbsp of lemon juice +- 1 package no-sugar Pectin +- 1 1/2 cup of sugar + +## Instructions: +- Combine cherries and liquids in sauce pan, boil for 5 minutes (covered) +- Crush ingredients and cook 5 minutes longer +- Stir in lemon juice, Pectin and bring back to a boil +- Add sugar and boil for 3 more minutes +- Ladle into prepared jars (leaving 1/4 inch) +- Boil in a water bath for 10 minutes diff --git a/pages/recipes/Chocolate_Avocado_Muffins.mdwn b/pages/recipes/Chocolate_Avocado_Muffins.mdwn new file mode 100644 index 0000000..f1b4e5f --- /dev/null +++ b/pages/recipes/Chocolate_Avocado_Muffins.mdwn @@ -0,0 +1,23 @@ +## Ingredients + +- 1½ cups whole wheat flour +- ½ cup cocoa powder +- 1 tsp of baking powder +- ¾ tsp of baking soda +- ¼ tsp of salt +- 1-2 ripe avocados +- ¾ cup of maple syrup (I usually use only ⅓ because I'm a meanie) +- ¾ cup of milk +- ⅓ cup of olive oil (when I'm feeling fancy I use melted coconut oil) +- 1 tsp of vanilla extract + +## Instructions + +1. Preheat your oven to 350F. +2. Prepare your muffin tins by greasing with non-stick cooking spray or baking liners. +3. In a large bowl, whisk together whole wheat flour, cocoa powder, baking powder, baking soda, and salt. Set aside. +4. In a food processor, puree the avocado, maple syrup, melted coconut oil, almond milk and vanilla extract until smooth.[^1] +5. Make a well in the dry mixture and add the wet mixture to the dry mixture. Stir together with a wooden smooth until just combined. +6. Scoop the batter into the muffin tins and bake for 15-20 minutes until the tops are slightly cracked. +7. Remove from the oven and do not remove from the muffin tins for an additional 15 minutes to let them cool. +8. Keep stored in an air-tight container. You can also keep them stored in the fridge...they actually taste fantastic cold! diff --git a/pages/recipes/Chocolate_Banana_Bread.mdwn b/pages/recipes/Chocolate_Banana_Bread.mdwn new file mode 100644 index 0000000..2f76bdd --- /dev/null +++ b/pages/recipes/Chocolate_Banana_Bread.mdwn @@ -0,0 +1,27 @@ +## Ingredients + +- 1 cup all-purpose flour +- 1/2 cup Dutch process cocoa +- 1 teaspoon baking soda +- 1/2 teaspoon sea salt +- 3 large brown bananas (1 1/2 cups mashed) +- 1/4 cup unsalted butter, melted and slightly cooled +- 1/4 cup vegetable oil, +- 3/4 cup packed light brown sugar +- 1 egg +- 1 teaspoon vanilla +- *Optional*: 1 cup semisweet chocolate chips + +## Instructions + +1. Heat oven to 350°F +2. Grease a 9-by-5-inch loaf pan with nonstick cooking spray and set aside. +3. In a medium bowl, whisk together the flour, cocoa powder, baking soda, and sea salt. Set aside. +4. In a large bowl, mash the ripe bananas. Add the melted butter and oil, stir until combined. +5. Stir in the brown sugar, egg, and vanilla extract. Stir until smooth. +6. Stir the dry ingredients into the wet ingredients, don't overmix. +7. *Optional*: Stir in 3/4 cup of the chocolate chips. +8. Pour batter into prepared pan, sprinkle the remaining 1/4 cup of chocolate chips over the top of the bread. +9. Bake for 50-65 minutes, or until a toothpick inserted into the center of the bread comes out mostly clean (You just don't want a lot of gooey batter. Check at 50 minutes) +10. Remove the pan from the oven and set on a wire cooling rack. Let the bread cool in the pan for 15 minutes. +11. Run a knife around the edges of the bread and carefully remove from the pan. Let the bread cool on the wire cooling rack until slightly warm. Cut into slices and serve. diff --git a/pages/recipes/Cinnamon_Rolls.mdwn b/pages/recipes/Cinnamon_Rolls.mdwn new file mode 100644 index 0000000..17e0278 --- /dev/null +++ b/pages/recipes/Cinnamon_Rolls.mdwn @@ -0,0 +1,37 @@ +## Ingredients + +#### The Dough + +- ¾ cup of warm milk (whole milk or 2% preferred) (110 degrees F) +- 2¼ teaspoons of quick rise or active yeast (1/4-ounce package yeast) +- ¼ cup of granulated sugar +- 1 egg plus 1 egg yolk, at room temperature +- ¼ cup of unsalted butter, melted +- 3 cups bread flour, plus more for dusting +- ¾ teaspoon of salt + +#### The Filling + +- ⅔ cup of dark brown sugar (light brown sugar also works) +- 1½ tablespoons of ground cinnamon +- ¼ cup of unsalted butter, softened + +#### The Frosting + +- 4 oz cream cheese, softened +- 3 tablespoons unsalted butter, softened +- ¾ cup of powdered sugar +- ½ teaspoon of vanilla extract + +## Instructions + +1. Warm milk to around 110 degrees F. I like to do this by placing milk in a microwave safe bowl and microwaving it for 40-45 seconds. It should be like warm bath water. Transfer warm milk to the bowl of an electric mixer and sprinkle yeast on top. Add in sugar, egg, egg yolk and melted butter. Mix until well combined. Next stir in flour and salt with a wooden spoon until a dough begins to form. +2. Place dough hook on stand mixer and knead dough on medium speed for 8 minutes. Dough should form into a nice ball and be slightly sticky. If it's TOO sticky (meaning it's sticking to the bottom of the mixer, add in 2 tablespoons more bread flour.) If you don’t want to use an electric mixer, you can use your hands to knead the dough for 8-10 minutes on a well-floured surface. +3. Transfer dough ball to a well-oiled bowl, cover with plastic wrap and a warm towel. Allow dough to rise for 1 hour to 1 ½ hours, or until doubled in size. This may more or less time depending the humidity and temperature in your home. +4. After dough has doubled in size, transfer dough to a well-floured surface and roll out into a 14x9 inch rectangle. Spread softened butter over dough, leaving a ¼ inch margin at the far side of the dough. +5. In a small bowl, mix together brown sugar and cinnamon. Use your hands to sprinkle mixture over the buttered dough, then rub the brown sugar mixture into the butter. +6. Tightly roll dough up, starting from the 9-inch side and place seam side down making sure to seal the edges of the dough as best you can. You will probably need to cut off about an inch off the ends of the dough as the ends won’t be as full of cinnamon sugar as we’d want it to be. +7. Cut into 1 inch sections with a serrated knife or floss. You should get 9 large pieces. +8. Place cinnamon rolls in a greased 9x9 inch baking pan or round 9 inch cake pan. (I also recommend lining the pan with parchment paper as well, in case any of the filling ends up leaking out.) Cover with plastic wrap and a warm towel and let rise again for 30-45 minutes. +9. Preheat oven to 350 degrees F. Remove plastic wrap and towel and bake cinnamon rolls for 20-25 minutes or until just slightly golden brown on the edges. You want to under-bake them a little so they stay soft in the middle, that’s why we want them just slightly golden brown. Allow them to cool for 5-10 minutes before frosting. Makes 9 cinnamon rolls. +10. To make the frosting: In the bowl of an electric mixer, combine cream cheese, butter, powdered sugar and vanilla extract. Beat until smooth and fluffy. Spread over cinnamon rolls and serve immediately. Enjoy! diff --git a/pages/recipes/Cream_Cheese_Frosting.mdwn b/pages/recipes/Cream_Cheese_Frosting.mdwn new file mode 100644 index 0000000..3f9db2e --- /dev/null +++ b/pages/recipes/Cream_Cheese_Frosting.mdwn @@ -0,0 +1,15 @@ +## Ingredients + +- ½ cup of unsalted butter +- 8 ounces of cream cheese +- 1 tsp of vanilla extract +- ¼ tsp of salt +- 4 cups of powdered sugar + +## Instructions + +1. Combine butter and cream cheese in the bowl of a stand mixer (or you may use an electric +mixer) and beat until creamy, well-combined, and lump-free +2. Add vanilla extract and salt and stir well to combine +3. With mixer on low, gradually add powdered sugar until completely combined +4. Use to frost completely cooled cake or cupcakes diff --git a/pages/recipes/Easter_Babka.mdwn b/pages/recipes/Easter_Babka.mdwn new file mode 100644 index 0000000..74a2831 --- /dev/null +++ b/pages/recipes/Easter_Babka.mdwn @@ -0,0 +1,31 @@ +## Ingredients + +#### Cake + +- 1¼ cup of luke-warm milk +- 2 packets of active dry yeast +- 6 tbsp of sugar +- 6 cups of flour +- ½ tsp of salt +- 10 egg yolks +- ¾ pound + 2 tbsp of butter +- 2 tbsp of grated orange peel +- 1 tbsp of grated lemon peel + +#### Icing + +- 2 cups of confectioners sugar +- ¼ cup of cold water +- 2 tsp of lemon juice + +## Instructions + +1. Combine milk, yeast and ½ tsp of sugar. Let stand for 3 minutes. Stir and set in a warm draft-free place for 10-15 minutes +2. Add 6 cups of flour, the rest of the sugar and salt together. Pour yeast mixture into center and mix. Add butter +3. Knead for 20 minutes +4. Place in buttered bowl, draped with a towel +5. Let rise for 1 hour +6. Butter and flour a turban mold +7. Punch dough down. Knead in grated peels and pat into mold. Cover and let rise 1 hour +8. Heat oven to 375° and bake for 40 minutes +9. Pour icing over cake once it has cooled diff --git a/pages/recipes/French_Apple_Cake.mdwn b/pages/recipes/French_Apple_Cake.mdwn new file mode 100644 index 0000000..7401639 --- /dev/null +++ b/pages/recipes/French_Apple_Cake.mdwn @@ -0,0 +1,21 @@ +## Ingredients + +- 1 1/4 c. all-purpose flour +- 1 tsp. baking powder +- 1/4 tsp. kosher salt +- 2 large eggs +- 1/2 c. (1 stick) butter, melted and cooled +- 3/4 c. plus 1 tbsp. granulated sugar, divided +- 3 tbsp. dark rum +- 1 tsp. pure vanilla extract +- 3 medium sweet-tart apples (such as Granny Smith or Honeycrisp), peeled, cored, and chopped + +## Instructions + +1. Preheat oven to 350° with a rack in the middle position; lightly coat an 8” round cake pan with cooking spray. +2. In a medium bowl, whisk together flour, baking powder, and salt. +3. In a large bowl, whisk eggs until foamy. +4. Add melted butter, 3/4 cup sugar, rum, and vanilla and whisk to combine. +5. Add dry ingredients and stir with a wooden spoon or rubber spatula until evenly incorporated. +6. Fold in apples, and transfer batter to prepared pan. Sprinkle top with remaining 1 tablespoon sugar. +7. Bake until golden and a toothpick inserted in the middle comes out clean, about 55 minutes. Let cool 15 minutes before inverting onto a cooling rack to cool completely. diff --git a/pages/recipes/Frozen_Yogurt.mdwn b/pages/recipes/Frozen_Yogurt.mdwn new file mode 100644 index 0000000..51992d1 --- /dev/null +++ b/pages/recipes/Frozen_Yogurt.mdwn @@ -0,0 +1,14 @@ +## Ingredients + +- 4 cups of **frozen** fruit +- ½ cup of Greek yogurt (plain) +- 2 tsp of vanilla +- 3 tbsp of honey +- 1 tbsp of lemon (if using *tart* fruit) + +## Instructions + +1. Add fruit, yogurt, honey, and lemon juice to food processor +2. Process until creamy (~3 minutes) +3. Transfer to airtight, freezable containers +4. Freeze for a minimum of 6 hours diff --git a/pages/recipes/Healthy_Banana_Muffins.mdwn b/pages/recipes/Healthy_Banana_Muffins.mdwn new file mode 100644 index 0000000..7c245fa --- /dev/null +++ b/pages/recipes/Healthy_Banana_Muffins.mdwn @@ -0,0 +1,28 @@ +## Ingredients + +- ⅓ cup of melted coconut oil (or extra virgin olive oil) +- ½ cup of maple syrup or honey +- 2 eggs +- 1 cup of packed ripe bananas (~3 bananas) +- ¼ cup of milk (or water) +- 1 tsp of baking soda +- 1 tsp of vanilla extract +- ½ tsp of salt +- ½ tsp of cinnamon +- 1¾ cups of whole wheat flour +- ⅓ cup of old-fashioned oats (*optional*) +- 1 tsp of raw sugar + +## Instructions + +1. Preheat the oven to 325° Fahrenheit (165 degrees Celsius). If necessary, grease all 12 +cups of your muffin tin with butter or non-stick cooking spray +2. In a large bowl, beat the coconut oil and maple syrup together with a whisk. Add the eggs and +beat well. Mix in the mashed bananas and milk, followed by the baking soda, vanilla extract, +salt and cinnamon +3. Add the flour and oats to the bowl and mix with a large spoon, just until combined. If you’d like +to add any additional mix-ins, like nuts, chocolate or dried fruit, fold them in now +4. Divide the batter evenly between the muffin cups, filling each cup about two-thirds full. +Sprinkle the tops of the muffins with a small amount of oats (about 1 tablespoon in total), followed by a light sprinkling of sugar (about 1 teaspoon in total). Bake muffins for 22 to 25 minutes, or until a toothpick inserted into a muffin comes out clean +5. Place the muffin tin on a cooling rack to cool. You might need to run a butter knife along the +outer edge of the muffins to loosen them from the pan. These muffins will keep at room temperature for up to 2 days, or in the refrigerator for up to 4 days. They keep well in the freezer in a freezer-safe bag for up to 3 months (just defrost individual muffins as needed) diff --git a/pages/recipes/Homemade_Frozen_Pizza.mdwn b/pages/recipes/Homemade_Frozen_Pizza.mdwn new file mode 100644 index 0000000..8c99efc --- /dev/null +++ b/pages/recipes/Homemade_Frozen_Pizza.mdwn @@ -0,0 +1,23 @@ +## Ingredients: +- 1½ tablespoons instant dry yeast +- 1 tablespoon sugar +- 2 cups warm water +- 1½ teaspoons salt +- 3 tablespoons olive oil +- 5 cups flour +- pizza sauce +- cheese +- toppings + +## Instructions: +- Preheat oven to 425 degrees. +- In the bowl of a stand mixer, combine yeast, brown sugar and water. Let rest 5 minutes (or until bubbles start to form) +- Add flour, salt and olive oil. Knead on low about 8 minutes/until the dough forms a nice, soft, somewhat sticky ball and the sides of the bowl are clean. +- Let rise covered in a lightly greased bowl 1-1.5 hours (until doubled). +- Divide the dough into desired pizza sizes and roll out on parchment paper covered trays. Let rise another 30 minutes if desired. +- Par-bake the pizza(s) ~10minutes. They should be puffy and dry on the top, but still very pale. +- Let them cool completely on a wire rack. +- Top the pizza(s) with desired toppings. +- Freeze the pizza(s) uncovered, until solid +- Wrap the pizza(s) in plastic wrap and aluminum foil. (They can stay frozen up to three months) +- When ready to eat, bake from frozen at 500 degrees until cheese is browning and bubbly, about 10-15 minutes depending on size and thickness of crust. diff --git a/pages/recipes/Lemon_Tarts.mdwn b/pages/recipes/Lemon_Tarts.mdwn new file mode 100644 index 0000000..1c0c744 --- /dev/null +++ b/pages/recipes/Lemon_Tarts.mdwn @@ -0,0 +1,16 @@ +## Ingredients + +### Curd + +- ½ cup of sugar +- ¼ cup of cold water +- 3 tbsp o corn starch +- ¼ cup of lemon juice (~2 lemons) +- 2 tsp of lemon zest + +## Instructions + +1. Mix sugar, water and corn starch in a saucepan. Bring to a boil over low-medium heat +2. Reduce temperature, add lemon juice and zest. Mix for 1 minute, then cool at room temperature in a plastic bowl +3. Add to prepared mini pie crusts +4. Store in fridge for ~2 days maximum diff --git a/pages/recipes/One_Bowl_Chocolate_Cake.mdwn b/pages/recipes/One_Bowl_Chocolate_Cake.mdwn new file mode 100644 index 0000000..37bee4f --- /dev/null +++ b/pages/recipes/One_Bowl_Chocolate_Cake.mdwn @@ -0,0 +1,19 @@ +## Ingredients + +- 2 cups of white sugar +- 1¾ cups of all-purpose flour +- ¾ cup of unsweetened cocoa powder +- 1½ tsp of baking powder +- 1½ tsp of baking soda +- 1 tsp of salt +- 2 large eggs +- 1 cup of milk +- ½ of vegetable oil +- 2 tsp of vanilla extract +- 1 cup of boiling water + +## Instructions + +1. Preheat oven to 350 degrees F (175 degrees C). Grease and flour two nine inch round pans +2. In a large bowl, stir together the sugar, flour, cocoa, baking powder, baking soda and salt. Add the eggs, milk, oil and vanilla, mix for 2 minutes on medium speed of mixer. Stir in the boiling water last. Batter will be thin. Pour evenly into the prepared pans +3. Bake 30 to 35 minutes in the preheated oven, until the cake tests done with a toothpick. Cool in the pans for 10 minutes, then remove to a wire rack to cool completely diff --git a/pages/recipes/Peanut_Butter_Balls.mdwn b/pages/recipes/Peanut_Butter_Balls.mdwn new file mode 100644 index 0000000..e5f0476 --- /dev/null +++ b/pages/recipes/Peanut_Butter_Balls.mdwn @@ -0,0 +1,16 @@ +## Ingredients + +- 1 cup of powdered sugar +- 2 tbsp of melted butter +- 1 cup of creamy peanut butter +- 1½ cup of crushed rice krispies +- 1½ cup of chocolate chips + +## Instructions + +1. Mix butter and peanut butter into a large bowl +2. Add powdered sugar and rice krispies +3. Shape into ~35 balls +4. Place on wax paper-lined cookie sheet and refrigerate for at least 1 hour +5. Coat with melted chocolate chips +6. Move to freezer until ready to serve diff --git a/pages/recipes/Pumpkin_Cheesecake.mdwn b/pages/recipes/Pumpkin_Cheesecake.mdwn new file mode 100644 index 0000000..9090c17 --- /dev/null +++ b/pages/recipes/Pumpkin_Cheesecake.mdwn @@ -0,0 +1,36 @@ +## Ingredients + +### Crust + +- ¼ cup of melted butter +- 1¼ cup of graham cracker crumbs +- 1 tsp of sugar +- 1 tsp of cinnamon +- 2-3 crushed ginger snaps + +### Filling + +- 2 x 8 ounce cream cheese +- ⅔ cup of sugar +- 2 eggs +- 1 x 14 ounce can of pumpkin puree +- ½ tsp of cinnamon, ginger, nutmeg, all spice, and coriander +- ½ tsp of salt +- 1 tbsp of vanilla +- 1 tbsp of whiskey + +### Topping + +- ginger snaps +- cool-whip topping +- caramel sauce + +## Instructions + +1. Press mixed crust ingredients into a 9 inch pan +2. Bake at 350° for 10 minutes, then move to freezer +3. Beat cream cheese and sugar until smooth. Add eggs one at a time +4. Mix in remaining ingredients - do NOT over-beat +5. Pour over crust and bake for 1 hour +6. Chill and garnish with toppings +7. Best served next day diff --git a/pages/recipes/Pumpkin_Cupcakes.mdwn b/pages/recipes/Pumpkin_Cupcakes.mdwn new file mode 100644 index 0000000..aea5490 --- /dev/null +++ b/pages/recipes/Pumpkin_Cupcakes.mdwn @@ -0,0 +1,22 @@ +## Ingredients + +- 1¾ cup of flour +- 1 tsp of baking powder +- 1 tsp of baking soda +- ½ tsp salt +- 1½ tsp of cinnamon +- ¼ tsp of all spice, ginger & nutmeg +- ⅔ cup of dark brown suger +- ½ cup of vegetable oil +- 2 eggs +- 1 cup of pumpkin puree +- ⅓ cup of milk +- 1 tsp of vanilla + +## Instructions + +1. Preheat oven to 350° +2. Combine dry ingredients +3. Whisk sugar and eggs, add wet ingredients +4. Combine until just moistened +5. Spoon batter into 14 cups and bake for 18 minutes diff --git a/pages/recipes/Rocky_Road_Fudge.mdwn b/pages/recipes/Rocky_Road_Fudge.mdwn new file mode 100644 index 0000000..777c472 --- /dev/null +++ b/pages/recipes/Rocky_Road_Fudge.mdwn @@ -0,0 +1,14 @@ +## Ingredients + +- 2 cups of semi-sweet chocolate chips +- 1 can of sweetened condensed milk +- 1 tsp of vanilla +- 3 cups of mini marshmallows +- 1½ cup of nuts + +## Instructions + +1. Line a 9x13 inch baking pan with aluminum foil (greased) +2. Microwave chocolate and condensed milk on high for 1 minute, then stir. Continue heating at 20 second intervals, until it is melted +3. Stir in all other ingredients +4. Press mixture into pan and refrigerate until ready to serve diff --git a/pages/recipes/Skor_Bark.mdwn b/pages/recipes/Skor_Bark.mdwn new file mode 100644 index 0000000..4038643 --- /dev/null +++ b/pages/recipes/Skor_Bark.mdwn @@ -0,0 +1,14 @@ +## Ingredients + +- 1 sleeve of saltine crackers +- 1 cup of butter +- ½ cup of brown sugar +- 12 ounces of semi-sweet chocolate chips + +## Instructions + +1. Preheat oven to 350° +2. Line a jelly roll pan with parchment paper. Lay saltines in a single layer +3. Melt butter and sugar in a saucepan over medium-high heat. Bring to a boil and cook for 3 minutes +4. Pour over saltines and bake for 8-10 minutes +5. Immediately sprinkle on chocolate chips and spread until smooth diff --git a/pages/recipes/Smores_Cookies.mdwn b/pages/recipes/Smores_Cookies.mdwn new file mode 100644 index 0000000..dd182ac --- /dev/null +++ b/pages/recipes/Smores_Cookies.mdwn @@ -0,0 +1,26 @@ +## Ingredients + +- 1/2 cup butter room temperature +- 2/3 cup brown sugar +- 1 egg +- 2 tsp vanilla +- 1 tsp corn starch +- 1 tsp soda +- 1/2 tsp salt +- 1 1/2 cup flour +- 2/3 cup graham cracker crumble (approx 4 smashed crackers) +- 1/2 cup marshmallow cut up into bits +- 20 Marshmallow slices (to top each cookie) +- 1/2 cup chocolate chips + +## Instructions + +1. Preheat oven to 350°. +2. In a mixer cream butter and brown sugar. +3. Scrape sides and add egg and vanilla. Mix well. +4. In another bowl, sift together cornstarch, soda, salt, flour, and graham cracker crumble. 5.) Gradually add the dry ingredients to the butter/sugar mixture while mixing slowly. +Mix until just combined. +6. Gently fold in the marshmallow bits and chocolate chips. +7. Scoop into 1TBSP balls and place on a parchment paper lined cookie sheet. Use your thumb to press down the tops of the cookies to make a well for the marshmallow slices. Squish one slice on top of each cookie ( press hard enough to make sure the dough "surrounds" the marshmallow, or else it will leak over the sides). +8. Bake at 350° for 8-10 minutes. To insure that the cookies stay chewy and soft, you'll want to pull them when the cookies are no longer glossy on the top. Don't wait until they are golden brown! They cookies will firm up as they cool. +9. Cool on the pan for 5 minutes and then transfer to a wire rack. Makes about 20 cookies :) diff --git a/pages/recipes/Spiced_Pears.mdwn b/pages/recipes/Spiced_Pears.mdwn new file mode 100644 index 0000000..1736c70 --- /dev/null +++ b/pages/recipes/Spiced_Pears.mdwn @@ -0,0 +1,15 @@ +## Ingredients + +- 6 pounds of pears (15-20 small) +- 2 cups of water +- 2 cups of sugar +- 1 cinnamon stick +- 1 tsp of cinnamon and all spice + +## Instructions + +1. Prepare jars and water bath (bake at 200° for 10-15 minutes) +2. Peel, core and quarter slice +3. Add to a bowl of cold water and lemon juice (to avoid browning) +4. Boil with sugar and spices for ~5 minutes (allow the water to boil first) +5. Add to jars, then water bath for 20 minutes diff --git a/pages/recipes/Spinach_Beef_Cannelloni.mdwn b/pages/recipes/Spinach_Beef_Cannelloni.mdwn new file mode 100644 index 0000000..26ae859 --- /dev/null +++ b/pages/recipes/Spinach_Beef_Cannelloni.mdwn @@ -0,0 +1,46 @@ +## Ingredients: +### Sauce +- 1 tbsp olive oil +- 2 garlic cloves, minced +- 1/2 onion, finely chopped +- 1 carrot, small, finely chopped (optional) +- 1 celery rib , finely chopped (optional) +- 800g / 28oz crushed tomato, canned +- 2 cups (500ml) chicken stock +- 1/2 tsp EACH thyme, oregano, salt, pepper +- 1/4 tsp chilli flakes (optional) + +### Spinach Beef Filling +- 1 tbsp olive oil +- 2 garlic cloves, minced +- 1/2 onion, finely chopped +- 500g / 1lb beef mince, lean +- 250g / 8oz frozen spinach, chopped, thawed, excess liquid squeezed out +- 1 beef bouillon cube +- 1/2 tsp pepper +- 1 tsp Worcestershire Sauce +- "<b>Cannelloni</b>" +- 21 to 24 "no boiling needed" cannelloni tubes OR 10 Manicotti tubes +- 2 cups mozzarella cheese, freshly grated +- Chopped parsley (optional) + +## Instructions: + +### Sauce +- Heat oil in a large saucepan or pot over medium high heat. Add garlic and onion, cook 2 minutes. Add carrot and celery, cook 5 minutes. +- Add remaining Sauce ingredients then stir bringing to a simmer. Lower heat to medium, cover with lid and simmer for 10 minutes. +- Use a stick blender to blitz until smooth (or cool slightly and use blender or food processor). Set aside. + +### Spinach Beef Filling +- Heat oil in a large skillet over high heat. Add onion and garlic, cook 2 minutes. +- Add beef and cook, breaking it up as you go, until it all changes from red to brown. +- Stir in spinach, then add crumbled beef cube, Worcestershire sauce, pepper and 1 cup of Cannelloni Sauce. Stir, cook 2 minutes. +- Remove and cool slightly. + +### Assembly & Baking +- Preheat oven to 180°C/350°F +- Stand cannelloni tubes upright in a container and fill (fingers, teaspoon, piping bag) +- Spread about 1 1/4 cups Sauce in a 23x33cm / 9x13” dish. Lay the cannelloni on top, then pour over remaining Sauce. +- Sprinkle with cheese, loosely cover with foil. +- Bake 25 minutes, remove foil then bake a further 10 minutes until the cheese is bubbly with some golden spots. +- Remove from oven, sprinkle with parsley if using then serve! diff --git a/pages/recipes/Steel_Cut_Oatmeal_Cookies.mdwn b/pages/recipes/Steel_Cut_Oatmeal_Cookies.mdwn new file mode 100644 index 0000000..90e0053 --- /dev/null +++ b/pages/recipes/Steel_Cut_Oatmeal_Cookies.mdwn @@ -0,0 +1,21 @@ +## Ingredients + +- ½ cup of butter (softened) +- ¼ cup of sugar +- ½ cup of brown sugar +- 1 egg +- ½ tsp of vanilla +- 1 cup of flour +- ½ tsp of baking powder +- ⅛ tsp of cinnamon and nutmeg +- 1 cup of steel-cut oats +- ½ cup of chocolate chips (or raisins) + +## Instructions + +1. Preheat oven to 350° +2. Mix butter, sugar, eggs, and vanilla until smooth +3. Mix flour, baking powder, spices and oats separately +4. Combine dry and wet together and mix in chocolate chips (or raisins) +5. Roll dough into even shaped balls and lightly press onto cookie sheet +6. Bake for 8-12 minutes diff --git a/pages/recipes/Strawberry_Cake.mdwn b/pages/recipes/Strawberry_Cake.mdwn new file mode 100644 index 0000000..4bb7574 --- /dev/null +++ b/pages/recipes/Strawberry_Cake.mdwn @@ -0,0 +1,28 @@ +## The Cake Mix + +- 1 box white cake mix (16.25 ounces) +- 1 package strawberry flavored gelatin (3 ounces) +- 1/2 cup milk +- 3/4 cup vegetable oil +- 4 large eggs +- 1 cup fresh strawberry puree + +### Instructions + +1. Preheat the oven to 325 degrees. +2. In the bowl of a stand mixer, combine the cake mix, gelatin, milk, oil, eggs and fresh strawberry puree. +3. Beat on low speed until mixed, then beat on medium speed for 2 minutes. +4. Grease and flour two 9" round cake pans, then divide the batter evenly between the two cake pans. +5. Bake at 325 degrees for 29 minutes, or until the top of the cake bounces back when you touch it. +6. Allow the cakes to cool for 10 minutes, then turn them out onto a wire rack to cool completely. + +## The Icing + +- 4 cups Powdered Sugar +- 1 cup Butter +- ~1/4 cup Pureed Strawberries + +### Instructions + +1. Mix Powdered Sugar and Butter in a mixer on low. +2. Add Strawberry Puree until you reach the right consistency. diff --git a/pages/recipes/Sugar_Cookie_Icing.mdwn b/pages/recipes/Sugar_Cookie_Icing.mdwn new file mode 100644 index 0000000..0a26c3a --- /dev/null +++ b/pages/recipes/Sugar_Cookie_Icing.mdwn @@ -0,0 +1,14 @@ +## Ingredients + +- 2 cups of powdered sugar +- 6-8 tsp of milk +- 4 tsp of corn syrup +- ½ tsp of vanilla extract (or almond extract) +- food coloring (*optional*) + +## Instructions + +1. Sift powdered sugar into a medium bowl. Add 6 teaspoons milk, corn syrup, and extract. Stir vigorously until icing is smooth +2. If needed, add additional milk to thin icing more. You've reached the correct consistency for +frosting if a scoop of icing slowly falls off the spoon. If making colored icing, divide into bowls +and add food coloring diff --git a/pages/recipes/Sugar_Cookies.mdwn b/pages/recipes/Sugar_Cookies.mdwn new file mode 100644 index 0000000..fbd30b1 --- /dev/null +++ b/pages/recipes/Sugar_Cookies.mdwn @@ -0,0 +1,20 @@ +## Ingredients + +- 1½ cup of butter +- 2 cups of sugar +- 4 eggs +- 5 cups of flour +- 2 tsp of baking powder +- 1 tsp of salt +- 1 tsp of vanilla + +## Instructions + +1. Cream together butter and sugar +2. Beat in eggs one at a time +3. Stir in all other ingredients +4. Cover and let chill overnight +5. Preheat oven to 400° +6. Roll out dough to roughly ¼ inches and cut into shapes +7. Bake for 6-8 minutes +8. Cool completely and serve diff --git a/pages/recipes/Vanilla_Cake.mdwn b/pages/recipes/Vanilla_Cake.mdwn new file mode 100644 index 0000000..1988088 --- /dev/null +++ b/pages/recipes/Vanilla_Cake.mdwn @@ -0,0 +1,20 @@ +## Ingredients + +- 3 cups of flour +- 1 tbsp of baking powder +- ½ tsp of salt +- 4 eggs +- 2 cups of sugar +- 1 tbsp of vanilla +- ¾ cup of canola oil +- 1¼ cup of milk + +## Instructions + +1. Preheat oven to 350° +2. Grease 2 x 8 inch pans +3. Combine flour, baking powder and salt +4. Beat eggs, sugar and vanilla (while slowing adding oil for ~10 minutes) +5. At low speed, mix milk, then dry mix alternately to wet mixture +6. Bake for 50-55 minutes +7. Let cool for 15 minutes, then remove from pans diff --git a/pages/wiki.md b/pages/wiki.md index 0625e60..af81f16 100644 --- a/pages/wiki.md +++ b/pages/wiki.md @@ -1,379 +1,61 @@ # Wiki -## Introduction +This is the homepage for my personal wiki. All sub-directories are listed below. This wiki is a growing set of documents, so things may change often. -This is a living document that will expand alongside my own personal experiences and knowledge. Topics range from device settings, computer configurations, household product serial numbers / expiry dates, and so on. Hopefully this can end up being helpful to others as well. +## Software -## Open Suck +* [alpine linux](/wiki/alpine-linux) +* [[wiki/dotfiles]] +* [[wiki/openbsd]] +* [[wiki/qutebrowser]] +* [[wiki/safari]] +* [[wiki/scripts]] +* [[wiki/sublime-text]] +* [[wiki/ubuntu]] -My personal, lightweight desktop installer for OpenBSD based on the suckless philosophy. Includes my own custom set of suckless tools (dwm, slstatus, dmenu, etc.) +--- -- [https://git.sr.ht/~bt/open-suck](https://git.sr.ht/~bt/open-suck) +## Hardware -## vimrc +* [[wiki/xbox]] +* [[wiki/ps2]] -```sh -" Don't try to be vi compatible -set nocompatible +--- -" Helps force plugins to load correctly when it is turned back on below -filetype off +## Version Control Systems -" TODO: Load plugins here (pathogen or vundle) +* [[wiki/cgit]] -" Turn on syntax highlighting -syntax on +--- -" For plugins to load correctly -filetype plugin indent on +## ikiwiki -" TODO: Pick a leader key -" let mapleader = "," +[[!meta robots="noindex, follow"]] +This wiki is powered by [ikiwiki](http://ikiwiki.info/). +[[!if test="enabled(version)" + then="(Currently running version [[!version ]].)" +]] -" Security -set modelines=0 +The default documentation on using ikiwiki: -" Show line numbers -set number +* [[ikiwiki/formatting]] +* [[ikiwiki/wikilink]] +* [[ikiwiki/subpage]] +* [[ikiwiki/pagespec]] +* [[ikiwiki/directive]] +* [[ikiwiki/markdown]] +* [[ikiwiki/openid]] +* [[ikiwiki/searching]] +* [[templates]] -" Show file stats -set ruler +My own custom documentation for ikiwiki: -" Blink cursor on error instead of beeping (grr) -set visualbell +* [[ikiwiki/NearlyFreeSpeech]] +* [[ikiwiki/git]] +* [[ikiwiki/comments]] +* [[ikiwiki/search]] -" Encoding -set encoding=utf-8 +## WordPress -" Whitespace -set wrap -set textwidth=79 -set formatoptions=tcqrn1 -set tabstop=2 -set shiftwidth=2 -set softtabstop=2 -set expandtab -set noshiftround - -" Cursor motion -set scrolloff=3 -set backspace=indent,eol,start -set matchpairs+=<:> " use % to jump between pairs -runtime! macros/matchit.vim - -" Move up/down editor lines -nnoremap j gj -nnoremap k gk - -" Allow hidden buffers -set hidden - -" Rendering -set ttyfast - -" Status bar -set laststatus=2 - -" Last line -set showmode -set showcmd - -" Searching -nnoremap / /\v -vnoremap / /\v -set hlsearch -set incsearch -set ignorecase -set smartcase -set showmatch -map <leader><space> :let @/=''<cr> " clear search - -" Remap help key. -inoremap <F1> <ESC>:set invfullscreen<CR>a -nnoremap <F1> :set invfullscreen<CR> -vnoremap <F1> :set invfullscreen<CR> - -" Textmate holdouts - -" Formatting -map <leader>q gqip - -" Visualize tabs and newlines -set listchars=tab:▸\ ,eol:¬ -" Uncomment this to enable by default: -" set list " To enable by default -" Or use your leader key + l to toggle on/off -map <leader>l :set list!<CR> " Toggle tabs and EOL - -" Color scheme (terminal) -set t_Co=256 -set background=dark -let g:solarized_termcolors=256 -let g:solarized_termtrans=1 -" put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim -" in ~/.vim/colors/ and uncomment: -" colorscheme solarized -``` - -## .zshrc extras / aliases - -```sh -export EDITOR="/bin/vim" - -alias suck="sudo rm -rf config.h ; sudo make install" -alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2" -alias vscode="alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil"" -``` - -## mimeapps.list - -Place this file under `/usr/share/applications/mimeapps.list` - -```sh -[Default Applications] -x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop -x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop -text/html=org.qutebrowser.qutebrowser.desktop -application/x-extension-htm=org.qutebrowser.qutebrowser.desktop -application/x-extension-html=org.qutebrowser.qutebrowser.desktop -application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop -application/xhtml+xml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop -application/x-extension-xht=org.qutebrowser.qutebrowser.desktop -image/jpeg=feh -image/png=feh -image/webp=feh -``` - -## qutebrowser - -### Greasemonkey - -All of these scripts should be added under `~/.local/share/qutebrowser/greasemonkey/`. Then be sure to run the proper command within qutebrowser: `:greasemonkey-reload` - -#### Auto Skip YouTube Ads - -```js -// ==UserScript== -// @name Auto Skip YouTube Ads -// @version 1.0.0 -// @description Speed up and skip YouTube ads automatically -// @author jso8910 -// @match *://*.youtube.com/* -// @exclude *://*.youtube.com/subscribe_embed?* -// ==/UserScript== -setInterval(() => { - const btn = document.querySelector('.videoAdUiSkipButton,.ytp-ad-skip-button') - if (btn) { - btn.click() - } - const ad = [...document.querySelectorAll('.ad-showing')][0]; - if (ad) { - document.querySelector('video').playbackRate = 10; - } -}, 50) -``` - -## `ffmpeg` to MP4 - -```sh -ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4 -``` - -## Mount USB HDD via CLI - -```sh -mkdir /media/usb-drive -mount /dev/sdX /media/usb-drive/ -``` - -## Run Mullvad on Alpine Linux (Wireguard) - -```sh -# Install wireguard -apk add wireguard-tools -``` - -Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory: - -```sh -doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" -``` - -Then setup an aliases for easier up/down states: - -```sh -alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" -alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" -``` - -## Alpine Linux `mini_racer` Tweaks - -Gem lockfile: - -```sh -PLATFORMS - ruby - x86_64-linux-musl - -mini_racer (0.6.3) - <remove child dependency> -``` - -then run: `bundle update mini_racer` - -## Docker - -Installing `ghost` - -```sh -docker pull ghost -``` - -```sh -docker run -d \ - --name ghost-name \ - -e NODE_ENV=development \ - -p 2368:2368 \ - -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ - ghost:alpine -``` - -## MongoDB 3.4 on Ubuntu 23.10 - -```sh -wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb -sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb -sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 - -echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list -``` - -Now edit `/etc/apt/sources.list.d/mongodb-org-3.4.list`: - -```sh -deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... -``` - -Then finish things up: - -```sh -sudo apt-get update --allow-unauthenticated -sudo apt-get install -y mongodb-org - -sudo mkdir -p /data/db -sudo chmod -R 777 /data/db -``` - -## Redis 6.0.7 on Ubuntu 23.10 - -```sh -sudo apt-get install build-essential tcl -cd /tmp -curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz -tar xzvf redis-6.0.7.tar.gz -cd redis-6.0.7 -``` - -Install redis: - -```sh -make -make test -sudo make install - -sudo mkdir /etc/redis -sudo cp /tmp/redis-6.0.7redis.conf /etc/redis -``` - -Edit `/etc/redis/redis.conf` with the following changes: - -- `supervised systemd` -- `dir /var/lib/redis` - -Create systemd unit file for redis: `/etc/systemd/system/redis.service`: - -```sh -[Unit] -Description=Redis In-Memory Data Store -After=network.target - -[Service] -User=redis -Group=redis -ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf -ExecStop=/usr/local/bin/redis-cli shutdown -Restart=always - -[Install] -WantedBy=multi-user.target -``` - -Final steps: - -```sh -sudo adduser --system --group --no-create-home redis -sudo mkdir /var/lib/redis -sudo chown redis:redis /var/lib/redis -sudo chmod 770 /var/lib/redis -``` - -## Ruby 2.7.2 with rbenv on Ubuntu 23.10 - -Edit the `/etc/apt/sources.list` file: - -```sh -deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main -``` - -Then run `sudo apt-get update`. After completion, install `libssl1.0-dev`: - -```sh -sudo apt-get install libssl1.0-dev -``` - -## Fix screen tearing - -```sh -sudo micro /etc/X11/xorg.conf.d/20-intel.conf -``` - -Add the following contents to `20-intel.conf`: - -```sh -Section "OutputClass" - Identifier "Intel Graphics" - MatchDriver "i915" - Driver "intel" - Option "DRI" "3" - Option "TearFree" "1" -EndSection -``` - -## Enabling "tap to click" - -```sh -sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf -``` - -Add the following contents to `30-touchpad.conf`: - -```sh -Section "InputClass" - Identifier "touchpad" - Driver "libinput" - MatchIsTouchpad "on" - Option "Tapping" "on" - Option "TappingButtonMap" "lmr" -EndSection -``` - -## Woocommerce - -**Reset all product menu_order to `0`** - -```sql -UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; -``` +* [[wordpress/database_update]] +* [[wordpress/NearlyFreeSpeech_Setup]] diff --git a/pages/wiki/alpine-linux.md b/pages/wiki/alpine-linux.md new file mode 100644 index 0000000..8edd90c --- /dev/null +++ b/pages/wiki/alpine-linux.md @@ -0,0 +1,37 @@ +# Alpine Linux + +This page contains a helpful collection of configuration and application setups for Alpine Linux. + +## Run Mullvad on Alpine Linux (Wireguard) + + + # Install wireguard + apk add wireguard-tools + + +Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory: + + + doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" + + +Then setup an aliases for easier up/down states: + + + alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" + alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" + +## Alpine Linux `mini_racer` Tweaks + +Gem lockfile: + + + PLATFORMS + ruby + x86_64-linux-musl + + mini_racer (0.6.3) + <remove child dependency> + + +then run: `bundle update mini_racer` diff --git a/pages/wiki/cgit.md b/pages/wiki/cgit.md new file mode 100644 index 0000000..3e2c7d7 --- /dev/null +++ b/pages/wiki/cgit.md @@ -0,0 +1,57 @@ +# cgit + +This page contains a comprehensive guide to setting up cgit on NearlyFreeSpeech. It is assumed that you already have an account with NFS and also have access to a "site" online. + +Most of the following has been lifted from [NearlyFreeSpeech cgit application walkthrough](https://members.nearlyfreespeech.net/wiki/Applications/Cgit) but has been tweaked and updated. + +You can see a **live version** [here](https://git.btxx.org). + +## Building cgit + +The following assumes that you wish to have cgit running at the top-level of your chosen domain (ie. git.example.com) + +SSH into your account then download and unpack the latest release: + + git clone git://git.zx2c4.com/cgit cgit-src + cd cgit-src + +Create a cgit.conf file with desired locations: + + CGIT_SCRIPT_PATH = /home/public + CGIT_DATA_PATH = $(CGIT_SCRIPT_PATH) + CGIT_CONFIG = $(CGIT_SCRIPT_PATH)/cgitrc + CACHE_ROOT = $(CGIT_SCRIPT_PATH)/cgitcache + prefix = $(CGIT_SCRIPT_PATH)/local + +Get the git sources (needed to build libgit): + + git submodule init + git submodule update + +Build and install it: + + gmake install + +## Configuration + +Make a text file named `cgitrc` where you specified CGIT_CONFIG and add the following (these are some personal defaults to make things cleaner): + + logo=/cgit.png + root-title=main root title + root-desc=description for your git server + root-readme=/home/public/about.md + virtual-root=/ + + about-filter=/home/public/cgit-src/filters/about-formatting.sh + readme=:README.md + readme=:README + + include=/home/protected/cgitrepos + +Then in the specified file (`cgitrepos`), place your repos, ex: + + repo.url=MyRepo + repo.path=/home/public/MyRepo.git + repo.desc=This is my git repository + +**And you should be good to go!** diff --git a/pages/wiki/dotfiles.md b/pages/wiki/dotfiles.md new file mode 100644 index 0000000..7802c00 --- /dev/null +++ b/pages/wiki/dotfiles.md @@ -0,0 +1,138 @@ +# dotfiles + +This page contains my (mostly) up-to-date dotfiles for a wide range of use cases. + +## .vimrc + + + " Don't try to be vi compatible + set nocompatible + + " Helps force plugins to load correctly when it is turned back on below + filetype off + + " TODO: Load plugins here (pathogen or vundle) + + " Turn on syntax highlighting + syntax on + + " For plugins to load correctly + filetype plugin indent on + + " TODO: Pick a leader key + " let mapleader = "," + + " Security + set modelines=0 + + " Show line numbers + set number + + " Show file stats + set ruler + + " Blink cursor on error instead of beeping (grr) + set visualbell + + " Encoding + set encoding=utf-8 + + " Whitespace + set wrap + set textwidth=79 + set formatoptions=tcqrn1 + set tabstop=2 + set shiftwidth=2 + set softtabstop=2 + set expandtab + set noshiftround + + " Cursor motion + set scrolloff=3 + set backspace=indent,eol,start + set matchpairs+=<:> " use % to jump between pairs + runtime! macros/matchit.vim + + " Move up/down editor lines + nnoremap j gj + nnoremap k gk + + " Allow hidden buffers + set hidden + + " Rendering + set ttyfast + + " Status bar + set laststatus=2 + + " Last line + set showmode + set showcmd + + " Searching + nnoremap / /\v + vnoremap / /\v + set hlsearch + set incsearch + set ignorecase + set smartcase + set showmatch + map <leader><space> :let @/=''<cr> " clear search + + " Remap help key. + inoremap <F1> <ESC>:set invfullscreen<CR>a + nnoremap <F1> :set invfullscreen<CR> + vnoremap <F1> :set invfullscreen<CR> + + " Textmate holdouts + + " Formatting + map <leader>q gqip + + " Visualize tabs and newlines + set listchars=tab:▸\ ,eol:¬ + " Uncomment this to enable by default: + " set list " To enable by default + " Or use your leader key + l to toggle on/off + map <leader>l :set list!<CR> " Toggle tabs and EOL + + " Color scheme (terminal) + set t_Co=256 + set background=dark + let g:solarized_termcolors=256 + let g:solarized_termtrans=1 + " put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim + " in ~/.vim/colors/ and uncomment: + " colorscheme solarized + +## .zshrc extras / aliases + + export EDITOR="/bin/vim" + + alias suck="sudo rm -rf config.h ; sudo make install" + alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2" + alias alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" + export PATH="/usr/local/bin:$PATH" + export PATH="$PATH:/opt/local/bin" + export PATH="$PATH:/mongodb/bin" + +## mimeapps.list + +Place this file under `/usr/share/applications/mimeapps.list` + + [Default Applications] + x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop + x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop + x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop + x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop + text/html=org.qutebrowser.qutebrowser.desktop + application/x-extension-htm=org.qutebrowser.qutebrowser.desktop + application/x-extension-html=org.qutebrowser.qutebrowser.desktop + application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop + application/xhtml+xml=org.qutebrowser.qutebrowser.desktop + application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop + application/x-extension-xht=org.qutebrowser.qutebrowser.desktop + image/jpeg=feh + image/png=feh + image/webp=feh diff --git a/pages/wiki/openbsd.md b/pages/wiki/openbsd.md new file mode 100644 index 0000000..a4bc67e --- /dev/null +++ b/pages/wiki/openbsd.md @@ -0,0 +1,6 @@ +# OpenBSD + +This page contains all of my personal scripts and tutorials for OpenBSD. The content ranges from setting up laptops and desktops, to running personal servers and optimization tweaks. + +* [[openbsd/installation]] +* [[openbsd/desktop_environment]] diff --git a/pages/wiki/ps2.md b/pages/wiki/ps2.md new file mode 100644 index 0000000..5317eef --- /dev/null +++ b/pages/wiki/ps2.md @@ -0,0 +1,6 @@ +# PS2 + +This page contains information about setting up PS2 hardware (and emulators) to work with online play. + +* [[ps2/pcsx2]] +* [[ps2/networking]] diff --git a/pages/wiki/qutebrowser.md b/pages/wiki/qutebrowser.md new file mode 100644 index 0000000..02e003b --- /dev/null +++ b/pages/wiki/qutebrowser.md @@ -0,0 +1,28 @@ +# Qutebrowser + +This page contains all the custom configuration for qutebrowser. + +### Greasemonkey + +All of these scripts should be added under `~/.local/share/qutebrowser/greasemonkey/`. Then be sure to run the proper command within qutebrowser: `:greasemonkey-reload` + +#### Auto Skip YouTube Ads + + // ==UserScript== + // @name Auto Skip YouTube Ads + // @version 1.0.0 + // @description Speed up and skip YouTube ads automatically + // @author jso8910 + // @match *://*.youtube.com/* + // @exclude *://*.youtube.com/subscribe_embed?* + // ==/UserScript== + setInterval(() => { + const btn = document.querySelector('.videoAdUiSkipButton,.ytp-ad-skip-button') + if (btn) { + btn.click() + } + const ad = [...document.querySelectorAll('.ad-showing')][0]; + if (ad) { + document.querySelector('video').playbackRate = 10; + } + }, 50) diff --git a/pages/wiki/safari.md b/pages/wiki/safari.md new file mode 100644 index 0000000..5601b0e --- /dev/null +++ b/pages/wiki/safari.md @@ -0,0 +1,31 @@ +# Safari + +This page contains details on how to properly configure Safari for the best user experience. + +## Extensions + +To avoid being bombarded with tracking scripts and advertisements, you'll want to install the following Safari extensions: + +* [AdGuard](https://adguard.com/en/adguard-mac/overview.html) +* [AdBlock](https://adblockplus.org/ad-blocker-safari) + +## Web Browsing QoL + +Display full links on hover (similar to default config for Firefox, Chrome): + +1. Open the `View` menu item +2. Click `Show Status Bar` + +Display full URL address in open tabs: + + + +## Custom CSS + +Include a "master" CSS file to override specific sites/elements with your own styling. + +1. Open Safari `Settings` +2. Navigate to the `Advanced` tab +3. Select your custom CSS file in the dropdown + + diff --git a/pages/wiki/scripts.md b/pages/wiki/scripts.md new file mode 100644 index 0000000..78bf537 --- /dev/null +++ b/pages/wiki/scripts.md @@ -0,0 +1,74 @@ +# Scripts + +This page contains helpful scripts and useful terminal commands. + +## Docker + +Installing `ghost` + + + docker pull ghost + docker run -d \ + --name ghost-name \ + -e NODE_ENV=development \ + -p 2368:2368 \ + -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ + ghost:alpine + + +## `ffmpeg` to MP4 + + + ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4 + + +## Mount USB HDD via CLI + + + mkdir /media/usb-drive + mount /dev/sdX /media/usb-drive/ + + +## Fix screen tearing + + + sudo vim /etc/X11/xorg.conf.d/20-intel.conf + + +Add the following contents to `20-intel.conf`: + + + Section "OutputClass" + Identifier "Intel Graphics" + MatchDriver "i915" + Driver "intel" + Option "DRI" "3" + Option "TearFree" "1" + EndSection + + +## Enabling "tap to click" + + + sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf + + +Add the following contents to `30-touchpad.conf`: + + + Section "InputClass" + Identifier "touchpad" + Driver "libinput" + MatchIsTouchpad "on" + Option "Tapping" "on" + Option "TappingButtonMap" "lmr" + EndSection + + +## Woocommerce + +**Reset all product menu_order to `0`** + + + UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; + diff --git a/pages/wiki/sublime-text.md b/pages/wiki/sublime-text.md new file mode 100644 index 0000000..d7f105a --- /dev/null +++ b/pages/wiki/sublime-text.md @@ -0,0 +1,47 @@ +# Sublime Text + +Personal configuration for the text editor Sublime Text ([https://www.sublimetext.com/](sublimetext.com/)) + +## Themes / Color Schemes + +* Theme: Default +* Color scheme is set to `auto`: + * Light scheme: `Breakers` + * Dark scheme: `Dracula` + +## Plugins + +* BracketHighlighter +* Copy Relative Path +* Dracula Color Scheme +* Emmet +* Package Control + +## Settings + + + { + "ignored_packages": + [ + "Vintage", + ], + "color_scheme": "auto", + "dark_color_scheme": "Packages/Dracula Color Scheme/Dracula.tmTheme", + "light_color_scheme": "Packages/Colorsublime - Themes/Butterfly.tmTheme", + "font_face": "JetBrains Mono NL", + "font_size": 14, + "line_padding_top": 3, + "line_padding_bottom": 3, + "highlight_line": true, + "word_wrap": true, + "dark_theme": "Default Dark.sublime-theme", + "light_theme": "Default.sublime-theme", + "tab_size": 2, + "theme": "auto", + "index_files": true, + "show_definitions": false, + "show_full_path": true, + /*"tab_size": 2,*/ + "translate_tabs_to_spaces": true, + } + diff --git a/pages/wiki/ubuntu.md b/pages/wiki/ubuntu.md new file mode 100644 index 0000000..cfd7560 --- /dev/null +++ b/pages/wiki/ubuntu.md @@ -0,0 +1,85 @@ +# Ubuntu + +This page contains a wide range of common scripts / application setups for Ubuntu + +## MongoDB 3.4 on Ubuntu 23.10 + + wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb + sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb + sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 + + echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list + +Now edit `/etc/apt/sources.list.d/mongodb-org-3.4.list`: + + deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... + +Then finish things up: + + sudo apt-get update --allow-unauthenticated + sudo apt-get install -y mongodb-org + + sudo mkdir -p /data/db + sudo chmod -R 777 /data/db + +## Redis 6.0.7 on Ubuntu 23.10 + + sudo apt-get install build-essential tcl + cd /tmp + curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz + tar xzvf redis-6.0.7.tar.gz + cd redis-6.0.7 + +Install redis: + + make + make test + sudo make install + + sudo mkdir /etc/redis + sudo cp /tmp/redis-6.0.7/redis.conf /etc/redis + +Edit `/etc/redis/redis.conf` with the following changes: + +- `supervised systemd` +- `dir /var/lib/redis` + +Create systemd unit file for redis: `/etc/systemd/system/redis.service`: + + [Unit] + Description=Redis In-Memory Data Store + After=network.target + + [Service] + User=redis + Group=redis + ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf + ExecStop=/usr/local/bin/redis-cli shutdown + Restart=always + + [Install] + WantedBy=multi-user.target + +Final steps: + + sudo adduser --system --group --no-create-home redis + sudo mkdir /var/lib/redis + sudo chown redis:redis /var/lib/redis + sudo chmod 770 /var/lib/redis + +## Ruby 2.7.2 with rbenv on Ubuntu 23.10 + +Edit the `/etc/apt/sources.list` file: + + deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main + +Then run `sudo apt-get update`. After completion, install `libssl1.0-dev`: + + sudo apt-get install libssl1.0-dev + +Install `rbenv` and be sure to include the following in `.zshrc`: + + export PATH="$HOME/.rbenv/bin:$PATH" + eval "$(rbenv init -)" + + diff --git a/pages/wiki/xbox.md b/pages/wiki/xbox.md new file mode 100644 index 0000000..9f5b14e --- /dev/null +++ b/pages/wiki/xbox.md @@ -0,0 +1,5 @@ +# Xbox + +This page contains all the details of my personal setup for the original Xbox console. This includes cleaning, repasting thermals, soft modding and more. + +* [[xbox/softmodding]] diff --git a/posts/Building_rbenv_on_OpenBSD_7.5.md b/posts/Building_rbenv_on_OpenBSD_7.5.md index 07bad04..3da1fad 100644 --- a/posts/Building_rbenv_on_OpenBSD_7.5.md +++ b/posts/Building_rbenv_on_OpenBSD_7.5.md @@ -8,54 +8,54 @@ I use Ruby (specifically with Jekyll) for a lot of my clubs/projects while using First, be sure to install the required packages in order to build from source, and then clone the core `rbenv` repo: -```sh +~~~sh pkg_add git gcc gmake libffi libyaml openssl git clone https://github.com/rbenv/rbenv.git ~/.rbenv -``` +~~~ ## Building `rbenv` Add `rbenv` to your PATH and initialize it (place this inside your `.bashrc` or `.zshrc` etc): -```sh +~~~sh export PATH="$HOME/.rbenv/bin:$PATH" export PATH="$HOME/.rbenv/shims:$PATH" export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" eval "$(rbenv init -)" -``` +~~~ Then reload your shell (zsh in this example): -```sh +~~~sh source ~/.zshrc -``` +~~~ Next we will need to install `ruby-build` as a `rbenv` plugin. Clone the ruby-build repository into the rbenv plugins directory: -```sh +~~~sh git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build -``` +~~~ ## Installing Ruby and Setting Our Version Now use `rbenv` to install the desired version of Ruby (we will get an older version for this example): -```sh +~~~sh rbenv install 3.3.0 -``` +~~~ If you run into issues, you may need to specify your openssl directory: -```sh +~~~sh RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 -``` +~~~ If you're on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait! Then navigate to your project of choice and set the `local` Ruby version: -```sh +~~~sh rbenv local 3.3.0 -``` +~~~ That's it! If you'd prefer to set this version of Ruby for all projects going forward, simply replace `local` with `global`. diff --git a/posts/adguard.md b/posts/adguard.md index f89ce2b..5cd1e5a 100644 --- a/posts/adguard.md +++ b/posts/adguard.md @@ -26,31 +26,31 @@ Don't flash anything just yet! Be sure to use the gear icon and edit the setting Put the SD card into your Pi, connect power and ethernet. Give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer's terminal and enter the following command: -```sh +~~~sh ssh piguard@piguard.local -``` +~~~ If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password you setup. Once you are connected directly to the Pi, it's best to check for updates: -```sh +~~~sh sudo apt update -``` +~~~ ...and if updates are in fact available, install them via: -```sh +~~~sh sudo apt upgrade -``` +~~~ ## Installing AdGuard Home Simply run the automated installer: -```sh +~~~sh curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v -``` +~~~ Follow the instructions and you'll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to `piguard.local`. diff --git a/posts/alpine.md b/posts/alpine.md index d4fc8f9..78b2329 100644 --- a/posts/alpine.md +++ b/posts/alpine.md @@ -67,7 +67,7 @@ I'll save you both the headache and large amount of time I wasted on this silly I put the following in my `/etc/xdg/mimeapps.list` (which is included by default with the installer) -```sh +~~~sh [Default Applications] x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop @@ -96,7 +96,7 @@ image/x-portable-greymap=feh.desktop application/pcx=feh.desktop image/svg+xml=feh.desktop image/svg-xml=feh.desktop -``` +~~~ You might have also noticed that I use `feh` as my default image viewer as well. That's just my personal preference, feel free to switch that out as you see fit. @@ -116,25 +116,25 @@ Some of these "hacks" or tweaks I had to implement might help others who run int It is important to install `gawk` since `awk` isn't "real" on Alpine. Once you have that on you system `aerc` will render emails out-of-the-box.[^1] -```sh +~~~sh apk add gawk -``` +~~~ ### Sublime Text Sublime Text requires flatpak, so if that isn't your *thing* then you're better off snagging a different editor. I've tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day... -```sh +~~~sh apk add flatpak flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo -``` +~~~ Then reboot your machine for the changes to take. Login again and run: -```sh +~~~sh flatpak install flathub com.sublimetext.three -``` +~~~ FYI: You *might* need to run the above commands under `sudo` if your current user lacks proper permissions. diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md index 1b5d86a..486ec2f 100644 --- a/posts/animated-card-tiles.md +++ b/posts/animated-card-tiles.md @@ -21,7 +21,7 @@ For the base skeleton of these cards we only need: - the inner child element that will display on `:hover` - proper `h4` and `p` tags inside that child element -```html +~~~html <div class="card-tiles-container"> <div class="card-tile"> <div class="text-content"> @@ -30,7 +30,7 @@ For the base skeleton of these cards we only need: </div> </div> </div> -``` +~~~ That's all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier. @@ -38,17 +38,17 @@ That's all that is needed - for now. We will be returning to this code shortly t First we set the main housing container to use `flex` so we save ourselves the headache of aligning all the cards in a nice row: -```css +~~~css .card-tiles-container { display: flex; font-size: 14px; margin: 20px 0; } -``` +~~~ Next we create the default styling for our tile cards and set the `transform` property to scale the card on `:hover`: -```css +~~~css /* Default card tile styles */ .card-tile { border: 1px solid; @@ -63,7 +63,7 @@ Next we create the default styling for our tile cards and set the `transform` pr .card-tile:hover { transform: scale(1.1); } -``` +~~~ ### Where are my cards?! @@ -73,7 +73,7 @@ Our next step is to hide the default inner `text-content` and only show it on ho When the user hovers over a main card tile, we change the `text-content` values of both the opacity and z-index to 1. -```css +~~~css /* Card tile text content */ .card-tile .text-content { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); @@ -94,24 +94,24 @@ When the user hovers over a main card tile, we change the `text-content` values opacity: 1; z-index: 1; } -``` +~~~ Finally we add some minor styling for the inner header and paragraph tags: -```css +~~~css .card-tile .text-content h4, .card-tile .text-content p { color: #fff; margin: 0; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } -``` +~~~ ### Don't forget mobile We want out UI to stack the cards if users are viewing them on smaller devices: -```css +~~~css @media(max-width: 600px) { .card-tiles-container { flex-direction: column; @@ -121,13 +121,13 @@ We want out UI to stack the cards if users are viewing them on smaller devices: width: 100%; } } -``` +~~~ ## Customizing each card Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring: -```html +~~~html <div class="card-tiles-container"> <!-- `Blue` class --> <div class="card-tile blue"> @@ -151,11 +151,11 @@ Remember how I mentioned that we would be adding more classes to the original HT </div> </div> </div> -``` +~~~ And these color classes correlate to some new CSS styling: -```css +~~~css /* Blue Card */ .card-tile.blue { background-color: #0093E9; @@ -168,9 +168,9 @@ And these color classes correlate to some new CSS styling: box-shadow: 0 8px 18px rgba(128,208,199,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -``` +~~~ -```css +~~~css /* Orange Card */ .card-tile.orange { background-color: #FAD961; @@ -183,9 +183,9 @@ And these color classes correlate to some new CSS styling: box-shadow: 0 8px 18px rgba(247,107,28,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -``` +~~~ -```css +~~~css /* Green Card */ .card-tile.green { background-color: #096e40; @@ -198,7 +198,7 @@ And these color classes correlate to some new CSS styling: box-shadow: 0 8px 18px rgba(9,110,64,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -``` +~~~ ### Adding transitions @@ -206,13 +206,13 @@ We can now see the actual cards visually and have the ability to interact with t Lucky we can target all elements we wish to animate with the `transition` property, like so: -```css +~~~css /* Shared transitions */ .card-tile, .card-tile .text-content { transition: .3s ease all; } -``` +~~~ Done and done. @@ -222,7 +222,7 @@ To make things easier for reference, I have included all the `html` and `css` be ### HTML -```html +~~~html <div class="card-tiles-container"> <div class="card-tile blue"> <div class="text-content"> @@ -243,11 +243,11 @@ To make things easier for reference, I have included all the `html` and `css` be </div> </div> </div> -``` +~~~ ### CSS -```css +~~~css .card-tiles-container { display: flex; font-size: 14px; @@ -344,4 +344,4 @@ To make things easier for reference, I have included all the `html` and `css` be width: 100%; } } -``` +~~~ diff --git a/posts/animated-toggle-tabs.md b/posts/animated-toggle-tabs.md index e964382..5404cfc 100644 --- a/posts/animated-toggle-tabs.md +++ b/posts/animated-toggle-tabs.md @@ -18,7 +18,7 @@ Let’s get started with the base skeleton. <p>There isn't anything special happening here. We just contain all our <code>labels</code> and <code>inputs</code> into a <code>.radio-toggles</code> wrapper, make sure those <code>labels</code> are each properly connected to their corresponding <code>inputs</code>, and then add an empty <code>.slide-item</code> element (more on that later).</p> -```html +~~~html <div class="radio-toggles"> <input type="radio" id="option-1" name="radio-options"> <label for="option-1">One-Time</label> @@ -28,14 +28,14 @@ Let’s get started with the base skeleton. <label for="option-3">Free</label> <div class="slide-item"></div> </div> -``` +~~~ ## The CSS Now for the main event – the CSS. First we want to style the wrapper that holds all of our pieces together. You can tweak this to your liking, but I prefer a simple and clean style: -```css +~~~css .radio-toggles { align-items: center; background: #eee; @@ -49,21 +49,21 @@ Now for the main event – the CSS. First we want to style the wrapper that hold padding: 4px; position: relative; } -``` +~~~ Next, we “hide” (only visually) the default `radio` inputs: -```css +~~~css input[type="radio"] { left: -9999px; position: absolute; z-index: -1; } -``` +~~~ Then we give the corresponding `label` elements a little spacing and breathing room: -```css +~~~css label { cursor: pointer; padding: 10px 20px; @@ -71,11 +71,11 @@ label { width: 33.33%; z-index: 2; } -``` +~~~ Remember that `.slide-item` I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so: -```sh +~~~sh .slide-item { background: white; border-radius: 9999px; @@ -87,20 +87,20 @@ Remember that `.slide-item` I referenced earlier? That element will be the visua transition: left .4s; z-index: 0; } -``` +~~~ You'll notice the `left`, `height`, and `width` properties utilize the CSS `calc` attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface. For the finishing touches, we just need to tell the `.slide-item` where to position itself based on which `radio` input is currently selected: -```css +~~~css input[type="radio"]:nth-of-type(1):checked ~ .slide-item { left: 4px; } input[type="radio"]:nth-of-type(3):checked ~ .slide-item { left: calc(66.66% + 4px); } -``` +~~~ That's pretty much it! You now have a fully functional, animated toggle slider with just a set of simple `radio` inputs and pure CSS. diff --git a/posts/audio-hotkeys-on-linux-mint.md b/posts/audio-hotkeys-on-linux-mint.md index 0a3bd7a..1037e91 100644 --- a/posts/audio-hotkeys-on-linux-mint.md +++ b/posts/audio-hotkeys-on-linux-mint.md @@ -8,7 +8,7 @@ Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) wa For my own personal reference, I'm also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet. -```sh +~~~sh // Volume Up pactl set-sink-volume @DEFAULT_SINK@ +5% @@ -17,5 +17,5 @@ pactl set-sink-volume @DEFAULT_SINK@ -5% // Toggle Mute pactl set-sink-mute @DEFAULT_SINK@ toggle -``` +~~~ diff --git a/posts/aui.md b/posts/aui.md index f46eddf..37cbd2f 100644 --- a/posts/aui.md +++ b/posts/aui.md @@ -14,27 +14,27 @@ Since I've been wanting to dip my toes into more tutorial-based articles (maybe Since this project consists of only two buttons elements, the HTML or <i>skeleton</i> of this project is very straightforward: -```html +~~~html <button class="cancel">Cancel</button> <button class="confirm">Confirm</button> -``` +~~~ ### Styling the buttons The first step is to remove the browser's default button styling by using the `appearance` property. This will help avoid having to fight against the browser and minimize our CSS code. -```css +~~~css button { -webkit-appearance: none; -moz-appearance: none; } -``` +~~~ Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons: (Pay attention to the `transition` property as we will be returning to that shortly) -```css +~~~css button { -webkit-appearance: none; -moz-appearance: none; @@ -49,11 +49,11 @@ button { position: relative; transition: all ease .3s; } -``` +~~~ Then we separate the specific confirm and cancel button styles into their own class selectors: -```css +~~~css button.confirm { background: #4A90E2; border-color: #3672B6; @@ -65,7 +65,7 @@ button.cancel { border-color: #B8B8B8; color: #6F6F6F; } -``` +~~~ ### Playing with pseudo elements @@ -73,7 +73,7 @@ Now that the button is styled and structured with basic formatting, it's time to The cleanest way to do this is by using the `:before` pseudo element paired with a linear-gradient background. -```css +~~~css button:before { background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-radius: 125px; @@ -85,18 +85,18 @@ button:before { transition: all ease .3s; width: 92%; } -``` +~~~ ### Adding interaction The final step is adding the user hover interaction: (Remember that `transition` property?) -```css +~~~css button:hover { box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2); transform: scale(1.02); } -``` +~~~ That's it! diff --git a/posts/base64-all-the-things.md b/posts/base64-all-the-things.md index c061aef..36b3e4b 100644 --- a/posts/base64-all-the-things.md +++ b/posts/base64-all-the-things.md @@ -12,15 +12,15 @@ It might be common knowledge, but I think breaking down exactly what base64 enco In simpler terms: it is a encoded format that can change an element like this: -```html +~~~html <img src="/path/to/image.webp" alt="Cool image"> -``` +~~~ Into this: -```html +~~~html <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image"> -``` +~~~ ## See it in action diff --git a/posts/basic-gulp-build-for-sass.md b/posts/basic-gulp-build-for-sass.md index 4ccbe5c..dae8960 100644 --- a/posts/basic-gulp-build-for-sass.md +++ b/posts/basic-gulp-build-for-sass.md @@ -6,7 +6,7 @@ Some designers might shy away from build tools when first starting out and I can Here is the final `gulp.js` file in all it's glory: -```js +~~~js var gulp = require('gulp'); var shell = require('gulp-shell'); var sass = require('gulp-sass'); @@ -33,7 +33,7 @@ gulp.task('build', gulp.series( 'assets', generate' )); -``` +~~~ Trust me, it's not complicated at all. @@ -41,11 +41,11 @@ Trust me, it's not complicated at all. For our basic build file we are going to need only three modules: `gulp`, `gulp-shell` and `gulp-sass`. -```js +~~~js var gulp = require('gulp'); var shell = require('gulp-shell'); var sass = require('gulp-sass'); -``` +~~~ #### gulp This is the streaming build system, without it we can't do anything else. @@ -66,9 +66,9 @@ Required for gulp to compile Sass into vanilla CSS. Our first step is to create the default task that will generate our build. In this example we are making the assumption that we're building a Jekyll website (but you can place any build command here): -```sh +~~~sh gulp.task('generate', shell.task('jekyll serve')); -``` +~~~ Don't worry if this `generate` isn't clear, we come back to that later. @@ -77,41 +77,41 @@ Don't worry if this `generate` isn't clear, we come back to that later. We will name this next task `styles` since that's what it outputs - our styling. We start by telling gulp where our main `scss` directory is: -```js +~~~js /* Change this directory to match yours */ return gulp.src('_includes/assets/sass/styles.scss') -``` +~~~ This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory: -```js +~~~js .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)) /* Change this to your destination directory */ .pipe(gulp.dest('_includes/assets/css/')); -``` +~~~ ## Building our assets This step isn't 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc) -```js +~~~js /* Compile the assets */ gulp.task('assets', gulp.parallel( 'styles' )); -``` +~~~ ## Altogether now! Now we add a task that runs all other tasks in our gulp file (in this case it will run both `assets` and `generate`) -```js +~~~js /* Build */ @@ -119,7 +119,7 @@ gulp.task('build', gulp.series( 'assets', 'generate' )); -``` +~~~ And that's it - we're done! A very basic `gulp` build for compiling Sass. diff --git a/posts/batch-webp-conversion.md b/posts/batch-webp-conversion.md index 54bc56b..9befa46 100644 --- a/posts/batch-webp-conversion.md +++ b/posts/batch-webp-conversion.md @@ -36,12 +36,12 @@ You *could* download one of the many native apps from the Mac App Store to do th 8) Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert to webp") -```sh +~~~sh for f in "$@" do /usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" done -``` +~~~ For visual reference, it should look something like this: @@ -67,9 +67,9 @@ Simple as that! I was contacted by the very helpful [Kev Quirk](https://kevq.uk) about a minor problem he encountered while following this tutorial. When trying to run `cwebp` he received the following error message: -```sh +~~~sh cwebp cannot be opened because it's from an unverified developer -``` +~~~ Doing the next steps seemed to have fixed this issue for him: diff --git a/posts/battery.md b/posts/battery.md index 83caf2b..dca86c4 100644 --- a/posts/battery.md +++ b/posts/battery.md @@ -8,21 +8,21 @@ It is no secret that OpenBSD has poor battery performance on laptops. Although n I won't go into great detail about `ampd` here - that's what the incredible [documentation is for](https://man.openbsd.org/apmd). You'll want to make sure to start it before trying to configure it: -```sh +~~~sh doas rcctl start apmd -``` +~~~ If already running in a live session, you can default to `-A` (auto) but I suggest setting cpu performance to low: -```sh +~~~sh apm -L -``` +~~~ To make these changes permanent on boot: -```sh +~~~sh doas rcctl set apmd flags -L -``` +~~~ Optimizating battery life via `ampd` will have the most noticable impact but you can improve things even further by implementing some extra "small" performance wins. diff --git a/posts/berg.md b/posts/berg.md index 176cf57..d87cea3 100644 --- a/posts/berg.md +++ b/posts/berg.md @@ -18,25 +18,25 @@ The first step is to create the main repo that would house the core files of `pb Once your two repos are created, you will need to make some minor edits to the `_config.sh` in the core `pblog` project to tell the build script where the generated files should go (in this case the `pages` repo): -```sh +~~~sh OUTPUT="_output/pages/" -``` +~~~ ## The Submodule Using terminal, navigate to the `_output/` directory in your core `pblog` project. Run the following, remembering to replace the USERNAME parameter with your own: -```sh +~~~sh git submodule add git@codeberg.org:USERNAME/pages.git -``` +~~~ If everything worked correctly you should now have a `.gitmodules` file in your main `pblog` project. If you get any errors, you might need to include the name of the directory at the end of the command: -```sh +~~~sh git submodule add git@codeberg.org:USERNAME/pages.git pages -``` +~~~ ## The Workflow @@ -44,9 +44,9 @@ Now you can make changes, add new posts and pages in the main `pblog` project an Now you can navigate to the standard Codeberg Pages URL to see it in action: -```sh +~~~sh USERNAME.codeberg.page -``` +~~~ If you want to use your own custom domain (who doesn't?) then continue reading. @@ -54,18 +54,18 @@ If you want to use your own custom domain (who doesn't?) then continue reading. The first thing you will need to do is add a `.domains` file to your `pages` root directory. In this file you will want to list your custom domain on the first line, followed by the standard Codeberg pages URL below it. Like so: -```sh +~~~sh yourcustomdomain.com USERNAME.codeberg.page -``` +~~~ I'm keeping this very basic, but I suggest you look further into the [official documentation](https://docs.codeberg.org/codeberg-pages/#custom-domains) if there are any extra settings you'd like to tinker with. The final step is configuring a `CNAME` DNS setting through your registrar: -```sh +~~~sh @ -> USERNAME.codeberg.page -``` +~~~ Give the DNS settings a bit of time to take (24-48 hours) and you'll have your custom domain working just fine. diff --git a/posts/better-box-shadows.md b/posts/better-box-shadows.md index 832a76a..c268a34 100644 --- a/posts/better-box-shadows.md +++ b/posts/better-box-shadows.md @@ -39,21 +39,21 @@ Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has b Let's take a look at a default configuration of `box-shadow`: -```css +~~~css .box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } -``` +~~~ In the example above the first property number is the origin of the *x-axis*, the second number is the origin of the *y-axis* and the third is the amount of *blur*. We should also add some minimal styling to cleanup the `.box-container` a little bit for our example: -```html +~~~html <div class="box-container"></div> -``` +~~~ -```css +~~~css .box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Styles to make it less ugly */ @@ -65,7 +65,7 @@ We should also add some minimal styling to cleanup the `.box-container` a little position: relative; width: 250px; } -``` +~~~ Which would render as this: @@ -79,17 +79,17 @@ Not bad - but we can do a lot better than this. We just need to add a simple child `div` (or use a `pseudo` element if you prefer) inside our main element we want to apply the shadow to: -```html +~~~html <div class="box-container"> <div class="box-container-inner"></div> </div> -``` +~~~ Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this). Remember to set this child element behind it's parent by adding `z-index: -1`. -```css +~~~css .box-container { /* No box-shadow needed on this element anymore */ /* Styles to make it less ugly */ @@ -101,13 +101,13 @@ Remember to set this child element behind it's parent by adding `z-index: -1`. position: relative; width: 250px; } -``` +~~~ ## Inner Containers We also need to target the `box-container-inner` element set inside the current parent to reflect our custom shadow styling: -```sh +~~~sh .box-container-inner { bottom: 0; /* The box-shadow is added here now */ @@ -118,7 +118,7 @@ We also need to target the `box-container-inner` element set inside the current width: 94%; z-index: -1; } -``` +~~~ Which will make the drop-shadow render with a little more realistic depth: @@ -131,7 +131,7 @@ We could stop now and have a decent drop-shadow that is certainly easier on the So your final code would look like this: -```css +~~~css .box-container { /* Styles to make it less ugly */ background: white; @@ -153,7 +153,7 @@ So your final code would look like this: width: 94%; z-index: -1; } -``` +~~~ Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth: diff --git a/posts/character-unit.md b/posts/character-unit.md index abbd710..58b200b 100644 --- a/posts/character-unit.md +++ b/posts/character-unit.md @@ -12,28 +12,28 @@ By setting your main containers or text elements with the CSS character unit (`c Let's say you have an article which will fill the entire length of the screen. Something like this: -```html +~~~html <div class="container"> <p>Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.</p> <p>Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.</p> </div> -``` +~~~ With this structure, you might normally set the default `max-width` property with your desired maximum width (whatever you believe is the best reading length): -```css +~~~css .container { max-width: 38em; } -``` +~~~ This works - but it isn't ideal. Time for character units to save the day! You will still target the `max-width` property but this time we set it to use the `ch` value like so: -```css +~~~css .container { max-width: 66ch; } -``` +~~~ This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort. diff --git a/posts/chasing-performance.md b/posts/chasing-performance.md index daf7b08..775456c 100644 --- a/posts/chasing-performance.md +++ b/posts/chasing-performance.md @@ -147,11 +147,11 @@ Webfonts I'm not using any webfonts but instead defaulting to the user's OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them. -```css +~~~css body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; } -``` +~~~ For reference, there are some things you should to look out for when using custom typefaces: @@ -170,9 +170,9 @@ On top of that, I decided to also implement Filament Group's <a href="https://gi My personal site only uses a small amount of JavaScript on the article post Jekyll template pages. By using the <code>defer</code> property I can be sure to load the <code>IntersectionObserver</code> API polyfill after the rest of the DOM as finished loading. -```html +~~~html <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" defer> -``` +~~~ I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is. @@ -183,7 +183,7 @@ The only images I use are those included in supported blog posts, so the first s <span class="sidenote">I've also included responsive image sizes for further optimization based on screen size and loading speeds.</span> -```html +~~~html <figure> <picture> <source type="image/webp" @@ -203,12 +203,12 @@ The only images I use are those included in supported blog posts, so the first s class="lazyload"/> </picture> </figure> -``` +~~~ What about users with JavaScript disabled I hear you ask? It's time for <code>noscript</code> to save the day: -```html +~~~html <noscript> <picture> <source type="image/webp" @@ -226,7 +226,7 @@ What about users with JavaScript disabled I hear you ask? It's time for <code>no alt="Toggles Comparison"/> </picture> </noscript> -``` +~~~ ### HTTPS & Caching diff --git a/posts/cheap-portable-pi.md b/posts/cheap-portable-pi.md index ef5623b..d77c110 100644 --- a/posts/cheap-portable-pi.md +++ b/posts/cheap-portable-pi.md @@ -96,7 +96,7 @@ I will be setting up this "portable pi" via [headless installation](https://www. - Next add an empty file named `wpa_supplicant.conf` - Open the `wpa_supplicant.conf` file in a code / text editor and paste the following (be sure to change `country` to your proper country code, as well as properly setting your network name / password): -```sh +~~~sh ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1 country=US @@ -106,7 +106,7 @@ network={ psk="Your WPA/WPA2 security key" key_mgmt=WPA-PSK } -``` +~~~ - Unmount the microSD device, then place the microSD card in your RPi Zero @@ -119,9 +119,9 @@ network={ Open the terminal on your Raspberry Pi desktop and enter the following command: -```sh +~~~sh ssh pi@raspberrypi.local -``` +~~~ You will then be asked if you wish to trust this device (say yes), then prompted for the `pi` user's password - which is `raspberry`. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray! @@ -139,19 +139,19 @@ That's it! Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn't help us much). While connected to our RPi Zero via SSH, run the following commands: -```sh +~~~sh wget http://kedei.net/raspberry/v6_1/LCD_show_v6_1_3.tar.gz -``` +~~~ If you have snail-paced rural internet like I do, now is a good time to go and grab a coffee while this download completes. Once the download has finished, extract the contents and navigate to the new directory and install the driver: -```sh +~~~sh sudo tar xzf LCD_show_v6_1_3.tar.gz cd LCD_show_v6_1_3 sudo ./LCD35_v -``` +~~~ Once completed, the RPi Zero will reboot and everything should work as expected! diff --git a/posts/css-js-mistake.md b/posts/css-js-mistake.md index 3f4f709..a737124 100644 --- a/posts/css-js-mistake.md +++ b/posts/css-js-mistake.md @@ -32,7 +32,7 @@ Yes - and again more hypocrisy. My livelihood depends on software requiring cust ### A Look at the "New World" -Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a "converted" website[^1] showcasing how sites would look and feel in this design-less reality: +Sometimes it is easier to visualize a concept instead of just discussing it. Below you can find an example of a "converted" website [^1] showcasing how sites would look and feel in this design-less reality: - Wealthsimple: [Current Website](https://www.wealthsimple.com/en-ca/) / [New Version](/etc/html-only/wealthsimple/) diff --git a/posts/css-slope-graphs.md b/posts/css-slope-graphs.md index 36250a5..b694933 100644 --- a/posts/css-slope-graphs.md +++ b/posts/css-slope-graphs.md @@ -16,7 +16,7 @@ For this concept we will actually be building this graph out of `tables` - crazy (But more on that in the CSS section) -```html +~~~html <p>Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) <br><em>Source: Statisa 2018</em></p> <table> <thead> @@ -54,7 +54,7 @@ For this concept we will actually be building this graph out of `tables` - crazy </tr> </tbody> </table> -``` +~~~ As you can see, nothing too fancy is happpening here. Pay close attention to the `data-set` and `data-name` variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements. @@ -64,7 +64,7 @@ As you can see, nothing too fancy is happpening here. Pay close attention to the To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling: -```css +~~~css @import url('https://opentype.netlify.com/et-book/index.css'); * { box-sizing: border-box; @@ -93,7 +93,7 @@ table { text-align: left; width: 100%; } -``` +~~~ Pretty basic stuff. @@ -106,7 +106,7 @@ Now we need to design how our slope graph will look on larger screens / desktops 5. Remember that `data-name` variable? We now use that for our `:before` pseudo element for `table tbody tr td:nth-of-type(3)` 6. After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels -```css +~~~css @media(min-width:800px) { table { display: block; @@ -204,11 +204,11 @@ Now we need to design how our slope graph will look on larger screens / desktops width: 56%; } } -``` +~~~ All that's left are some minor styles to make everything look nice on mobile: -```css +~~~css @media(max-width:800px) { p { margin: 2rem 0; @@ -221,7 +221,7 @@ All that's left are some minor styles to make everything look nice on mobile: text-align: right; } } -``` +~~~ ## Not the most practical This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects. diff --git a/posts/css-variables.md b/posts/css-variables.md index f0b389f..17df49f 100644 --- a/posts/css-variables.md +++ b/posts/css-variables.md @@ -8,12 +8,12 @@ The CSS language is becoming even more awesome and powerful everyday. In this qu Let's just jump right in - this is how you create variables in vanilla CSS: -```css +~~~css :root { --base-color: #e0e0e0; --text-color: #111; } -``` +~~~ We are using the `:root` selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables. @@ -21,7 +21,7 @@ As for the variables themselves, you declare that they are variables using the ` Now let's use those variables: -```css +~~~css .header { border: 1px solid var(--base-color); } @@ -30,7 +30,7 @@ Now let's use those variables: background-color: var(--base-color); color: var(--text-color); } -``` +~~~ That's it! It's also good to know that CSS variables have pretty decent [browser support](https://caniuse.com/#feat=css-variables) (who likes IE11 anyway). diff --git a/posts/current-color.md b/posts/current-color.md index 3cad2ff..1e82067 100644 --- a/posts/current-color.md +++ b/posts/current-color.md @@ -10,15 +10,15 @@ Let's assume with have a single div with the following properties: -```css +~~~css div { color: dodgerblue; } -``` +~~~ If we wanted to use that same color for other properties on elements inside that initial `div`, it's simple - we just need to call `currentColor` like so: -```css +~~~css div { color: dodgerblue; } @@ -30,7 +30,7 @@ div header { div a { border-bottom: 1px solid currentColor; } -``` +~~~ **Sidenote**: If you re-declare the default `color` property further along in your CSS, the `currentColor` value will update according to the last color set. diff --git a/posts/default-brower-forms.md b/posts/default-brower-forms.md index c465160..ffe928a 100644 --- a/posts/default-brower-forms.md +++ b/posts/default-brower-forms.md @@ -16,7 +16,7 @@ This form isn't going to win any design awards or blow anyone away with its crea Let's take a look at the HTML of the entire form: -```html +~~~html <form action=""> <fieldset> <legend>Personal Details</legend> @@ -71,7 +71,7 @@ Let's take a look at the HTML of the entire form: <input type="reset" value="Reset"> <input type="submit" value="Submit"> </form> -``` +~~~ Notice the `fieldset` and `legend` elements? I bet you don't see or hear about those HTML items very often. By default, `fieldset` allows sibling or related inputs to be semantically grouped together. The `legend` elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. @@ -81,7 +81,7 @@ Avoid making your own custom sections and instead use these existing HTML semant Now it's time to style this form with only 6 property declarations: -```css +~~~css form label { display: block; } @@ -97,7 +97,7 @@ form input[type="reset"], form input[type="submit"] { width: auto; } -``` +~~~ Of course, you can always add minor adjustments (like in my demo example above) diff --git a/posts/default-html-style-updates.md b/posts/default-html-style-updates.md index 8896d19..85a807b 100644 --- a/posts/default-html-style-updates.md +++ b/posts/default-html-style-updates.md @@ -10,38 +10,38 @@ But that doesn't mean some minor, modern improvements couldn't be made... A little extra breathing room for a website's content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you've got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing `margin` property set on the `body` element (I personally lean towards a very specific `1.5em`) and overriding the default `font-size` to `18px`[^1]: -```css +~~~css body { font-size:18px; margin:1.5em; } -``` +~~~ There is one *small* caveat with setting the `font-size` across the whole `body` element: code elements set in `monospace`. They will stand out larger than the other fonts found in the document (due to variations in different typeface heights, spacing etc.) so we will need to target these elements specifically: -```css +~~~css code { font-size:14px; /* Word wrap is optional if you plan to have long inline code snippets */ word-wrap:break-word; } -``` +~~~ ## Code & Pre Tags Since we've mentioned `code` elements, let's fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don't provide any means to wrap their inner content or make use of `overflow` properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage's flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to: -```css +~~~css pre { overflow:auto; } -``` +~~~ ## Basic Dark Mode Support Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most "drastic" changes will be implemented with our browser default updates. We will need the browser to change the main `background-color`, along with resetting both the text and anchor link `color` for improved accessibility. Browser defaults for anchor link color in "light mode" are blue/purple - so I've opted towards using gold, orange and orangered in dark mode respectively: -```css +~~~css /* Dark mode */ @media (prefers-color-scheme: dark) { @media not print { @@ -51,7 +51,7 @@ Barebones styling in current web browsers have no sane defaults[^2] for system-l a:hover,a:focus{color: orangered;} } } -``` +~~~ That is probably the most streamlined dark mode on the web... @@ -65,7 +65,7 @@ Do you want to know an incredible feature built into browsers? *Window resizing* There isn't much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just *use* these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I'll leave the full set of CSS changes below: -```css +~~~css body { font-size:18px; margin:1.5em; @@ -84,7 +84,7 @@ pre { a:hover,a:focus{color: orangered;} } } -``` +~~~ [^1]: `18px` seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes" [^2]: At the time of this article's publish date diff --git a/posts/dv.md b/posts/dv.md index 752f99f..c243eca 100644 --- a/posts/dv.md +++ b/posts/dv.md @@ -6,19 +6,19 @@ I think it's safe to assume most web designers and developers are familiar with If I want my `.box` element to take up the entire height of a device's screen: -```css +~~~css .box { height: 100vh; } -``` +~~~ Or I want my `.box` element to take up the entire width of a device's screen: -```css +~~~css .box { width: 100vw; } -``` +~~~ These are wonderful options to have - specifically for those of us designing web applications. But there are some *minor* issues with `vh` and `vw`. @@ -34,12 +34,12 @@ Lucky for us there exists an awesome *new-ish* CSS API called dynamic viewport-p So our examples above would translate into: -```css +~~~css .box { height: 100dvh; width: 100dvw; } -``` +~~~ ### What About Browser Support? diff --git a/posts/easy-custom-radio-inputs.md b/posts/easy-custom-radio-inputs.md index ca6ea62..a31a21f 100644 --- a/posts/easy-custom-radio-inputs.md +++ b/posts/easy-custom-radio-inputs.md @@ -16,7 +16,7 @@ This is what we will be designing: ## The bones of our radio inputs (HTML) -```html +~~~html <input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> <label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> @@ -31,16 +31,16 @@ This is what we will be designing: <input class="radio-btn" name="radio-collection" id="radio-5" type="radio"> <label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label> -``` +~~~ I know it looks like a lot is going on here, but it's pretty straightforward so let's unpackage line by line: ### Radio inputs -```html +~~~html <input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> -``` +~~~ This is the default `radio` input. We give it: @@ -67,7 +67,7 @@ This is looking pretty terrible - but that's nothing some good ol' CSS can't fix First we give some basic styling to our `label` and `input` classes (along with hover states). The `radio` element is actually hidden from view, but by using the `visibility` attribute we still keep it accessible for screen-readers. -```css +~~~css .radio-label { background: white; border: 1px solid #eee; @@ -90,21 +90,21 @@ First we give some basic styling to our `label` and `input` classes (along with position: absolute; visibility: hidden; } -``` +~~~ Remember that `span` element inside the label? We set it's `user-select` property to `none` so we avoid any possible issue with the user selecting the text on-click: -```css +~~~css .radio-label span { -webkit-user-select: none; -moz-user-select: none; user-select: none; } -``` +~~~ Next we include the default empty selection element (to mimic the original radio input) via a pseudo element: -```css +~~~css .radio-label:before { background: #eee; border-radius: 50%; @@ -117,7 +117,7 @@ Next we include the default empty selection element (to mimic the original radio transition: .3s ease background-color; width: 30px; } -``` +~~~ ## A Few Final Steps @@ -125,7 +125,7 @@ The final step is adding the custom styling for when an `input` item is selected You will notice the use of a `base64` element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference). -```css +~~~css .radio-btn:checked + .radio-label { background: #ECF5FF; border-color: #4A90E2; @@ -137,13 +137,13 @@ You will notice the use of a `base64` element for the custom checkmark - feel fr background-position: center; background-size: 15px; } -``` +~~~ **And that's it.** For easier reference the entire CSS file can be found below: -```css +~~~css .radio-label { background: white; border: 1px solid #eee; @@ -192,7 +192,7 @@ For easier reference the entire CSS file can be found below: background-position: center; background-size: 15px; } -``` +~~~ --- @@ -202,7 +202,7 @@ Since this demo is based off a survey-type questionaire, wouldn't it be interest We can do so by adding `positive`, `neutral` and `negative` class names to the radio inputs with their own respective properties: -```css +~~~css .radio-btn.positive:checked + .radio-label { background: #EAFFF6; border-color: #32B67A; @@ -221,6 +221,6 @@ We can do so by adding `positive`, `neutral` and `negative` class names to the r background-color: #E75153; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); } -``` +~~~ I hope this shows new designers that simple custom radio inputs aren't so hard to implement after-all and can actually be pretty fun to design. diff --git a/posts/flexbox-bar-graphs.md b/posts/flexbox-bar-graphs.md index b792b97..f7b071f 100644 --- a/posts/flexbox-bar-graphs.md +++ b/posts/flexbox-bar-graphs.md @@ -29,7 +29,7 @@ The main "secret" of this project is that our graphs are constructed out of HTML All bases are covered! -```html +~~~html <!-- Using a basic table with our custom data-id --> <table data-id="flexbox-bar-graph"> <caption>Web Performance Results</caption> @@ -63,7 +63,7 @@ All bases are covered! </tr> </tbody> </table> -``` +~~~ Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the `--data-set` CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly. @@ -81,7 +81,7 @@ Here we target just our table elements with the `data-id` of `flexbox-bar-graph` The base `:root` element holds all of our bar graph colors. Change these as you see fit! -```css +~~~css /* Bar Graph color variables */ :root { --bar-color-1: #357EC7; @@ -90,9 +90,9 @@ The base `:root` element holds all of our bar graph colors. Change these as you --bar-color-4: #7D0541; --bar-color-5: #FFD801; } -``` +~~~ -```css +~~~css [data-id="flexbox-bar-graph"] { border-collapse: collapse; margin: 4rem 0 6rem; @@ -118,7 +118,7 @@ The base `:root` element holds all of our bar graph colors. Change these as you [data-id="flexbox-bar-graph"] tbody td p { margin: 0; } -``` +~~~ ### Desktop @@ -127,7 +127,7 @@ Now we set your "visual" bar graphs to show at a set width (in this example it i - The `thead tr th:nth-child(x):before` elements create the square "legends" beside each individual data point heading - The `tbody tr td:nth-of-type(x) span` elements are the bars themselves -```css +~~~css @media(min-width: 1000px) { [data-id="flexbox-bar-graph"] { background: transparent; @@ -250,7 +250,7 @@ Now we set your "visual" bar graphs to show at a set width (in this example it i text-align: center; } } -``` +~~~ ## Bonus Styling @@ -263,7 +263,7 @@ In the <a target="_blank" href="https://github.com/bradleytaunt/flexbox-bar-grap The change in CSS is actually quite simple to pull this off - you just need to include the `data-layout` attribute on the table itself. -```css +~~~css [data-layout="horizontal"] tbody { min-height: auto; } @@ -296,7 +296,7 @@ The change in CSS is actually quite simple to pull this off - you just need to i [data-layout="horizontal"] tbody tr td p { margin-left: 10px; } -``` +~~~ ## That's All Folks! diff --git a/posts/git-patches.md b/posts/git-patches.md index e7037e0..5b5d951 100644 --- a/posts/git-patches.md +++ b/posts/git-patches.md @@ -16,9 +16,9 @@ Next, locate the email patch in Evolution and right-click on it. Select "Save as Now simply open your terminal, navigate to your project and run: -```sh +~~~sh git am <path-to-patches-folder>/<patch-filename>.mbox -``` +~~~ This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you're able to instantly push these changes remotely. diff --git a/posts/heif.md b/posts/heif.md index 7eb32ef..32a8166 100644 --- a/posts/heif.md +++ b/posts/heif.md @@ -24,12 +24,12 @@ For this example script we are going to convert the image to JPG format. You can 7. Set the area "Pass input" to `as arguments` 8. Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert HEIC/HEIF to JPG") -```sh +~~~sh for f in "$@" do /opt/homebrew/bin/heif-convert "$f" "${f%.*}.jpg" done -``` +~~~ ## Making Edits diff --git a/posts/html-dark-mode.md b/posts/html-dark-mode.md index c3c751d..0d94def 100644 --- a/posts/html-dark-mode.md +++ b/posts/html-dark-mode.md @@ -11,9 +11,9 @@ this created by *jacksonchen666*: [These 3 Lines of CSS Will Give You Dark Mode But today I wanted to show how to add dark mode functionality to a website without *any CSS at all*. -```sh +~~~sh <meta name="color-scheme" content="dark light"> -``` +~~~ Add that line inside the `head` tags on your HTML files and you're good to go. diff --git a/posts/jekyll-sourcehut.md b/posts/jekyll-sourcehut.md index c29d649..5ae7196 100644 --- a/posts/jekyll-sourcehut.md +++ b/posts/jekyll-sourcehut.md @@ -38,7 +38,7 @@ In order to have your Jekyll site build and push the correct files live, you wil To make things easier, you can copy the build file below (remember to use your *own* information for usernames, git repo naming etc): -```sh +~~~sh image: debian/stable oauth: pages.sr.ht/PAGES:RW packages: @@ -60,7 +60,7 @@ tasks: tar -cvz . > ../../site.tar.gz - upload: | acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz -``` +~~~ Save this file as `.build.yml` and place it in the root directory of your Jekyll source code. @@ -73,17 +73,17 @@ If you're like me and want to use your own custom domain - have no fear! This pr First, add a new A Record through your domain provider: -```sh +~~~sh @ IN A 173.195.146.139 -``` +~~~ Then change the following `environment` parameter inside your existing `.build.yml` file: -```sh +~~~sh environment: site: yourcustomdomain.com -``` +~~~ And that's it - custom domain set! If you run into any issues check out the [official documentation on custom domains](https://srht.site/custom-domains). diff --git a/posts/mail.md b/posts/mail.md index 7521630..96950e6 100644 --- a/posts/mail.md +++ b/posts/mail.md @@ -26,15 +26,15 @@ Inside this folder you should see something similar to the following structure: Once saved, open your terminal, navigate to the project you wish to apply this new patch to: -```sh +~~~sh cd my-path/very-cool-project -``` +~~~ and then run: -```sh +~~~sh git apply ~/Patches/<saved-patches-mailbox-folder>/mbox -``` +~~~ Congrats! You've successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the *real* work. Just be sure to periodically *purge* your local *Patches* folder to keep things clean! diff --git a/posts/mongodb-arch.md b/posts/mongodb-arch.md index f2d01f5..1b74463 100644 --- a/posts/mongodb-arch.md +++ b/posts/mongodb-arch.md @@ -12,16 +12,16 @@ So I thought I would share my process of setting up an older version of MongoDB You will need to target the specific version of MongoDB using the very awesome AUR packages: -```sh +~~~sh yay -S mongodb34-bin -``` +~~~ Follow the instructions and you'll be good to go. Don't forget to create the `/data/db` directory and give it proper permissions: -```sh +~~~sh mkdir -p /data/db/ chmod -R 777 /date/db -``` +~~~ ## What About My "Tools"? @@ -29,16 +29,16 @@ If you plan to use MongoDB, then you most likely want to utilize the core databa So, you'll have to build from source locally: -```sh +~~~sh git clone https://github.com/mongodb/mongo-tools cd mongodb-tools ./make build -``` +~~~ Then you'll need to copy the built executables into the proper directory in order to use them from the terminal: -```sh +~~~sh cp bin/* /usr/local/bin/ -``` +~~~ And that's it! Now you can run `mongod` directly or use `systemctl` to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB. diff --git a/posts/my-pi-desktop.md b/posts/my-pi-desktop.md index d4926f8..083d578 100644 --- a/posts/my-pi-desktop.md +++ b/posts/my-pi-desktop.md @@ -81,9 +81,9 @@ Since *actual* data speaks louder than anecdotal chit-chat, I performed a very s First, clear the cache to avoid conflicting data: -```sh +~~~sh sync; echo 3 | sudo tee /proc/sys/vm/drop_caches -``` +~~~ ### Write diff --git a/posts/obvious-js-injection-fallback.md b/posts/obvious-js-injection-fallback.md index 8d3da3a..366fcfe 100644 --- a/posts/obvious-js-injection-fallback.md +++ b/posts/obvious-js-injection-fallback.md @@ -12,20 +12,20 @@ Let's pretend that we have a total tally that pulls in the number of current use Here we create an empty `h2` tag that will update with the current number of users via js: -```html +~~~html <main> <h2 class="total-tally"></h2> </main> -``` +~~~ ### Javascript You'll have to use your imagination here and assume that the `totalTally` variable pulls in the numbers dynamically via API: -```html +~~~html var totalTally = "273,677" /* This would pull something dynamically in prod */ document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; -``` +~~~ ## The Problem @@ -37,11 +37,11 @@ The easiest way to avoid these types of empty tags - add static content. I know ### HTML (updated) -```html +~~~html <main> <h2 class="total-tally">200,000+</h2> </main> -``` +~~~ You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an *obvious* demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I'd say this demo was a huge success. diff --git a/posts/openring.md b/posts/openring.md index 4841105..cbb6c3e 100644 --- a/posts/openring.md +++ b/posts/openring.md @@ -12,9 +12,9 @@ So, I thought others might be interested in how I've implemented openring throug You can pull the project [directly via SourceHut](https://sr.ht/~sircmpwn/openring/) if you wish, but I would recommend installing through your default package manager. I'm running Arch, so for me it was as simple as running: -```sh +~~~sh yay -S openring -``` +~~~ That's it. I now have full local access to openring! @@ -24,7 +24,7 @@ You *could* setup a whole new directory specifically for your openring files, bu ### openring-in.html Contents -```html +~~~html <!-- License-Id: CC0-1.0 --> <section class="webring"> <h3>Articles from blogs I follow around the world wide web</h3> @@ -75,7 +75,7 @@ You *could* setup a whole new directory specifically for your openring files, bu color: #555; } </style> -``` +~~~ > Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via `serve` or `build`. I don't really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder. @@ -89,7 +89,7 @@ To simplify things, we are going to place our main commands in a single build sc Place the following inside that file: -```sh +~~~sh openring \ -s https://example.com/feed.xml \ -s https://example.com/feed.xml \ @@ -97,25 +97,25 @@ openring \ < _includes/openring-in.html \ > _includes/openring-out.html bundle exec jekyll build -``` +~~~ ## Edit `_config.yml` Next we need to make sure we exclude our new `build-site` script file, since we really don't need that pushed up to the main server: -```sh +~~~sh # Includes / Excludes exclude: - build-site.sh -``` +~~~ ## Almost Done... Now you just need to decide where you want your `openring` feed outputs to render. For this example, we will place them at the bottom of every blog post inside the `_layouts/post.html` file, like so: -```ruby +~~~ruby {% raw %}{% include openring-out.html %}{% endraw %} -``` +~~~ ## Build It & They Will Come diff --git a/posts/poor-mans-full-bleed.md b/posts/poor-mans-full-bleed.md index 9621e78..5bd18fe 100644 --- a/posts/poor-mans-full-bleed.md +++ b/posts/poor-mans-full-bleed.md @@ -16,7 +16,7 @@ What does this have to do with full-bleed exactly? Well, the CSS we will be usin Let's create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple: -```html +~~~html <main> <article> <h1>Main Heading</h1> @@ -34,11 +34,11 @@ Let's create a single-column blog layout for this example. We will include a hea <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p> </article> </main> -``` +~~~ This works well as it is, but we will need to "section" off our different areas of content based on whether we want them `full-bleed` or not. We do this with - you guessed it - the `section` element. In this demo we want the image and blockquote to become `full-bleed` when rendered, so we'll add the `full-bleed` class to those sections for now (more on that later): -```html +~~~html <main> <article> <section> @@ -66,7 +66,7 @@ This works well as it is, but we will need to "section" off our different areas </section> </article> </main> -``` +~~~ That's it for the HTML! @@ -74,7 +74,7 @@ That's it for the HTML! Now take a deep breath and get ready for some hard CSS work: -```css +~~~css article { width: 100%; } @@ -87,7 +87,7 @@ article section { article section.full-bleed { max-width: 100%; } -``` +~~~ That's it. *Really*. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as "full-bleed", just wrap it in a `section` tag and sick the `full-bleed` class on it. Done and done. @@ -97,11 +97,11 @@ Obviously you'll want to add more styling to clean-up and make your full-bleed l You could also further customize your options by including a class like `half-bleed`, which maybe only expands slightly outside the main section `max-width`: -```css +~~~css article section.half-bleed { max-width: 960px; } -``` +~~~ ### Sidenote diff --git a/posts/rvm.md b/posts/rvm.md index c948d0e..fb78025 100644 --- a/posts/rvm.md +++ b/posts/rvm.md @@ -10,31 +10,31 @@ So this post is more or less a helpful document for my future self. If it happen Make sure you have the basic packages first: -```sh +~~~sh apk update apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 -``` +~~~ Next download the latest `stable` version of `rvm` from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs: -```sh +~~~sh curl -sSL https://github.com/rvm/rvm/tarball/stable -o rvm-stable.tar.gz echo 'export rvm_prefix="$HOME"' > ~/.rvmrc echo 'export rvm_path="$HOME/.rvm"' >> ~/.rvmrc mkdir rvm && cd rvm tar --strip-components=1 -xzf ../rvm-stable.tar.gz ./install --auto-dotfiles --autolibs=0 -``` +~~~ Now we can remove everything and properly link to `rvm`: -```sh +~~~sh cd ../ && rm -rf rvm-stable stable.tar.gz rvm source ~/.rvm/scripts/rvm -``` +~~~ Now you can freely install any version of Ruby that you desire! -```sh +~~~sh rvm install ruby-X.X.X -``` +~~~ diff --git a/posts/sublime.md b/posts/sublime.md index d319a73..4a203cb 100644 --- a/posts/sublime.md +++ b/posts/sublime.md @@ -20,31 +20,31 @@ You'll need to install flatpak, give your current user permission to install fla (The following snippets assume you are using `doas`. If you are using `sudo`, be sure to swap accordingly) -```sh +~~~sh apk add flatpak adduser <YourUsername> flatpak flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo -``` +~~~ Congrats. You now have setup `flatpak` on your machine! Next we install Sublime Text: -```sh +~~~sh flatpak install flathub com.sublimetext.three -``` +~~~ You could stop now and simply open Sublime anytime by running the following command in your terminal: -```sh +~~~sh flatpak run com.sublimetext.three -``` +~~~ This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let's set that up. ## Creating System Links -```sh +~~~sh doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext -``` +~~~ Now that those directories are linked, simply open dmenu and start typing `sublimetext`. Done and done. No more terminal commands needed to open Sublime! diff --git a/posts/vscode.md b/posts/vscode.md index 5e46f6f..9b3d0bb 100644 --- a/posts/vscode.md +++ b/posts/vscode.md @@ -14,20 +14,20 @@ Getting things to work seamlessly proved a little more challenging. I found the First we need to disable [unveil](https://man.openbsd.org/unveil.2) for Chromium. This will allow us to access our system files through [vscode.dev](https://vscode.dev) using the "Open folder..." or "Open file..." commands without issue: -```sh +~~~sh chrome --disable-unveil -``` +~~~ Everything should work pretty solid right out the box now - except it doesn't. Syntax highlighting does not work without enabling WASM/WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal: -```sh +~~~sh ENABLE_WASM=1 chrome --enable-wasm -``` +~~~ Success! We can avoid typing out these complex commands everytime we want to launch our editor by setting up an `alias` (in my case via `.zshrc`): -```sh +~~~sh alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" -``` +~~~ That's it! Now I can just pop open VSCode on OpenBSD by simply running `vscode` in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!
\ No newline at end of file |