-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
28 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,10 +14,7 @@ | |
| <script type="module" src="https://early.webawesome.com/[email protected]/dist/webawesome.loader.js"></script> | ||
| <script type="module" src="/assets/scripts/color-scheme.js"></script> | ||
| <script> | ||
| document.documentElement.classList.toggle( | ||
| 'wa-theme-default-dark', | ||
| sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches | ||
| ); | ||
| document.documentElement.classList.toggle('wa-theme-default-dark',sessionStorage.getItem('colorScheme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches); | ||
| </script> | ||
|
|
||
| </head> | ||
|
|
@@ -104,12 +101,9 @@ <h5> | |
| </h5> | ||
|
|
||
| <p><a name="artcle-top"></a>In this article I'm going to break down how this website works. First this website is hosted on GitHub, and it's code is public, you can <a href="https://github.com/torvos/Torvos.ca" target="_blank">view the code here (opens in a new tab)</a> and even send pull requests if you spot an error or want to suggest changes.</p> | ||
|
|
||
| <p>Now anyone can simply host code on GidHub but your not looking at code your looking at a webstie so how does that work? That's due to a GitHub feature called GitHub Pages, it allows you to host websties on their infrasturcure with only a few clicks, see <a href="https://pages.github.com" target="_blank">here (opens in a new tab)</a> for a great guide from GitHub themselves.</p> | ||
|
|
||
| <p>Now anyone can simply host code on GitHub, but you're not looking at code you're looking at a website so how does that work? That's due to a GitHub feature called GitHub Pages, it allows you to host websites on their infrastructure with only a few clicks, see <a href="https://pages.github.com" target="_blank">here (opens in a new tab)</a> for a great guide from GitHub themselves.</p> | ||
| <p><a name="artcle-local"></a>While you can simply leave it at that and have yourself a website, however I wanted to be able to work on my site without updating the public version right away. While I could just download the code locally and only commit and push changes when I'm ready it wouldn't render the HTML with all dependencies. That's why I setup a local version of it on one of my servers. That way I can develop articles in private before publishing to the live site.</p> | ||
|
|
||
| <p>The way this works is on my personal server I'm running a beta version of my website, that website is a clone of the GitHub repository, so I'm able to code changes view them locally even commit changes to the local repository. Then when I'm happy I can push it up to GitHub and the GitHub Action takes over and publishes the new version of the website.</p> | ||
| <p>The way this works is on my personal server I'm running a beta version of my website, that website is a clone of the GitHub repository, so I'm able to code changes view them locally even commit changes to the local repository. Then when I'm happy I can push it up to GitHub and the GitHub Action takes over and publishes the updated version of the website.</p> | ||
|
|
||
| <p style="text-align: center;"><picture> | ||
| <img | ||
|
|
@@ -120,9 +114,9 @@ <h5> | |
| ></img> | ||
| </picture></p> | ||
|
|
||
| <p><a name="artcle-dns"></a>Now something else you may have noticed is this site address isn't <a href="https://torvos.github.io">https://torvos.github.io</a> that's because I use another feature of GitHub Pages called custom domain. While I registered torvos.ca with a domain registrar it is a rather bare bones one and doesn't support some things I wanted like programatic access.</p> | ||
| <p>Why did I want programatic access you may ask, well that's because once in a while my internet service provider changes my public IP, and when that happens I want a specific subdomain of my domain to be updated automatically. My server periodically checks it's public IP and compares it against what the subdomain and if it's diffrent send a programmatic request to update it.</p> | ||
| <p>For this I use <a hred="deSEC.io" target="_blank">deSEC (opens in a new tab)</a> they offer a free fully featured DNS hosting service that supports programatic access.</p> | ||
| <p><a name="artcle-dns"></a>Now something else you may have noticed is this site address isn't <a href="https://torvos.github.io" target="_blank">https://torvos.github.io (purposefully broken link)</a> that's because I use another feature of GitHub Pages called custom domain. While I registered torvos.ca with a domain registrar it is a barebones one and doesn't support some things I wanted like programmatic access.</p> | ||
| <p>Why did I want programmatic access you may ask, well that's because occasionally my internet service provider changes my public IP, and when that happens, I want a specific subdomain of my domain to be updated automatically. My server periodically checks it's public IP and compares it against what the subdomain and if it's different send a programmatic request to update it.</p> | ||
| <p>For this I use <a hred="deSEC.io" target="_blank">deSEC (opens in a new tab)</a> they offer a free fully featured DNS hosting service that supports programmatic access.</p> | ||
|
|
||
| <p style="text-align: center;"><picture> | ||
| <img | ||
|
|
@@ -134,46 +128,40 @@ <h5> | |
| </picture></p> | ||
|
|
||
|
|
||
| <p><a name="artcle-mx"></a>The last part of this website is how my email can be <a href="mailto:[email protected]">[email protected]</a> email isn't something that GitHiub Pages offer, and while I could pay Microsoft, Google, or Apple to use one of their custom domain email services it's even easier to use something like <a href="https://improvmx.com">ImprovMX</a> a fantasitc service that has a free option and fantasitc paid options for larger groups.</p> | ||
| <p>In the end this setup works for me and might work for you as well and if it does I hope this article helped.</p> | ||
| <p><a name="artcle-mx"></a>The last part of this website is how my email can be <a href="mailto:[email protected]">[email protected]</a> email isn't something that GitHub Pages offer, and while I could pay Microsoft, Google, or Apple to use one of their custom domain email services it's even easier to use something like <a href="https://improvmx.com">ImprovMX</a> a fantastic service that has a free option and fantastic paid options for larger groups.</p> | ||
| <p>In the end this setup works for me and might work for you as well and if it does, I hope this article helped.</p> | ||
| </main> | ||
|
|
||
| <script> | ||
|
|
||
| //function to swap images based on theme/device preferance | ||
| function updateImages() { | ||
| //short delay because computers are too fast | ||
| setTimeout(function (){ | ||
| if (localStorage.getItem('colorScheme') == "auto") { | ||
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
| document.getElementById("parralelle-website").src="../images/articles-parralelle-website-dark.png"; | ||
| document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup-dark.png"; | ||
| } | ||
| else { | ||
| document.getElementById("parralelle-website").src="../images/articles-parralelle-website.png"; | ||
| document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup.png"; | ||
| } | ||
| } else if (localStorage.getItem('colorScheme') == "dark") { | ||
| //localstorage variable set by site wide theme, also checking window media preference | ||
| if (localStorage.getItem('colorScheme') == "dark" || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
| document.getElementById("parralelle-website").src="../images/articles-parralelle-website-dark.png"; | ||
| document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup-dark.png"; | ||
| } else { | ||
| } | ||
| else { | ||
| document.getElementById("parralelle-website").src="../images/articles-parralelle-website.png"; | ||
| document.getElementById("dnsmx-website").src="../images/articles-dns-mx-setup.png"; | ||
| } | ||
| }, 1); | ||
| } | ||
|
|
||
| updateImages(); | ||
|
|
||
| //watch the theme selector | ||
| document.addEventListener('wa-select', event => { | ||
| const menu = event.target.closest('#color-scheme-selector wa-menu'); | ||
| if (!menu) return; | ||
| updateImages(); | ||
| }); | ||
|
|
||
| //in case the device changes it's preference | ||
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { | ||
| const newColorScheme = event.matches ? "dark" : "light"; | ||
| updateImages(); | ||
| }); | ||
|
|
||
| //watch the undocumented \ keyboard shortcut | ||
| document.addEventListener('keydown', event => { | ||
| if ( | ||
| event.key === '\\' && | ||
|
|
@@ -182,8 +170,9 @@ <h5> | |
| event.preventDefault(); | ||
| updateImages(); | ||
| } | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| updateImages(); | ||
| </script> | ||
| </wa-page> | ||
| </body> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters