DEV Community: Adam DeHaven

Using dotfiles and Git to manage your development environment across multiple computers

Adam DeHaven — Mon, 02 Nov 2020 21:53:10 +0000

Your computer's dotfiles are a key piece of your development environment. Many of us work on multiple computers throughout the day (e.g. work laptop, desktop at home, etc.) and managing to keep settings consistent across machines is a pain. I'll walk you through one way to synchronize and back up your dotfiles utilizing a git repository.

Starting from scratch

Create a bare repository in your $HOME directory:

mkdir $HOME/dotfiles
git init --bare $HOME/dotfiles

Add a .dotfiles-local-settings file in your $HOME directory. This file will be the home for any aliases, functions, values, etc. that you do not want to commit to the repository. I typically use this file for things like machine-specific values or aliases. For example:

# Create local settings file
touch $HOME/.dotfiles-local-settings

# The path to the development folder on this machine. This path may be different on my work computer
echo "alias dev=\"cd /d/adam/Development\"" >> $HOME/.dotfiles-local-settings

After creating this file and populating it with anything you'd like, duplicate it, and rename the duplicate file .dotfiles-local-settings.example and clear out the values. This way, when you clone the repository to a new machine, you have a template to use to define your machine-specific settings.

One important entry to place into this file is the dotfiles alias we will use to manage version control for our dotfiles. Let's add that now (you will only need one of the aliases below, depending on your computer):

# Windows
alias dotfiles='/cmd/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME' >> $HOME/.dotfiles-local-settings
# --------------------------------------------------------------------------- #
# Mac (depends on location of git)
alias dotfiles='/usr/bin/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME' >> $HOME/.dotfiles-local-settings
# or
alias dotfiles='/usr/local/bin/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME' >> $HOME/.dotfiles-local-settings

Add a .gitignore to your $HOME directory to ensure it will ignore the dotfiles folder where the bare repository lives, as well as your local settings file that you do not want in version control. You can also add any other files here you want to ensure do not get added:

echo -e "dotfiles/\n.dotfiles-local-settings" >> $HOME/.gitignore

Also add a .gitignore to this new repository to ensure it will ignore the folder where you'll eventually clone it on another machine (prevents weird recursion problems):

echo "dotfiles/" >> $HOME/dotfiles/.gitignore

Create an alias in your current environment for running git commands in the dotfiles repository we just created. Use the same alias we created earlier, as this one will only be used until we have everything up and running:

# Windows
alias dotfiles='/cmd/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME'

# --------------------------------------------------------------------------- #

# Mac (depends on location of git)
alias dotfiles='/usr/bin/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME'
# or
alias dotfiles='/usr/local/bin/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME'

Next, configure the repository status to hide files we have not chosen to track (i.e. files we have not added), and to suppress the instructions on how to add ignored files:

# Hide files we have decided not to track
dotfiles config --local status.showUntrackedFiles no

# Suppress the instructions on how to add ignored files
dotfiles config --local advice.addIgnoredFile false

Add the remote to the repository (change to the remote URL of your repo on GitHub, or wherever):

dotfiles remote add origin git@github.com:username/dotfiles.git

Add the .gitignore we created in our $HOME directory to the repository:

dotfiles add $HOME/.gitignore
dotfiles commit -m "Adding .gitignore"

Now you can easily add other files to be tracked from where they are supposed to be.

For example, to add your .bashrc file:

dotfiles add $HOME/.bashrc
dotfiles commit -m "Adding .bashrc"
dotfiles push

I like to add separate files for functions, aliases, etc. To add these files, I use a specific naming convention that makes it easy to add the files to the repository that looks like this: .dotfiles-functions and .dotfiles-aliases.

Then, to add these files to source control, you can simply do this:

dotfiles add $HOME/.dotfiles-*
dotfiles commit -m "Adding custom files"
dotfiles push

Install on a new system

Clone your dotfiles into a bare repository in your other computer's $HOME (change to the remote URL of your repo on GitHub, or wherever):

git clone --bare git@github.com:username/dotfiles.git $HOME/dotfiles

Add the alias to the .bashrc or .zshrc on the new machine (this will only be used until we have everything up and running):

# Windows
alias dotfiles='/cmd/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME'

# --------------------------------------------------------------------------- #

# Mac (depends on location of git)
alias dotfiles='/usr/bin/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME'
# or
alias dotfiles='/usr/local/bin/git --git-dir=$HOME/dotfiles/ --work-tree=$HOME'

Checkout the actual content from the bare repository to your $HOME:

dotfiles checkout

You may receive an error message similar to the following:

error: The following untracked working tree files would be overwritten by checkout:
   .bashrc
   .bash_profile
Please move or remove them before you can switch branches.
Aborting

This is because your $HOME folder may already contain some of the configuration files which would be overwritten by the checkout. To resolve, copy or back up the existing file(s) to another location if you care about them, otherwise, simply remove them.

If you'd like to back up the current settings, here's a shortcut to move the matching files to a new folder:

mkdir -p $HOME/dotfiles-originals-backup && \
dotfiles checkout 2>&1 | egrep "\s+\." | awk {'print $1'} | \
xargs -I{} mv {} $HOME/dotfiles-originals-backup/{}

Then, re-run the checkout:

dotfiles checkout

Set the showUntrackedFiles flag to no for this local copy of your dotfiles repository:

dotfiles config --local status.showUntrackedFiles no

Duplicate the .dotfiles-local-settings.example file, and rename it to .dotfiles-local-settings (removing .example). Now, update the contents of the file to store the machine-specific values for this new computer. These settings will not be tracked in source control.

Be sure to include the dotfiles alias we created in this file so you can access the dotfiles command globally.

Making updates

So you're up and running with your new way of managing dotfiles. Great! 🎉 Now you want to make some updates, so let's walk through the update process.

Editing a tracked file

Let's say you want to add a new function to your custom .dotfiles-functions file to search for files in your current directory.

Open the .dotfiles-functions file, and add the following lines:

# Case insensitive file search, excluding node_modules and AppData directories
function ff() {
  find . -type d \( -iname node_modules -o -iname AppData \) -prune -false -o -type f -iname "*$1*"
}

With our new function in place, adding this change to our tracked version is simple. First, we'll add the file, write a commit message, and push it to our remote repository:

# Remember to use your dotfiles alias!
dotfiles add -u
dotfiles commit -m "Adding find file function"
dotfiles push

Now that the function lives in the repository, we can easily pull down the changes on another computer:

dotfiles pull
# Don't forget to source your .bashrc (or .zshrc, etc.) file to pull in the new function
source $HOME/.bashrc

Adding a new file

To add a new file to be tracked with our dotfiles setup, simply create and edit the file, ensure it doesn't have any personal information that shouldn't live in source control, and add it to version control.

Remember, if the file contains any personal information or machine-specific information, it's better to place the information in your .dotfiles-local-settings file.

For this example, maybe we want to force Vim to use a specific theme. Create a new file .vimrc, and paste this content into the file:

set background=dark
colorscheme solarized
let g:solarized_termtrans=1

Now, let's add the new file to our dotfiles repository:

dotfiles add $HOME/.vimrc
dotfiles commit -m "Adding Vim config"
dotfiles push

Now that the new config file lives in our repository, we can easily pull down the new file to another computer:

dotfiles pull

How to add metadata, canonical URLs, and structured data to your VuePress site

Adam DeHaven — Tue, 06 Oct 2020 23:10:13 +0000

Oftentimes when utilizing a framework or other packaged codebase (ahem, such as VuePress), you have to get creative in order to get the exact functionality you're looking for. At the time of writing, VuePress is a bit limited as to what types of metadata and other structured data can be added out of the box to your pages for SEO.

In this post, I'll outline the solutions I came up with to add metadata, canonical URLs, and structured data to my site as referred to previously in my writeup about building my new site with VuePress.

Why add additional metadata, structured data, and canonical URLs?

