update readme

pull/1/head
Cveinnt 2 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) 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!
- [Table of Contents:](#table-of-contents)
- [Showcase](#showcase) Source files for LiveTerm are all less than 150 lines of codes in length, with great emphasis towards readability and customizability.
- [Quick Start](#quick-start)
- [Configuration](#configuration) Feel free to play with the web demo!
- [Basic Configuration](#basic-configuration)
- [Favicons](#favicons)
- [Banner](#banner)
- [Advanced Configuration](#advanced-configuration)
- [Deploy on Vercel](#deploy-on-vercel)
- [Credit](#credit)
## Showcase ## Showcase
@ -23,14 +17,14 @@ Highly customizable, easy-to-use, and minimal terminal styled website template,
<strong>Default LiveTerm</strong> <strong>Default LiveTerm</strong>
</p> </p>
Live version [here](https://cveinnt.com) Live version: https://liveterm.vercel.app
<p align="center"> <p align="center">
<img src="./demo/cveinnt.png" width="800"><br> <img src="./demo/cveinnt.png" width="800"><br>
<strong>my personal website</strong> <strong>my personal website</strong>
</p> </p>
Live version [here](https://cveinnt.com) Live version: https://cveinnt.com
## Quick Start ## Quick Start
@ -66,25 +60,34 @@ Most of the configuration is done through the `config.json` file.
```javascript ```javascript
{ {
"readmeUrl": //create a Github README and link it here! "readmeUrl": // create a Github README and link it here!
"title": //title of the website "title": // title of the website
"name": //returned by the command of the same name "name": // returned by the command of the same name
"ascii": // ascii art to display
"social": { "social": {
"github": // your handle "github": // your handle
"linkedin": // your handle "linkedin": // your handle
}, },
"email": // your email "email": // your email
"ps1_hostname": //hostname in prompt "ps1_hostname": "liveterm" // hostname in prompt
"ps1_username": "guest", // username in prompt "ps1_username": "visitor", // username in prompt
"resume_url": "~/Resume.pdf", // path to your resume
"non_terminal_url": "W", "non_terminal_url": "W",
"colors": { "colors": {
... // you can use existing templates in themes.json or use your own! "light": {
...
},
"dark": {
... // you can use existing templates in themes.json or use your own!
}
} }
} }
``` ```
Feel free to change it as you see fit! 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/#/). 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"> <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> <strong>different LiveTerm themes</strong>
</p> </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 ### Favicons

@ -4,13 +4,13 @@
"name": "John Doe", "name": "John Doe",
"ascii": "liveterm", "ascii": "liveterm",
"social": { "social": {
"github": "", "github": "github",
"linkedin": "" "linkedin": "linkedin"
}, },
"email": "contact@johndoe.com", "email": "contact@email.com",
"ps1_hostname": "liveterm", "ps1_hostname": "liveterm",
"ps1_username": "visitor", "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", "resume_url": "https://upload.wikimedia.org/wikipedia/commons/c/cc/Resume.pdf",
"donate_urls": { "donate_urls": {
"paypal": "https://paypal.me/cveinnt", "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 <p
className="whitespace-pre-wrap mb-2" className="whitespace-pre-wrap mb-2"
// style={{ lineHeight: 'normal' }} style={{ lineHeight: 'normal' }}
dangerouslySetInnerHTML={{ __html: entry.output }} dangerouslySetInnerHTML={{ __html: entry.output }}
/> />
</div> </div>

@ -19,14 +19,13 @@ export const help = async (args: string[]): Promise<string> => {
[tab]: trigger completion. [tab]: trigger completion.
[ctrl+l]/clear: clear terminal.\n [ctrl+l]/clear: clear terminal.\n
Type 'sumfetch' to display summary. 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 // Redirection
export const gui = async (args: string[]): Promise<string> => { export const repo = async (args: string[]): Promise<string> => {
window.open(`${config.non_terminal_url}`); window.open(`${config.repo}`);
return 'Opening GUI version...'; return 'Opening Github repository...';
}; };
// About // About
@ -114,7 +113,7 @@ export const emacs = async (args?: string[]): Promise<string> => {
}; };
export const sudo = 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? `; 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 'help' to see the list of available commands.
Type 'sumfetch' to display summary. 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.name}
@@ @@ ${config.ps1_hostname} @@ @@ ${config.ps1_hostname}
@@ @@@ @@ <u><a href="${config.resume_url}" target="_blank">resume</a></u> @@ @@@ @@ <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 @@ .@@@@@@@@@@. @@ CONTACT
@@ @@ @@ @@ <u><a href="mailto:${config.email}" target="_blank">${config.email}</a></u> @@ @@ @@ @@ <u><a href="mailto:${config.email}" target="_blank">${config.email}</a></u>
@ -28,7 +28,7 @@ const sumfetch = async (args: string[]): Promise<string> => {
      ABOUT       ABOUT
  ${config.name}   ${config.name}
        <u><a href="${config.resume_url}" target="_blank">resume</a></u>         <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   > L I V E T E R M CONTACT
  <u><a href="mailto:${config.email}" target="_blank">${config.email}</a></u>   <u><a href="mailto:${config.email}" target="_blank">${config.email}</a></u>

Loading…
Cancel
Save