Skip to content

The source for the official OpenRA website.

License

Notifications You must be signed in to change notification settings

OpenRA/OpenRAWebsiteV3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The OpenRA Website

This repo contains the source for the OpenRA website at openra.net.

Technologies

Running the Site Locally

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.

Updating the Site

Use the Jekyll docs for general things.

Here are some workflows specific to this site:

Adding a News Post

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>

Updating Release Data

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.

SVG Icons

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.json file in the root of the repo
  • Add new icons
  • Export them as SVG
  • Take the symbol-defs.svg file 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

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.

Deploying Updates

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.