All websites should take care to incorporate metadata in order to make finding the page via search engines and other sites as easy as possible. This includes page meta tags, Schema.org structured data, Open Graph tags, and Twitter Card tags. For sites that are not pre-rendered and run as an SPA, this content is even more important since the page is initially loaded as an empty container (meaning search indexing bots don't have much to look at). This metadata helps to determine whether your page is relevant enough to display in search results, and can be used to give users a preview of the content they will find on your website.

All sites should also include a canonical URL link tag in the <head> of the page. Canonical URLs are a technical solution that essentially tells search engines which URL to send traffic to for content that it deems worthy as a search result. Another way to think of it is the canonical URL is the preferred URL for the content on the page.

How does VuePress handle metadata?

VuePress serves pre-rendered static HTML pages (which is way better); however, generating all of the desired tags and metadata is still, well, mostly a manual process.

Adding page metadata is supported; however, without using a plugin, the information must be defined in the .vuepress/config.js file, or has to be hard-coded into the YAML frontmatter block at the top of each individual page (the data cannot be dynamically generated in the YAML block). This creates a problem if, like me, you're kind of lazy and don't like doing the same task over and over. 🙄

~~At the time of writing, VuePress does not have a default way to add canonical URL tags onto a page.~~ VuePress 1.7.1 supports adding the canonical URL to each page via frontmatter.canonicalUrl! 🎉

In order to add the desired metadata and other tags to my site, I needed to hook into the VuePress Options API and compile process so that I could access all of the data available in my posts and pages. Some of the data is also sourced from custom themeConfig properties outlined below. Since I couldn't find much information available on the web as to how to solve the issue, I figured I'd write it all up in a post in case anyone is looking to build a similar solution.

Now that you understand why this extra data should be included, let's walk through how you can replicate the functionality in your own project!

Add metadata to the VuePress `$page` object with a plugin

To dynamically add our tags into the site during the build, we will take advantage of the extendPageData property of the VuePress Option API. This option allows you to extend or edit the $page object and is invoked once for each page at compile time, meaning we can directly add corresponding data to each unique page.

I have thought about releasing this plugin as an open-source package; however, at the time of writing, it's likely more helpful to manually install into your project on your own since customizing the desired tags and data really varies depending on the content and structure of your site.

The VuePress plugin included below is geared towards a site similar to this one, meaning most of the properties relate to a single author, and a site about a single person. It should be fairly easy to customize the tags you would like to use as well as their values. If you have any feedback or questions, feel free to post a message in the comments 👇.

Install dependencies

The plugin utilizes dayjs to parse, validate, manipulate, and displays dates. You'll need to install dayjs in your project in order to utilize the code that follows (or modify to substitute another date library).

npm install dayjs

Update the VuePress `themeConfig`

In order to feed all the valid data into the plugin, you will need to add some additional properties to the themeConfig object in your .vuepress/config.js file that will help extend the data for each page. If there are properties listed below that are unneeded for your particular project, you should be able to simply leave them out (or alternatively just pass a null value).

// .vuepress/config.js

module.exports = {
    // I'm only showing the themeConfig properties needed for the plugin - your site likely has many more
    title: 'Back to the Future', // The title of your site
    themeConfig: {
        domain: 'https://www.example.com', // Base URL of the VuePress site
        defaultImage: '/img/default-image.jpg', // Absolute path to the main image preview for the site (Example location: ./vuepress/public/img/default-image.jpg)
        personalInfo: {
            name: 'Marty McFly', // Your full name
            email: 'marty@thepinheads.com', // Your email address
            website: 'https://www.example.com/', // Your website
            avatar: '/img/avatar.jpg', // Path to avatar/image (Example: ./vuepress/public/img/avatar.jpg)
            company: 'Twin Pines Mall', // Employer
            title: 'Lead Guitarist', // Job title
            about: 'https://www.example.com/about/', // Link to page about yourself/the author
            gender: 'male', // Gender of author, accepts 'male' or 'female' (or exclude if unwanted)
            social: [
                // Add an object for each of your social media sites
                // You may include others (pinterest, linkedin, etc.) just add the objects to the array, following the same format
                {
                    title: 'GitHub', // Social Site title
                    icon: 'brands/github', // I use https://github.com/Justineo/vue-awesome for FontAwesome icons - you can omit this property if not needed
                    account: 'username', // Your username at the site
                    url: 'https://github.com/username', // Your profile/page URL on the site
                },
                {
                    title: 'Twitter', // Social Site title
                    icon: 'brands/twitter', // I use https://github.com/Justineo/vue-awesome for FontAwesome icons - you can omit this property if not needed
                    account: 'username', // Your username at the site; do not include the @ sign for Twitter
                    url: 'https://twitter.com/username', // Your profile/page URL on the site
                },
                {
                    title: 'Instagram', // Social Site title
                    icon: 'brands/instagram', // I use https://github.com/Justineo/vue-awesome for FontAwesome icons - you can omit this property if not needed
                    account: 'username', // Your username at the site
                    url: 'https://instagram.com/username', // Your profile/page URL on the site
                },
            ],
        },
        // .. More themeConfig properties...
    },
}

Add page frontmatter properties

The plugin will utilize several required frontmatter properties, including title, description, image, etc. as shown in the block below to help extend the data of each page.

To allow the canonical URL to be utilized by both our plugin and our structured data component, you'll also need to manually add the canonicalUrl property here to the frontmatter of each page. ~~Unfortunately, the $page.path is computed after plugins are initialized, so at the time of writing, manually adding the canonical URL to each page is the best solution.~~

To fully utilize the capabilities of the plugin, make sure you include all of the frontmatter properties shown below on each page of your site:

---
title: This is the page title
description: This is the page description that will be used

# Publish date of this page/post
date: 2020-08-22

# If using vuepress-plugin-blog, the category for the post
category: tutorials

# The list of tags for the post
tags:
  - VuePress
  - JavaScript

# Absolute path to the main image preview for this page
# Example location: ./vuepress/public/img/posts/page-image.jpg
image: /img/path/page-image.jpg

# Add canonical URL to the frontmatter of each page
# Make sure this is the final, permanent URL of the page
canonicalUrl: https://example.com/blog/path-to-this-page/
---

Pages on the site can also have additional tags and data added depending on your needs. If you have an About Me page, Contact page, or a Homepage (all included by default), or another "special" type of page you'd like to customize the tags for, simply add the corresponding entry shown below in only that page's frontmatter. Then, you can customize the plugin and structured data component by checking for the existence of the frontmatter page{NAME} property.

---
# Homepage
pageHome: true

# About page
pageAbout: true

# Contact page
pageContact: true

# Other custom special page
pageCustomName: true
---

Add plugin file structure

Next, you will need to add the plugin directory (suggested) and source file. Modify your site's .vuepress directory so that it includes the following:

.
|── config.js
└── .vuepress/
     └── theme/
         └── plugins/
             └── dynamic-metadata.js

Add plugin code

Now let's add the dynamic metadata code to the new plugin file we created. The plugin extends the $page object via the extendPageData method of the VuePress Options API.

You need to copy and insert all of the code included below (click below to view the file content) into the dynamic-metadata.js file we just created.

const dayjs = require('dayjs')
const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone')
dayjs.extend(utc)
dayjs.extend(timezone)
// Customize the value to your timezone (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)
dayjs.tz.setDefault('America/Kentucky/Louisville')

module.exports = (options = {}, ctx) => ({
    extendPageData($page) {
        const { frontmatter, path } = $page

        const metadata = {
            title: frontmatter.title ? frontmatter.title.toString().replace(/["|'|\\]/g, '') : $page.title ? $page.title.toString().replace(/["|'|\\]/g, '') : null,
            description: frontmatter.description ? frontmatter.description.toString().replace(/'/g, '\'').replace(/["|\\]/g, '') : null,
            url: frontmatter.canonicalUrl&& typeof frontmatter.canonicalUrl=== 'string' ? (frontmatter.canonicalUrl.startsWith('http') ? frontmatter.canonicalUrl: ctx.siteConfig.themeConfig.domain + frontmatter.canonicalUrl) : null,
            image: frontmatter.image && typeof frontmatter.image === 'string' ? (frontmatter.image.startsWith('http') ? frontmatter.image : ctx.siteConfig.themeConfig.domain + frontmatter.image) : null,
            type: meta_isArticle(path) ? 'article' : 'website',
            siteName: ctx.siteConfig.title || null,
            siteLogo: ctx.siteConfig.themeConfig.domain + ctx.siteConfig.themeConfig.defaultImage,
            published: frontmatter.date ? dayjs(frontmatter.date).toISOString() : $page.lastUpdated ? dayjs($page.lastUpdated).toISOString() : null,
            modified: $page.lastUpdated ? dayjs($page.lastUpdated).toISOString() : null,
            author: ctx.siteConfig.themeConfig.personalInfo ? ctx.siteConfig.themeConfig.personalInfo : null,
        }

        let meta_articleTags = []
        if (meta_isArticle(path)) {
            // Article info
            meta_articleTags.push(
                { property: 'article:published_time', content: metadata.published },
                { property: 'article:modified_time', content: metadata.modified },
                { property: 'article:section', content: frontmatter.category ? frontmatter.category.replace(/(?:^|\s)\S/g, a => a.toUpperCase()) : null },
                { property: 'article:author', content: meta_isArticle(path) && metadata.author.name ? metadata.author.name : null },
            )
            // Article tags
            // Todo: Currently, VuePress only injects the first tag
            if (frontmatter.tags && frontmatter.tags.length) {
                frontmatter.tags.forEach((tag, i) => meta_articleTags.push({ property: 'article:tag', content: tag }))
            }
        }

        let meta_profileTags = []
        if (frontmatter.pageAbout && metadata.author.name) {
            meta_profileTags.push(
                { property: 'profile:first_name', content: metadata.author.name.split(' ')[0] },
                { property: 'profile:last_name', content: metadata.author.name.split(' ')[1] },
                { property: 'profile:username', content: metadata.author.social.find(s => s.title.toLowerCase() === 'twitter').account ? '@' + metadata.author.social.find(s => s.title.toLowerCase() === 'twitter').account : null },
                { property: 'profile:gender', content: metadata.author.gender ? metadata.author.gender : null }
            )
        }

        let meta_dynamicMeta = [
            // General meta tags
            { name: 'description', content: metadata.description },
            { name: 'keywords', content: frontmatter.tags && frontmatter.tags.length ? frontmatter.tags.join(', ') : null },
            { itemprop: 'name', content: metadata.title },
            { itemprop: 'description', content: metadata.description },
            { itemprop: 'image', content: metadata.image ? metadata.image : null },
            // Open Graph
            { property: 'og:url', content: metadata.url },
            { property: 'og:type', content: metadata.type },
            { property: 'og:title', content: metadata.title },
            { property: 'og:image', content: metadata.image ? metadata.image : null },
            { property: 'og:image:type', content: metadata.image && meta_getImageMimeType(metadata.image) ? meta_getImageMimeType(metadata.image) : null },
            { property: 'og:image:alt', content: metadata.image ? metadata.title : null },
            { property: 'og:description', content: metadata.description },
            { property: 'og:updated_time', content: metadata.modified },
            // Article info (if meta_isArticle)
            ...meta_articleTags,
            // Profile (if /about/ page)
            ...meta_profileTags,
            // Twitter Cards
            { property: 'twitter:url', content: metadata.url },
            { property: 'twitter:title', content: metadata.title },
            { property: 'twitter:description', content: metadata.description },
            { property: 'twitter:image', content: metadata.image ? metadata.image : null },
            { property: 'twitter:image:alt', content: metadata.title },
        ]

        // Remove tags with empty content values
        meta_dynamicMeta = meta_dynamicMeta.filter(meta => meta.content && meta.content !== '')
        // Combine frontmatter
        meta_dynamicMeta = [...frontmatter.meta || [], ...meta_dynamicMeta]

        // Set frontmatter after removing duplicate entries
        meta_dynamicMeta = getUniqueArray(meta_dynamicMeta, ['name', 'content', 'itemprop', 'property'])

        frontmatter.meta = meta_dynamicMeta
    }
})

/**
 * Removes duplicate objects from an Array of JavaScript objects
 * @param {Array} arr Array of Objects
 * @param {Array} keyProps Array of keys to determine uniqueness
 */
function getUniqueArray(arr, keyProps) {
    return Object.values(arr.reduce((uniqueMap, entry) => {
        const key = keyProps.map(k => entry[k]).join('|')
        if (!(key in uniqueMap)) uniqueMap[key] = entry
        return uniqueMap
    }, {}))
}

/**
 * Returns boolean indicating if page is a blog post
 * @param {String} path Page path
 */
function meta_isArticle(path) {
    // Include path(s) where blog posts/articles are contained
    return ['articles', 'posts', '_posts', 'blog'].some(folder => {
        let regex = new RegExp('^\\/' + folder + '\\/([\\w|-])+', 'gi')
        // Customize /category/ and /tag/ (or other sub-paths) below to exclude, if needed
        return regex.test(path) && path.indexOf(folder + '/category/') === -1 && path.indexOf(folder + '/tag/') === -1
    }) ? true : false
}

/**
 * Returns the meme type of an image, based on the extension
 * @param {String} img Image path
 */
function meta_getImageMimeType(img) {
    if (!img) {
        return null
    }
    const regex = /\.([0-9a-z]+)(?:[\?#]|$)/i
    if (Array.isArray(img.match(regex)) && ['png', 'jpg', 'jpeg', 'gif'].some(ext => img.match(regex)[1] === ext)) {
        return 'image/' + img.match(regex)[1]
    } else {
        return null
    }
}

See the highlighted lines in the dynamic-metadata.js file indicating where changes are likely necessary.

Initialize the plugin

Finally, in your .vuepress/theme/index.js file, add the plugin reference as shown below (only relevant lines shown):

// .vuepress/theme/index.js

const path = require('path')

module.exports = (options, ctx) => {
    const { themeConfig, siteConfig } = ctx

    return {
        plugins: [
            // Ensure the path below matches where you saved the dynamic-metadata.js file
            require(path.resolve(__dirname, './plugins/dynamic-metadata.js')),
        ],
    }
}

Now that the plugin is initialized, the metadata portion of our solution is complete! 🎉

Preview your project by running the local VuePress server and you will now see the metadata update after each page change with all of the corresponding tags in the head of the rendered HTML page.

Now we're ready to add the canonical URL to all pages.

Add the canonical URL to every page

As of VuePress version 1.7.1 (and thanks to help from me 🎉) the canonical URL can now be set in the frontmatter of your VuePress pages by providing a canonicalUrl entry. Refer to the VuePress canonical URL documentation for more details.

Since we [already added the `canonical_url` property](#add-page-frontmatter-properties) in the frontmatter of all of the pages on our VuePress site, we're ready to add the corresponding `` tag to the `` of each page. To add the canonical URL, you will need to add some methods to the `GlobalLayout.vue` file in your theme. If you do not utilize `globalLayout` in your theme ([see here for more details](https://vuepress.vuejs.org/theme/option-api.html#globallayout)) you will need to add the following code to another file that is used on every page of your site (e.g. in a layout component). Inside your layout component, we'll add a new method that will manipulate the DOM to add/update the canonical URL tag in the `` of the page. We will invoke this method both in the `beforeMount` and `mounted` hooks:

// Inside your layout component (preferrably GlobalLayout.vue)

beforeMount() {
    // Add/update the canonical URL on initial load
    this.updateCanonicalUrl()
},

mounted() {
    // Update the canonical URL after navigation
    this.$router.afterEach((to, from) => {
        this.updateCanonicalUrl()
    })
},

methods: {
    updateCanonicalUrl() {
        let canonicalUrl = document.getElementById('canonicalUrlLink')
        // If the element already exists, update the value
        if (canonicalUrl) {
            canonicalUrl.href = this.$site.themeConfig.domain + this.$page.path
        }
        // Otherwise, create the element and set the value
        else {
            canonicalUrl = document.createElement('link')
            canonicalUrl.id = 'canonicalUrlLink' // Ensure no other elements on your site use this ID. Customize as needed.
            canonicalUrl.rel = 'canonical'
            canonicalUrl.href = this.$site.themeConfig.domain + this.$page.path
            document.head.appendChild(canonicalUrl)
        }
    },
},

With these methods now in place, the canonical URL will be added to the initial page before mount, and then subsequently updated on every following page when `$router.afterEach` is called by [Vue Router](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks).

Next up, we will create a new component to utilize within our GlobalLayout.vue file that will inject Schema.org structured data into all the pages on our VuePress site.

Add structured data to VuePress pages

To add structured data to our pages, we will create a new Vue component that will utilize both the same $page data and frontmatter properties we previously added.

Create structured data component

Create a new SchemaStructuredData.vue file in your project wherever you store components (likely in .vuepress/theme/components). It should look something like this:

.
└── .vuepress/
     └── theme/
         └── components/
             └── SchemaStructuredData.vue

Now let's add the code to the component file. You need to copy and insert all of the code included below (hidden for size) into the SchemaStructuredData.vue file we just created.

<template>
    <script v-if="meta_structuredData" type="application/ld+json" v-html="meta_structuredData"></script>
</template>

<script>
import * as dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)
// Customize the value to your timezone (https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List)
dayjs.tz.setDefault('America/Kentucky/Louisville')

export default {
    name: 'SchemaStructuredData',

    computed: {
        meta_data() {
            if (!this.$page || !this.$site) {
                return
            }

            return {
                title: this.$page.title ? this.$page.title.toString().replace(/["|'|\\]/g, '') : null,
                description: this.$page.frontmatter.description ? this.$page.frontmatter.description.toString().replace(/["|'|\\]/g, '') : null,
                image: this.$page.frontmatter.image ? this.$site.themeConfig.domain + this.$page.frontmatter.image : null,
                type: this.meta_isArticle ? 'article' : 'website',
                siteName: this.$site.title || null,
                siteLogo: this.$site.themeConfig.domain + this.$site.themeConfig.defaultImage,
                published: dayjs(this.$page.frontmatter.date).toISOString() || dayjs(this.$page.lastUpdated).toISOString(),
                modified: dayjs(this.$page.lastUpdated).toISOString(),
                author: this.$site.themeConfig.personalInfo ? this.$site.themeConfig.personalInfo : null,
            }
        },
        // If page is a blog post
        meta_isArticle() {
            // Include path(s) where blog posts/articles are contained
            return ['articles', 'posts', '_posts', 'blog'].some(folder => {
                let regex = new RegExp('^\\/' + folder + '\\/([\\w|-])+', 'gi')
                // Customize /category/ and /tag/ (or other sub-paths) below to exclude, if needed
                return regex.test(this.$page.path) && this.$page.path.indexOf(folder + '/category/') === -1 && this.$page.path.indexOf(folder + '/tag/') === -1
            }) ? true : false
        },
        // Generate canonical URL (requires additional themeConfig data)
        meta_canonicalUrl() {
            if (!this.$page.frontmatter.canonicalUrl || !this.$page.path || !this.$site.themeConfig.domain) {
                return null
            }
            return this.$page.frontmatter.canonicalUrl ? this.$page.frontmatter.canonicalUrl : this.$site.themeConfig.domain + this.$page.path
        },
        meta_sameAs() {
            if (!this.meta_data.author.social || !this.meta_data.author.social.length) {
                return []
            }
            let socialLinks = []
            this.meta_data.author.social.forEach(s => {
                if (s.url) {
                    socialLinks.push(s.url)
                }
            })
            return socialLinks
        },
        // Generate Schema.org data for 'Person' (requires additional themeConfig data)
        schema_person() {
            if (!this.meta_data.author || !this.meta_data.author.name) {
               return null
            }

            return {
                '@context': 'https://schema.org/',
                '@type': 'Person',
                name: this.meta_data.author.name,
                url: this.$site.themeConfig.domain,
                image: this.meta_data.author.avatar ? this.$site.themeConfig.domain + this.meta_data.author.avatar : null,
                sameAs: this.meta_sameAs,
                jobTitle: this.meta_data.author.title || null,
                worksFor: {
                    '@type': 'Organization',
                    'name': this.meta_data.author.company || null
                }
            }
        },
        // Inject Schema.org structured data
        meta_structuredData() {
            let structuredData = []
            // Home Page
            if (this.$page.frontmatter.pageHome) {
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'WebSite',
                    name: this.meta_data.title + (this.$page.frontmatter.subtitle ? ' | ' + this.$page.frontmatter.subtitle : '') || null,
                    description: this.meta_data.description || null,
                    url: this.meta_canonicalUrl,
                    image: {
                        '@type': 'ImageObject',
                        url: this.$site.themeConfig.domain + this.$site.themeConfig.defaultImage,
                    },
                    '@id': this.meta_canonicalUrl,
                })
            }
            // About Page
            else if (this.$page.frontmatter.pageAbout) {
                // Person
                structuredData.push(this.schema_person)
                // About Page
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'AboutPage',
                    name: this.meta_data.title || null,
                    description: this.meta_data.description || null,
                    url: this.meta_canonicalUrl,
                    primaryImageOfPage: {
                        '@type': 'ImageObject',
                        url: this.meta_data.image || null
                    },
                    image: {
                        '@type': 'ImageObject',
                        url: this.meta_data.image || null
                    },
                    mainEntityOfPage: {
                        '@type': 'WebPage',
                        '@id': this.meta_canonicalUrl,
                    },
                    author: this.schema_person || null,
                })
                // Breadcrumbs
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'BreadcrumbList',
                    'itemListElement': [
                        {
                            '@type': 'ListItem',
                            'position': 1,
                            'name': 'Home',
                            'item': this.$site.themeConfig.domain || null
                        },
                        {
                            '@type': 'ListItem',
                            'position': 2,
                            'name': this.meta_data.title || null,
                            'item': this.meta_canonicalUrl
                        },
                    ]
                })
            }
            // Contact Page
            else if (this.$page.frontmatter.pageContact) {
                // Contact Page
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'ContactPage',
                    name: this.meta_data.title || null,
                    description: this.meta_data.description || null,
                    url: this.meta_canonicalUrl,
                    primaryImageOfPage: {
                        '@type': 'ImageObject',
                        url: this.meta_data.image || null
                    },
                    image: {
                        '@type': 'ImageObject',
                        url: this.meta_data.image || null
                    },
                    mainEntityOfPage: {
                        '@type': 'WebPage',
                        '@id': this.meta_canonicalUrl,
                    },
                    author: this.schema_person || null,
                })
                // Breadcrumbs
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'BreadcrumbList',
                    'itemListElement': [
                        {
                            '@type': 'ListItem',
                            'position': 1,
                            'name': 'Home',
                            'item': this.$site.themeConfig.domain || null
                        },
                        {
                            '@type': 'ListItem',
                            'position': 2,
                            'name': this.meta_data.title || null,
                            'item': this.meta_canonicalUrl
                        },
                    ]
                })
            }
            // Article
            else if (this.meta_isArticle) {
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'Article',
                    name: this.meta_data.title || null,
                    description: this.meta_data.description || null,
                    url: this.meta_canonicalUrl,
                    discussionUrl: this.meta_canonicalUrl + '#comments',
                    mainEntityOfPage: {
                        '@type': 'WebPage',
                        '@id': this.meta_canonicalUrl,
                    },
                    headline: this.meta_data.title || null,
                    articleSection: this.$page.frontmatter.category ? this.$page.frontmatter.category.replace(/(?:^|\s)\S/g, a => a.toUpperCase()) : null,
                    keywords: this.$page.frontmatter.tags || [],
                    image: {
                        '@type': 'ImageObject',
                        url: this.meta_data.image || null
                    },
                    author: this.schema_person || null,
                    publisher: {
                        '@type': 'Organization',
                        name: this.meta_data.author.name || '',
                        url: this.$site.themeConfig.domain || null,
                        logo: {
                            '@type': 'ImageObject',
                            url: this.meta_data.siteLogo || null
                        }
                    },
                    datePublished: dayjs(this.meta_data.published).toISOString() || null,
                    dateModified: dayjs(this.meta_data.modified).toISOString() || null,
                    copyrightHolder: this.schema_person || null,
                    copyrightYear: dayjs(this.meta_data.published).format('YYYY') || dayjs(this.meta_data.modified).format('YYYY')
                })

                // Breadcrumbs
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'BreadcrumbList',
                    'itemListElement': [
                        {
                            '@type': 'ListItem',
                            'position': 1,
                            'name': 'Home',
                            'item': this.$site.themeConfig.domain || null
                        },
                        {
                            '@type': 'ListItem',
                            'position': 2,
                            'name': 'Blog',
                            'item': this.$site.themeConfig.domain + '/blog/'
                        },
                        {
                            '@type': 'ListItem',
                            'position': 3,
                            'name': this.meta_data.title || null,
                            'item': this.meta_canonicalUrl
                        },
                    ]
                })
            }
            // Blog Index
            else if (this.$page.path === '/blog/') {
                // Breadcrumbs
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'BreadcrumbList',
                    'itemListElement': [
                        {
                            '@type': 'ListItem',
                            'position': 1,
                            'name': 'Home',
                            'item': this.$site.themeConfig.domain || null
                        },
                        {
                            '@type': 'ListItem',
                            'position': 2,
                            'name': this.meta_data.title || null,
                            'item': this.meta_canonicalUrl
                        },
                    ]
                })
            }
            // Blog Category or Tag Page
            else if (this.$page.path === '/blog/category/' || this.$page.path === '/blog/tag/') {
                // Breadcrumbs
                structuredData.push({
                    '@context': 'https://schema.org/',
                    '@type': 'BreadcrumbList',
                    'itemListElement': [
                        {
                            '@type': 'ListItem',
                            'position': 1,
                            'name': 'Home',
                            'item': this.$site.themeConfig.domain || null
                        },
                        {
                            '@type': 'ListItem',
                            'position': 2,
                            'name': 'Blog',
                            'item': this.$site.themeConfig.domain + '/blog/'
                        },
                        {
                            '@type': 'ListItem',
                            'position': 3,
                            'name': this.meta_data.title || null,
                            'item': this.meta_canonicalUrl
                        },
                    ]
                })
            }

            // Inject webpage for all pages
            structuredData.push({
                '@context': 'https://schema.org/',
                '@type': 'WebPage',
                name: this.meta_data.title || null,
                headline: this.meta_data.title || null,
                description: this.meta_data.description || null,
                url: this.meta_canonicalUrl,
                mainEntityOfPage: {
                    '@type': 'WebPage',
                    '@id': this.meta_canonicalUrl,
                },
                keywords: this.$page.frontmatter.tags || [],
                primaryImageOfPage: {
                    '@type': 'ImageObject',
                    url: this.meta_data.image || null
                },
                image: {
                    '@type': 'ImageObject',
                    url: this.meta_data.image || null
                },
                author: this.schema_person || null,
                publisher: {
                    '@type': 'Organization',
                    name: this.meta_data.author.name || '',
                    url: this.$site.themeConfig.domain || null,
                    logo: {
                        '@type': 'ImageObject',
                        url: this.meta_data.siteLogo || null
                    }
                },
                datePublished: dayjs(this.meta_data.published).toISOString() || null,
                dateModified: dayjs(this.meta_data.modified).toISOString() || null,
                lastReviewed: dayjs(this.meta_data.modified).toISOString() || null,
                copyrightHolder: this.schema_person || null,
                copyrightYear: dayjs(this.meta_data.published).format('YYYY') || dayjs(this.meta_data.modified).format('YYYY')
            })

            return JSON.stringify(structuredData, null, 4)
        },
    },
}
</script>

