Initial commit

maeligg · Oct 15, 2018 · c417955 · c417955
commit c417955
Show file tree

Hide file tree

Showing 34 changed files with 5,853 additions and 0 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,34 @@
+const htmlmin = require("html-minifier");
+
+module.exports = function(eleventyConfig) {
+  // Pass through
+  eleventyConfig.addPassthroughCopy("assets");
+
+  // Minify
+  eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
+    if (outputPath.indexOf(".html") > -1) {
+      let minified = htmlmin.minify(content, {
+        useShortDoctype: true,
+        removeComments: true,
+        collapseWhitespace: true,
+        minifyCSS: true
+      });
+      return minified;
+    }
+    return content;
+  });
+
+  // Create and randomise "sites" collection
+  eleventyConfig.addCollection("sites", function(collection) {
+    console.log(typeof collection.getFilteredByGlob("./sites/*.md"));
+    return collection.getFilteredByGlob("./sites/*.md");
+  });
+
+  eleventyConfig.addPassthroughCopy("favicon.ico");
+
+  // Return config settings
+  return {
+    markdownTemplateEngine: "njk",
+    passthroughFileCopy: true
+  };
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+_site/
+node_modules/
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Console.❤</title>
+      <meta name="description" content="A collection of funny, quirky and lovely console messages from around the web">
+    <link rel="stylesheet" href="{{ '/assets/css/global.css' | url }}">
+</head>
+<body>
+    <div class="wrapper">
+        {% block content %}{% endblock %}
+    </div>
+</body> 
+</html>
diff --git a/_includes/layouts/card.njk b/_includes/layouts/card.njk
@@ -0,0 +1,8 @@
+{% block content %}
+    <li class="site">
+        <a href="{{site.data.url}}" target="_blank" class="site-url">
+            <div class="site-thumbnail-wrapper"><img src="assets/img/site-thumbnails/{{site.data.thumbnail}}" alt="{{site.data.title}}" class="site-thumbnail"></div>
+            <div class="site-title">{{site.data.title}}</div>
+        </a>
+    </li>
+{% endblock %}
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
@@ -0,0 +1,25 @@
+{% extends "layouts/base.njk" %}
+{% block content %}
+
+    <header class="header">
+        <hgroup>
+            <h1><img src="assets/img/title.svg" alt="console.❤" class="title-image"/></h1>
+            <h2 class="tagline">A collection of <img src="assets/img/funny.svg" alt="funny" class="tagline-first-word">, <img src="assets/img/quirky.svg" alt="quirky"> and <img src="assets/img/lovely.svg" alt="lovely"> console messages from around the web</h2>
+        </hgroup>
+    </header>
+    <main class="main">
+        <ul class="container">
+            <div class="contribute">{{ content | safe }}</div>
+            <ul class="sites">
+                {% for site in collections.sites %}
+                    {% include "layouts/card.njk" %}
+                {% endfor %}
+            </ul>
+        </div>
+    </main>
+    <footer class="footer">
+        <div class="container">
+            <p>Created by <a href="http://maelbrunet.com">Maël Brunet</a> - source code available on <a href="">GitHub</a>.</p>
+        </div>
+    </footer>
+{% endblock %}
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -0,0 +1,133 @@
+:root {
+  --dark-grey: #4f4f4f;
+  --grey: #bdbdbd;
+  --main: #6d81c5;
+  --bg: #eadbdb;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  background-color: var(--bg);
+  color: var(--dark-grey);
+}
+
+p {
+  margin-top: 0;
+}
+
+.header {
+  padding: 2rem;
+  background-color: var(--main);
+  text-align: center;
+}
+
+.title-image {
+  width: 500px;
+  max-width: 100%;
+}
+
+.tagline {
+  font-size: 1rem;
+  line-height: 2;
+  color: #fff;
+  font-weight: normal;
+}
+
+.tagline img {
+  position: relative;
+  top: 8px;
+  height: 1.5rem;
+  margin: 0 0.2rem;
+}
+
+@media (min-width: 600px) {
+  .tagline {
+    font-size: 1.5rem;
+  }
+
+  .tagline img {
+    top: 10px;
+    height: 2rem;
+  }
+}
+
+.tagline .tagline-first-word {
+  margin-right: 0;
+}
+
+.main {
+  padding: 2rem 0;
+}
+
+.container {
+  max-width: 850px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.contribute {
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.sites {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  grid-gap: 2rem;
+  padding: 0;
+  list-style: none;
+}
+
+.site-url {
+  height: 15rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border: 1px solid var(--grey);
+  border-radius: 10px;
+  background-color: #fff;
+  overflow: hidden;
+  color: #fff;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+}
+
+.site-url:hover,
+.site-url:focus {
+  border: 1px solid var(--main);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+}
+
+.site-thumbnail-wrapper {
+  position: relative;
+  height: 100%;
+  background-color: #fff;
+}
+
+.site-thumbnail {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  height: calc(100% - 1rem);
+  width: calc(100% - 1rem);
+  object-fit: contain;
+}
+
+.site-title {
+  padding: 1rem;
+  text-align: center;
+  background-color: var(--main);
+}
+
+.footer {
+  text-align: center;
+}
diff --git a/assets/img/funny.svg b/assets/img/funny.svg
diff --git a/assets/img/lovely.svg b/assets/img/lovely.svg
diff --git a/assets/img/quirky.svg b/assets/img/quirky.svg
diff --git a/assets/img/site-thumbnails/algolia.jpg b/assets/img/site-thumbnails/algolia.jpg
diff --git a/assets/img/site-thumbnails/chris-burnell.jpg b/assets/img/site-thumbnails/chris-burnell.jpg
diff --git a/assets/img/site-thumbnails/coursera.jpg b/assets/img/site-thumbnails/coursera.jpg
diff --git a/assets/img/site-thumbnails/eric-bailey.jpg b/assets/img/site-thumbnails/eric-bailey.jpg
diff --git a/assets/img/site-thumbnails/etsy.jpg b/assets/img/site-thumbnails/etsy.jpg
diff --git a/assets/img/site-thumbnails/paul-ford-what-is-code-bloomberg.jpg b/assets/img/site-thumbnails/paul-ford-what-is-code-bloomberg.jpg
diff --git a/assets/img/site-thumbnails/ponyfoo.jpg b/assets/img/site-thumbnails/ponyfoo.jpg
diff --git a/assets/img/site-thumbnails/sarah-drasner.jpg b/assets/img/site-thumbnails/sarah-drasner.jpg
diff --git a/assets/img/site-thumbnails/una-kravets.jpg b/assets/img/site-thumbnails/una-kravets.jpg
diff --git a/assets/img/tagline.svg b/assets/img/tagline.svg