This repo contains the source for the OpenRA website at openra.net.
- Jekyll (GitHub Pages), Webserver, site generation
- jekyll-feed, Atom/rss feed
- jekyll-redirect-from, A couple redirects
- jQuery, JS utility
- jquery.hoverintent, Hover behavior in Server Browser
- popper, Popup behavior in Server Browser
- svgxuse, Polyfill to allow use of
<svg><use xlink:href="...without fear - flot, Only chart system capable of ingesting rrd data (at time of writing)
- lite-youtube-embed, Loads a lighter version YouTube's embed. Necessary for pageload optimization.
- Icomoon, To create and curate icon set
- Lighthouse, To ensure excellent site performance
To run this site, you'll first need to have Ruby installed. This is usually already installed on most systems (like Windows or MacOS), but it can be acquired from ruby-lang.org if it is not.
After that, you simply need to install the dependencies in /docs like so:
$ bundle install
Finally, get the webserver running with:
$ bundle exec jekyll serve
If you have any problems running this, or need further detail, check out the GitHub pages documentation.
Since this website was built to be hosted on GitHub pages, you'll want to familiarize yourself with Jekyll. Use the Jekyll docs for general things, and the GitHub pages docs to see platform specific things like "which jekyll plugins are available?".
Here are some workflows specific to this site:
News posts are markdown files with front matter, and can be found in /docs/news/_posts. Each news post should be a file like this:
---
kind: article
title: "The basics of Jekyll posts"
author: "Timothy Kempf"
created_at: 2021-02-06 17:26 +0000
disqus_id: "the-basics-of-jekyll-posts"
permalink: "/news/the-basics-of-jekyll-posts/"
---
*This* is a news post. Anything below the "front matter" above is [Jekyll style markdown](https://www.markdownguide.org/tools/jekyll/).
You can also just use HTML in the post body. In fact, you can mix it in with the markdown. This is generally used for things like image embeds:
You can write markdown, then just put html on the next line.
<figure>
<img src="/images/news/20200629-civilians.png" width="600" loading="lazy" alt="Red Alert civilians" />
<figcaption>The full range of Red Alert civilians will be available in the next OpenRA release thanks to details learned from the C&C Remastered Collection source code release.</figcaption>
</figure>
Then go right back to markdown.In addition, there's also a simple YouTube embed custom element. Please use this instead of normal YouTube embeds (for page performance reasons).
If you have a YouTube video to show, use this.
<lite-youtube videoid="g1Sq1Nr58hM"></lite-youtube>Release data is stored in docs/_data/releases.yaml, but don't edit that file. When a new release is added, simply run:
$ ruby scripts/generate-release-data.rb
You'll still need to add the modified file in a new commit, and push. Ideally we can figure out how to automate this with GitHub Actions.
This site uses an SVG "sprite" for icons (like the social media icons in the header and footer). They can be used in the HTML of any page like so:
<svg class="icon">
<use xlink:href="/images/icons/icons.svg#icon-external-link"></use>
</svg>This sprite is generated by the Icomoon webapp. To add icons to the set, simply:
- Load the
icomoon.jsonfile in the root of the repo - Add new icons
- Export them as SVG
- Take the
symbol-defs.svgfile and replace docs/images/icons/icons.svg with it
You should also export the icon set's JSON config and use that to replace icomoon.json
The server browser is a very intense JavaScript "class" that leverages jQuery for DOM manipulation. For minor changes, careful study of the source should be sufficient. For any major feature additions, migration to a micro app framework like Svelte should be considered.
The website is automatically regenerated and published when new commits are pushed to the master branch, via GitHub Pages. Website generation might not always be immediate, but it won't take forever either.