See the highlighted lines in the SchemaStructuredData.vue file above indicating where customizations are likely necessary.

Utilize the component on each page of your site

To ensure our SchemaStructuredData.vue component adds data to every page, we will import it into our theme's GlobalLayout.vue file. If you do not utilize globalLayout in your theme (see here for more details) you should import into another layout file that is used on every page of your site (e.g. in a footer component).

Below, I'll show you how to import the component. Notice the :key property on the component, which assists Vue in knowing when the content in the component is stale. Only the relevant code is included:

<template>
    <div class="your-layout-component">
        <!-- Other layout code... -->
        <SchemaStructuredData :key="$page.path"></SchemaStructuredData>
    </div>
</template>

<script>
// Ensure the path matches the location of the component in your project
import SchemaStructuredData from '@theme/components/SchemaStructuredData.vue'

export default {
    name: 'YourLayoutComponent',
    components: {
        SchemaStructuredData,
    },
}
</script>

Once the component is in place, every page on our site will be dynamically updated with the corresponding structured data for search engines and other site scrapers to parse!

That's a wrap!

After implementing the solutions above, your site should now be prepped and ready for search engines and social media sites alike.

I really can't guess how every site would utilize the different aspects of this solution -- if you've made it this far, you likely already know what you're doing -- but if you need help with implementation, customizing the code to meet your needs, or have suggestions, leave a note down in the comments, below.

