You can see progress on tasks at http://waffle.io/devopsdays/devopsdays-theme
devopsdays-theme is the Hugo theme for the DevOpsDays website.
While we are in development, your help is appreciated in identifying outstanding issues or defects. Please browse through the example site at https://dev.devopsdays.org, and if you idenfity something that is broken or missing, please log an issue. We may mark it as a duplicate, etc, but log anything you find that seems wrong or broken.
Bear in mind that this theme lives in a separate repo from the main devopsdays-web repo. No changes should be made to the themes/devopsdays-theme directory in devopsdays-web. If changes need to be made to the theme, they should be made in this repo, and a new version released, and the theme installed into devopsdays-web.
On the new homepage, upcoming events are listed with a square thumbnail. The image must be square and named logo-square.jpg in the static/events/YYYY-CITY/ directory. If this file does not exist, then the default logo is displayed instead.
When on a smaller screen, the event menu collapses to icons. These icons are named from ones available at Font Awesome and need to be added as optional parameters to the list of event nav elements for the event in its data file. If no icon is set, a plus sign will be displayed.
Example:
nav_elements:
- name: program
icon: "book"
- name: speakers
icon: "microphone"
- name: registration
icon: "pencil"
- name: sponsor
icon: "money"
- name: volunteer
icon: "smile-o"
- name: location
icon: "map-o"
- name: contact
icon: "envelope-o"
- name: conduct
icon: "handshake-o"
New elements are available via the list_organizers shortcode. These include a bio, a photo, and Facebook, Linkedin, GitHub, and website links (in addition to the existing Twitter links). Example usage:
team_members:
- name: "George Michael Bluth"
employer: "Fakeblock"
website: "http://www.fakebook.com"
image: "george-michael-bluth.jpg"
github: "fakeblock"
twitter: "thegeorgemichaelbluth"
bio: "At high school, George Michael is hardly known by any other students but gets good grades. He is paid to tutor Maeby, but instead, she plagiarizes from him. He briefly develops a crush on his teacher Beth Baerly because she paid attention to him. (\"Shock and Aww\") He lost the student council election, receiving only 3% of the votes. (\"The Immaculate Election\")<p>
George Michael's good grades continue through college. To get into Julliard, George Michael develops a fake woodblock app with his roommate P-Hound called [Fakeblock](http://arresteddevelopment.wikia.com/wiki/Fakeblock). One small lie causes the app to get blown out of proportion by Maeby who thinks it is privacy software."
Please note that quotation marks in the bio need to be escaped.
A new template is being created to generate a program page. A work in progress example can be seen at https://dev.devopsdays.org/events/2017-ponyville/program
This is an opt-in feature; the page will need to be set for the type of program in order to generate it.
An event can create a sharing image for use on social media (when the url is shared on Facebook, for instance). This image must be named sharing.jpg and located in the static/events/YYYY-CITY/ directory. It should be a minimum 1200 x 630px, and use ratio: 1.91:1.
Blog posts now support setting an "author" name in the frontmatter; for example, like this:
+++
Title = "Minneapolis 2016 in review"
Date = "2016-08-08T15:59:27-05:00"
Tags = ["2016"]
Author = "Bridget Kromhout"
+++
If an author is not specified, attempts to display it are ignored.
Working with a Hugo theme outside of a content-based repo has a few challenges. The devopsdays-theme repo contains a directory called exampleSite, which is what is used for testing theme development. The config.toml for the exampleSite contains the following value:
themesdir = "../.."
This tells Hugo where to look for its theme directories. This requires Hugo 0.18 or later.
You will need to run your watch command from the exampleSite directory; use something like this:
hugo server -w --baseUrl="http://localhost:1313"
Please submit your proposed changes as a Pull Request against this repository. If the PR will resolve an issue, please add Fixes #123 to the PR.
The design and layout can be found in here. Please refer to the Style Guide for all colors, fonts, and sizes of text elements, etc.
All page templates should make use of the layouts/_default/baseof.html file. This file contains all wrappers for the content. Anything within the {{- block "main" . }} {{- end -}} section is what will be displayed on a sub-template. Include a {{ define "main" }} block in your template to include what should be rendered.
All CSS must be generated with SCSS. The SCSS files are located in static/scss.
This is the file that imports all the other SCSS files, including Bootstrap, font-awesome (TBD; it seems that BS 4 brings this in for us), and the jquery oembed. It also imports our custom variables and any other customizations.
Use this to set any SCSS variables, or to over-ride any variables used by Bootstrap.
This is the only place you should declare custom SCSS or CSS code.
The devopsdays-theme repo has hooks into Travis, Appveyor, and Netlify. Currently, the Travis build doesn’t do very much (the intent is to add some testing using Casper.js for web testing, but no tests have been written). The Appveyor tests ensure that the site can build with Windows.
All changes are built by Netlify to https://dev.devopsdays.org
Peruse the gulpfile.js to see what is processed for the asset pipeline. Gulp is only called when changes are merged to master. Pull requests, and local changes will not trigger gulp.
To cut a new release, a tag must be created. This will trigger Travis to deploy a new release. Follow these steps:
- Update the
theme_versionkey intheme.tomlto the new version. - Make sure you have the
github_changelog_generatorgem installed on your system. - Inside the repository, run
github_changelog_generator --future-release "x.x.x. - Run
git add CHANGELOG.md - Add the appropriate tag to the latest commit. The tags are named by the SemVer version number of the theme, with only numbers (that is,
1.1.31vsv1.1.31) - Push to
origin master, including tags (if you don't know how to do this, ask!)
This is just a list of some POC urls to see examples: