This repository contains the source code for the V2 iteration of my blog/website. Leafbytes.
This website has had one previous iteration, the source code can be found here.
This Website utilizes Vite, Vue3, Vue-Router, and PrismJS. Set up is relatively straight forward. Simply clone the repository:
git clone https://github.com/tomit4/leafbytes_vue
And then, simply navigate into the leafbytes_vue directory, and install the dependencies:
npm install
After all dependencies have been installed, run the development server:
npm run dev
You may notice that the background images do not load like on the official site, this is because the build process does not for some reason copy all assets in the dev environment over to the build section. Uncomment the lines in the css portion of the components/Background.vue file on lines 11 and 24, and comment out the lines on lines 12 and 25. My apologies for the extra setup work, I will try to address this at some point when I return to work on the site once other projects have been finished.
This is my first time building a static site using ViteJS and Vue, so you may notice the package.json has some interesting addenda to the build command. This is because the directory structure of the dev server does not port over certain assets like the feed.rss file and the background files when run with the default build command in vitejs, thus the series of cp commands. Nevertheless, you simply have to run the build process the same:
npm run build
And within the dist directory, the changes you made to the development version will now be applied to the production version. You can test out this production version locally using live-server by simply navigating into the dist directory and invoking it:
live-server
Note that changes to the deployed site on netlify do not need this process, as they do this upon changes to this Repository.
| Universal Colors | Hex |
|---|---|
| Black | #252525 |
| Light Mode Colors | Hex |
|---|---|
| White | #ffffffff |
| Dark Blue | #004b77 |
| Light Blue | #baf6ff |
| BG Light Blue | #62a5bf |
| BG Dark Blue | #2a7296 |
| HD Dark Blue | #002c46 |
| Link Clr | #0066cc |
| Dark Mode Colors | Hex |
|---|---|
| White | #222f48 |
| Dark Blue | #9ad7ff |
| Light Blue | #39738c |
| BG Light Blue | #4b8aa1 |
| BG Dark Blue | #264567 |
| HD Dark Blue | #9ad7ff |
| Link Clr | #cca700 |
| Prism Dark Mode Colors | Hex |
|---|---|
| Pre-Class-Lang | #f8f8f2 |
| BG | #002c46ff |
| BG-Border | #02c46ff |
| TK-Prolog | #8292a2 |
| TK-Punc | #f8f8f2 |
| TK-Tag | #f92672 |
| TK-Numb | #ae81ff |
| TK-String | #a6e22e |
| TK-Var | #f8f8f2 |
| TK-Func | #e6db74 |
| TK-Keyw | #66d9ef |
| TK-Regex | #fd971f |
| Prism Light Mode Colors | Hex |
|---|---|
| Pre-Class-Lang | #657b83 |
| BG | #c4faff |
| BG-Border | #002c46ff |
| TK-Prolog | #93a1a1 |
| TK-Punc | #586e75 |
| TK-Tag | #268bd2 |
| TK-Numb | #268bd2 |
| TK-String | #2aa198 |
| TK-Var | #cb4b16 |
| TK-Func | #b58900 |
| TK-Keyw | #859900 |
| TK-Regex | #cb4b16 |