diff options
author | Bill <bill@billserver.senders.io> | 2022-11-05 23:41:46 -0400 |
---|---|---|
committer | Bill <bill@billserver.senders.io> | 2022-11-05 23:41:46 -0400 |
commit | 768f44a55bf757abe1bfc0829de301ade964354e (patch) | |
tree | a45e3a82fb65f926c37eda89b407ae7b4f46e4a5 | |
parent | 3c055d4d579a0b78a9a9ebc622cec32037e958ac (diff) |
Create new MD blog post and retidy
I updated tidy so each file got a nice update along with the actual
update
-rwxr-xr-x | compile-md.sh | 2 | ||||
-rw-r--r-- | mds/blog/converting-form-mds.md | 122 | ||||
-rw-r--r-- | templates/blog-footer.html | 6 | ||||
-rw-r--r-- | templates/blog-header.html | 26 | ||||
-rw-r--r-- | templates/blog.html | 13 | ||||
-rw-r--r-- | templates/page.html | 13 | ||||
-rwxr-xr-x | tidy.sh | 2 | ||||
-rw-r--r-- | www/blog/2019-01-21/index.html | 13 | ||||
-rw-r--r-- | www/blog/2019-02-17/index.html | 13 | ||||
-rw-r--r-- | www/blog/2019-12-09/index.html | 103 | ||||
-rw-r--r-- | www/blog/2020-01-13/index.html | 13 | ||||
-rw-r--r-- | www/blog/2020-12-17/index.html | 13 | ||||
-rw-r--r-- | www/blog/2021-01-05/index.html | 13 | ||||
-rw-r--r-- | www/blog/2022-11-06/index.html | 237 | ||||
-rw-r--r-- | www/blog/bread/index.html | 30 | ||||
-rw-r--r-- | www/blog/index.html | 17 | ||||
-rw-r--r-- | www/blog/movies/index.html | 13 | ||||
-rw-r--r-- | www/dice/index.html | 28 | ||||
-rw-r--r-- | www/error.html | 13 | ||||
-rw-r--r-- | www/index.css | 20 | ||||
-rw-r--r-- | www/index.html | 56 | ||||
-rw-r--r-- | www/resume/index.html | 13 | ||||
-rw-r--r-- | www/wc3.html | 58 |
23 files changed, 688 insertions, 149 deletions
diff --git a/compile-md.sh b/compile-md.sh index 547408b..5b5580c 100755 --- a/compile-md.sh +++ b/compile-md.sh @@ -27,7 +27,7 @@ pclass=$(echo "$title" | tr [:upper:] [:lower:]) sed -i "s/PAGE_TITLE/$title/" $out # replace title sed -i "s/PAGE_CLASS/$pclass/" $out # replace class -markdown $in >> $out +markdown -f fencedcode $in >> $out if [ $1 == "blog" ]; then cat templates/blog-footer.html >> $out diff --git a/mds/blog/converting-form-mds.md b/mds/blog/converting-form-mds.md new file mode 100644 index 0000000..ee5e6a8 --- /dev/null +++ b/mds/blog/converting-form-mds.md @@ -0,0 +1,122 @@ +## My Markdown -> HTML Setup + +A common way I see a lot of people blog, especially micro-blog, is in [markdown](https://daringfireball.net/projects/markdown/). + +<figure> +> Markdown is a lightweight markup language for creating formatted text using a plain-text editor. + +<figcaption><cite>--- [Wikipedia | Markdown](https://en.wikipedia.org/wiki/Markdown)</cite></figcaption> +</figure> + +It built itself on-top of common syntax prevalent on the web and was designed to be converted into simple HTML output. +Since it leveraged preexisting syntax it was easy for new users to pick up, and is now found all over the web and applications. + +Since I started this website, I had been writing each page by hand using a few tools to facilitate that - and for a while I had been looking for a good way +to try out using markdown to generate some lighter pages and these blogposts. + +### Writing HTML by hand + +When it comes to blogging a lot of platforms offer WYSIWYG editor -- allowing users to write in rich-text that then gets converted into HTML in the style of the platform. +But for my case, since I self host this website, I decided to stick to my roots and write PURE HTML instead. + +HTML is fairly simple and easy once you get use to the basic structure of the system. And since I've been working in HTML almost two decades now, at the time it felt like the best solution to make a clean website. + +I briefly touched on my design process in [2019-01-21 - First! A New Years Resolution](/blog/2019-01-21/) outlining that I wanted to make a very lightweight and simple website. And at the time I believed the best way to achieve this goal +was to carefully structure and craft my website's HTML by hand. + +This article is making the process sound far more difficult than it is -- it's mostly just tedious. + + +``` +<article> +<h2> Title </h2> +<p> + Some paragraph.... +</p> +<h3> +<p> some subsection </p> +</h3> +<p> more text </p> +... etc +``` + +Is essentially what the website looks like - you can view the source of this page to see -- it's very simple HTML. + +The benefit I found doing this, mostly leveraging [tidy](www.html-tidy.org/), allowed a very easy to edit codebase. +And by leveraging the existing tags and their properties I also attempted to keep the styling to an absolute minimum. Using existing tags to enforce the styling I desired. + +Only for certain areas (tables, code, quotes) where readability is an issue do I setup custom CSS. + +Most of this process is actually what will continue to happen but the actual writing process will be unobstructed by the tedium of writing HTML. + +### Micro-blogging in general + +At the time of writing this, I have no ported over any of my [Gemini](https://gemini.circumlunar.space/) micro-blogs. +This warrants a longer post, since I wrote consistently in gemini from March 2021 through May 2021 -- having only stopped due to a long move leading to a lot of server downtime breaking the habit. +My gemini updated multiple days a week - mostly due to the extremely lightweight and limited nature of the platform. + +#### Gemtext + +[Gemtext](https://gemini.circumlunar.space/docs/gemtext.gmi) was the gemini protocol's standard MIME type. It was a basic markup language that relied on line based syntax. It was purposefully as lean as necessary because this was what was ACTUALLY being served to clients -- unlike Markdown which first needed to be converted to HTML, gemtext was the actual text served and rendered on the viewers client. You could customize the style of your client - but you could not, as an author, dictate how your content would be viewed. This meant the only aspects of your blog you had control over was the actual content and it's structure -- which for a blog is really all you should care about. + +It's syntax contained most of what I was actually using here already from HTML: + + 1. headings + 1. paragraphs that were wrapped based on page-width + 1. links + 1. lists + 1. quotes + 1. preformatted-text / codeblocks + +Besides links - it also leveraged the same common syntaxes that markdown did. + +#### Gemtext links + +From my brief time in the IRC and in geminispace in general - a lot of the "recommendations" came from new users about providing in-line links. +The philosophy was that by forcing links to exist on their own line - clients could configure how they wanted these to be seen and not have to worry about +links interfering with the text. + +<figure> +> Like Gopher (and unlike Markdown or HTML), Gemtext only lets you put links to other documents on a line of their own. You can't make a single word in the middle of a sentence into a link. This takes a little getting used to, but it means that links are extremely easy to find, and clients can style them differently (e.g. to make it clear which protocol they use, or to display the domain name to help users decide whether they want to follow them or not) without interfering with the readability of your actual textual content. + +<figcaption>--- <cite>[gemini.circumlunar.space -- A quite introduction to "gemtext" markup | Links](https://gemini.circumlunar.space/docs/gemtext.gmi)</cite></figcaption> +</figure> + +I felt that this provided a lot of useful limitations that removed a huge barrier for me to actually write down ideas without feeling over burdened. I also lurked in the IRC - as well as [implemented my own gemini server](https://github.com/s3nd3r5/java-gemini-server). + +As a quick aside -- the java server was a lot of fun! The protocol was very simple to work with for basic gemtext. I felt the ultimate downside was trying to build something for basic gemini capsule hosting (like I was using for a decent chunk of my time with gemini) - and something for developers to use as a base application server. At the time in 2021 a lot of talk was happening on IRC of users starting to look to provide more complex experiences via the protocol and I wanted a way for those interactions to be built out in Java - since most were in Go or Python at the time. This decision lead to me burning out due to difficulties splitting those responsiblities easily - where you could host along side your application - since I lacked the experience with more complex Gemini capsule applications. + +But it was a good experience and I got hands on experience with Certs, Netty, and SNI - which actually came in handy at my job! + +### Wasn't this about Markdown? + +A lot of what I liked about Gemini I found missing when I returned to the World Wide Web. Writing a new post was tedious and I actually had a few drafts sitting unposted. They're probably checked into my git at this moment! +So I thought - why not just use markdown and convert to HTML? That's what it's built for - and I already designed my site to work with minimal customization of raw HTML tags! + +### How I use Markdown + +Firstly, this blogpost was written in Markdown (with minimal HTML sprinkled in). Then I render the markdown into HTML using [Discount](https://www.pell.portland.or.us/~orc/Code/discount/). Frankly, I don't know how I stumbled across this markdown parser - I think it came pre-installed on my KDE Arch system because another KDE program used it. But I liked it, and it seemed extensible enough for my needs. + +This would produce the "body" of my articles - and I could then prepend and append the template-head and foot to my html output to form a blog post/web page. + +#### Customizations + +After I generated the output file, I replaced some placeholders in the templates via `sed` and then `tidy`'d the HTML. The only other major issue was Discount had no way of appending any link attributes -- so for external links I had `sed` append the `rel` and `target` attributes - which work off the assumption they're not there. A lot of my home-server scripts rely on assumptions... + +This is all bundled up in a simple script file so I can just supply a few arguments and the full page is re-rendered on command. + +### Two Sources of Truth + +In the sytem I devised the markdown files are really the "source of truth" but you could argue that the HTML files hold equal weigh - as they're what you're reading right now. The markdown is only useful if I render it as HTML. +There exist nginx extensions to serve markdown as HTML so I store everything as markdown. I could also provide some heading information to the markdowns to remove the command arguments and have on boot it generate the .html files in place before launching the site... But these are all nice ideas for a later date. + +Ultimately, this is something I contribute to ocassionally - I don't need something too complicated. I just need to output some HTML a few times a year. So if I manually publish the HTML each time - that's likely far more efficent then re-rendering. + +### Learnings + +This is the first post that uses this - though I've converted a page over to this already. But once I worked out the kinks and built a flow that works for me - this made the writing process a LOT easier. +Another issue was that once I `tidy`'d the HTML file - it became frustrating to edit, and I didn't always re-tidy it. Because the output is always `tidy`'d by the script - I can edit the raw markdown as needed. +And the script generally will always output the same file (with whatever changes I made of course). This makes the editing and git history a lot clearer. + +I would recommend writing in markdown - or even trying out gemini - you can host your gemini capsule on the web even! (Most gemini webpages are gemini capsules converted). I am sure other "blog focused markups" also exist too. + diff --git a/templates/blog-footer.html b/templates/blog-footer.html new file mode 100644 index 0000000..de97660 --- /dev/null +++ b/templates/blog-footer.html @@ -0,0 +1,6 @@ + </article> + <div id="footer"> + <i>BLOG_DATE</i> + </div> +</body> +</html> diff --git a/templates/blog-header.html b/templates/blog-header.html new file mode 100644 index 0000000..e5c4389 --- /dev/null +++ b/templates/blog-header.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <title>senders.io - PAGE_TITLE</title> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> +</head> +<body> + <div id='header'> + <a class='title' + href='/'>senders.io</a> + <nav> + <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a rel= + "noopener noreferrer external" + target="_blank" + href="https://github.com/s3nd3r5">Github</a> + </nav> + </div> + <div id="body"> + <article> diff --git a/templates/blog.html b/templates/blog.html index f8a0801..ac53f91 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/templates/page.html b/templates/page.html index ed03a68..a7dd5b3 100644 --- a/templates/page.html +++ b/templates/page.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - {PAGE}</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> @@ -1,7 +1,7 @@ #!/usr/bin/env bash if [ $# == 0 ]; then - find . -name '*.html' -type f -print -exec tidy -mq -config tidy.conf '{}' \; + find www/ -name '*.html' -type f -print -exec tidy -mq -config tidy.conf '{}' \; else tidy -mq -config tidy.conf $@ fi diff --git a/www/blog/2019-01-21/index.html b/www/blog/2019-01-21/index.html index cc3d835..628ac41 100644 --- a/www/blog/2019-01-21/index.html +++ b/www/blog/2019-01-21/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Homepage</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body id='blog'> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/blog/2019-02-17/index.html b/www/blog/2019-02-17/index.html index bda3073..834fa51 100644 --- a/www/blog/2019-02-17/index.html +++ b/www/blog/2019-02-17/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/blog/2019-12-09/index.html b/www/blog/2019-12-09/index.html index 66de652..639ac30 100644 --- a/www/blog/2019-12-09/index.html +++ b/www/blog/2019-12-09/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> @@ -26,17 +31,18 @@ share some unfiltered, semi-structured thoughts on.</p> <h3>Racket, 80x86, and even more C</h3> <h4>Racket</h4> - <p><a target="_blank" href="https://racket-lang.org">Racket</a> is a - general-purpose lisp-like language. I had began messing around in it with - the intention of creating a similar language to <a target="_blank" href= - "https://docs.racket-lang.org/scribble/">Scribble</a> a document - authoring language written in Racket. I made <a target="_blank" href= - "https://xkcd.com/1205/">the classic mistake</a> of trying to create a - productivity tool rather than just do the task I had originally intended - to do. It was interesting messing around in a lisp/functional language - which I haven't really used in a long time. I wish I had more - insightful things to say about it or project to share. Either way its - very worth the look.</p> + <p><a target="_blank" + href="https://racket-lang.org">Racket</a> is a general-purpose + lisp-like language. I had began messing around in it with the + intention of creating a similar language to <a target="_blank" + href="https://docs.racket-lang.org/scribble/">Scribble</a> a document + authoring language written in Racket. I made <a target="_blank" + href="https://xkcd.com/1205/">the classic mistake</a> of trying to + create a productivity tool rather than just do the task I had + originally intended to do. It was interesting messing around in a + lisp/functional language which I haven't really used in a long + time. I wish I had more insightful things to say about it or project + to share. Either way its very worth the look.</p> <h4>6502 -> 80x86 -> Commander X16</h4> <p>I wanted to play around with writing some assembly language programs. I looked back at the NES tutorials and tried writing some basic @@ -47,18 +53,22 @@ dug into. I made some decent progress in, relative to my 6502 learning. But this was in the summer, and I was preparing for what would turn into a pretty time consuming move. After my move, my puppy, and some youtube, - <a target="_blank" href="http://www.the8bitguy.com">The 8-Bit Guy</a> - made a video about his 8 Bit computer project <a target="_blank" href= - "http://www.commanderx16.com/X16/Ready.html">Commander X16</a> which I - started looking into. Like all the other assembly language projects they - never amounted to more than a few print statements or colors on the - screen. But X16 is something I am going to keep an eye on in 2020.<br> - <a target="_blank" href="https://eater.net/">Ben Eater</a> also started a - <a target="_blank" href="https://eater.net/6502">6502 video series</a> - which was amazing, and thankfully my learnings from earlier in the year - made the content very understandable. In summary, I spent a lot of 2019 - reading and watching a lot of content about assembly language - programming, but never really did anything with it.</p> + <a target="_blank" + href="http://www.the8bitguy.com">The 8-Bit Guy</a> made a video about + his 8 Bit computer project <a target="_blank" + href="http://www.commanderx16.com/X16/Ready.html">Commander X16</a> + which I started looking into. Like all the other assembly language + projects they never amounted to more than a few print statements or + colors on the screen. But X16 is something I am going to keep an eye + on in 2020.<br> + <a target="_blank" + href="https://eater.net/">Ben Eater</a> also started a <a target= + "_blank" + href="https://eater.net/6502">6502 video series</a> which was amazing, + and thankfully my learnings from earlier in the year made the content + very understandable. In summary, I spent a lot of 2019 reading and + watching a lot of content about assembly language programming, but + never really did anything with it.</p> <h4>Never ending C</h4> <p>Without much to really say on the topic, I kept writing small programs in C throughout the year. I spent a lot of time debugging and @@ -81,27 +91,30 @@ project "Tyur". This project spawned out of sci-fi story ideas that, of course, never went anywhere (due to my poor dialog writing, and writing in general) and my interest in language history. I have been - reading <a target="_blank" href= - "https://www.goodreads.com/book/show/1831667.The_Horse_the_Wheel_and_Language"> + reading <a target="_blank" + href= + "https://www.goodreads.com/book/show/1831667.The_Horse_the_Wheel_and_Language"> The Horse the Wheel and Language</a> by David W. Anthony, which goes into the history around Proto-Indo-European. It can be a bit dense so I had been reading it on and off, and during the off times also started - <a target="_blank" href= - "https://www.goodreads.com/book/show/18635317-the-origins-of-language">The - Origins of Language: A Slim Guide</a> by James R. Hurford, which tries to - provide insights on the evolutionary concept of language. Both of these - provided some fodder for the idea of creating my own <a target="_blank" - href="https://en.wikipedia.org/wiki/Constructed_language">conlang</a>. My - conlang is "Tyur" the language spoken by the Tyur people. This - process has really been a mix of world-building around the Tyur and some - fun fantasy mini story ideas similar to The Lord of the Rings and old - Warhammer Fantasy worlds. This however began my adventure down the rabbit - hole of trying to figure out how to create a font so I can write more - here about it. The documentation on this conlang is a mix of loose-leaf - folded in my bag that I scribble on when I get an idea. So figuring out a - proper way of building the alphabet and some root words to start a - dictionary are my current goals for the remainder of the year/ start of - 2020.</p> + <a target="_blank" + href= + "https://www.goodreads.com/book/show/18635317-the-origins-of-language">The + Origins of Language: A Slim Guide</a> by James R. Hurford, which tries + to provide insights on the evolutionary concept of language. Both of + these provided some fodder for the idea of creating my own <a target= + "_blank" + href="https://en.wikipedia.org/wiki/Constructed_language">conlang</a>. + My conlang is "Tyur" the language spoken by the Tyur people. + This process has really been a mix of world-building around the Tyur + and some fun fantasy mini story ideas similar to The Lord of the Rings + and old Warhammer Fantasy worlds. This however began my adventure down + the rabbit hole of trying to figure out how to create a font so I can + write more here about it. The documentation on this conlang is a mix + of loose-leaf folded in my bag that I scribble on when I get an idea. + So figuring out a proper way of building the alphabet and some root + words to start a dictionary are my current goals for the remainder of + the year/ start of 2020.</p> <h3>Closing</h3> <p>In closing, I think despite not writing much here, I messed around with some interesting languages this year, and hope I can hobby more in diff --git a/www/blog/2020-01-13/index.html b/www/blog/2020-01-13/index.html index 603f7ec..f0c2ce8 100644 --- a/www/blog/2020-01-13/index.html +++ b/www/blog/2020-01-13/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/blog/2020-12-17/index.html b/www/blog/2020-12-17/index.html index da48b5c..2bf9d1b 100644 --- a/www/blog/2020-12-17/index.html +++ b/www/blog/2020-12-17/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/blog/2021-01-05/index.html b/www/blog/2021-01-05/index.html index 50199c3..97b0261 100644 --- a/www/blog/2021-01-05/index.html +++ b/www/blog/2021-01-05/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/blog/2022-11-06/index.html b/www/blog/2022-11-06/index.html new file mode 100644 index 0000000..4a1983b --- /dev/null +++ b/www/blog/2022-11-06/index.html @@ -0,0 +1,237 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <title>senders.io - My Markdown -> HTML Setup</title> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> +</head> +<body> + <div id='header'> + <a class='title' + href='/'>senders.io</a> + <nav> + <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a rel= + "noopener noreferrer external" + target="_blank" + href="https://github.com/s3nd3r5">Github</a> + </nav> + </div> + <div id="body"> + <article> + <h2>My Markdown -> HTML Setup</h2> + <p>A common way I see a lot of people blog, especially micro-blog, is in + <a rel="external noopener noreferrer" + target="_blank" + href="https://daringfireball.net/projects/markdown/">markdown</a>.</p> + <figure> + <blockquote> + <p>Markdown is a lightweight markup language for creating formatted + text using a plain-text editor.</p> + </blockquote> + <figcaption> + <cite>— <a rel="external noopener noreferrer" + target="_blank" + href="https://en.wikipedia.org/wiki/Markdown">Wikipedia | + Markdown</a></cite> + </figcaption> + </figure> + <p>It built itself on-top of common syntax prevalent on the web and was + designed to be converted into simple HTML output. Since it leveraged + preexisting syntax it was easy for new users to pick up, and is now found + all over the web and applications.</p> + <p>Since I started this website, I had been writing each page by hand + using a few tools to facilitate that - and for a while I had been looking + for a good way to try out using markdown to generate some lighter pages + and these blogposts.</p> + <h3>Writing HTML by hand</h3> + <p>When it comes to blogging a lot of platforms offer WYSIWYG editor – + allowing users to write in rich-text that then gets converted into HTML + in the style of the platform. But for my case, since I self host this + website, I decided to stick to my roots and write PURE HTML instead.</p> + <p>HTML is fairly simple and easy once you get use to the basic structure + of the system. And since I’ve been working in HTML almost two decades + now, at the time it felt like the best solution to make a clean + website.</p> + <p>I briefly touched on my design process in <a href= + "/blog/2019-01-21/">2019-01-21 - First! A New Years Resolution</a> + outlining that I wanted to make a very lightweight and simple website. + And at the time I believed the best way to achieve this goal was to + carefully structure and craft my website’s HTML by hand.</p> + <p>This article is making the process sound far more difficult than it is + – it’s mostly just tedious.</p> + <pre><code><article> +<h2> Title </h2> +<p> + Some paragraph.... +</p> +<h3> +<p> some subsection </p> +</h3> +<p> more text </p> +... etc +</code></pre> + <p>Is essentially what the website looks like - you can view the source + of this page to see – it’s very simple HTML.</p> + <p>The benefit I found doing this, mostly leveraging <a href= + "www.html-tidy.org/">tidy</a>, allowed a very easy to edit codebase. And + by leveraging the existing tags and their properties I also attempted to + keep the styling to an absolute minimum. Using existing tags to enforce + the styling I desired.</p> + <p>Only for certain areas (tables, code, quotes) where readability is an + issue do I setup custom CSS.</p> + <p>Most of this process is actually what will continue to happen but the + actual writing process will be unobstructed by the tedium of writing + HTML.</p> + <h3>Micro-blogging in general</h3> + <p>At the time of writing this, I have no ported over any of my <a rel= + "external noopener noreferrer" + target="_blank" + href="https://gemini.circumlunar.space/">Gemini</a> micro-blogs. This + warrants a longer post, since I wrote consistently in gemini from + March 2021 through May 2021 – having only stopped due to a long move + leading to a lot of server downtime breaking the habit. My gemini + updated multiple days a week - mostly due to the extremely lightweight + and limited nature of the platform.</p> + <h4>Gemtext</h4> + <p><a rel="external noopener noreferrer" + target="_blank" + href="https://gemini.circumlunar.space/docs/gemtext.gmi">Gemtext</a> + was the gemini protocol’s standard MIME type. It was a basic markup + language that relied on line based syntax. It was purposefully as lean + as necessary because this was what was ACTUALLY being served to + clients – unlike Markdown which first needed to be converted to HTML, + gemtext was the actual text served and rendered on the viewers client. + You could customize the style of your client - but you could not, as + an author, dictate how your content would be viewed. This meant the + only aspects of your blog you had control over was the actual content + and it’s structure – which for a blog is really all you should care + about.</p> + <p>It’s syntax contained most of what I was actually using here already + from HTML:</p> + <ol> + <li>headings</li> + <li>paragraphs that were wrapped based on page-width</li> + <li>links</li> + <li>lists</li> + <li>quotes</li> + <li>preformatted-text / codeblocks</li> + </ol> + <p>Besides links - it also leveraged the same common syntaxes that + markdown did.</p> + <h4>Gemtext links</h4> + <p>From my brief time in the IRC and in geminispace in general - a lot of + the “recommendations” came from new users about providing in-line links. + The philosophy was that by forcing links to exist on their own line - + clients could configure how they wanted these to be seen and not have to + worry about links interfering with the text.</p> + <figure> + <blockquote> + <p>Like Gopher (and unlike Markdown or HTML), Gemtext only lets you + put links to other documents on a line of their own. You can’t make a + single word in the middle of a sentence into a link. This takes a + little getting used to, but it means that links are extremely easy to + find, and clients can style them differently (e.g. to make it clear + which protocol they use, or to display the domain name to help users + decide whether they want to follow them or not) without interfering + with the readability of your actual textual content.</p> + </blockquote> + <figcaption> + — <cite><a rel="external noopener noreferrer" + target="_blank" + href= + "https://gemini.circumlunar.space/docs/gemtext.gmi">gemini.circumlunar.space + – A quite introduction to “gemtext” markup | Links</a></cite> + </figcaption> + </figure> + <p>I felt that this provided a lot of useful limitations that removed a + huge barrier for me to actually write down ideas without feeling over + burdened. I also lurked in the IRC - as well as <a rel= + "external noopener noreferrer" + target="_blank" + href="https://github.com/s3nd3r5/java-gemini-server">implemented my + own gemini server</a>.</p> + <p>As a quick aside – the java server was a lot of fun! The protocol was + very simple to work with for basic gemtext. I felt the ultimate downside + was trying to build something for basic gemini capsule hosting (like I + was using for a decent chunk of my time with gemini) - and something for + developers to use as a base application server. At the time in 2021 a lot + of talk was happening on IRC of users starting to look to provide more + complex experiences via the protocol and I wanted a way for those + interactions to be built out in Java - since most were in Go or Python at + the time. This decision lead to me burning out due to difficulties + splitting those responsiblities easily - where you could host along side + your application - since I lacked the experience with more complex Gemini + capsule applications.</p> + <p>But it was a good experience and I got hands on experience with Certs, + Netty, and SNI - which actually came in handy at my job!</p> + <h3>Wasn’t this about Markdown?</h3> + <p>A lot of what I liked about Gemini I found missing when I returned to + the World Wide Web. Writing a new post was tedious and I actually had a + few drafts sitting unposted. They’re probably checked into my git at this + moment! So I thought - why not just use markdown and convert to HTML? + That’s what it’s built for - and I already designed my site to work with + minimal customization of raw HTML tags!</p> + <h3>How I use Markdown</h3> + <p>Firstly, this blogpost was written in Markdown (with minimal HTML + sprinkled in). Then I render the markdown into HTML using <a rel= + "external noopener noreferrer" + target="_blank" + href= + "https://www.pell.portland.or.us/~orc/Code/discount/">Discount</a>. + Frankly, I don’t know how I stumbled across this markdown parser - I + think it came pre-installed on my KDE Arch system because another KDE + program used it. But I liked it, and it seemed extensible enough for + my needs.</p> + <p>This would produce the “body” of my articles - and I could then + prepend and append the template-head and foot to my html output to form a + blog post/web page.</p> + <h4>Customizations</h4> + <p>After I generated the output file, I replaced some placeholders in the + templates via <code>sed</code> and then <code>tidy</code>’d the HTML. The + only other major issue was Discount had no way of appending any link + attributes – so for external links I had <code>sed</code> append the + <code>rel</code> and <code>target</code> attributes - which work off the + assumption they’re not there. A lot of my home-server scripts rely on + assumptions…</p> + <p>This is all bundled up in a simple script file so I can just supply a + few arguments and the full page is re-rendered on command.</p> + <h3>Two Sources of Truth</h3> + <p>In the sytem I devised the markdown files are really the “source of + truth” but you could argue that the HTML files hold equal weigh - as + they’re what you’re reading right now. The markdown is only useful if I + render it as HTML. There exist nginx extensions to serve markdown as HTML + so I store everything as markdown. I could also provide some heading + information to the markdowns to remove the command arguments and have on + boot it generate the .html files in place before launching the site… But + these are all nice ideas for a later date.</p> + <p>Ultimately, this is something I contribute to ocassionally - I don’t + need something too complicated. I just need to output some HTML a few + times a year. So if I manually publish the HTML each time - that’s likely + far more efficent then re-rendering.</p> + <h3>Learnings</h3> + <p>This is the first post that uses this - though I’ve converted a page + over to this already. But once I worked out the kinks and built a flow + that works for me - this made the writing process a LOT easier. Another + issue was that once I <code>tidy</code>’d the HTML file - it became + frustrating to edit, and I didn’t always re-tidy it. Because the output + is always <code>tidy</code>’d by the script - I can edit the raw markdown + as needed. And the script generally will always output the same file + (with whatever changes I made of course). This makes the editing and git + history a lot clearer.</p> + <p>I would recommend writing in markdown - or even trying out gemini - + you can host your gemini capsule on the web even! (Most gemini webpages + are gemini capsules converted). I am sure other “blog focused markups” + also exist too.</p> + </article> + <div id="footer"> + <i>November 06, 2022</i> + </div> + </div> +</body> +</html> diff --git a/www/blog/bread/index.html b/www/blog/bread/index.html index c2afcf7..f1ae9ac 100644 --- a/www/blog/bread/index.html +++ b/www/blog/bread/index.html @@ -2,15 +2,22 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Bread Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <link rel='stylesheet' type='text/css' href='/blog/bread/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <link rel='stylesheet' + type='text/css' + href='/blog/bread/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> @@ -125,12 +132,13 @@ done it for one boule loaf. And I want to try making two loafs from it.</p> <h2>Resources</h2> - <p><a target="_blank" href="https://bakewithjack.co.uk">Bake With - Jack's Youtube Channel</a> really helped me shape up my shaping up. - And the core of the pate+french bread recipe is based on that from - <a target="_blank" href= - "https://www.goodreads.com/book/show/39910.The_Bread_Baker_s_Apprentice">The - Bread Baker's Apprentice</a></p> + <p><a target="_blank" + href="https://bakewithjack.co.uk">Bake With Jack's Youtube + Channel</a> really helped me shape up my shaping up. And the core of + the pate+french bread recipe is based on that from <a target="_blank" + href= + "https://www.goodreads.com/book/show/39910.The_Bread_Baker_s_Apprentice">The + Bread Baker's Apprentice</a></p> </article> <div id='footer'> <i>Updated February 17, 2020</i> diff --git a/www/blog/index.html b/www/blog/index.html index 6a6fee1..f1a98c2 100644 --- a/www/blog/index.html +++ b/www/blog/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Homepage</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> @@ -21,6 +26,10 @@ <ol> <!-- {{ NEW-POST }} --> <li> + <a href='/blog/2022-11-06'>2022-11-06 - My Markdown -> HTML + Setup</a> + </li> + <li> <a href='/blog/2021-01-05'>2021-01-05 - Manjaro Followup - Breaking things!</a> </li> diff --git a/www/blog/movies/index.html b/www/blog/movies/index.html index 75dd290..be7251e 100644 --- a/www/blog/movies/index.html +++ b/www/blog/movies/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Blog</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/blog">Blog</a> <a href="https://github.com/s3nd3r5">Github</a> </nav> diff --git a/www/dice/index.html b/www/dice/index.html index 078e711..10dcd84 100644 --- a/www/dice/index.html +++ b/www/dice/index.html @@ -1,12 +1,18 @@ <!DOCTYPE html> <html> <head> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <meta charset="utf-8"> <title>senders.io - Dice Roller</title> - <link rel="stylesheet" type="text/css" href="/index.css"> - <link rel="stylesheet" type="text/css" href="./index.css"> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" + type="text/css" + href="/index.css"> + <link rel="stylesheet" + type="text/css" + href="./index.css"> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <article id="body"> @@ -14,11 +20,16 @@ <p>Set your number of dice and press roll. The output tables will display the number of count of each result rolled.</p> <div class='form'> - <input type='number' min="1" max="999" id="numdice" value="4"> - <button id='rollbtn' onclick="roll()">Roll</button> + <input type='number' + min="1" + max="999" + id="numdice" + value="4"> <button id='rollbtn' + onclick="roll()">Roll</button> </div> <h2>Roll Results</h2> - <table id='results' class='output'> + <table id='results' + class='output'> <thead> <tr> <th>Dice Face</th> @@ -28,7 +39,8 @@ <tbody id='resbody'></tbody> </table> <h2>Roll History</h2> - <table id='history' class='output'> + <table id='history' + class='output'> <thead> <tr> <th class='num'>#</th> diff --git a/www/error.html b/www/error.html index 1906ec6..4e3a784 100644 --- a/www/error.html +++ b/www/error.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - 404</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/index.css b/www/index.css index bf24d23..2fe966c 100644 --- a/www/index.css +++ b/www/index.css @@ -7,6 +7,20 @@ html,body { margin: 0; font-family: sans-serif; } #body table tr:nth-child(even) { background-color: #eee; } #body ul.compact { columns: 2; } +#body blockquote { + background-color: #eee; + border-radius: 2px; + padding: 4px; +} + +#body blockquote p { + font-style: italic; +} + +#body figure blockquote { + margin: 0; +} + #header { background-color: #060606; color: #67ff79; @@ -36,6 +50,11 @@ article .footer { font-size: 0.75em; float:right; } + +.footnote { + font-size: 0.75em; +} + code { font-family: monospace; background-color: #eee; @@ -60,4 +79,5 @@ code.inline { height: auto; } + #tutorial { margin: 2% } diff --git a/www/index.html b/www/index.html index 80740e8..c38ee67 100644 --- a/www/index.html +++ b/www/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Homepage</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> @@ -19,17 +24,38 @@ <article> <h1>Welcome to Senders' homepage</h1> <p>This is my personal site for my projects and other random stuff I feel - like uploading.</p> + like uploading. A lot of it comes in the form of micro-blogs and stream + of consciousness ramblings.</p> </article> <article id='homepage-post'> - <h2>Recent Post - 2021-01-05</h2> - <h3>Manjaro Follow-up - Breaking things!</h3> - <p>After years on Debian, running i3, I decided to try out a more - traditional Linux setup, and take a stab at gaming on Linux. I chose - Manjaro. And then I decided after some issues to remove my old Debian - partition and broke everything!</p> + <h2>Recent Post - 2022-11-06</h2> + <h3>My Markdown -> HTML Setup</h3> + <p>A common way I see a lot of people blog, especially micro-blog, is in + <a rel="external noopener noreferrer" + target="_blank" + href="https://daringfireball.net/projects/markdown/">markdown</a>.</p> + <figure> + <blockquote> + <p>Markdown is a lightweight markup language for creating formatted + text using a plain-text editor.</p> + </blockquote> + <figcaption> + <cite>— <a rel="external noopener noreferrer" + target="_blank" + href="https://en.wikipedia.org/wiki/Markdown">Wikipedia | + Markdown</a></cite> + </figcaption> + </figure> + <p>It built itself on-top of common syntax prevalent on the web and was + designed to be converted into simple HTML output. Since it leveraged + preexisting syntax it was easy for new users to pick up, and is now found + all over the web and applications.</p> + <p>Since I started this website, I had been writing each page by hand + using a few tools to facilitate that - and for a while I had been looking + for a good way to try out using markdown to generate some lighter pages + and these blogposts.</p> <div class='footer'> - <a href='/blog/2021-01-05'>Continue reading...</a> + <a href='/blog/2022-11-06'>Continue reading...</a> </div> </article> <article> @@ -42,6 +68,12 @@ <a href='/blog/bread/#2020-02-17'>Last updated - 2020-02-17</a> </div> </article> + <div class="footnote"> + <p>The site source is available at <a rel="noopener noreferrer external" + target="_blank" + href= + "https://git.senders.io/senders/senders-io">git.senders.io/senders/senders-io</a>.</p> + </div> </div> </body> </html> diff --git a/www/resume/index.html b/www/resume/index.html index 748f504..69b2452 100644 --- a/www/resume/index.html +++ b/www/resume/index.html @@ -2,14 +2,19 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <title>senders.io - Resume</title> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> </head> <body> <div id='header'> - <a class='title' href='/'>senders.io</a> + <a class='title' + href='/'>senders.io</a> <nav> <a href="/">Home</a> <a href="/blog">Blog</a> <a href= "https://github.com/s3nd3r5">Github</a> diff --git a/www/wc3.html b/www/wc3.html index 8525017..2e01c97 100644 --- a/www/wc3.html +++ b/www/wc3.html @@ -1,10 +1,14 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta name="generator" + content="HTML Tidy for HTML5 for Linux version 5.6.0"> <meta charset="utf-8"> - <link rel='stylesheet' type='text/css' href='/index.css'> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel='stylesheet' + type='text/css' + href='/index.css'> + <meta name="viewport" + content="width=device-width, initial-scale=1"> <title>Senders' Wishlist</title> <style> img { border: 2px solid #eee; } @@ -19,27 +23,27 @@ <h2 id='gamesetup'>Game Setup</h2> <h3 id='download'>Downloading the game</h3>Download the <code class= 'inline'>wc3.zip</code>. You can download it from <a href= - 'https://cdn.senders.io/blobs/wc3.zip' target= - '_blank'>https://cdn.senders.io/blobs/wc3.zip</a> + 'https://cdn.senders.io/blobs/wc3.zip' + target='_blank'>https://cdn.senders.io/blobs/wc3.zip</a> <h3 id='unzip'>Extract the game contents</h3>Unzip the game contents. If you can't unzip it you can download 7Zip from: <a href= 'https://www.7-zip.org/a/7z1900-x64.exe'>https://www.7-zip.org/</a>. <div> - <span class='scaled-half'><img src='/imgs/wc3/unzip.png' alt= - '7Zip Context Menu'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/unzip.png' + alt='7Zip Context Menu'></span><br> <i class='small'>Hover to Zoom</i> </div> <div> - <span class='scaled-half'><img src='/imgs/wc3/unzipped.png' alt= - 'Unzipped Folder Contents'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/unzipped.png' + alt='Unzipped Folder Contents'></span><br> <i class='small'>Hover to Zoom</i> </div> <h3 id='launch'>Launch the game</h3>Open the folder you unzipped into and open <code class='inline'>Warcarft III 1.31.1\x86_64\Warcraft III.exe</code>. This will launch the game. <div> - <span class='scaled-half'><img src='/imgs/wc3/launch.png' alt= - 'Game Launcher Exe'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/launch.png' + alt='Game Launcher Exe'></span><br> <i class='small'>Hover to Zoom</i> </div> <h3 id='cdkey'>Active your CD Key</h3>The game will prompt with a launcher @@ -47,8 +51,8 @@ CD Key can be found in <code class='inline'>CDKEYS.jpg</code> back in the main folder. <div> - <span class='scaled-half'><img src='/imgs/wc3/cdkey.png' alt= - 'CD Key file location'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/cdkey.png' + alt='CD Key file location'></span><br> <i class='small'>Hover to Zoom</i> </div> <h4>Warning! Do Not Update</h4>Once you launch the game it will prompt you to @@ -70,8 +74,8 @@ 'https://zerotier.atlassian.net/wiki/spaces/SD/pages/8454145/Getting+Started+with+ZeroTier'> Zero Tiers own setup guide</a> <div> - <span class='scaled-half'><img src='/imgs/wc3/create-network.png' alt= - 'Create a Network'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/create-network.png' + alt='Create a Network'></span><br> <i class='small'>Hover to Zoom</i> </div> <h4>Your Network ID</h4>Your network ID will be present on the network page. @@ -82,8 +86,8 @@ either adding them directly, or checking the authorize box. You can add them from the settings menu at the bottom: <div> - <span class='scaled-half'><img src='/imgs/wc3/add-remove.png' alt= - 'Add remove users section'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/add-remove.png' + alt='Add remove users section'></span><br> <i class='small'>Hover to Zoom</i> </div> <h3>Member | Download</h3><i>Note Admins must also join their own @@ -93,28 +97,28 @@ right click to perfom any of the actions listed below. (It's the icon that shares the icon from the website!) <div> - <span class='scaled-half'><img src='/imgs/wc3/tray.png' alt= - 'ZeroTier Tray Icon'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/tray.png' + alt='ZeroTier Tray Icon'></span><br> <i class='small'>Hover to Zoom</i> </div> <div> - <span class='scaled-half'><img src='/imgs/wc3/menu.png' alt= - 'ZeroTier Tray Menu'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/menu.png' + alt='ZeroTier Tray Menu'></span><br> <i class='small'>Hover to Zoom</i> </div>You can right click the tray-icon to open the menu. Here you will see your Node Id. Example: <code class='inline'>Node ID: 2d213b67f2</code> <h4>Member | Add network</h4>To join simply paste the network ID in the form. You can get the ID from the Network Admin. <div> - <span class='scaled-half'><img src='/imgs/wc3/join.png' alt= - 'Join prompt'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/join.png' + alt='Join prompt'></span><br> <i class='small'>Hover to Zoom</i> </div> <h4>Admin | Authorize the Member</h4>The Admin will then need your <strong>Node ID</strong> and will authorize you in their network settings. <div> - <span class='scaled-half'><img src='/imgs/wc3/members-view.png' alt= - 'Members View'></span><br> + <span class='scaled-half'><img src='/imgs/wc3/members-view.png' + alt='Members View'></span><br> <i class='small'>Hover to Zoom</i> </div> <h3>Member | Reboot</h3>Now that you've connected and setup I recommend @@ -125,8 +129,8 @@ checkbox here to connect/disconnect. Or click the network from the menu directly. <div> - <span class='scaled-half'><img src='/imgs/wc3/connection.png' alt= - 'Connection View'><br> + <span class='scaled-half'><img src='/imgs/wc3/connection.png' + alt='Connection View'><br> <i class='small'>Hover to Zoom</i></span> </div> <h3><span class='scaled-half'>Admin | Verify everyone is |