@mtdev/gatsby-theme-terminal v1.1.0

Gatsby Theme Terminal

A Gatsby theme that looks like a real terminal! You have to type the command and press Enter to navigate the site.

You can see a demo on my actual website https://marcotisi.dev.

Installation

For a new site

Sorry, no starter yet. You need to create a new site with gatsby and add the theme manually:

gatsby new my-terminal-site

For an existing site

1. Install the theme

npm install @mtdev/gatsby-theme-terminal

yarn add @mtdev/gatsby-theme-terminal

2. Add the configuration to your gatsby-config.js file

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@mtdev/gatsby-theme-terminal",
      options: {
        // basePath defaults to "/"
        basePath: "/terminal",
      },
    },
  ],
};

3. Add commands (pages) by creating md or mdx files inside /commands.

4. Run your site using gatsby develop, browse it, type help and press Enter. You'll see a list of available commands.

Usage

Theme options

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@mtdev/gatsby-theme-terminal",
      options: {
        maxWidth: "120ch",
        fontFamily: "source-code-pro",
        backgroundColor: "#1B2B34",
        textColor: "#CDD3DE",
        promptPrefixColor: "#99C794",
        promptTextColor: "#5FB3B3",
        promptSuffixColor: "#EC5f67",
        scrollbarBackgroundColor: "#4F5B66",
        scrollbarTrackBackgroundColor: "#4F5B66",
        scrollbarThumbBackgroundColor: "#A7ADBA",
      },
    },
  ],
};

Additional configuration

In addition to the theme options, you can customize some items using the siteMetadata object of your site in gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used to display an avatar next to the title
    avatar: "https://i.pravatar.cc/128?img=6",
    // Used for SEO twitter:creator meta
    author: "twitter_author",
    // Used for the site header, title and SEO
    title: "Gatsby Theme Terminal",
    // Used for the site header and SEO
    description: "Description",
    // Used for the welcome text just above the prompt
    helpText: "Type 'help' and press Enter to start",
    // Used to customize the user in the prompt
    user: "guest",
    // Used to customize the host in the prompt
    host: "gatsby-theme-terminal.dev",
  },
};

Command Fields

The following are the defined command fields based on the node interface in the schema

Example Command

Here's an example command with its fields:

---
command: example
title: Example
description: And example command
---

## Example command

This is an example command