# OpenRAWebsiteV3

**Repository Path**: CastleJing/OpenRAWebsiteV3

## Basic Information

- **Project Name**: OpenRAWebsiteV3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-24
- **Last Updated**: 2022-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# The OpenRA Website

This repo contains the source for the OpenRA website at [openra.net](https://openra.net).

# Technologies

- [Jekyll](https://jekyllrb.com/) ([GitHub Pages](https://pages.github.com/)), Webserver, site generation
  - [jekyll-feed](https://github.com/jekyll/jekyll-feed), Atom/rss feed
  - [jekyll-redirect-from](https://github.com/jekyll/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](https://jquery.com/), JS utility
  - [jquery.hoverintent](https://briancherne.github.io/jquery-hoverIntent/), Hover behavior in Server Browser
  - [popper](https://popper.js.org/), Popup behavior in Server Browser
  - [svgxuse](https://github.com/Keyamoon/svgxuse), Polyfill to allow use of `<svg><use xlink:href="...` without fear
  - [flot](https://www.flotcharts.org/), Only chart system capable of ingesting rrd data (at time of writing)
  - [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed), Loads a lighter version YouTube's embed. Necessary for pageload optimization.
- [Icomoon](https://icomoon.io/), To create and curate icon set
- [Lighthouse](https://developers.google.com/web/tools/lighthouse/), To ensure excellent site performance

# 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](https://www.ruby-lang.org/en/) 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](https://docs.github.com/en/github/working-with-github-pages/testing-your-github-pages-site-locally-with-jekyll#building-your-site-locally).



# Updating the Site

Use the [Jekyll docs](https://jekyllrb.com/docs/) for general things.

Here are some workflows specific to this site:
- [Adding a News Post](#adding-a-news-post)
- [Updating Release Data](#updating-release-data)
- [SVG Icons](#svg-icons)
- [The Server Browser](#the-server-browser)
- [Deploying Updates](#deploying-updates)

## Adding a News Post

News posts are [markdown files with front matter](https://jekyllrb.com/docs/posts/), and can be found in /docs/news/_posts. Each news post should be a file like this:

```md
---
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:

```md
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](https://github.com/paulirish/lite-youtube-embed). Please use this instead of normal YouTube embeds (for page performance reasons).

```md
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:

```html
<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"](https://developer.mozilla.org/en-US/docs/Glossary/Constructor) 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](https://svelte.dev/) 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.