No, this isn't about the actual kind of gum you chew but a tool I found that has totally changed how I write CLI scripts. Gum is a terminal UI library that allows you to create interactive command-line applications with ease. It provides a set of components that you can use to build menus, forms, and other interactive elements in your terminal.
The folks at Charm have a bunch of other tools too, more than I can go into in a single post, but it makes CLI input collection real quick and easy, and it sure looks great when using it.
Honestly, I am a clicky-clicky, mouse user person (I know...I know...judge if you want). However, I know that sometimes scripts are just the fastest way forward. I use gum all the time for quick input collection, or option selection, etc. when I don't really want to write a full-blown UI. This is especially handy for personal or internal-team tools.
Heck, I used gum to create the script that made this post template! 😆 Code is below:
1#!/bin/zsh
2
3gum style \
4 --foreground 212 --border-foreground 212 --border double \
5 --align center --width 50 --margin "1 2" --padding "2 4" \
6 "Let's create a new post!"
7
8# Get post title from user
9post_title=$(gum input --placeholder "Enter your post title: ")
10
11# Check if user entered a title
12if [[ -z "$post_title" ]]; then
13 echo "No title entered. Exiting."
14 exit 1
15fi
16
17# Convert title to a URL-friendly directory name (lowercase, replace spaces with hyphens, remove special chars)
18post_dir=$(echo "$post_title" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9 ]//g' | sed 's/ /-/g')
19
20# Check if directory already exists
21posts_path="src/app/posts/$post_dir"
22if [[ -d "$posts_path" ]]; then
23 echo "Directory '$posts_path' already exists!"
24 exit 1
25fi
26
27gum confirm "Are you sure you want to create a new post?" || exit 1
28
29# Create the directory
30mkdir -p "$posts_path"
31
32# Get current date/time in ISO 8601 format
33current_date=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
34
35# Create the page.mdx file with basic frontmatter
36cat > "$posts_path/page.mdx" << EOF
37# $post_title
38
39import { Chip, Typography, Tooltip } from "@mui/material";
40import Picture from "@/components/Picture/Picture";
41
42export const metadata = {
43 title: '$post_title',
44 publishDate: '$current_date',
45 categories: ['code']
46};
47
48<Typography className="drop-cap" component="span">
49First sentence...
50</Typography>
51
52EOF
53
54gum spin --spinner dot --title "Creating post..." -- sleep 1
55
56echo "Created new post! 🎉"
57echo "Directory: $posts_path"
58echo "Title: $post_title"Now...this is a fairly trivial example (make the folder, add the metadata, make the drop-cap paragraph, etc.), but I think it shows how you can use it to create quick CLI prompts and provides new ways to interact with data. Do I need a spinner to be shown for a second while I create a post? No, but do I like to watch the little box, spinny thing? Absolutely! 😆 🚀
