base on 💻 Build terminal styled websites in minutes! # [💻 LiveTerm - build terminal styled websites in minutes!](https://liveterm.vercel.app) Highly customizable, easy-to-use, and minimal terminal styled website template, powered by Next.js. Building a simple website with LiveTerm only takes **minutes**, and you only need to work with **one** file: `config.json`. After you cloned this repository, simply run `yarn install && yarn dev` and start editing `config.json` to build your website! LiveTerm can be used to build a variety of websites: - [personal website](https://cveinnt.com) - [browser startpage](https://livetermstart.vercel.app/) - [project page](https://liveterm.vercel.app/) - or maybe just a cool browser music player...be creative! Feel free to play with the web demo above! ## 📸 Showcase <p align="center"> <img src="./demo/demo.gif" width="600"><br> <strong>LiveTerm with different themes</strong> </p> <p align="center"> <img src="./demo/cveinnt.png" width="600"><br> <strong><a href="https://cveinnt.com" target=_blank>my personal website</a></strong> </p> ## 🚀 Ship your LiveTerm site in less than 5 minutes LiveTerm requires the `yarn` package manager. You can install `yarn` [here](https://classic.yarnpkg.com/lang/en/docs/install/). Simply run the following commmand in your terminal: ```bash sh -c "$(curl -fsSL https://raw.github.com/Cveinnt/LiveTerm/main/install/install.sh)" ``` This will install LiveTerm to the current directory. You can start building your website with: ```bash cd LiveTerm && yarn dev ``` Start editing `config.json` and try saving and see the updated changes! Alternatively, you can clone this repository to a location of your choosing ```bash git clone https://github.com/Cveinnt/LiveTerm.git && cd LiveTerm ``` Then install dependencies and start developing there: ```bash yarn install && yarn dev ``` ### Docker Usage First, clone the project and edit `config.json` to your liking. Then run the following to start the container in the background: ```shell docker-compose up -d ``` If you **know** what you were doing, you can also try changing `Dockerfile` & `docker-compose.yml`! Learn more about Docker [here](https://docs.docker.com/get-started/overview/ 'here'). ## 📄 Configuration ### Basic Configuration 90% of LiveTerm's configurations are done through the `config.json` file. ```javascript { "readmeUrl": // create a Github README and link it here! "title": // title of the website "name": // your name, included in 'about' command "ascii": // ascii art to display "social": { "github": // your handle "linkedin": // your handle }, "email": // your email "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/#/). For a better preview of the themes, checkout the images in the `demo` folder. ### Favicons Favicons are located in `public/`, along with the other files you may want to upload to your website. I used this [website](https://www.favicon-generator.org/) to generate favicons. ### Banner You may also want to change the output of the `banner` command. To do that, simply paste your generated banner in `src/utils/bin/commands.ts`. I used this [website](https://manytools.org/hacker-tools/ascii-banner/) to generate my banner. ### Advanced Configuration If you want to further customize your page, feel free to change the source code to your liking! ## 🌐 Deploy on Vercel The easiest way to deploy a Next.js app is to use the [Vercel Platform](https://vercel.com/) from the creators of Next.js. You can install `vercel` cli and follow the instruction [here](https://vercel.com/docs/concepts/deployments/overview). You can also connect your github account to vercel and have vercel automatically deploy the github repository for you. ## Credit Based on M4TT72's awesome [Terminal](https://github.com/m4tt72/terminal). ", Assign "at most 3 tags" to the expected json: {"id":"4371","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"