Maybe in a future version of VuePress, some of this functionality will be baked right in. In the meantime, stay safe, stay healthy 😷, and keep learning!

How to change the author information in the commit history of a git repository

Adam DeHaven — Mon, 28 Sep 2020 16:17:13 +0000

When working on both work-related and personal projects, oftentimes you need to swap back and forth between git credentials in order to push to the corresponding repository... and sometimes, you forget. 🤷‍♂️

In this post, I'll provide a few different options to quickly change the author name/email for commits in your repository's history, swapping out the wrong commit author (or incorrect author details) with the correct information. First, we'll go through some of the safer ways to edit commits, and finally, I'll share a custom script that will do the heavy-lifting for you.

What are you trying to accomplish?

The way to change commit author information depends on the situation you find yourself in:

Do you need to change the author information before you make a commit?
Are the commits local or remote?
How many commits do you need to alter? Are we talking about changing a LOT of commits (or maybe even all of them)?

Change author info before making a commit

If you need to change your identity before making a commit, there are three ways to update the info. None of the methods listed in this section will impact previous commits, only commits made from this point forward.

Change the author details for the next commit only

If you just need to change the author email/name for the next commit only, you can pass the --author flag with the desired info along with your commit message:

git commit --author="Marty McFly <marty.mcfly@thepinheads.com>" --message="Changing text on prom banner"

Change the author info for the current repository

To change the author information that is used for all future commits in the current repository, you can update the git config settings so that they only apply here:

# Navigate to repository
cd path/to/repository

git config user.name "Marty McFly"
git config user.email "marty.mcfly@thepinheads.com"

Change the author name and email globally

To update the author information your computer uses on a global level (e.g. for all repositories), add the --global flag:

git config --global user.name "Marty McFly"
git config --global user.email "marty.mcfly@thepinheads.com"

Editing the history of previous commits (safely)

So you need to edit the author information of commit(s) that have already been made? First let's go over the safe(r) methods of editing your commit history.

Edit the last commit

If you just need to edit the last commit, the --amend flag is your friend:

git commit --amend --author="Marty McFly <marty.mcfly@thepinheads.com>"

Editing multiple commits with interactive rebase

The easiest (and safest) way to edit the commit history is by using git's interactive rebase command.

First, find the hash of the commit right before the one you would like to edit and pass it to the rebase command:

# Passing the last "good" commit hash
git rebase -i 9b4351e2

Then, mark each commit you would like to modify with the edit keyword:

edit 9b4351e2 Changing text on prom banner
edit 4d0f36c0 Setting flux capacitor to 1955
pick f4b39b80 Adding plutonium

Git will step you through each commit, allowing you to edit (or not) as you desire:

Stopped at 9b4351e2... Changing text on prom banner
You can amend the commit now, with

    git commit --amend

Once you are satisfied with your changes, run

    git rebase --continue

Run through each of the commits and edit accordingly.

git commit --amend --author="Marty McFly <marty.mcfly@thepinheads.com>" --no-edit

git rebase --continue

Edit all history using a git filter-branch script (danger-zone)

I have implemented the git filter-branch command into a custom script that can be used in interactive mode, or passively via option flags.

WARNING
This action is destructive to your repository's history. If you're collaborating on a repository with others, it's considered bad practice to rewrite published history.

You should only rewrite history if absolutely necessary.

Running this script rewrites history for all repository collaborators. After completing these steps, any person with forks or clones must fetch the rewritten history and rebase any local changes into the rewritten history.

Instructions

Download the script from GitHub and save it to an easily-accessible location.

adamdehaven / change-git-author

Update the commit history of your git repository to resolve incorrect author information.
Change the permissions of the script file to allow it to execute:

chmod +x changeauthor.sh

Navigate into the repository with the incorrect commit history

cd path/to/repo

Alternatively, you can run from anywhere by passing the --git-dir and --work-tree flags.

Run the script (with or without flags)

../path/to/changeauthor.sh --old-email emmett.brown@example.com --new-email marty.mcfly@thepinheads.com --name "Marty McFly" --remote origin

If you did not change the permissions to allow execution, you can also call the script with either of the following:

bash ./changeauthor.sh [OPTIONS]...

sh ./changeauthor.sh [OPTIONS]...

If you run the script with no option flags, you will be prompted for the needed values via interactive prompts. The script will then proceed to update your local repository and push the changes to the specified remote.

If you would like to suppress the git-filter-branch warning, simply add the following line the ~/.bashrc file on your computer:

export FILTER_BRANCH_SQUELCH_WARNING=1

If you prefer to set up the script as a function you can call from anywhere, add the following function to your ~/.bashrc file:

function changegitauthor() {
  # Update the path to point to the absolute path of the script on your computer
  bash /c/absolute/path/to/change-git-author/changeauthor.sh "$@"
}

You may pass options (as flags) directly to the script, or pass nothing to run the script in interactive mode. All of the available options are outlined below:

old-email

Usage: -o, --old-email
Example: emmett.brown@example.com

The old/incorrect email address of the author you would like to replace in the commit history.

new-email

Usage: -e, --new-email
Example: marty.mcfly@thepinheads.com

The new/corrected email address to replace in commits matching the old-email address.

new-name

Usage: -n, --new-name
Example: Marty McFly

The new/corrected name for the new commit author info. (Be sure to enclose name in quotes)

remote

Usage: -r, --remote
Default: origin
Example: github

The name of the repository remote you would like to alter.

force

Usage: -f, --force

Allows the script to run successfully in a non-interactive shell (assuming all required flags are set), bypassing the confirmation prompt.

If you do not pass a value to the --remote flag when using --force, the default remote (origin) will be used.

git-dir

Usage: -d, --git-dir

Set the path to the repository (".git" directory) if it differs from the current directory. It can be an absolute path or relative path to current working directory.

This option should be used in conjunction with the --work-tree flag.

work-tree

Usage: -w, --work-tree

Set the path to the working tree. It can be an absolute path or a path relative to the current working directory.

help

Usage: -h, -?, --help

Show the help content.

version

Usage: -v, -V, --version

Show version information.

How to remove duplicate objects from a JavaScript array

Adam DeHaven — Fri, 11 Sep 2020 19:31:16 +0000

In JavaScript, there seems to be an easy way to pretty much anything (disagree with me in the comments 🤷‍♂️). One of the things that isn't so easy is removing duplicate objects from a JavaScript array of objects. In this quick tip, I'll provide you with a simple function that will return an array of JavaScript objects with duplicates removed.

JavaScript function

First, let's take a look at the function which accepts two arguments:

arr - The original array of JavaScript objects (which may contain duplicates)
keyProps - An array of object property names that should be checked, in combination, to not allow duplicates.

/**
 * Returns an array of objects with no duplicates
 * @param {Array} arr Array of Objects
 * @param {Array} keyProps Array of keys to determine uniqueness
 */
function getUniqueArray(arr, keyProps) {
    return Object.values(arr.reduce((uniqueMap, entry) => {
        const key = keyProps.map(k => entry[k]).join('|')
        if (!(key in uniqueMap)) uniqueMap[key] = entry
        return uniqueMap
    }, {}))
}

Usage example

In our example below, we have an array of JavaScript objects that we will use in "Project A" to create meta tags for a webpage. We don't want duplicate meta tags on the page, so we will run the original array through our function to remove duplicates.

We only want to remove an object if all properties are the same within the object, so we will pass all available object properties to the function as an array.

const startingArray = [
    { property: 'name', content: 'adam' }, // duplicate
    { itemprop: 'name', content: 'adam' },
    { property: 'twitter', content: '@adamdehaven' },
    { property: 'name', content: 'adam' }, // duplicate
    { property: 'tag', content: 'person' },
    { property: 'tag', content: 'developer' },
    { property: 'name', content: 'adam' }, // duplicate
]

const newArray = getUniqueArray(startingArray, ['property', 'content', 'itemprop'])

Output

When we log the output of the function, we can see that objects with the exact same properties and values have been removed from our array:

console.log(newArray)

// (5) [{…}, {…}, {…}, {…}, {…}]
// 0: {property: "name", content: "adam"}
// 1: {itemprop: "name", content: "adam"}
// 2: {property: "twitter", content: "@adamdehaven"}
// 3: {property: "tag", content: "person"}
// 4: {property: "tag", content: "developer"}
// length: 5
// __proto__: Array(0)

How to use custom fonts in VS Code without admin font install privileges

Adam DeHaven — Mon, 31 Aug 2020 21:30:05 +0000

During the normal course of a workday, I spend roughly 75% of my time in Visual Studio Code. VS Code is my daily driver in terms of an IDE, and one of the features I love most is the level of customization available. One of the most basic things I like to customize is the font used within the editor and the terminal. Unfortunately, working in an Enterprise environment typically means I don't have admin privileges on my work laptop, meaning I can't install fonts.

In this quick tip, I'll walk you through how to use a custom font in VS Code without admin privileges to actually install the font.

Pick an open-source font

First, we need to pick a font to use. You can use any font accessible via a public URL. Since we're writing code, you're going to want a Monospace font.

Personally, I love using Fira Code by @tonksy. Fira Code is a free monospace font containing ligatures for common programming multi-character combinations. You can check it out here:

tonsky / FiraCode

Free monospaced font with programming ligatures

Font installation

If you have admin privileges on your computer, start by installing the font (if not, skip ahead to Font Setup).

Next, add the string to your editor.fontFamily setting in VS Code as shown here:

That's it! 🎉 You're now set up to use a custom font in VS Code. For those of you without font install privileges, read on.

Remote font URLs

For the rest of us, you're going to need to have access to a publicly accessible URL where you can reference the font.

Since I'm using Fira Code, I can fork the GitHub repository and refer to the raw font file URLs.

If you're using a font that is already available via public URL (e.g. Google Fonts), you will need to access the font asset URLs via the embed/import URLs provided. If the public URL already serves a @font-face declaration, then you can use the structure the URL provides when creating your import snippet.

Create an import snippet with JavaScript

Once you have the font source URLs (or @font-face declarations), you're ready to set up a reference to import them into Visual Studio Code. We're going to set up a custom JavaScript snippet to import the font that you can reuse as needed in your VS Code instance.

In Visual Studio Code, navigate to Help > Toggle Developer Tools in the menu (or Ctrl + Shift + I)
Click on the Sources tab at the top of the panel.
On the left side of the Sources panel, click Snippets (you may have to expand the width of the panel to see the Snippets tab).
Click New snippet
Give the new snippet a name. We'll name ours, Custom-Font-Import

So far, your Developer Tools panel should look like this:

The next step depends on if you're using custom font URLs, or a @font-face declaration (e.g. from Google Fonts). Skip ahead to the step that applies to your usage.

Custom font URLs

If you're using a custom font (like my forked version of Fira Code) with custom URLs, paste the JavaScript code shown below into your new snippet, replacing the FONT_URL placeholders with the custom URL(s) for the font you would like to use.

Only include the lines in which you have a file with the corresponding extension (e.g. woff, ttf, etc.). Make sure you save the snippet after editing.

var styleNode = document.createElement('style');
styleNode.type = "text/css";
var styleText = document.createTextNode(`
    @font-face {
        font-family: "Fira Code";
        src: url("FONT_URL.woff2") format("woff2"),
            url("FONT_URL.woff") format("woff"),
            url("FONT_URL.ttf") format("truetype"),
            url("FONT_URL.otf") format("opentype");
        font-weight: normal;
        font-style: normal;
    }
`);
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

@font-face declarations

If your font already provides @font-face declarations (e.g. Google Fonts), you may simply navigate to the CDN/embed URL provided when you selected the font, and paste in the entire contents of the URL into the JavaScript snippet below, replacing the PASTE_FONT_FACE_DECLARATIONS placeholder. Make sure you save the snippet after editing.

var styleNode = document.createElement('style');
styleNode.type = "text/css";
var styleText = document.createTextNode(`
    PASTE_FONT_FACE_DECLARATIONS
    `);
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

Click here to view an example importing Fira Code from Google Fonts

var styleNode = document.createElement('style');
styleNode.type = "text/css";
var styleText = document.createTextNode(`
    /* cyrillic-ext */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37Nv7g.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7Nv7g.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7Nv7g.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7Nv7g.woff2) format('woff2');
    unicode-range: U+0370-03FF;
    }
    /* latin-ext */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77Nv7g.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/firacode/v9/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    `);
