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
- jekyll-github-metadata](https://github.com/jekyll/github-metadata), GitHub API queries for the download page and version metadata
- 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 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.
Use the Jekyll docs for general things.
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' | relative_url }}" 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>The release and playtest versions shown on the download page are controlled by the download_page_tags defined in _config.yml.
Leave playtest undefined to disable the playtest downloads when the release is newer.
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' | relative_url }}"></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 using a GitHub action. View the Actions tab to monitor build progress.