update readme

pull/1/head
Cveinnt 3 years ago
parent d7eed87027
commit 00f8cb0e6b

@ -1,20 +1,14 @@
# [LiveTerm - Make Terminal styled websites in minutes!](https://cveinnt.com)
# [LiveTerm - Make terminal styled websites in minutes!](https://liveterm.vercel.app)
Highly customizable, easy-to-use, and minimal terminal styled website template, written in Next.js.
Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Next.js.
# Table of Contents:
To build a simple terminal styled website with LiveTerm, you only need to work with one file: `config.json`. After you filled out the config file, simply run `yarn install && yarn dev` to build your website!
- [LiveTerm - Make Terminal styled websites in minutes!](#liveterm---make-terminal-styled-websites-in-minutes)
- [Table of Contents:](#table-of-contents)
- [Showcase](#showcase)
- [Quick Start](#quick-start)
- [Configuration](#configuration)
- [Basic Configuration](#basic-configuration)
- [Favicons](#favicons)
- [Banner](#banner)
- [Advanced Configuration](#advanced-configuration)
- [Deploy on Vercel](#deploy-on-vercel)
- [Credit](#credit)
LiveTerm can be used to build a variety of websites: a personal website, a project page, a startpage, or just a cool browser music player...you name it!
Source files for LiveTerm are all less than 150 lines of codes in length, with great emphasis towards readability and customizability.
Feel free to play with the web demo!
## Showcase
@ -23,14 +17,14 @@ Highly customizable, easy-to-use, and minimal terminal styled website template,
<strong>Default LiveTerm</strong>
</p>
Live version [here](https://cveinnt.com)
Live version: https://liveterm.vercel.app
<p align="center">
<img src="./demo/cveinnt.png" width="800"><br>
<strong>my personal website</strong>
</p>
Live version [here](https://cveinnt.com)
Live version: https://cveinnt.com
## Quick Start
@ -66,25 +60,34 @@ Most of the configuration is done through the `config.json` file.
```javascript
{
"readmeUrl": //create a Github README and link it here!
"title": //title of the website
"name": //returned by the command of the same name
"readmeUrl": // create a Github README and link it here!
"title": // title of the website
"name": // returned by the command of the same name
"ascii": // ascii art to display
"social": {
"github": // your handle
"linkedin": // your handle
},
"email": // your email
"ps1_hostname": //hostname in prompt
"ps1_username": "guest", // username in prompt
"ps1_hostname": "liveterm" // hostname in prompt
"ps1_username": "visitor", // username in prompt
"resume_url": "~/Resume.pdf", // path to your resume
"non_terminal_url": "W",
"colors": {
"light": {
...
},
"dark": {
... // you can use existing templates in themes.json or use your own!
}
}
}
```
Feel free to change it as you see fit!
### Themes
You can find several pre-configured themes in `themes.json`, and you can replace the colors in `config.json` with the theme color you like! The themes are based on the themes on [this website](https://glitchbone.github.io/vscode-base16-term/#/).
<p align="center">
@ -92,7 +95,7 @@ You can find several pre-configured themes in `themes.json`, and you can replace
<strong>different LiveTerm themes</strong>
</p>
Just replace `"light"` or `"dark"` in the `"color"` part of the config file!
For a better preview of the themes, checkout the images in the `demo` folder.
### Favicons

@ -4,13 +4,13 @@
"name": "John Doe",
"ascii": "liveterm",
"social": {
"github": "",
"linkedin": ""
"github": "github",
"linkedin": "linkedin"
},
"email": "contact@johndoe.com",
"email": "contact@email.com",
"ps1_hostname": "liveterm",
"ps1_username": "visitor",
"non_terminal_url": "https://github.com/Cveinnt/LiveTerm",
"repo": "https://github.com/Cveinnt/LiveTerm",
"resume_url": "https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf",
"donate_urls": {
"paypal": "https://paypal.me/cveinnt",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 310 KiB

After

Width:  |  Height:  |  Size: 315 KiB

@ -19,7 +19,7 @@ export const History: React.FC<{ history: Array<HistoryInterface> }> = ({
<p
className="whitespace-pre-wrap mb-2"
// style={{ lineHeight: 'normal' }}
style={{ lineHeight: 'normal' }}
dangerouslySetInnerHTML={{ __html: entry.output }}
/>
</div>

@ -19,14 +19,13 @@ export const help = async (args: string[]): Promise<string> => {
[tab]: trigger completion.
[ctrl+l]/clear: clear terminal.\n
Type 'sumfetch' to display summary.
Type 'gui' or click <u><a href="${config.non_terminal_url}" target="_blank">here</a></u> for a simpler version.
`;
};
// Redirection
export const gui = async (args: string[]): Promise<string> => {
window.open(`${config.non_terminal_url}`);
return 'Opening GUI version...';
export const repo = async (args: string[]): Promise<string> => {
window.open(`${config.repo}`);
return 'Opening Github repository...';
};
// About
@ -114,7 +113,7 @@ export const emacs = async (args?: string[]): Promise<string> => {
};
export const sudo = async (args?: string[]): Promise<string> => {
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank'); // good ol' rick roll
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank'); // ...I'm sorry
return `Permission denied: with little power comes... no responsibility? `;
};
@ -129,8 +128,9 @@ export const banner = (args?: string[]): string => {
Type 'help' to see the list of available commands.
Type 'sumfetch' to display summary.
Type 'gui' or click <u><a class="text-light-blue dark:text-dark-blue underline" href="${config.non_terminal_url}" target="_blank">here</a></u> for a simpler version.
Type 'repo' or click <u><a class="text-light-blue dark:text-dark-blue underline" href="${config.repo}" target="_blank">here</a></u> for the Github repository.
`;
};

@ -9,7 +9,7 @@ const sumfetch = async (args: string[]): Promise<string> => {
@@ @@ ${config.name}
@@ @@ ${config.ps1_hostname}
@@ @@@ @@ <u><a href="${config.resume_url}" target="_blank">resume</a></u>
@@ @@@ @@ <u><a href="${config.non_terminal_url}" target="_blank">alt website</a></u>
@@ @@@ @@ <u><a href="${config.repo}" target="_blank">Github repo</a></u>
@@ @@ -----------
@@ .@@@@@@@@@@. @@ CONTACT
@@ @@ @@ @@ <u><a href="mailto:${config.email}" target="_blank">${config.email}</a></u>
@ -28,7 +28,7 @@ const sumfetch = async (args: string[]): Promise<string> => {
      ABOUT
  ${config.name}
        <u><a href="${config.resume_url}" target="_blank">resume</a></u>
<u><a href="${config.non_terminal_url}" target="_blank">alt website</a></u>
<u><a href="${config.repo}" target="_blank">Github repo</a></u>
  -----------
  > L I V E T E R M CONTACT
  <u><a href="mailto:${config.email}" target="_blank">${config.email}</a></u>

Loading…
Cancel
Save