VERCEL DEMO - https://next-theme-terminal.vercel.app
NETLIFY DEMO - https://hopeful-minsky-25f7e0.netlify.app/
- Overview
- Features
- How to start
- How to run your site
- How to configure
- Post archetype
- Add-ons
- How to (safely) edit the theme
- Found a bug?
- New cool idea or feature
- Terminal theme user?
- Sponsoring
- License
This is a NextJS port of the popular hugo theme, hugo-theme-terminal.
It uses Next.js v9.5.3 and was bootstrapped using
create-next-app.
It also includes one-click instructions on how to deploy to Netlify
or deploy to Vercel.
This port is still under development and has not reached feature parity with the original theme yet. See the TODO section for more information on the available features.
- 5 duotone themes, depending on your preferences (orange is default, red, blue, green, pink)
- Fira Code as default monospaced font. It's gorgeous!
- really nice duotone, custom syntax highlighting based on PrismJS
- fully responsive
A custom syntax highlighting based on PrismJS. All you need to do is to wrap you code like this:
```html
// your code here
```
Supported languages: bash/shell, css, clike, javascript, apacheconf, actionscript, applescript, c, csharp, cpp, coffeescript, ruby, csp, css-extras, diff, django, docker, elixir, elm, markup-templating, erlang, fsharp, flow, git, go, graphql, less, handlebars, haskell, http, java, json, kotlin, latex, markdown, makefile, objectivec, ocaml, perl, php, php-extras, r, sql, processing, scss, python, jsx, typescript, toml, reason, textile, rust, sass, stylus, scheme, pug, swift, yaml, haml, twig, tsx, vim, visual-basic, wasm.
There are two ways to get started:
The easiest way to get started is by using one of the one-click buttons below to automatically create a new repository that looks exactly like this one for you and deploy it to either Netlify or Vercel.
If you want to manually clone the repository, you can use the following command:
git clone https://github.com/hkennyv/next-theme-terminal.git
To run the site locally, you simply need to run install the dependencies and start the development server:
yarn install
yarn dev
(you need to have node.js and yarn installed)
- Clone this repo:
git clone [email protected]:hkennyv/next-theme-terminal.git - Change directories into the repository:
cd next-theme-terminal - Install the dependencies and run the development server:
yarn install && yarn dev - View the site at: http://localhost:3000
To configure the site, edit the siteconfig.json file. This allows you to
customize the site at build time without having to modify any code at all.
Here is a complete sample file (used for the sample site):
{
"title": "Terminal",
"subtitle": "A simple, retro theme for NextJS.",
"keywords": ["nextjs", "theme", "retro"],
"copyright": "",
"homepage": "https://github.com/hkennyv/next-theme-terminal",
"params": {
"themeColor": "green",
"showMenuItems": 2,
"fullWidthTheme": false,
"centerTheme": false
},
"logo": {
"logoText": "Terminal",
"logoHomeLink": "/"
},
"menu": [
{
"identifier": "about",
"name": "About",
"url": "/about"
},
{
"identifier": "showcase",
"name": "Showcase",
"url": "/showcase"
},
{
"identifier": "extra",
"name": "Extra",
"url": "/extra"
}
]
}You can edit the settings here and have changes reflected direclty in your site
(changes in siteConfig.json may not be reflected until you restart your
development server).
This project uses gray-matter to parse YAML front-matter from the markdown content. You should create your front-matter using the following structure:
---
title: My post title
date: 2020-09-28
author: hkennyv
authorTwitter: hkennyv
cover: /images/uploads/hello.jpg
tags:
- me
- life
keywords:
- blog
- lifestyle
description: A short description of the post!
showFullContent: true
---TODO: this is still a WIP, I plan on adding support for:
- Comments -- for adding comments to your blog posts
- Extended Head -- for extending your header
- Extended Footer -- for extending your footer
To change things in the theme, you'll need to install the dependencies and run the development server:
yarn install
yarn dev
You can add or modify pages in the pages/ directory (see
Next.JS pages for more info).
Or you can modify some of the smaller React components directly in
components/.
CSS is built using PostCSS and can be found in
assets/css/.
If you spot any bugs, please use the Issue Tracker or create a new Pull Request to fix the issue.
I'd like to keep this mostly in parity with the original hugo theme by @panr, so if you havea a feature you'd like to see, please follow the instructions here so we can get it into the original theme and this port will follow suit.
Copyright © 2019-2020 Radosław Kozieł (@panr) and Kenny Huynh (@hkennyv).
The theme is released under the MIT License. Check the original theme license for additional licensing information.
If you like the theme and want to support further development, consider sponsoring the theme's creator, @panr, here.
Below is a list of features that have yet to be implemented in this port. I'll try to check them off as I go with the goal of eventually reaching parity with the original theme. Contributions welcome 😊
- finish filling out meta tags in
- finish filling out README
- instructions on getting started
- instructions for development
- instructions on adding new content
- customization instructions
- configuration parity of
siteconfig.jsonwithconfig.toml- color
- menu configuration
- pagination
- pagination for posts
- pagination for tags
- tags page
- footer
- front-matter support
- title
- date
- author
- cover
- tags
- description
- BUG: accent doesn't seem to be getting set for certain CSS classes (code tags, post-meta class) it looks like converting the --accent css variable is converted improperly at runtime and doesn't change
- add-ons (disqus comments, extended header, extended footer)
- Prismjs parity
- syntax highlighting for code
- code-toolbar plugin (plugin requires DOM -- react no likey)
- copy-to-clipboard plugin (plugin requires DOM -- react no likey)
- mobile responsiveness
- localization and multi-language support (languageSelector)