styleNode.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleNode);

Using the font in VS Code

Now that you have set up your import snippet, we need to set up Visual Studio Code to use the font.

Set the Editor font family

Open your VS Code settings, and search for editor.fontFamily.
Edit the value so that your desired font is listed first among the options.

For our Fira Code example, the value looks like this:

// Editor: Font Family
'Fira Code', Consolas, 'Courier New', monospace

Enable font ligatures

Next, since our font supports Font Ligatures, we need to enable these in the settings as well. This setting is currently only available in the json settings, so add a new property (if not already present):

"editor.fontLigatures": true

Run the JavaScript snippet to import the font

Everything is now properly configured, but if you notice, our font is still not being used in the Terminal or Editor panels. In order for the font to be applied, we need to run our custom JavaScript snippet to actually do the work of importing the font.

Open up the Developer Tools by navigating to Help > Toggle Developer Tools in the menu (or Ctrl + Shift + I)
Navigate to the Sources > Snippets panel if it's not already showing.
Right-click on our new Custom-Font-Import snippet on the left side of the panel, and select Run.

This will fire off the JavaScript in our snippet and add the custom tags into the VS Code instance. The Editor and Terminal should update after a few seconds, and now we're using our custom font! 🎉

Run the snippet on application load

The one drawback of the custom font import method outlined in this post is that the Snippet has to be run in every new VS Code window 👎. This means each time you launch the application, or every time you open a new window from an existing instance, you will have to do a little work to activate the font.

Since we saved the Snippet, it should be preserved even after restarting the application 👏 meaning you just need to open Developer Tools, navigate to Sources > Snippet, right-click on the snippet, and click Run.

I haven't been able to find a way to automate the import outside of an extension that (unfortunately) also requires admin privileges to run. If you know a way to automate this process, shoot me a message down in the comments!

Thanks for checking out this quick tip on customizing your VS Code fonts; hopefully you're no longer stuck using default fonts when doing development on your work computer!

How to install a customizable Vue tooltip component to create help text and abbreviations

Adam DeHaven — Fri, 21 Aug 2020 12:19:52 +0000

Tooltips are a great way to provide additional information when a user hovers over an element on a page. In this post, I'll walk you through installing the same tooltip component I wrote for my site via a custom Vue plugin that you can utilize in your own project!

The tooltip component

In Vue applications, it's common practice to define reusable components that can be repeated throughout your project. Since components are reusable Vue instances, they can be used again and again, as many times as you want, even on the same page. Each instance of the component will maintain its own, separate data bindings and attributes.

The reusable vue tooltip component we will be installing has two main use-cases that are both accomplished with the same <VueCustomTooltip> element:

Dynamic tooltips for other structured elements on the page.
Tooltips for providing additional information or abbreviations for text on the page.

Our tooltip component can be used in any project that utilizes Vue, including VuePress sites like this one! 🎉 Before diving into the code, let's take a look at a couple examples of how we can use the plugin.

Tooltips for other elements

The first example, a tooltip for other elements on the page, can be used to provide the user with additional information related to actions that can be taken for a given element.

For example, the button below shows a tooltip that indicates what clicking the button will do (the tooltip is sticky for demo purposes):

Tooltips for text

Tooltips added to text within the page can be used to provide contextual information. These helpful tooltips can define acronyms or abbreviations, or even provide help text that corresponds to the word or phrase already being displayed.

For example, the underlined text below is an acronym that, when hovered, will display the definition for the abbreviated text (again, the tooltip is sticky for demo purposes).

Now that we've taken a look at the different use-cases for the plugin, let's install it in our project.

Installation

# With npm
npm install @adamdehaven/vue-custom-tooltip

# or Yarn
yarn add @adamdehaven/vue-custom-tooltip

Vue.js (Global Install - Recommended)

It is recommended to install the plugin in your Vue project's entry file. For projects created with @vue/cli, this is likely your main.js file where you are already importing Vue.

// main.js (or your Vue entry file)

// Import Vue... you're probably already doing this
import Vue from 'vue'

// Import the tooltip component before calling 'new Vue()'
import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'

// Install the plugin using ONE of the options below:
// --------------------------------------------------

// 1. Install with default options
Vue.use(VueCustomTooltip)

// ===== OR  =====

// 2. Install with custom options (defaults shown)
Vue.use(VueCustomTooltip, {
    name: 'VueCustomTooltip',
    color: '#fff',
    background: '#000',
    borderRadius: 12,
    fontWeight: 400,
})

VuePress (Standalone Plugin - Recommended)

I have released a standalone VuePress plugin that wraps this component into an actual VuePress Plugin installable through the .vuepress/config.js or .vuepress/theme/index.js file. If you'd rather use the standalone plugin in your VuePress project, head over to the vuepress-plugin-custom-tooltip repository, or follow these simple install instructions instead:

# With npm
npm install @adamdehaven/vuepress-plugin-custom-tooltip

# or Yarn
yarn add @adamdehaven/vuepress-plugin-custom-tooltip

You can use the plugin by installing it in your .vuepress/config.js file, as shown here:

// .vuepress/config.js
module.exports = {
    // Install the plugin using ONE of the options below:
    // --------------------------------------------------

    // 1. Install with default options
    plugins: [
        '@adamdehaven/vuepress-plugin-custom-tooltip',
    ],

    // ===== OR  =====

    // 2. Install with custom options (defaults shown)
    plugins: [
        ['@adamdehaven/vuepress-plugin-custom-tooltip', {
            name: 'VueCustomTooltip',
            color: '#fff',
            background: '#000',
            borderRadius: 12,
            fontWeight: 400,
        }],
    ],
}

Alternatively, if you are using a theme, you may install in your .vuepress/theme/index.js file:

// .vuepress/theme/index.js
module.exports = (options, ctx) => {
    return {
        // Install the plugin using ONE of the options below:
        // --------------------------------------------------

        // 1. Install with default options
        plugins: [
            '@adamdehaven/vuepress-plugin-custom-tooltip',
        ],

        // ===== OR  =====

        // 2. Install with custom options (defaults shown)
        plugins: [
            ['@adamdehaven/vuepress-plugin-custom-tooltip', {
                name: 'VueCustomTooltip',
                color: '#fff',
                background: '#000',
                borderRadius: 12,
                fontWeight: 400,
            }],
        ],
    }
}

VuePress (Global Install)

For VuePress projects, the theme/enhanceApp.js is a good location to initialize plugins.

// theme/enhanceApp.js

// Import Vue... you're probably already doing this
import Vue from 'vue'

// Import the tooltip component
import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData, // site metadata
    isServer, // is this enhancement applied in server-rendering or client
}) => {
    // ...apply enhancements to the app

    // Install the plugin using ONE of the options below:
    // --------------------------------------------------

    // 1. Install with default options
    Vue.use(VueCustomTooltip)

    // ===== OR  =====

    // 2. Install with custom options (defaults shown)
    Vue.use(VueCustomTooltip, {
        name: 'VueCustomTooltip',
        color: '#fff',
        background: '#000',
        borderRadius: 12,
        fontWeight: 400,
    })
}

In-Component Install

Alternatively, you may install the component directly within a single file in your project; however, you will not be able to customize the Vue.use() options.

<!-- Single file component -->

<script>
// Import the tooltip component (no options available)
import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'

// .vue file default export
export default {
    // Register the component
    components: {
        VueCustomTooltip,
    },
}
</script>

NOTE: Installing inside a single component (instead of globally) does not allow you to customize the Plugin Options; however, you may still utilize all props on the <VueCustomTooltip> element.

CDN

Import the tooltip component after importing Vue in your file after importing Vue. Installing via CDN does not allow for customizing Plugin Options.

Installing via the CDN requires using the kebob-case component name.

<!-- Import Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Import tooltip component -->
<script src="https://unpkg.com/@adamdehaven/vue-custom-tooltip"></script>

<!-- Then simply use the component -->
<p>This is a <vue-custom-tooltip label="Neat!" underlined>tooltip</vue-custom-tooltip>.</p>

Manual

Download dist/vue-custom-tooltip.min.js and include it in your file after importing Vue. Installing manually does not allow for customizing Plugin Options.

Installing manually requires using the kebob-case component name.

<!-- Import Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Import tooltip component -->
<script src="/path/to/vue-custom-tooltip.min.js"></script>

<!-- Then simply use the component -->
<p>This is a <vue-custom-tooltip label="Neat!" underlined>tooltip</vue-custom-tooltip>.</p>

Usage

As we already went over, there are several different ways to use the component once installed. Here are a few examples:

<!-- Basic -->
What is <VueCustomTooltip label="This is a tooltip">a tooltip</VueCustomTooltip>?

<!-- With Options -->
What is <VueCustomTooltip label="This is a tooltip" position="is-bottom" abbreviation sticky>a tooltip</VueCustomTooltip>?

<!-- With element(s) -->
<VueCustomTooltip label="View @adamdehaven on Twitter">
    <a class="button" href="https://twitter.com/adamdehaven">
        <span class="icon icon-twitter"></span>
        <span>Twitter</span>
    </a>
</VueCustomTooltip>

Options

Pass any of the options listed below to Vue.use(VueCustomTooltip, {...}) to customize the plugin for your project (not available with in-component installation).

A note on options tied to CSS properties: The color, background, borderRadius, and fontWeight attributes listed below are set on the psuedo element using CSS Variables (Custom Properties), meaning they will fallback to their default values in unsupported browsers (e.g. Internet Explorer).

`name`

Type: String
Default: VueCustomTooltip

Customize the name of the component you will use in your project. Camel-case names are preferred, as this allows for camel-case or kebob-case usage within your project.

Vue.use(VueCustomTooltip, {
    name: 'SuperCoolTooltip', // camel-case preferred
})

If you registered the name using camel-case, you can reference the tooltip component via camel-case or kebob-case:

<!-- Default name (user did not pass the 'name' option) -->

<!-- camel-case -->
Nice <VueCustomTooltip label="Neat!">tooltip</VueCustomTooltip>!
<!-- kebob-case -->
Nice <vue-custom-tooltip label="Neat!">tooltip</vue-custom-tooltip>!

<!-- Custom name (allows user to rename component) -->

<!-- camel-case -->
Nice <SuperCoolTooltip label="Neat!">tooltip</SuperCoolTooltip>!
<!-- kebob-case -->
Nice <super-cool-tooltip label="Neat!">tooltip</super-cool-tooltip>!

`color`

Type: HEX Color
Default: #fff

Customize the color of the text displayed in the tooltip.

Vue.use(VueCustomTooltip, {
    color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)
})

`background`

Type: HEX Color
Default: #000

Customize the background color (and the underlined text color) of the tooltip.

Vue.use(VueCustomTooltip, {
    background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)
})

`borderRadius`

Type: Number
Default: 12

Customize the border-radius of the tooltip. Must be an integer.

Vue.use(VueCustomTooltip, {
    borderRadius: 4,
})

`fontWeight`

Type: Number
Default: 400

Customize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.

Vue.use(VueCustomTooltip, {
    fontWeight: 700,
})

Props

In addition to the Plugin Options above, you may also pass props to the component itself to customize both the look and behavior of the tooltip element.

Props that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a true value is desired. See the sticky example here:

<VueCustomTooltip label="Tooltip" sticky>text/element</VueCustomTooltip>

All other props may be passed as normal attributes (if the corresponding value is a String, like the label prop, shown above) or with v-bind directives, as shown here:

<VueCustomTooltip :label="element.helpText" :sticky="false">text/element</VueCustomTooltip>

All available props for the tooltip component are listed below:

`label`

Type: String
Default: null

The text that will display inside the tooltip. If the value for label is null, the tooltip will not be displayed.

You may not pass HTML to the label prop.

`active`

Type: Boolean
Default: true

Determines whether the tooltip should display when hovered, or if the sticky prop is present, if the tooltip should be visible.

`position`

Type: String
Value: is-top / is-bottom / is-left / is-right
Default: is-top

The position of the tooltip in relation to the text/element it is surrounding.

`abbreviation`

Type: Boolean
Default: false

Swaps out the component's standard <span> element with a semantically-correct <abbr> element, and sets the underlined prop to true. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.

VuePress pages are served as an <VueCustomTooltip label="Single Page Application" abbreviation>SPA</VueCustomTooltip>.

`sticky`

Type: Boolean
Default: false

