Switch to Beautiful Jekyll theme and revamp site (#11)

* Switch to Beautiful Jekyll theme

This also downgrades Jekyll from 4.2 to 3.9.2

* Cleanup title and subtitle on homepage

* Remove custom footer and header

* Use large nav bar only on homepage

* Remove duplicate top-level heading from pages

* Move FAQ from repo wiki to site

* Redirect docs index page to homepage

Since the docs page are on the navbar, there's no need for the index.

* Cleanup mapping standards page

* Restructure mapping standards page

Examples are now in admonition-like blocks.

Explanatory text for each standard are now paragraphs outside of a list.

* Move notes/admonitions CSS to separate file

This allows their reuse across all other pages.

* Fix indents and trailing spaces on maven repo page

* Fix indents and spaces in review process page

* Fix trailing spaces in versions policy page

* Remove commented out CSS in about page

* Change to Orion's new GH username

* Separate icon whitespace for notes into new class

* Switch to 'page' layout for about page

* Add the Getting Started page

* Move Jekyll plugins to proper group

* Add README with basic instructions

* Fix livereload on Windows

This forces the eventmachine gem to use the non-platform-specific
1.2.7, instead of 1.2.7-x64-mingw.

* Add livereload option to README

* Add better homepage

Now we have a link to the getting started page, as well as three
'features' of Parchment mappings highlighted.

* Disable pagination

Since we hide the blog posts (for now), we don't need pagination.
Also, this is currently causing a warning since we have an index.md, not
an index.html which it needs.

* Center version badges table

* Elaborate on headings of version badges table

This also makes the table wider without using CSS properties, to take up
more of the whitespace around the table.

* Move style blocks to end of pages

* Remove unused media query from about page

* Simplify the getting started page

There are now step-by-step instructions for Forge and Fabric.

* Add jekyll-tabs

* Use tabs in getting started page

* Add Discord invite to navbar

* Remove numbering from headers in getting started

Since we only have two headers at that level, no sense to add numbering.

* Unify use of double quotes in Gemfile

* Add mention of lambda param stripping in FAQ

Co-authored-by: Alex O'Neill <[email protected]>

Co-authored-by: Alex O'Neill <[email protected]>

Author: sciwhiz12

Gemfile

@@ -7,31 +7,35 @@ source "https://rubygems.org"
 #
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
-gem "jekyll", "~> 4.2"
+gem "jekyll", "~> 3.9.2"
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
 # gem "github-pages", group: :jekyll_plugins
 # If you have any plugins, put them here!
 group :jekyll_plugins do
-    gem 'jekyll-paginate'
-    gem 'jekyll-feed'
-    gem 'jekyll-seo-tag'
-    gem 'jekyll-sitemap'
+    gem "jekyll-paginate"
+    gem "jekyll-feed"
+    gem "jekyll-seo-tag"
+    gem "jekyll-sitemap"
+    gem "jekyll-redirect-from"
+    gem "jekyll-mentions", "1.5.1"
+    gem "jekyll-watch"
+    gem "jekyll-tabs"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
 # and associated library.
 platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", "~> 1.2"
+  gem "tzinfo", "~> 2.0"
   gem "tzinfo-data"
 end
 
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 
 # Custom gems
-gem "jekyll-yamt"
-gem 'jekyll-watch'
 gem "webrick", "~> 1.7"
-gem "jekyll-redirect-from"
-gem "jekyll-mentions"
+gem "beautiful-jekyll-theme", "5.0.0"
+
+# Fix eventmachine on Windows (https://stackoverflow.com/a/65547010/14416954)
+gem "eventmachine", "1.2.7", git: "https://github.com/eventmachine/eventmachine.git", tag: "v1.2.7"

README.md

@@ -1,2 +1,33 @@
 # Website
+
 Contains the webpage that is displayed at parchmentmc.net and parchmentmc.org
+
+## Usage
+
+### Installation
+
+Install the Bundler and Jekyll gems by following the [installation instructions at Jekyll](https://jekyllrb.com/docs/installation/).
+
+Install the gems used by the website:
+
+```text
+bundle install
+```
+
+### Building
+
+For building the site, run the following command and find the site files under the `_site` folder.
+
+```text
+bundle exec jekyll build
+```
+
+### Development
+
+For site development, the following command builds and reloads the site on each change and serves the site through a local webserver.
+
+```text
+bundle exec jekyll serve --livereload
+```
+
+Note that changes to the `_config.yml` file requires a full restart of Jekyll (exit and rerun the above command).

_config.yml

@@ -1,53 +1,109 @@
+
+theme: beautiful-jekyll-theme
+
 title: ParchmentMC
-email: [email protected]
-description: >- # this means to ignore newlines until "baseurl:"
-  Open community-sourced parameter names and javadocs
-baseurl: "" # the subpath of your site, e.g. /blog
-url: ""
-twitter_username: mc_parchment
-github_username:  ParchmentMC
-author:
-  name: ParchmentMC
-
-# Build settings
-theme: jekyll-yamt
-
-#Plugins
-plugins: [jekyll-paginate, jekyll-feed, jekyll-seo-tag, jekyll-sitemap, jekyll-redirect-from, jekyll-mentions]
-
-#Pagination
-paginate: 3
-paginate_path: "/page:num/"
-
-#SEO
-twitter:
-  username: ParchmentMC
-  card: summary
-logo: /assets/img/logo.png
-social:
-  links: #List your social links here
-    - https://twitter.com/ParchmentMC
-    - https://www.github.com/ParchmentMC
-lang: en_US
-
-#Highlighter
+author: The ParchmentMC Team
+
+navbar-links:
+  Getting Started: "docs/getting-started"
+  Documentation:
+    - Mapping Standards: "docs/mappings"
+    - Maven Repository and Artifacts: "docs/maven"
+    - Review Process: "docs/review"
+    - Version Policy: "docs/versions"
+  FAQ: "faq"
+  Discord: https://discord.parchmentmc.org/
+  About: "about"
+
+avatar: "/assets/img/logo.png"
+round-avatar: false
+
+# If you want to have an image logo in the top-left corner instead of having the title of the website
+#title-img: /path/to/image
+
+social-network-links:
+  email: "[email protected]"
+  rss: true
+  github: ParchmentMC
+  twitter: ParchmentMC
+
+rss-description: Open community-sourced parameter names and javadocs
+
+excerpt_length: 50
+feed_show_excerpt: false
+feed_show_tags: true
+post_search: false
+navbar-var-length: false
+# The keywords to associate with your website, for SEO purposes
+#keywords: "my,list,of,keywords"
+
+# Colour values can be any valid CSS colour
+navbar-col: "#FFE4B9"
+navbar-text-col: "#404040"
+navbar-border-col: "#DDDDDD"
+page-col: "#FCFCFC"
+text-col: "#404040"
+link-col: "#008AFF"
+hover-col: "#0085A1"
+footer-col: "#FCFCFC"
+footer-text-col: "#777777"
+footer-link-col: "#404040"
+footer-hover-col: "#0085A1"
+
+# Alternatively, the navbar, footer, and page background can be set to an image
+#navbar-img: "/assets/img/bgimage.png"
+#footer-img: "/assets/img/bgimage.png"
+#page-img: "/assets/img/bgimage.png"
+
+# Suggest a colour for mobile browsers to use as the browser's theme. This is only supported by a few mobile browsers.
+#mobile-theme-col: "#0085A1"
+
+site-css:
+  - "/assets/css/notes.css"
+  - "/assets/css/tabs.css"
+site-js:
+  - "/assets/js/tabs.js"
+
+# Ruby Date Format to show dates of posts
+date_format: "%B %-d, %Y"
+
+timezone: "Etc/UTC"
+markdown: kramdown
+highlighter: rouge
+#paginate: 5 # Do not paginate, since that requires index.html but we use an index.md
+
 kramdown:
   input: GFM
-  syntax_highlighter: rouge
 
-  syntax_highlighter_opts:
-    css_class: 'highlight'
-    span:
-      line_numbers: false
-    block:
-      line_numbers: false
-      start_line: 1
+defaults:
+  -
+    scope:
+      path: ""
+      type: "posts"
+    values:
+      layout: "post"
+      nav-short: true
+  -
+    scope:
+      path: "" # any file that's not a post will be a "page" layout by default
+    values:
+      layout: "page"
+      nav-short: true
+
+# Exclude these files from production site
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - LICENSE
+  - README.md
 
-#Sass
-sass:
-  style: compressed
-  sourcemap: never
+plugins:
+  - jekyll-paginate
+  - jekyll-sitemap
+  - jekyll-redirect-from
+  - jekyll-mentions
+  - jekyll-tabs
 
 # Collections
 collections:
- - team_members # ParchmentMC team members
+  - team_members # ParchmentMC team members

_includes/footer.html

@@ -2,5 +2,5 @@
 name: OrionOnline
 role: System Admin
 teams: Toolchain
-github: OrionDevelopment
+github: marchermans
 ---

_includes/header.html

@@ -1,19 +1,32 @@
 ---
-layout: default
+layout: page
 title: About
 ---
 
 **ParchmentMC** is a community project to provide a cohesive set of mappings of parameter names and javadocs, to augment the official names released by Mojang.
 
 ## The Team
 
+<div class="team-container">
+{% for team_member in site.team_members %}
+  <div class="member">
+    {% capture avatar %}https://github.com/{{ team_member.github }}.png{% endcapture %}
+    {% if team_member.avatar %} {% assign avatar = team_member.avatar %} {% endif %}
+    <img class="avatar" src="{{ avatar }}">
+    <div class="name">
+    {% if team_member.github %} <a href="https://github.com/{{ team_member.github }}"> {% endif %}
+    {{ team_member.name }}
+    {% if team_member.github %} </a> {% endif %}
+    </div>
+    <div class="role">{{ team_member.role }}</div>
+    <div class="teams">{{ team_member.teams }}</div>
+  </div>
+{% endfor %}
+</div>
+
 <style>
 .team-container {
   margin: 1em auto;
-  /* display: grid; */
-  /* grid-template-columns: repeat(4, 1fr); */
-  /* column-gap: 1em; */
-  /* row-gap: 1em; */
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
@@ -53,23 +66,4 @@ title: About
   font-style: italic;
   font-size: 0.8em;
 }
-
-@media (max-width)
 </style>
-
-<div class="team-container">
-{% for team_member in site.team_members %}
-  <div class="member">
-    {% capture avatar %}https://github.com/{{ team_member.github }}.png{% endcapture %}
-    {% if team_member.avatar %} {% assign avatar = team_member.avatar %} {% endif %}
-    <img class="avatar" src="{{ avatar }}">
-    <div class="name">
-    {% if team_member.github %} <a href="https://github.com/{{ team_member.github }}"> {% endif %}
-    {{ team_member.name }}
-    {% if team_member.github %} </a> {% endif %}
-    </div>
-    <div class="role">{{ team_member.role }}</div>
-    <div class="teams">{{ team_member.teams }}</div>
-  </div>
-{% endfor %}
-</div>

_team_members/oriononline.md

@@ -0,0 +1,46 @@
+/* Admonition-like 'notes'
+
+Example usage:
+
+    > Some text inside the example note
+    {:.note.example-icon}
+
+*/
+
+.note { /* Base admonition class */
+    color: inherit;
+    font-style: inherit;
+    background-color: rgba(77, 170, 221, 0.1);
+    border-radius: 1rem;
+    padding: 1rem 1.5rem;
+    margin: 0.75rem 1.25rem;
+}
+
+.note > p:last-child { /* Remove margin if last tag is a paragraph */
+    margin-bottom: 0;
+}
+
+.icon { /* Base class for notes with an icon (see below) */
+    padding-left: 3rem;
+}
+
+/* Example icon (lightbulb) */
+
+.note-example {
+    position: relative; /* This is where the icon's absolute positioning anchors to */
+}
+
+.note-example::before {
+    display: inline-block;
+    position: absolute;
+    left: 0.85rem;
+    width: 1.5em;
+    height: 1.5em;
+    content: "";
+    background-color: currentColor;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px%3Bheight:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C8.13 2 5 5.13 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.13 15.87 2 12 2M14 13.58V16H13V11.41L14.71 9.71C15.1 9.32 15.1 8.68 14.71 8.29C14.32 7.9 13.68 7.9 13.29 8.29L12 9.59L10.71 8.29C10.32 7.9 9.68 7.9 9.29 8.29C8.9 8.68 8.9 9.32 9.29 9.71L11 11.41V16H10V13.58C8.23 12.81 7 11.05 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 11.05 15.77 12.81 14 13.58M9 20H15V21C15 21.55 14.55 22 14 22H10C9.45 22 9 21.55 9 21V20Z' /%3E%3C/svg%3E");
+}
+
+.note-example > p:first-of-type:not(:last-child) { /* For examples, the first paragraph is usually "Example:" */
+    margin-bottom: 1rem;
+}