Skip to content

Latest commit

 

History

History
114 lines (83 loc) · 3.71 KB

CONTRIBUTING.md

File metadata and controls

114 lines (83 loc) · 3.71 KB
Raw

Contributing

Adding a new page

You can make a page about anything! Sometimes all you need is 2 colors and 3 lines of text.

For example, you'd like to make a page at https://redsummernight.github.io/trinket. In the root directory of the site, you add the file trinket/index.html.

Here's a template to get you started:

---
title: trinket
description: never leave home without it
date: 20XX-MM-DD
author: [matilda]
credits: |
  - "[Portrait of a Homebody](http://example.com/)", Anonymous
    (<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>)
references: |
  - "[How to Add Cool Blinky Text](http://example.com/)", Webby Expert
---
<link rel="stylesheet" href="style.css">
<p>Hello!</p>
<script>
(function() {
	'use strict';
	console.log('Hello!');
})();
</script>

The first part of your page, between the triple-dashed lines, is the front matter, where you define a few things:

  • title: This will be used in the <title> element, and in links to your page from the index.

  • description: The log line of your page, used in a <meta> element.

    <meta name="description" content="never leave home without it">

  • date: When your page was created. The index sorts pages by this date, most recent first.

  • author: Your (nick)name, used in a <meta> element.

    <meta name="author" content="matilda">

    This is only the simplest way to sign your work. You can put your name/website on the page itself (example), or in the credits section. Speaking of which...

  • credits: A list of credits and licenses in Markdown format, which end up on the site's credits page. If you're using others' artwork/text on your page, give them proper attribution here. Prefer all things Creative Commons.

  • references: A list of references and tutorial links in Markdown format, which also end up on the site's credits page.

The second part of your page is all yours!

  • HTML: you don't need to define <body> or <html> tags, just add what you need.

  • CSS: you can add CSS in <style>, or you can put it in a separate file.

    <link rel="stylesheet" href="style.css">

    This means there should be a file at trinket/style.css. If you prefer SCSS, you can name the file trinket/style.scss and Jekyll will compile it to trinket/style.css.

  • JS: you can use <script> tags.

Use tabs to indent your code.

Adding JS/CSS libraries

Any libraries we need can be added to common/lib using Bower. To recreate that folder, run this in the project root:

# npm install -g bower-installer
bower-installer --remove-install-path

Generally, we should keep things simple and avoid bringing in heavy artillery to do simple things.

Optimizing images

For PNGs:

find . -name '*.png' -print0 | xargs -0 -n1 -I{} sh -c 'zopflipng -m {} output.png; [ -f output.png ] && mv output.png {};'

For SVGs:

svgo test.svg -o test.min.svg --config .svgo.yml

If we need to keep the original images around without serving them on the site (e.g. SVGs with Inkscape metadata), we can put them in an assets/ directory to be ignored by Jekyll.