Determines if the tooltip should always be displayed (including on component load/mounting), regardless of the element being hovered.

`underlined`

Type: Boolean
Default: false

Add a dotted border under the contained text (the same color as the background HEX value). This value is automatically set to true if the abbreviation prop is set to true.

`multiline`

Type: Boolean
Default: false

Allows the tooltip text to wrap to multiple lines as needed. Can be used in conjunction with the size prop to adjust the width of the tooltip.

`size`

Type: String
Value: is-small / is-medium / is-large
Default: is-medium

The width of the tooltip, if the multiline prop is set to true.

Adding Custom Classes & Styles

Just like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered <span> tag (or <abbr> tag, if abbreviation is set to true).

<!-- Tooltip component with custom classes and styles -->
<VueCustomTooltip class="your-class" :class="{ 'dynamic-class': isDynamic }" :style="{ display: 'inline' }" label="Neat">text</VueCustomTooltip>

This is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.

The tooltip component is rendered as a display: inline-block element by default; however, you can override this by binding styles directly to the component, as shown above.

How easy was that?!

Installing the custom Vue tooltip plugin is an easy way to provide a global component for your Vue project.

Tell me what you think below in the comments, and let me know if you're using the plugin!

How to setup a git repository to post commit notifications to Slack

Adam DeHaven — Fri, 07 Aug 2020 02:16:09 +0000

This article explains how to install a bash script that posts a new message into a Slack channel when commits are pushed to your project's git repository.

Note that this implementation does not require the usage of GitHub, but you may also utilize local git repositories hosted on your own server.

Create a bare repository

To create a new repository on your server named foo.git, first connect to your server, then run the following commands

# Navigate on your server to the desired repository location
cd /desired/path

# Create the directory
mkdir foo.git

# Navigate inside the new directory
cd foo.git

# Initiate a bare git repository
git init --bare --shared=2664

Using the --bare flag ensures that the repository only contains the version control information and doesn't have any local files. This is necessary to be able to clone and push to the repository. Setting --shared=2664 sets the core.sharedRepository setting, which forces git to do all new file creation with 2664 permissions. This helps to avoid issues with multiple users pushing to the repository.

If the foo.git repository already exists and you need to fix the permissions after-the-fact, perform the following commands

# Navigate to the repository
cd /path/to/repo/foo.git

# Apply fixes
chgrp -R swdev * #may require sudo
chmod -R ug+rws * #may require sudo

Next, edit the file /path/to/repo/foo.git/config. Under the [core] area, add or modify the following line

sharedRepository = 2664

Install script on the server

Download the bash script to your local machine.

Copy the file from your local machine to your project with the following command

# Run command from your local machine (not on your server)
scp ~/local/path/to/file/post-receive @servername.com:/repo/path/on/server/foo.git/hooks/post-receive

Finally, change the permissions of the post-receive file on the server to allow it to be executable

# Navigate to the repository's hooks folder on your server
cd /path/to/repo/on/server/foo.git/hooks

# Change permissions of the post-receive file
chmod +x post-receive

Configuration

Add an incoming WebHook to your Slack team

Make note of the WebHook URL https://hooks.slack.com/services/...

Connect to your server and navigate to your repository. Add the WebHook URL via git config along with two other settings

# Navigate to repository
cd /repo/path/on/server/foo.git

# Add WebHook URL
git config hooks.slack.webhook-url 'https://hooks.slack.com/services/...'

# Set option to show all commits pushed
git config hooks.slack.show-only-last-commit false

# Set repository nice-name
git config hooks.slack.repo-nice-name 'Our Awesome Project'

Options

Listed below are the other options that are configurable. Most of these can also be setup when configuring the Incoming WebHook on Slack, so by not setting them here, they default to the Slack settings. It's recommended to not set these options here (unless listed above) so that the default WebHook settings are applied.

channel

Specify a channel/user to post to in Slack instead of the WebHook's default

git config hooks.slack.channel '#channel'
    '#channel' - Post to channel
    '@username' - Direct message from @slackbot to user
    'groupname' - Post to group

username

Specify a username to post as. If not specified, the default name will be used that was created on Slack

git config hooks.slack.username 'Marty McFly'

icon-url

Specify an image to display in Slack instead of the default icon

git config hooks.slack.icon-url 'https://cdn4.iconfinder.com/data/icons/btf_LIN/LIN/256/delorean.png'

icon-emoji

Specify an emoji to display in Slack instead of the default icon

git config hooks.slack.icon-emoji ':ghost:'

repo-nice-name

Specify a repository nice-name that will be shown in messages

git config hooks.slack.repo-nice-name 'Our Awesome Project'

show-only-last-commit

Specify whether you want to show only the last commit (or all commits) when pushing multiple commits

git config hooks.slack.show-only-last-commit true

branch-regexp

Specify if you only want certain branches of the repository

git config hooks.slack.branch-regexp regexp

Examples

Single Commit Message

Multiple Commit Messages

An example of multiple commit messages with git config hooks.slack.show-only-last-commit set to false

Easily retrieve windows Wi-Fi passwords from the command line

Adam DeHaven — Fri, 07 Aug 2020 02:08:14 +0000

The Typical Offsite Meeting

We've all been there. You just arrived at an offsite meeting. The client directs you to the conference room where you'll be spending the better part of your day. Laid out before you, as part of their welcome spread, is a platter of bagels and muffins, luke-warm coffee, and on the whiteboard, the guest Wi-Fi password.

After spending the first few minutes setting up your impromptu work station, you connect to the guest Wi-Fi network in order to get your client presentation ready. The client erases the whiteboard that doubles as the screen for the projector.

Enter your late co-worker. 😒

Right as you're about to start presenting, your co-worker is frantically trying to connect to all the available Wi-Fi networks. You want to help, but you don't remember the random sports team that was in the password that has since been erased from the board. Was the password go_R@MS_123 or g0_RAMS_123?

We're going to create a script to run the next time this happens that will easily output the saved Wi-Fi network's password so that you can discretely save your co-worker (again).

Wi-Fi Password Retrieval Script

To get started, open your favorite text editor, create a new file, and paste in the entire script shown below.

#!/bin/sh

# -----------  SET COLORS  -----------
COLOR_RED=$'\e[31m'
COLOR_CYAN=$'\e[36m'
COLOR_YELLOW=$'\e[93m'
COLOR_GREEN=$'\e[32m'
COLOR_RESET=$'\e[0m'

#
# Helper Function to get stored Wi-Fi network SSIDs
# --------------------------------------------------------------------------
getwifinetworks() {
    echo "#    "
    echo "#    Saved Network SSIDs"
    echo "#    -------------------"
    netsh wlan show profiles | findstr All | sed "s/    All User Profile     : /${COLOR_RESET}#    ${COLOR_CYAN}/"
    echo "${COLOR_RESET}#    -------------------"
    echo "#    "
}

#
# Get password of stored Wi-Fi network by SSID.
# --------------------------------------------------------------------------
# Display list of stored SSIDs
getwifinetworks

# Prompt user for Wi-Fi SSID
echo "#    Enter the network name (SSID)"
echo "#    from the list above: "
echo "#    "
read -e -p "#    SSID: ${COLOR_CYAN}" SSID
eval SSID=$SSID

# If SSID is empty, exit early
if [ -z "$SSID" ]; then
    echo "${COLOR_RESET}#    "
    echo "#    ${COLOR_RED}An SSID is required. Please try again.${COLOR_RESET}"
else
    pass=$(netsh wlan show profile name="$SSID" key=clear | findstr Key)

    # If password is empty, notify user they may need
    # elevated privileges
    if [ -z "$pass" ]; then
        echo "${COLOR_RESET}#    "
        echo "#    ${COLOR_RED}If the network SSID appeared in the list above,${COLOR_RESET}"
        echo "#    ${COLOR_RED}fetching the password may require elevated privileges.${COLOR_RESET}"
        echo "#    "
        echo "#    ${COLOR_YELLOW}Open a new prompt with administrator rights${COLOR_RESET}"
        echo "#    ${COLOR_YELLOW}and try running the 'getwifipassword' command again.${COLOR_RESET}"
        echo "#    ${COLOR_YELLOW}Otherwise, the password is not stored on this device.${COLOR_RESET}"
    else
        echo "${COLOR_RESET}#    "
        echo "#    Password for '${SSID}':"
        echo "#    -----------------------------"
        echo "#   " $pass | sed "s/Key Content : /${COLOR_GREEN}/"
        echo "${COLOR_RESET}#    -----------------------------"
    fi
fi

Save the file as getwifipassword.sh. You will want to save the script in a location that you can easily access from the command line. Alternatively, you can save the file at the location of your choosing and create an alias.

If you're lazy, you can download the script directly from GitHub.

adamdehaven / get-wifi-password

Simple shell script to grab saved wifi passwords on Windows

Usage

To launch the interactive prompt, simply open Command Prompt (or Git Bash, or whatever your terminal of choice happens to be) and call the script (or use the alias).

# Command Prompt
C:\Users\MartyMcfly>bash /path/to/getwifipassword.sh

# ====
#  OR
# ====

# Git Bash
$ bash /path/to/getwifipassword.sh

When the prompt loads, you will be shown a list of saved network SSIDs.

Note: The SSID list may not include all of saved networks depending on the security settings on your computer.

Enter the SSID you would like to retrive the password for by typing the SSID name exactly as it appears in the list, then press Enter.

#
#    Saved Network SSIDs
#    -------------------
#    CompanyGuestPortal
#    THEROUTER
#    Home_Network
#    -------------------
#
#    Enter the network name (SSID)
#    from the list above:
#
#    SSID:

The prompt will output the stored network password, if it exists. 🎉

Note: Some Wi-Fi passwords will require elevated privileges to access. Open a new prompt with administrator rights and try running the command again.

Create a Bash Alias

If you use Bash, you may set up an alias to call the script from anywhere instead of having to navigate to the directory where you saved the script.

To create the alias, open your .bashrc file (or create one if it does not already exist with touch ~/.bashrc). Copy and paste in the function below. Then, to call the script from anywhere, simply enter getwifipassword on your command line.

# .bashrc

# ... previous lines ...

function getwifipassword() {
  /path/to/getwifipassword.sh;
}
alias getwifipassword=getwifipassword

How to generate a SSH key and add your public key to the server for authentication

Adam DeHaven — Fri, 07 Aug 2020 02:03:12 +0000

SSH keys are an easy way to identify trusted computers, without involving passwords. The steps below will walk you through generating an SSH key and adding the public key to the server.

Check for existing SSH Keys

First, check for existing SSH keys on your computer. Open Git Bash, Cygwin, or Terminal, etc. and enter the following command

# List all the files in your .ssh directory, if it exists
$ ls -al ~/.ssh

Check the directory listing to see if you already have a public SSH key. By default, the filenames of the public keys are typically one of the following

id_dsa.pub
is_ecdsa.pub
id_ed25519.pub
id_rsa.pub

If you see an existing public and private key pair listed (for example id_rsa.pub and id_rsa) that you'd like to use, you can skip ahead to adding your key to the ssh-agent.

Generate a new SSH key

With your command line tool still open, enter the text shown below. Make sure you substitute in your email address

# Create a new ssh key, using the provided domain username and computer name as a label
$ ssh-keygen -t rsa -b 4096 -C "mcflym@N123456"

Generating public/private rsa key pair.

You'll be asked to enter a passphrase, or simply press Enter for no passphrase

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

After you enter a passphrase (or just press Enter twice), review the fingerprint, or 'id' of your SSH key

Your identification has been saved in /Users/username/.ssh/id_rsa.
Your public key has been saved in /Users/username/.ssh/id_rsa.pub.
The key fingerprint is:
nss2VhNB0Y62VIToM+/qYe3HS4TPXmrhuBxjUz4l/I8= your@email.com

Add your key to the ssh-agent

To configure the ssh-agent program to use your SSH key, first ensure ssh-agent is enabled.

# start the ssh-agent in the background
$ eval $(ssh-agent -s)
Agent pid 59566

If you are using Git Bash, enable the ssh-agent with command shown below instead

# start the ssh-agent in the background
$ eval `ssh-agent`
Agent pid 59566

Then, add your SSH key to the ssh-agent

$ ssh-add ~/.ssh/id_rsa

Add your SSH key to the server

To add your public SSH key to the server, you'll copy the public SSH key you just created to the server. Substitute "username" with your username on the server, and "server.address.com" with the domain address or IP address of your server

$ cat ~/.ssh/id_rsa.pub | ssh username@server.address.com 'cat &gt;&gt; ~/.ssh/authorized_keys'

The server will then prompt you for your password. Type in the password you created when you generated a new ssh key (or just press enter if you did not add a password)

username@server.address.com's password:

That's it! 🎉 You should now be set up to connect to the server without having to authenticate.

Easily crawl a website and fetch all urls from the command line

Adam DeHaven — Fri, 07 Aug 2020 01:54:48 +0000

When beginning to tackle a new website for a client, it's often helpful to backup their old website. As a part of this process, I often need to crawl the old website in order to generate a complete list of valid URLs. This list is later useful in building out a sitemap for pages that need to be designed and coded, and just as importantly, to map the old links to their corresponding pages on the new website. Enter this simple shell script.

Usage

Download the script and save to the desired location on your machine.

adamdehaven / fetchurls

A bash script to spider a site, follow links, and fetch urls (with built-in filtering) into a generated text file.
You'll need wget installed on your machine.
- To check if it is already installed, try running the command wget by itself.
- If you are on a Mac or running Linux, chances are you already have wget installed; however, if the wget command is not working, it may not be properly added to your PATH variable.
- If you are running Windows, first, download the lastest wget binary for windows from https://eternallybored.org/misc/wget/. The download is available as a zip with documentation, or just an exe. I'd recommend just the exe.
- If you downloaded the zip, extract all (if windows built in zip utility gives an error, use 7-zip). In addition, if you downloaded the 64-bit version, rename the wget64.exe file to wget.exe
- Move wget.exe to C:\Windows\System32\
Ensure the version of grep on your computer supports -E, --extended-regexp. To check for support, run grep --help and look for the flag. To check the installed version, run grep -V.
Open Git Bash, Terminal, etc. and set execute permissions for the fetchurls.sh script:

chmod +x /path/to/script/fetchurls.sh

Enter the following to run the script:

./fetchurls.sh [OPTIONS]...

Alternatively, you may execute with either of the following:

sh ./fetchurls.sh [OPTIONS]...

# -- OR -- #

bash ./fetchurls.sh [OPTIONS]...

If you do not pass any options, the script will run in interactive mode.

If the domain URL requires authentication, you must pass the username and password as flags; you are not prompted for these values in interactive mode.

Options

You may pass options (as flags) directly to the script, or pass nothing to run the script in interactive mode.

domain

Usage: -d, --domain
Example: https://example.com

The fully qualified domain URL (with protocol) you would like to crawl.

