Getting much closer! Still need to finalize About and write Journey.

This commit is contained in:
Hyperling 2022-10-16 09:22:44 -05:00
parent ce20fa0f6f
commit 239aa26b49
20 changed files with 394 additions and 188 deletions

@ -1,4 +1,5 @@
# My Website # My Website
Custom website rather than using WordPress or anything else that handles the code for you. Custom website rather than using WordPress or anything else that handles the code for you.
Rather than using apache or nginx just using Node.js to serve an HTML API. Gives more control. Rather than using apache or nginx just using Node.js to serve an HTML API. Gives more control.
@ -9,27 +10,29 @@ Basically a "page" is just a program that echo's HTML content for the API.
Will likely play with some pages being Bash and other fun things. Will likely play with some pages being Bash and other fun things.
## TODO All content is formatted so that the page source is readible.
Finish CSS
Add Current Content # How To Run
- APPS
- VIDEOS The install script is currently only set up for apt, and the package names only tested on Ubuntu.
- DONATE
- VIDEOS `git clone https://github.com/Hyperling/www www`
`cd www`
`./run.sh`
Then in a web browser, navigate to `your_machines_ip_address:8080`.
## TODO
Add New Content Add New Content
- NOTICE - NOTICE
- HEALTH (My Priorities Sheet) - HEALTH (My Priorities Sheet)
- How to host files? Put them in reverse-proxy's files.hyperling.com site? - How to host files? Put them in reverse-proxy's files.hyperling.com site?
- GIFTS - STANCE
- JOURNEY
Add Favicon
[https://www.metatags.org/seo-tips/design-tips/favicon-ico/]
- Will this have to be in files.hyperling.com as well? Or will this work?
- [https://www.geeksforgeeks.org/what-is-the-use-of-serve-favicon-from-node-js-server/]
## Inspiration ## Inspiration
- [https://liquorix.net/] - [https://liquorix.net/]
- The linux-zen kernel, a really great one if you're running FOSS OS's! - The linux-zen kernel, a really great one if you're running FOSS OS's!
- [https://cahlen.org/] - [https://cahlen.org/]

@ -1,5 +1,5 @@
{ {
"dependencies": { "dependencies": {
"express": "^4.18.1" "express": ">=4.18.1"
} }
} }

@ -1,55 +1,57 @@
#!/usr/bin/php #!/usr/bin/php
<?php <?php
include "helpers/body_open.php"; include "helpers/body_open.php";
?> ?>
<div class="row col-12 title">
<h1>Curious About Me?</h1> <div class="row">
<p> <h1 class="col-12 title">Who Am I?</h1>
Hi there! My name is Chad, I am the primary content creator behind the </div>
Hyperling and HyperVegan brands. Thank you for your interest! <div class="row">
</p> <div class="col-12 text">
<p> <p>
My hobbies go further than just coding and video making. I am big into Hi there! My name is Chad, I am the primary content creator behind the
health and believe it is humanity's most important asset. I was fortunate Hyperling and HyperVegan brands. Thank you for your interest!
to have time off school/work/hobbies in my early 20's was able to lock </p>
in a great lifestyle after a life of chronic sickness. See more below in <p>
<a href="#health">My Health Protocol</a>, it also includes a link to the My hobbies go further than just coding and video making. I am big into
full history. health and believe it is humanity's most important asset. I was fortunate
</p> to have time off school/work/hobbies in my early 20's was able to lock
<p> in a great lifestyle after a life of chronic sickness. See more below in
I am also an avid gardener, focusing on the principles of nature-based <a href="#health">My Health Protocol</a>, it also includes a link to the
permaculture in order to grow fruits and vegetables, like in a Food full history.
Forest system. This comes with other outdoor interests such as hiking, </p>
camping, backpacking, foraging, and traveling. <p>
</p> I am also an avid gardener, focusing on the principles of nature-based
<p> permaculture in order to grow fruits and vegetables, like in a Food
For all of my life I have resided in Indiana, USA, but in Spring 2023 I Forest system. This comes with other outdoor interests such as hiking,
am making a big leap and heading to the southwest, most likely Arizona camping, backpacking, foraging, and traveling.
or Colorado. The humidity in the midwest is miserable and the terrain </p>
is flat and boring. There are all sorts of insect pests and the ground <!-- Need to rewrite or remove this to be more positive.
is so fertile that yard grass takes over a garden in a jiffy. I look <p>
forward to the challenge of growing food in the new climate, but also For all of my life I have resided in Indiana, USA, but in Spring 2023 I
plan to reduce costs by living outdoors. Home ownership isn't for me. am making a big leap and heading to the southwest, most likely Arizona
</p> or Colorado. The humidity in the midwest is miserable and the terrain
is flat and boring. There are all sorts of insect pests and the ground
is so fertile that yard grass takes over a garden in a jiffy. I look
forward to the challenge of growing food in the new climate, but also
plan to reduce costs by living outdoors. Home ownership isn't for me.
</p>
-->
</div>
</div> </div>
<?php <?php
include "helpers/section_open.php"; include "helpers/section_open.php";
include "subpages/about/health.php"; include "subpages/about/notice.php";
include "helpers/section_close.php"; include "helpers/section_close.php";
include "helpers/section_open.php"; include "helpers/section_open.php";
include "subpages/home/contact.php"; include "subpages/about/health.php";
include "helpers/section_close.php"; include "helpers/section_close.php";
include "helpers/section_open.php"; include "helpers/section_open.php";
include "subpages/about/stance.php"; include "subpages/about/stance.php";
include "helpers/section_close.php"; include "helpers/section_close.php";
include "helpers/section_open.php";
include "subpages/about/notice.php";
include "helpers/section_close.php";
include "helpers/body_close.php"; include "helpers/body_close.php";
?> ?>

34
pages/contact.php Executable file

@ -0,0 +1,34 @@
#!/usr/bin/php
<?php
include "helpers/body_open.php";
?>
<div class="row">
<h2 class="col-12 title">Contact Me</h2>
</div>
<div class="row">
<div class="col-12 text">
<p>
Public inquries can be made on my Odysee channel's discussion board.
</p>
<ul class="indent"><li>
<a href="https://odysee.com/@HyperVegan:2?view=discussion"
target="_blank" rel="noopener noreferrer"
>
https://odysee.com/@HyperVegan:2?view=discussion
</a>
</li></ul>
<p>
For private matters, my email address may be used, but there is no
guarantee of timely response. If I do not know of you then please be
sure to form the email in a way that does not look like spam.
</p>
<ul class="indent"><li>
<a href="mailto:me@hyperling.com">me@hyperling.com</a>
</li></ul>
</div>
</div>
<?php
include "helpers/body_close.php";
?>

@ -1,23 +1,23 @@
/*** Logo In Header ***/ /*** Logo In Header ***/
/* Shared Attributes */ /* Shared Attributes */
.banner-top, .banner-middle, .banner-bottom { .banner-top, .banner-middle, .banner-bottom {
color: white; color: white;
width: 100%; width: 100%;
height: 69px; height: 69px;
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
} }
/* Specific Attributes */ /* Specific Attributes */
.banner-top { .banner-top {
background-color: #6633FF; background-color: #6633FF;
} }
.banner-middle { .banner-middle {
background-color: #FF9900; background-color: #FF9900;
} }
.banner-bottom { .banner-bottom {
background-color: #339933; background-color: #339933;
} }

2
pages/helpers/banner.php Normal file → Executable file

@ -1,5 +1,5 @@
#!/usr/bin/php #!/usr/bin/php
<div class="row col-12"> <div class="row col-12 header">
<div class="banner-top">Peace</div> <div class="banner-top">Peace</div>
<div class="banner-middle">Love</div> <div class="banner-middle">Love</div>
<div class="banner-bottom">Happiness</div> <div class="banner-bottom">Happiness</div>

@ -1,29 +1,29 @@
/*** Dark Theme ***/ /*** Dark Theme ***/
body { body {
background-color: #444444; background-color: #444444;
} }
* { * {
color: #CCCCCC; color: #CCCCCC;
} }
a { a {
color: #FF9900 color: #FF9900
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
color: #6633FF; color: #6633FF;
} }
.header { .header {
/*background-color: #113311;*/ /*background-color: #113311;*/
background-color: #222222; background-color: #222222;
} }
.title { .title {
background-color: #111111; background-color: #111111;
} }
.text { .text {
background-color: #333333; background-color: #333333;
} }

@ -1,50 +1,84 @@
/* 2022-09-14 CSS for the website. */ /*** 2022-09-14 CSS for the website. ***/
/* https://www.w3schools.com/Css/css_rwd_grid.asp */ /* https://www.w3schools.com/Css/css_rwd_grid.asp */
/* Enable dynamic stuffs, maks the element think its entire size includes padding. */ /* Enable dynamic stuffs, maks the element think its entire size includes padding. */
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
/*** Page Sections ***/ /*** Page Sections ***/
/** Page with 12 columns **/ /** Page with 12 columns **/
.col-1 {width: 8.33%;} .col-1 {width: 8.33%;}
.col-2 {width: 16.66%;} .col-2 {width: 16.66%;}
.col-3 {width: 25%;} .col-3 {width: 25%;}
.col-4 {width: 33.33%;} .col-4 {width: 33.33%;}
.col-5 {width: 41.66%;} .col-5 {width: 41.66%;}
.col-6 {width: 50%;} .col-6 {width: 50%;}
.col-7 {width: 58.33%;} .col-7 {width: 58.33%;}
.col-8 {width: 66.66%;} .col-8 {width: 66.66%;}
.col-9 {width: 75%;} .col-9 {width: 75%;}
.col-10 {width: 83.33%;} .col-10 {width: 83.33%;}
.col-11 {width: 91.66%;} .col-11 {width: 91.66%;}
.col-12 {width: 100%;} .col-12 {width: 100%;}
[class*="col-"] { [class*="col-"] {
float: left; float: left;
padding: 15px; padding: 15px;
/*border: 1px solid green;*/ /* FORTESTING otherwise disable */ /*border: 1px solid green;*/ /* FORTESTING otherwise disable */
} }
/* Ensure columns are respected as if they always exist. */ /* Ensure columns are respected as if they always exist. */
.row::after { .row::after {
content: ""; content: "";
clear: both; clear: both;
display: table; display: table;
} }
/** Make the menu items centered and layout horizontal. **/ /** Make the menu items centered and layout horizontal. **/
.menu-list { .menu-list {
text-align: center; text-align: center;
list-style-type: none; list-style-type: none;
padding-left: 0px; padding-left: 0px;
} }
.menu_item {
display: inline-block;
}
.menu_item { /** Be able to position anything easily. **/
display: inline-block; .center {
} text-align: center;
}
.left {
text-align: start;
}
.right {
text-align: end;
}
.center { /** Use ul to create an indent but without the bullet point. **/
text-align: center; .indent {
} list-style-type: none;
}
/** Objects which need borders **/
.border {
border: 1px solid #339933;
}
/* Also have this apply to a table's cells. */
.border * th,td {
border: 1px solid #339933;
}
/** Format tables and allow contents to be broken up. **/
table {
/*width: 100%;*/
border-collapse: collapse;
/*table-layout: fixed;*/
}
table * th,td {
word-wrap: break-word;
overflow-wrap: break-word;
/*max-width: 1px;*/
padding: 7px;
}

@ -1,11 +1,12 @@
#!/usr/bin/php #!/usr/bin/php
<div class="row header"> <div class="row header">
<ul class="menu-list"> <ul class="menu-list">
<li class="col-2"></li> <li class="col-1"></li>
<li class="col-2 menu-item"><a href="/home/">Home</a></li> <li class="col-2 menu-item"><a href="/home/">Home</a></li>
<li class="col-2 menu-item"><a href="/videos/">Videos</a></li> <li class="col-2 menu-item"><a href="/videos/">Videos</a></li>
<li class="col-2 menu-item"><a href="/about/">About</a></li> <li class="col-2 menu-item"><a href="/about/">About</a></li>
<li class="col-2 menu-item"><a href="/contact/">Contact</a></li>
<li class="col-2 menu-item"><a href="/support/">Support</a></li> <li class="col-2 menu-item"><a href="/support/">Support</a></li>
<li class="col-2"></li> <li class="col-1"></li>
</ul> </ul>
</div> </div>

@ -1,20 +1,26 @@
#!/usr/bin/php #!/usr/bin/php
<!--
Landing page, keeping it apps and development projects like old WordPress site.
-->
<?php <?php
include "helpers/body_open.php"; include "helpers/body_open.php";
?> ?>
<div class="row col-12 title"> <div class="row">
<h1>Welcome!</h1> <h1 class="col-12 title">Welcome!</h1>
<p> </div>
[ Website is still in testing. Don't judge too harshly. :) ] <div class="row">
</p> <div class="col-12 text">
<p> <p>
Welcome to my site! It is the central hub of my activities, linking you [ Website is still in development, please treat this as an unfinished product. ]
to most of my projects and providing ways to contact and support me. </p>
I've also included information such as my health protocol which was <p>
currently only scattered throughout videos. Thanks for visiting my site! It is the central hub of my activities,
</p> linking you to most of my projects and providing ways to contact and
support me. I've also included information such as my health protocol
which was currently only scattered throughout videos.
</p>
</div>
</div> </div>
<?php <?php

@ -1,12 +1,14 @@
#!/usr/bin/php #!/usr/bin/php
<div class="row" id="health"> <div class="row" id="health">
<h2 class="col-12 header">My Health Protocol</h2> <h2 class="col-12 header">My Health Protocol</h2>
</div>
<div class="row">
<div class="col-12 text"> <div class="col-12 text">
<p> <p>
I have not been sick since I cleaned up my lifestyle in 2014. No colds, I have not been sick since I cleaned up my lifestyle in 2014. No colds,
flus, fevers, etc. My suggestions for accomplishing this are simple. flus, fevers, etc. My suggestions for accomplishing this are simple.
Consistently: Consistently:
<ul> <ul class="indent">
<li>eat enough clean food,</li> <li>eat enough clean food,</li>
<li>drink enough clean water,</li> <li>drink enough clean water,</li>
<li>get enough good sleep, and</li> <li>get enough good sleep, and</li>
@ -34,6 +36,7 @@
been reversing sickness for decades and their plans follow a similar been reversing sickness for decades and their plans follow a similar
whole food carb-based lifestyle such as my own, with NO OIL! whole food carb-based lifestyle such as my own, with NO OIL!
</p> </p>
<!-- Need to rewrite or remove this to be more positive.
<p> <p>
Even though I run the brand HyperVegan, I am like the doctors and do Even though I run the brand HyperVegan, I am like the doctors and do
not have a strict adherence to the cultism of "veganism". Yes, when I not have a strict adherence to the cultism of "veganism". Yes, when I
@ -46,6 +49,7 @@
I am still friendly with statists. The banner at the top of the page I am still friendly with statists. The banner at the top of the page
is not just for decoration, I truly believe in those values. ;) is not just for decoration, I truly believe in those values. ;)
</p> </p>
-->
<p> <p>
For more information on my specifics and why I came to this lifestyle please visit For more information on my specifics and why I came to this lifestyle please visit
<a href="/journey/">My Journey</a>. <a href="/journey/">My Journey</a>.

@ -1 +1,11 @@
#!/usr/bin/php #!/usr/bin/php
<div class="row" id="notice">
<h2 class="col-12 header">Public Notice</h2>
</div>
<div class="row">
<div class="col-12 text">
<p>
[TBD]
</p>
</div>
</div>

@ -1 +1,12 @@
#!/usr/bin/php #!/usr/bin/php
<!-- My stance on philosophy, politics, and non-human entities. -->
<div class="row" id="stance">
<h2 class="col-12 header">Philosophical Stance</h2>
</div>
<div class="row">
<div class="col-12 text">
<p>
[TBD]
</p>
</div>
</div>

@ -2,7 +2,7 @@
<div class="row"> <div class="row">
<h2 class="col-12 header">My Public Programs</h2> <h2 class="col-12 header">My Public Programs</h2>
<p class="col-12 text"> <p class="col-12 text">
I write free software! Please feel welcome to browse anything I have created. I write free software! Please feel welcome to browse and use anything I have created.
</p> </p>
</div> </div>
@ -54,7 +54,8 @@
Determine when to go to bed if you'd like to wake up during light sleep. Determine when to go to bed if you'd like to wake up during light sleep.
</p> </p>
<p> <p>
[<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.the45minuterule" target="_blank" rel="noopener noreferrer">Play Store</a>] [<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.the45minuterule"
target="_blank" rel="noopener noreferrer">Play Store</a>]
[<a href="https://files.hyperling.com/apks/45MinuteRule.apk">APK</a>] [<a href="https://files.hyperling.com/apks/45MinuteRule.apk">APK</a>]
</p> </p>
<p> <p>
@ -83,7 +84,8 @@
Play your notification sound at your chosen Hour:Minute:Second interval. Play your notification sound at your chosen Hour:Minute:Second interval.
</p> </p>
<p> <p>
[<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.infinitetimer" target="_blank" rel="noopener noreferrer">Play Store</a>] [<a href="https://play.google.com/store/apps/details?id=com.hyperling.apps.infinitetimer"
target="_blank" rel="noopener noreferrer">Play Store</a>]
[<a href="https://files.hyperling.com/apks/InfiniteTimer.apk">APK</a>] [<a href="https://files.hyperling.com/apks/InfiniteTimer.apk">APK</a>]
</p> </p>
<p> <p>
@ -115,8 +117,7 @@
</p> </p>
<p> <p>
[<a href="https://play.google.com/store/apps/details?id=apps.hyperling.com.platformer" [<a href="https://play.google.com/store/apps/details?id=apps.hyperling.com.platformer"
target="_blank" rel="noopener noreferrer">Play Store target="_blank" rel="noopener noreferrer">Play Store</a>]
</a>]
[<a href="https://files.hyperling.com/apks/HyperGames.apk">APK</a>] [<a href="https://files.hyperling.com/apks/HyperGames.apk">APK</a>]
</p> </p>
<p> <p>
@ -136,9 +137,9 @@
</div> </div>
<div class="row"> <div class="row">
<p class="col-12 text"> <p class="col-12 text">
For a full list of my programs including my Ansible automation, For a full list of programs including my Ansible automation,
Docker setup, source code for this website, and fun projects Docker setup, source code for this website, and fun projects
like an obfuscating editor and music fixer, check out like an obfuscating editor and music fixer, check out
<a href="https://github.com/hyperling" target="_blank">my Github</a>. <a href="https://github.com/Hyperling" target="_blank">my Github</a>.
</p> </p>
</div> </div>

@ -1 +0,0 @@
#!/usr/bin/php

@ -1,2 +1,35 @@
#!/usr/bin/php #!/usr/bin/php
<!-- How people can support me with currency if they so desire. --> <!-- How people can support me with currency if they so desire. -->
<div class="row" id="donate">
<h2 class="col-12 header">Donate</h2>
</div>
<div class="row">
<div class="col-12 text">
<p>
Monetary donations can be provided below through cryptocurrencies.
</p>
<ul class="indent"><li>
<table class="border">
<thead>
<tr>
<th class="center"><strong>Description</strong></th>
<th class="center"><strong>Ticker#</strong></th>
<th class="left"><strong>Address</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">Monero</td>
<td class="center">XMR</td>
<td class="left">4ATk6owoMki46CuVfyAHS57FB5deqVFudTsaifQC1cfmcaQemgPEftcjZcW9DmcyfrfdRjxHQ9m4JAVSorYTgm6h8JnT7ao</td>
</tr>
<tr>
<td class="center">LBRY/Odysee Credit</td>
<td class="center">LBC</td>
<td class="left">bDWP6qZajtm9Q9EkryKTorRwKFd5eDbPJj</td>
</tr>
</tbody>
</table>
</li></ul>
</div>
</div>

@ -1,2 +1,59 @@
#!/usr/bin/php #!/usr/bin/php
<!-- Gift ideas such as dried fruit, teas, etc. --> <!-- Gift ideas such as dried fruit, teas, etc. -->
<div class="row" id="donate">
<h2 class="col-12 header">Gifts</h2>
</div>
<div class="row">
<div class="col-12 text">
<p>
Please reach out before purchasing any of these to make sure that I do
not already have an excess supply. I can also provide a good address
in case I have moved around. I also recommend you buying these for
yourself if you'd like to add delicious nutritious food to your diet!
</p>
<strong>Food Items</strong>
<ul class="indent">
<li><a href="https://foodtolive.com/shop/organic-mango-cheeks/"
target="_blank" rel="noopener noreferrer"
>
Mango
</a></li>
<li><a href="https://foodtolive.com/shop/organic-jasmine-rice/"
target="_blank" rel="noopener noreferrer"
>
Jasmine Rice</a> (tends to be out of stock)
</li>
<li><a href="https://foodtolive.com/shop/organic-long-grain-white-rice/"
target="_blank" rel="noopener noreferrer"
>
Long Grain White Rice</a> (if jasmine is still out of stock)
</li>
<li><a href="https://foodtolive.com/shop/organic-tri-color-quinoa/"
target="_blank" rel="noopener noreferrer"
>
Quinoa</a> (color does not matter)
</li>
<li><a href="https://foodtolive.com/shop/organic-amaranth/"
target="_blank" rel="noopener noreferrer"
>
Amaranth
</a></li>
</ul>
<strong>Bulk Teas</strong>
<ul class="indent">
<li><a href="https://www.davidsonstea.com/Tulsi_Pure_Leaves_Loose_Leaf.aspx"
target="_blank" rel="noopener noreferrer"
>
Tulsi
</a></li>
<li><a href="https://www.davidsonstea.com/South_African_Rooibos_Loose_Leaf.aspx"
target="_blank" rel="noopener noreferrer"
>
Rooibos
</a></li>
<!--<li><a href="">
???
</a></li>-->
</ul>
</div>
</div>

@ -1,20 +1,22 @@
#!/usr/bin/php #!/usr/bin/php
<!-- <!--
Page to provide ways people can support me. Page to provide ways people can support me.
--> -->
<?php <?php
include "helpers/body_open.php"; include "helpers/body_open.php";
?> ?>
<div class="row col-12 title"> <div class="row">
<h1>Support</h1> <h1 class="col-12 title">Support</h1>
<p> </div>
While I do not ask for anything, and prefer to take care of myself, <div class="row">
I acknowledge that some people enjoy gift giving and would like to <div class="col-12 text">
help me out. Below are my preferred ways to do this. <p>
</p> While I do not ask for anything, and prefer to take care of myself,
I acknowledge that some people enjoy gift giving and would like to
help me out. Below are my preferred ways to do this.
</p>
</div>
</div> </div>
<?php <?php

@ -1,30 +1,39 @@
#!/usr/bin/php #!/usr/bin/php
<!-- <!--
Page for my video links. Page for my video links.
--> -->
<?php <?php
include "helpers/body_open.php"; include "helpers/body_open.php";
?> ?>
<div class="row col-12 title"> <div class="row">
<h1>Videos</h1> <h1 class="col-12 title">Videos</h1>
<p > </div>
I enjoy making video content when I have free time. Other life duties take <div class="row">
priority so this is not always frequent of often. <div class="col-12 text">
</p> <p>
I enjoy making video content when I have free time. Other life duties
take priority so this is not always frequent of often. For the best
viewing experience, please go directly to my channel here:
</p>
<ul class="indent"><li>
<a href="https://odysee.com/@HyperVegan:2"
target="_blank" rel="noopener noreferrer"
>
https://odysee.com/@HyperVegan:2
</a>
</li></ul>
<p> I also have a separate channel for reposting content, found here:</p>
<ul class="indent"><li>
<a href="https://odysee.com/@HyperVegan-Reposts:5"
target="_blank" rel="noopener noreferrer"
>
https://odysee.com/@HyperVegan-Reposts:5
</a>
</li></ul>
</div>
</div> </div>
<?php <?php
include "helpers/section_open.php";
//include "subpages/support/gifts.php";
include "helpers/section_close.php";
include "helpers/section_open.php";
//include "subpages/support/donate.php";
include "helpers/section_close.php";
include "helpers/body_close.php"; include "helpers/body_close.php";
?> ?>

2
run.sh

@ -28,4 +28,4 @@ npm install
./main.js ./main.js
### ###
exit 0 exit $?