Add project showcase to homepage

CONTRIBUTING.md

@@ -1,5 +1,19 @@
-This project uses [JavaScript Standard Style](https://standardjs.com/).  You can run `npm run lint` to check for errors.
+# Contributing to licensezero.com
+
+## Licensing
 
 If you would like to submit a pull request, please be prepared to license your contributions under [Charity](https://licensezero.com/licenses/charity) terms, a modern evolution of licenses like MIT and the two-clause BSD license.
 
+## Where do I...?
+
+Add a project to showcase: [`./content/showcase.json`](./content/showcse.json)
+
+Update a mention on `/thanks`: [`./content/thanks.json`](./content/thanks.json)
+
+## Style
+
+This project uses [JavaScript Standard Style](https://standardjs.com/).  You can run `npm run lint` to check for errors.
+
+## Big Proposals
+
 Before starting work on a potentially large or significant patch, please consider [opening an issue](https://github.com/licensezero/licensezero.com/issues/new) to discuss work you would like to do.  Your input and contributions are _very_ welcome.  I want to make sure you have the latest information on plans for development, before you spend significant time.

content/showcase.json

@@ -0,0 +1,16 @@
+[
+  {
+    "name": "Caravaggio",
+    "url": "https://ramiel.gitlab.io/caravaggio/",
+    "image": "/caravaggio.jpg"
+  },
+  {
+    "name": "Statiq",
+    "url": "https://github.com/statiqdev/Framework",
+    "image": "/statiq.png"
+  },
+  {
+    "minimize": "diffs",
+    "note": "to add a new project, put it right above this object"
+  }
+]

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "ajv": "^6.10.2",
     "argon2": "^0.24.0",
+    "array-shuffle": "^1.0.1",
     "busboy": "^0.3.1",
     "commonform-commonmark": "^5.2.0",
     "commonform-html": "^3.2.0",

routes/homepage.js

@@ -1,10 +1,12 @@
 var INSTALL = require('../content/one-line-install.json')
+var arrayShuffle = require('array-shuffle')
 var escape = require('./escape')
 var footer = require('./partials/footer')
 var head = require('./partials/head')
 var header = require('./partials/header')
 var html = require('./html')
 var nav = require('./partials/nav')
+var showcase = require('../content/showcase').reverse().slice(1)
 
 var LICENSOR = [
   '# Set up for Anna, a developer in Texas.',
@@ -82,6 +84,9 @@ ${head(false, {
     <p class=lead>
       License Zero is a new way to support open software developers.
     </p>
+    <ul class=showcase>
+      ${arrayShuffle(showcase).slice(0, 4).map(renderShowcase).join('')}
+    </ul>
     <p>
       Contributors can choose from two new licenses,
       <a href=/licenses/parity>Parity</a> and
@@ -140,3 +145,16 @@ function formatSession (lines) {
     })
     .join('\n')
 }
+
+function renderShowcase (entry) {
+  return `
+  <li>
+    <a href="${escape(entry.url)}" target=_blank>
+      <img
+          src="${escape(entry.image)}"
+          title="${escape(entry.name)}"
+          alt="${escape(entry.name)}">
+    </a>
+  </li>
+  `.trim()
+}

routes/index.js

@@ -111,6 +111,10 @@ staticFile('licensee.gif')
 staticFile('doors.svg')
 staticFile('credits.txt')
 
+// Showcase Logos
+staticFile('caravaggio.jpg')
+staticFile('statiq.png')
+
 function staticFile (file) {
   var filePath = path.join(__dirname, '..', 'static', file)
   routes.set('/' + file, function (request, response) {

static/styles.css

@@ -10,7 +10,7 @@ body {
 header, main, footer, nav[role=navigation] {
   margin-left: auto;
   margin-right: auto;
-  max-width: 700px;
+  max-width: 40rem;
   text-align: left;
 }
 
@@ -276,3 +276,29 @@ p {
   margin-left: 60%;
   max-width: 40%;
 }
+
+.showcase {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: repeat(4, 1fr);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.showcase li {
+  height: 8rem;
+  margin: 1rem;
+  position: relative;
+  text-align: center;
+  width: 8rem;
+}
+
+.showcase img {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}