Ensure that you enter the correct protocol (e.g. https) and subdomain for the URL or the generated file may be empty or incomplete. The script will automatically attempt to follow the first HTTP redirect, if found. For example, if you enter the incorrect protocol (http://...) for https:/www.adamdehaven.com, the script will automatically follow the redirect and fetch all URLs for the correct HTTPS protocol.

The domain's URLs will be successfully spidered as long as the target URL (or the first redirect) returns a status of HTTP 200 OK.

location

Usage: -l, --location
Default: ~/Desktop
Example: /c/Users/username/Desktop

The location (directory) where you would like to save the generated results.

If the directory does not exist at the specified location, as long as the rest of the path is valid, the new directory will automatically be created.

filename

Usage: -f, --filename
Default: domain-topleveldomain
Example: example-com

The desired name of the generated file, without spaces or file extension.

exclude

Usage: -e, --exclude
Default: See the default list of excluded file extensions, below
Example: "css|js|map"

Pipe-delimited list of file extensions to exclude from results.

To prevent excluding files matching the default list of file extensions, simply pass an empty string to the flag: --exclude ""

The list of file extensions must be passed inside quotes, as shown above.

username

Usage: -u, --username
Example: marty_mcfly

If the domain URL requires authentication, the username to pass to the wget command.

If the username contains space characters, you must pass inside quotes. This value may only be set with a flag; there is no prompt in interactive mode.

password

Usage: -p, --password
Example: thats_heavy

If the domain URL requires authentication, the password to pass to the wget command.

If the password contains space characters, you must pass inside quotes. This value may only be set with a flag; there is no prompt in interactive mode.

non-interactive

Usage: -n, --non-interactive

Allows the script to run successfully in a non-interactive shell.

The script will utilize the default --location and --filename settings unless the respective flags are explicitely set. This flag also disables the progress indicator.

wget

Usage: -w, --wget

Show wget install instructions.

The installation process may vary depending on your computer's configuration.

version

Usage: -v, -V, --version

Show version information.

troubleshooting

Usage: -t, --troubleshooting

Outputs received option flags with their associated values at runtime for troubleshooting.

help

Usage: -h, -?, --help

Show the help content.

Interactive Mode

If you do not pass the --domain flag, the script will run in interactive mode and you will be prompted for the unset options.

First, you will be prompted to enter the full URL (including HTTPS/HTTP protocol) of the site you would like to crawl:

Fetch a list of unique URLs for a domain.

Enter the full domain URL ( http://example.com )
Domain URL:

You will then be prompted to enter the location (directory) of where you would like the generated results to be saved (defaults to Desktop on Windows):

Save file to directory
Directory: /c/Users/username/Desktop

Next, you will be prompted to change/accept the name of the generated file (simply press enter to accept the default filename):

Save file as
Filename (no file extension, and no spaces): example-com

Finally, you will be prompted to change/accept the default list of excluded file extensions (press enter to accept the default list):

Exclude files with matching extensions
Excluded extensions: bmp|css|doc|docx|gif|jpeg|jpg|JPG|js|map|pdf|PDF|png|ppt|pptx|svg|ts|txt|xls|xlsx|xml

The script will crawl the site and compile a list of valid URLs into a new text file. When complete, the script will show a message and the location of the generated file:

Fetching URLs for example.com

Finished with 1 result!

File Location:
/c/Users/username/Desktop/example-com.txt

If a file of the same name already exists at the location (e.g. if you previously ran the script for the same URL), the original file will be overwritten.

Excluded Files and Directories

The script, by default, filters out many file extensions that are commonly not needed.

The list of file extensions can be passed via the --exclude flag, or provided via the interactive mode.

Excluded Files

.bmp
.css
.doc
.docx
.gif
.jpeg
.jpg
.JPG
.js
.map
.pdf
.PDF
.png
.ppt
.pptx
.svg
.ts
.txt
.xls
.xlsx
.xml

Excluded Directories

In addition, specific site (including WordPress) files and directories are also ignored.

/wp-content/uploads/
/feed/
/category/
/tag/
/page/
/widgets.php/
/wp-json/
xmlrpc

Advanced

The script should filter out most unwanted file types and directories; however, you can edit the regular expressions that filter out certain pages, directories, and file types by editing the fetchSiteUrls() function within the fetchurls.sh file.

If you're not familiar with grep or regular expressions, you can easily break the script.

Building my new website with VuePress and Bulma

Adam DeHaven — Fri, 07 Aug 2020 01:35:38 +0000

After spending several weeks coming up with a new website look and feel, I'm thrilled to be ditching WordPress (are some of you screaming? 😱) and launching my new website built with VuePress and Bulma!

In this post, I'll share why I decided on VuePress and outline some of the custom solutions I came up with for the "gotchas" I ran into along the way.

Looking back at my previous site

From 2014 until August of 2020, my personal website stack was comprised of a Linux web server, a MySQL database, and whatever the latest version of WordPress was. I rolled out my own theme, and coded the entire site the way I wanted it to function, meaning I used very few plugins.

I chose WordPress for my website back in 2014 because at the time, a large portion of the web clients I worked with (through contract development work on my own, or through my employer's internal or external clients) were using WordPress as well. Since I was coding within the WordPress ecosystem on a daily basis, the flow was familiar to me, and I was good at it.

I even created my own tools and custom WordPress plugins for development tasks I had to do over and over. For the designers out there, I also developed an Adobe Illustrator extension for specifying dimensions in layouts that came from the creative department. This sped up everything from layout recreation, to asset exports, to even mocking up trade show booths and engineering drawings.

Why I decided to ditch WordPress

WordPress is a fantastic content management system with a seemingly infinite supply of custom themes and plugins to do relatively anything you need to do. As a web developer, it also offers similarly infinite ways to customize and develop solutions for clients, no matter their requirements. WordPress is great if the complexity it adds to your website is worth the trouble. Let me explain...

Security vulnerabilities

WordPress, being one of the most popular content management systems on the planet, brings with that attention the vast array of vulnerabilities that WordPress sites are susceptible to (brute-force attacks, SQL injections, cross-site scripting, and even malware).

Always updating my updates

Have you ever logged in to a WordPress site after a few weeks of being away? Unless you wrote all the code yourself (e.g. no plugins) you're typically greeted by a notification alerting you that there are updates available. Even though the updates are typically one-click-and-done, WordPress Core and plugin updates are notorious for introducing breaking changes; not to mention if you're using a custom theme.

I know none of us are guilty of ever skipping regression testing 😬, but even the best of us will miss something that isn't outlined in a changelog from time to time.

Change doesn't come easy

Making changes to the site's content required logging in to the Dashboard CMS and navigating through the corresponding menus and settings panels to tweak post content and plugins.

Speaking of making changes, if I wanted to update the site design or overall structure, I had to run an entire LAMP stack on my development machine, configure local host files, and keep everything from the code to the database in sync with the live version of the site. Looking back, after rebuilding my website with VuePress, everything involved with WordPress development now seems like a lot of overhead.

My website wish list 🙏

If I was so good at WordPress development, why do something different? The short answer: it's too complex for my needs. My website really just consists of a few sections about me and a collection of posts about random projects, code snippets, and whatever else I want to share with my twelve loyal readers (I'm going to try and post more consistently during quarantine 😷 -- lucky you).

As I was evaluating my options for a new development stack, I came up with a wish list of main features I was looking for:

Fewer security vulnerabilities
No database required
Integrated site search
Use Markdown for creating posts and content
Code display with syntax highlighting
Easier workflow for updating the site structure, design, etc.
Speed improvements. Unless you're using a CDN, WordPress page load times are kinda slow 🐌
Utilize Vue.js - I actually used Vue in a lot of the WordPress sites I developed, but with VuePress, it's built right in!

After doing some research, I knew I wanted to move to a pre-rendered static HTML website. By moving to a static site, I could easily check off several of my wish list items regardless of the actual framework I decided on.

I tried out several other static site generators, but in the end, my love of Vue.js and its ecosystem convinced me to stay in my lane.

Enter VuePress. 💥

Why I chose VuePress

VuePress is a Vue-powered static site generator. It checks all of the boxes on my wish list above in terms of what I was generally looking for, and has the added benefit of being extremely well-integrated with Vue.

Static HTML

Static sites by nature are extremely fast, and are susceptible to fewer vulnerabilities as they are served as pre-rendered, static HTML. This means there is no database, no login system, and less risk for malware.

The entire site runs as an SPA once the first page is loaded, meaning subsequent page loads are almost instantaneous.

Markdown

All pages on the site are compiled into HTML from their source Markdown files and then processed as the template of a Vue component. Markdown is extremely easy to write in and allows for fast, efficient content creation.

VuePress uses markdown-it as the Markdown renderer which means there are a ton of great plugins and extensions available to customize and extend Markdown functionality on the site.

Code snippets

Within Markdown files, I can easily display blocks of code in the body of a page. VuePress utilizes Prism to highlight language syntax in Markdown code blocks which supports a wide range of languages.

I can type the code directly into Markdown syntax (and even highlight a specific line), as shown here:

const banana = 'b' + 'a' + + 'a' + 'a'
console.log(banana) // -> 'baNaNa'

...or, thanks to VuePress's ability to import code snippets, I can even import code directly from other files within my site's structure. Importing turns this Markdown...

<<< @/path/to/file.js

...into this code block:

export default function () {
  // ..
}

Linking all the things

As with any site on the web, links are the bread and butter of getting around. Since I'm writing in Markdown, I can easily link to other pages, or even sections on the same page, and when you click, you'll be smooth-scrolled to the corresponding anchor.

VuePress automatically adds target="_blank" rel="noopener noreferrer" to outbound links, saving me from having to hard-code all the links in a page.

Emoji Support

I can use emoji anywhere I'm using Markdown (basically everywhere). I'm one of the ~~cool~~ kids now. 💩 🤷‍♂️

Using Vue inside Markdown files

Since VuePress is powered by Vue, it comes with all of the added benefits of Vue, one of which being that we can use any of our Vue components directly within our Markdown files? This allows for dynamic content within all of the site's pages!

All over this site, I've used Vue components for a majority of the elements that appear on the page; from the page sections themselves, to the images, tooltips, and even the animations.

Reusable components

We already know that VuePress is powered by Vue, but did you know that means we can reuse components anywhere in the site? By utilizing Vue components, prototyping and new features can be implemented at lightning speed ⚡. Components can even be used and reused inside markdown files.

For example, I like to add images to posts with my <BaseImage> Vue component so that I can pass props that define everything from the source file to how the image will be styled. This also means that the component is reactive to any data changes, even after the component is mounted! In my Markdown code, it looks something like this:

<BaseImage :src="$withBase(img.src)" :alt="img.alt" fullwidth></BaseImage>

Built-in Search 🔍

VuePress offers a search plugin that automatically builds its index from the page title, h2 and h3 headers and tags. I can't tell you how much time this saves; not only for finding content on the site, but for managing a search index as well.

The integrated search works great for most of my content; however, if you want full text search, you can integrate something like Algolia Search.

Moving away from traditional hosting

In addition to moving from WordPress to VuePress, I also decided to re-evaluate my web hosting provider. Since I made the decision to move to a static HTML site (i.e. no database, no "server-side" code) I was no longer tied to a traditional web host.

While I actually really liked the hosting company I was with (shoot me a message in the comments if you want the details), I didn't need to continue to pay for services I no longer have any use for.

Looking around the web for different static site hosts allowed me to compile a list of features that you would typically (with a more traditional web host) have to pay for, some whether you use them or not.

SSL/TLS certificates

If your web host is charging you for SSL/TLS certificates, it's time to move your site. Most hosts are starting to offer these certificates for free and even manage certificate renewal for you. HTTPS is non-negotiable at this point.

If your host doesn't play nice, you can always roll your own! (Shoutout to Let's Encrypt)

Hosting a static site is free cheaper

Speaking of free, some static site hosts even offer free hosting solutions for smaller projects, like this site. 👏

The mileage varies depending on your needs, but even the paid plans for static site hosting are comparably cheaper to many traditionial hosting plans. It all depends on the size of your team, features of your project, and what nice-to-haves you opt for.

Making changes is as easy as `git push`

In the crazy age of APIs and web services (how old am I?) you no longer need to sit and watch your FTP client upload files (or even your SSH agent transferring files) whenever you want to make changes to your slick new site. Many hosting providers offer continuous deployments for static sites that connect directly with your source code repository.

This means that you can make your changes locally, and when you're ready, simply push the code to your repository. Within minutes, your changes will be deployed and live on the web!

A similar push-to-deploy strategy is definitely possible with traditional web hosts (I had a bare git repository on my previous web server set up with a post-commit hook); however, integrated continuous deployments take care of all the setup for you.

Using Bulma with VuePress

So after spinning up a new site with VuePress, why did I decide to import the Bulma CSS framework as well? Again, my prior experience led me here. In my current role, I have built several web applications using Bulma as the underlying CSS framework. Bulma is easy to customize, has many useful components that speed up styling elements from scratch, and the framework is modular, meaning I only have to import the components and features I want to implement.

Arguably, the best thing about Bulma that sets it apart from other various options is that it contains no JavaScript whatsoever. This fact alone makes it a perfect companion for any Vue app since you would utilize Vue for any necessary JavaScript anyway.

Custom solutions to weird problems

Building my new site with VuePress was a breeze; however, as goes with any development project, I ran into a few weird problems to solve along the way. When I say "problems," what I am really referring to are quirks with using most static site generators, and more specifically, SPAs. Let's walk through a couple of the solutions I came up with.

Injecting canonical URLs and additional metadata

All websites should take care to incorporate all of the metadata needed in order to make finding the page via search engines and other sites as easy as possible. This includes page meta tags, Schema.org structured data, Open Graph tags, and Twitter Card tags. For sites that are not pre-rendered and run as an SPA, this content is even more important, since the page is initially loaded as an empty container (meaning search indexing bots don't have much to look at).

VuePress actually serves pre-rendered static HTML pages (which is way better); however, generating all of the desired tags and metadata is still, well, mostly a manual process. You can define some general metadata both in the .vuepress/config.js file as well as at the top of pages in the YAML frontmatter, but again, this data is not dynamic for the most part and has to be hard-coded into each and every page.

Canonical URLs

All sites should include a canonical URL tag in the <head> of the page. Canonical URLs are a technical solution that essentially tells search engines which URL to send traffic to for content that it deems worthy as a search result. Another way to think of it is the canonical URL is the preferred URL for the content on the page.

~~At the time of writing, VuePress does not have a default way to inject canonical URL tags onto a page.~~

As of VuePress version 1.7.1 (and thanks to help from me 🎉) the canonical URL can now be set in the frontmatter of your VuePress pages by providing a canonicalUrl entry. Refer to the VuePress canonical URL documentation for more details.

Additional metadata

Another important consideration for a page's <head> tag is the metadata that tells search engines (and even other websites) about the content and purpose of each individual page on your website. This metadata helps to determine whether your page is relevant enough to display in search results, and can be used to give users a preview of the content they will find on your website.

Adding page metadata is supported; however, without using a plugin, the information must be hard-coded into the YAML frontmatter block at the top of each individual page and cannot be dynamically generated with JavaScript. This is a problem if, like me, you're kind of lazy and don't like doing the same task over and over.

Injecting metadata, structured data, and canonical URLs

Instead of hard-coding all of the metadata and structured data directly into each and every page, I developed a custom solution that injects the canonical URL, structured data, and additional metadata content into each page at compile time along with the rest of the page content.

The plugin loops through all of the common metadata (title, description, etc.) along with a few custom frontmatter properties and .vuepress/config.js settings and creates the corresponding tags and injects them into the rendered page.

You can check out the other post to see how to add metadata, canonical URLs, and structured data to your VuePress project 👍

Prevent draft posts from being published

My site utilizes the official VuePress Blog Plugin to add post classification (e.g. tags and categories), pagination, and other blog-related APIs.

Since any Markdown file placed into my /_posts/ directory will automatically be published as a live post, I had to figure out a way to allow these drafts to live alongside the rest of my codebase, but prevent them from being published when I push changes to the site.

Ok, admittedly, I shouldn't be writing draft posts on the master branch in the first place, but hey, I like to live on the edge 🤷‍♂️

I handle this with a setting in the frontmatter of any draft post, and then detect the build context in my custom theme's config file located at /.vuepress/theme/index.js to filter out pages where frontmatter.draft === true, as shown here:

# Draft blog post (showing frontmatter YAML)
---
draft: true
---

module.exports = (options, ctx) => {
    return {
        // other code...
        async ready () {
            // Filter out draft posts in prod mode
            if (ctx.isProd) {
                ctx.pages.splice(
                    0,
                    ctx.pages.length,
                    ...ctx.pages.filter(({ frontmatter }) => frontmatter.draft !== true),
                )
            }
        },
        // more code...
    }
}

Adding sticky posts to the blog plugin

Sometimes it's nice to "pin" a post at the top of the list in order to feature the content on the site when it's relevant (even after other posts have been published). The VuePress Blog Plugin doesn't offer this functionality out of the box; however, it's easy to add the feature by simply modifying the post's frontmatter along with the sorter function in the theme's /.vuepress/index.js file:

---
# Make the post sticky in the .md file frontmatter
sticky: true
---

// .vuepress/index.js
// VuePress Blog Plugin config
['@vuepress/blog',
    {
        directories: [
            {
                // ... other plugin configuration properties
                pagination: {
                    sorter: (prev, next) => {
                        // Sticky posts to the top
                        if (prev.frontmatter.sticky) return -1
                        if (next.frontmatter.sticky) return 1
                        // Sort all other posts by date
                        const dayjs = require('dayjs')
                        const prevTime = dayjs(prev.frontmatter.date)
                        const nextTime = dayjs(next.frontmatter.date)
                        return prevTime - nextTime > 0 ? -1 : 1
                    },
                },
            }
        ]
    }
]

Prevent indexing of deploy previews

I decided to host my new site on Netlify (which is great by the way) due to their offering of continuous deployments, free SSL/TLS certificates, and other great features they offer for hosted sites. One issue I ran across were the deploy previews that Netlify offers and finding a means of locking them down from search engines.

When the automated depoy preview is created, the URL is accessible to the world (well, if they find the public URL). This isn't ideal. To prevent the deploy preview URLs from being indexed, I actually hooked into the file-based configuration settings to change my robots.txt file when a deploy is not triggered by the main branch of my codebase.

As you can see from the netlify.toml config file below, if my site is being deployed from the master branch (i.e. code that is ready to go live), Netlify runs the default npm run build command; however, if it is deploying a preview, it runs npm run build:noindex which changes the content of my robots.txt file to prevent the indexing of this preview URL.

# netlify.toml

[build]
    command = "npm run build"

[context.deploy-preview]
    command = "npm run build:noindex"

[context.branch-deploy]
    command = "npm run build:noindex"

The corresponding build commands in my package.json file are shown below. When the netlify.toml configuration calls the npm run build:noindex script, it builds the VuePress site and then rewrites the content of my /robots.txt file to disallow all user agents.

// package.json

{
    "scripts": {
        "build": "vuepress build",
        "build:noindex": "npm run build && echo 'User-agent: *\nDisallow: /' > .vuepress/dist/robots.txt"
    }

There are other ways of preventing access to deploy previews, but since my previews are really just for me (and not live on the web for long) this solution serves its purpose.

So am I glad I ditched WordPress?

The short answer: definitely. 🎉

VuePress is packed full of great features and that makes building a new site (for documentation, a blog, or anything really) a breeze. It incorporates ~~the best~~ arguably the best JavaScript framework currently available, and makes incorporating custom content and components easy since most of the underlying logic is baked right in.

👋 Thanks for checking out my experience with rebuilding my site with VuePress! Share any questions or feedback in the comments!

DEV Community: Adam DeHaven

Using dotfiles and Git to manage your development environment across multiple computers

Starting from scratch

Install on a new system

Making updates

Editing a tracked file

Adding a new file

How to add metadata, canonical URLs, and structured data to your VuePress site

Why add additional metadata, structured data, and canonical URLs?

How does VuePress handle metadata?

Add metadata to the VuePress $page object with a plugin

Install dependencies

Update the VuePress themeConfig

Add page frontmatter properties

Add plugin file structure

Add plugin code

Initialize the plugin

Add the canonical URL to every page

Add structured data to VuePress pages

Create structured data component

Utilize the component on each page of your site

That's a wrap!

How to change the author information in the commit history of a git repository

What are you trying to accomplish?

Change author info before making a commit

Change the author details for the next commit only

Change the author info for the current repository

Change the author name and email globally

Editing the history of previous commits (safely)

Edit the last commit

Editing multiple commits with interactive rebase

Edit all history using a git filter-branch script (danger-zone)

Instructions

adamdehaven / change-git-author

Update the commit history of your git repository to resolve incorrect author information.

old-email

new-email

new-name

remote

force

git-dir

work-tree

help

version

How to remove duplicate objects from a JavaScript array

JavaScript function

Usage example

Output

How to use custom fonts in VS Code without admin font install privileges

Pick an open-source font

tonsky / FiraCode

Free monospaced font with programming ligatures

Font installation

Remote font URLs

Create an import snippet with JavaScript

Custom font URLs

@font-face declarations

Using the font in VS Code

Set the Editor font family

Enable font ligatures

Run the JavaScript snippet to import the font

Run the snippet on application load

How to install a customizable Vue tooltip component to create help text and abbreviations

The tooltip component

Tooltips for other elements

Tooltips for text

Installation

Vue.js (Global Install - Recommended)

VuePress (Standalone Plugin - Recommended)

VuePress (Global Install)

In-Component Install

CDN

Manual

Usage

Options

name

color

background

borderRadius

fontWeight

Add metadata to the VuePress `$page` object with a plugin

Update the VuePress `themeConfig`

`name`

`color`

`background`

`borderRadius`

`fontWeight`

`label`

`active`

`position`

`abbreviation`

`sticky`

`underlined`

`multiline`

`size`