add a website (#505)

close https://gthub.com/h5bp/Front-end-Developer-Interview-Questions/issues/448

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,8 +16,8 @@ Please delete options that are not relevant.
 
 # Checklist:
 
-- [ ] My prose follows the style guidelines of this project
+- [ ] My content follows the style guidelines of this project
-- [ ] I have performed a self-review of my own prose
+- [ ] I have performed a self-review of my own content
 
 Pull requests should be thought of as a conversation. There will be some back and forth when trying to get code merged into this or any other project. With all but the simplest changes you can and should expect that the maintainers of the project will request changes to your code. Please be aware of that and check in after you open your PR in order to get your code merged in cleanly. 
 

_site/assets/images/gradient.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="740px" viewBox="0 0 800 740" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3%" y1="3%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#835EFF" offset="0%"></stop>
+            <stop stop-color="#FF008D" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="x" fill="url(#linearGradient-1)">
+            <polygon id="Path" points="0 0 800 0 800 740 0 740"></polygon>
+        </g>
+    </g>
+</svg>

_site/sitemap.xml

@@ -0,0 +1,228 @@
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/about/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/coding-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/css-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/fun-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/general-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/html-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/javascript-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/network-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/performance-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/testing-questions/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/arabic/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/bulgarian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/burmese/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/chinese-traditional/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/chinese/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/croatian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/czech/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/danish/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/dutch/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/farsi/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/french/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/german/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/greek/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/hebrew/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/hungarian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/indonesian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/italian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/japanese/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/korean/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/korean/reference.html</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/latvian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/polish/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/portuguese/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/romanian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/russian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/serbian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/slovakian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/slovenian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/spanish/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/swedish/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/turkish/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/ukrainian/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+  
+  <url>
+    <loc>https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/vietnamese/</loc>
+    <lastmod>2018-11-26</lastmod>
+  </url>
+</urlset>

config/eleventy.config.js

@@ -0,0 +1,89 @@
+const { DateTime } = require('luxon')
+const CleanCSS = require('clean-css')
+const UglifyJS = require('uglify-es')
+const htmlmin = require('html-minifier')
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
+const markdown = require('markdown-it')({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typographer: true
+}).use(require('markdown-it-anchor'), {
+  level: [2],
+  permalink: true,
+  permalinkBefore: true,
+  permalinkSymbol: ''
+})
+
+module.exports = eleventyConfig => {
+  eleventyConfig.addPlugin(syntaxHighlight)
+
+  eleventyConfig.setLibrary('md', markdown)
+
+  eleventyConfig.addFilter('cssmin', code => {
+    return new CleanCSS({}).minify(code).styles
+  })
+
+  eleventyConfig.addFilter('jsmin', (code) => {
+    let minified = UglifyJS.minify(code)
+    if (minified.error) {
+      console.error('UglifyJS error: ', minified.error)
+      return code
+    }
+    return minified.code
+  })
+
+  // Minify HTML output
+  eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
+    if (outputPath.indexOf('.html') > -1) {
+      let minified = htmlmin.minify(content, {
+        useShortDoctype: true,
+        removeComments: true,
+        collapseWhitespace: true
+      })
+      return minified
+    }
+    return content
+  })
+
+  eleventyConfig.addFilter('markdownify', str => {
+    return markdown.render(str)
+  })
+
+  eleventyConfig.addFilter('markdownify_inline', str =>
+    markdown.renderInline(str)
+  )
+
+  eleventyConfig.addFilter('strip_html', str => {
+    return str.replace(/<script.*?<\/script>|<!--.*?-->|<style.*?<\/style>|<.*?>/g, '')
+  })
+
+  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+  eleventyConfig.addFilter('html_date_string', dateObj => {
+    return DateTime.fromJSDate(dateObj).toFormat('yyyy-LL-dd')
+  })
+
+  eleventyConfig.addFilter('github_permalink', str => {
+    return str.replace(/\.html/g, '')
+  })
+
+  eleventyConfig.addFilter('permalink', str => {
+    return str.replace(/\.html/g, '')
+  })
+
+  eleventyConfig.addPassthroughCopy('src/assets')
+
+  return {
+    templateFormats: ['njk', 'md', 'html'],
+    dir: {
+      input: 'src',
+      includes: '_includes',
+      data: '_data',
+      output: '_site'
+    },
+    markdownTemplateEngine: 'njk',
+    htmlTemplateEngine: 'njk',
+    dataTemplateEngine: 'njk',
+    passthroughFileCopy: true
+  }
+}

deploy.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+if [ -z "$1" ]
+then
+  echo "Which folder do you want to deploy to GitHub Pages?"
+  exit 1
+fi
+git subtree push --prefix $1 origin gh-pages

package.json

@@ -3,8 +3,11 @@
   "version": "1.0.0",
   "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.",
   "scripts": {
+    "build": "eleventy --config=config/eleventy.config.js",
+    "deploy": "git subtree push --prefix _site git@github.com:h5bp/Front-end-Developer-Interview-Questions.git gh-pages",
     "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate"
+    "contributors:generate": "all-contributors generate",
+    "start": "eleventy --config=config/eleventy.config.js --serve --port 9090"
   },
   "repository": {
     "type": "git",
@@ -19,12 +22,26 @@
     "questions"
   ],
   "author": "H5BP",
+  "contributors": [
+    {
+      "name": "Cezar Augusto",
+      "email": "boss@cezaraugusto.net"
+    }
+  ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues"
   },
   "homepage": "https://github.com/h5bp/Front-end-Developer-Interview-Questions#readme",
   "devDependencies": {
-    "all-contributors-cli": "^4.10.1"
+    "@11ty/eleventy": "^0.5.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^1.0.5",
+    "all-contributors-cli": "^4.10.1",
+    "clean-css": "^4.1.11",
+    "html-minifier": "^3.5.19",
+    "luxon": "^1.3.1",
+    "markdown-it": "^8.4.2",
+    "markdown-it-anchor": "^5.0.2",
+    "uglify-es": "^3.3.9"
   }
 }

src/404.njk

@@ -0,0 +1,16 @@
+---
+title: 404 - Page not found
+description: Think this is wrong? [Open an issue](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues/new)
+permalink: /404.html
+excludeFromSitemap: true
+---
+{% extends 'layouts/page.njk' %}
+
+{% set content %}
+{% endset %}
+
+{% block main %}
+  <div class="content">
+    {{ content | markdownify | safe }}
+  </div>
+{% endblock %}

src/_data/maintainers.json

@@ -0,0 +1,26 @@
+
+{
+  "all": [
+    {
+      "avatar": "https://avatars0.githubusercontent.com/u/4672033?v=4",
+      "name": "Cezar Augusto",
+      "website": "https://cezaraugusto.net",
+      "github": "https://github.com/cezaraugusto",
+      "twitter": "https://twitter.com/cezaraugusto"
+    },
+    {
+      "avatar": "https://avatars0.githubusercontent.com/u/361421?v=4",
+      "name": "Rob Larsen",
+      "website": "http://htmlcssjavascript.com/",
+      "github": "https://github.com/roblarsen",
+      "twitter": "https://twitter.com/robreact"
+    },
+    {
+      "avatar": "https://avatars1.githubusercontent.com/u/6904368?v=4",
+      "name": "Vasiliy Vanchuk",
+      "website": "https://bit.ly/vvscodeli",
+      "github": "https://github.com/vvscode",
+      "twitter": "https://twitter.com/vvscode"
+    }
+  ]
+}

src/_data/questions.json

@@ -0,0 +1,65 @@
+
+{
+  "all": [
+    {
+      "abbreviation": "Coding",
+      "title": "Coding Questions",
+      "url": "/questions/coding-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "CSS",
+      "title": "CSS Questions",
+      "url": "/questions/css-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "Fun",
+      "title": "Fun Questions",
+      "url": "/questions/fun-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "General",
+      "title": "General Questions",
+      "url": "/questions/general-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "HTML",
+      "title": "HTML Questions",
+      "url": "/questions/html-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "JavaScript",
+      "title": "JavaScript Questions",
+      "url": "/questions/javascript-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "A11y",
+      "title": "Accessibility Questions",
+      "url": "https://scottaohara.github.io/accessibility_interview_questions/",
+      "external": true
+    },
+    {
+      "abbreviation": "Network",
+      "title": "Network Questions",
+      "url": "/questions/network-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "Perfomance",
+      "title": "Perfomance Questions",
+      "url": "/questions/performance-questions/",
+      "external": false
+    },
+    {
+      "abbreviation": "Testing",
+      "title": "Testing Questions",
+      "url": "/questions/testing-questions/",
+      "external": false
+    }
+  ]
+}

src/_data/site.json

@@ -0,0 +1,9 @@
+
+{
+  "title": "Front-end Job Interview Questions",
+  "url": "https://h5bp.github.io/Front-end-Developer-Interview-Questions",
+  "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.",
+  "keywords": "front-end, interview questions, css questions, js questions, html questions, performance questions, interview test",
+  "language": "en_US",
+  "twitter": "@h5bp"
+}

src/_data/translations.json

@@ -0,0 +1,133 @@
+
+{
+  "all": [
+    {
+      "language": "Arabic",
+      "url": "arabic/"
+    },
+    {
+      "language": "Bulgarian",
+      "url": "bulgarian/"
+    },
+    {
+      "language": "Burmese",
+      "url": "burmese/"
+    },
+    {
+      "language": "Chinese",
+      "url": "chinese/"
+    },
+    {
+      "language": "Chinese-Traditional",
+      "url": "chinese-traditional/"
+    },
+    {
+      "language": "Croatian",
+      "url": "croatian/"
+    },
+    {
+      "language": "Czech",
+      "url": "czech/"
+    },
+    {
+      "language": "Danish",
+      "url": "danish/"
+    },
+    {
+      "language": "Dutch",
+      "url": "dutch/"
+    },
+    {
+      "language": "Farsi",
+      "url": "farsi/"
+    },
+    {
+      "language": "French",
+      "url": "french/"
+    },
+    {
+      "language": "German",
+      "url": "german/"
+    },
+    {
+      "language": "Hebrew",
+      "url": "hebrew/"
+    },
+    {
+      "language": "Greek",
+      "url": "greek/"
+    },
+    {
+      "language": "Hungarian",
+      "url": "hungarian/"
+    },
+    {
+      "language": "Indonesian",
+      "url": "indonesian/"
+    },
+    {
+      "language": "Italian",
+      "url": "italian/"
+    },
+    {
+      "language": "Japanese",
+      "url": "japanese/"
+    },
+    {
+      "language": "Korean",
+      "url": "korean/"
+    },
+    {
+      "language": "Latvian",
+      "url": "latvian/"
+    },
+    {
+      "language": "Polish",
+      "url": "polish/"
+    },
+    {
+      "language": "Portuguese",
+      "url": "portuguese/"
+    },
+    {
+      "language": "Romanian",
+      "url": "romanian/"
+    },
+    {
+      "language": "Russian",
+      "url": "russian/"
+    },
+    {
+      "language": "Serbian",
+      "url": "serbian/"
+    },
+    {
+      "language": "Slovakian",
+      "url": "slovakian/"
+    },
+    {
+      "language": "Slovenian",
+      "url": "slovenian/"
+    },
+    {
+      "language": "Spanish",
+      "url": "spanish/"
+    },
+    {
+      "language": "Swedish",
+      "url": "swedish/"
+    },
+    {
+      "language": "Turkish",
+      "url": "turkish/"
+    },
+    {
+      "language": "Ukrainian",
+      "url": "ukrainian/"
+    },
+    {
+      "language": "Vietnamese",
+      "url": "vietnamese/"
+    }
+  ]
+}

src/_includes/assets/css/content.css

@@ -0,0 +1,204 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-family-body);
+  font-weight: 400;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  color: var(--color-text);
+}
+
+section + section {
+  padding-top: 2rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-heading);
+  color: var(--color-heading);
+  font-style: normal;
+  line-height: 1.2;
+  font-weight: 600;
+}
+
+section + section {
+  padding-top: 2rem;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  color: var(--color-secondary);
+  transition: color ease-out var(--transition-duration);
+}
+
+a:hover:not(.skip-link),
+a:focus:not(.skip-link) {
+  color: var(--color-primary);
+}
+
+a[rel~='external'] {
+  text-decoration: overline;
+}
+
+ul:not(.navigation):not(.inline-list) {
+  list-style: none;
+}
+
+ul:not(.navigation):not(.inline-list) li::before {
+  content: "\25A0";
+  color: var(--color-primary);
+  font-weight: bold;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
+li {
+  margin-bottom: 0.6rem;
+}
+
+strong,
+b {
+  font-weight: 600;
+}
+
+time {
+  display: inline-block;
+  color: var(--color-gray-70);
+}
+
+[tabindex='-1'] {
+  outline: 0;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  border-radius: var(--border-radius-default);
+}
+
+code {
+  font-family: var(--font-family-code);
+  color: var(--color-code);
+  font-style: normal;
+  font-size: 1rem;
+}
+
+blockquote:not([class]) {
+  padding-left: 1rem;
+  margin-left: -1rem;
+  border-left: 2px solid var(--color-primary);
+  color: var(--color-gray-70);
+  font-style: italic;
+}
+
+code[class*=language-],
+pre[class*=language-] {
+  font-size: 0.9rem;
+  font-style: normal;
+}
+
+p + pre[class*=language-] {
+  margin-bottom: 1.8rem;
+}
+
+mark {
+  color: var(--color-highlight);
+  background-color: transparent;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd + dt {
+  padding-top: 0.5rem;
+}
+
+abbr[title], acronym[title] {
+  text-decoration: overline;
+  background: var(--color-gray-opacity);
+  border: 1px solid var(--color-gray-opacity);
+  cursor: help;
+}
+
+.container {
+  max-width: 54rem;
+  padding: 3rem 4rem 4rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.content li:not(:last-of-type) {
+  margin-bottom: .5rem;
+}
+
+.content h2 {
+  max-width: 33rem;
+}
+
+.content > *:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
+.content *:not(hr) + h2,
+.content *:not(hr) + h3 {
+  padding-top: 1rem;
+}
+
+.content ul:not(.inline-list),
+.content ol:not(.inline-list) {
+  padding-left: 1.2rem;
+}
+
+.content-simple li:not(:last-of-type) {
+  margin-bottom: 0.5rem;
+}
+
+.content-edit {
+  text-align: right;
+  margin-top: 2rem;
+}
+
+.inline-list {
+  padding: 0;
+  list-style: none;
+}
+
+.inline-list li {
+  padding: 0;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.inline-list li::before {
+  content: '';
+  margin-left: 0;
+}
+
+.inline-list li img {
+  display: block;
+  margin: auto;
+  margin-bottom: 0.6rem;
+}
+
+.inline-list li a {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.15rem;
+}
+
+.avatar {
+  max-width: 12rem;
+}

src/_includes/assets/css/defaults.css

@@ -0,0 +1,17 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  outline-color: var(--color-primary);
+}
+
+::selection {
+  background: var(--color-primary);
+  color: var(--background-default);
+}
+
+::-moz-selection {
+  background: var(--color-primary);
+  color: var(--background-default);
+}
+

src/_includes/assets/css/footer.css

@@ -0,0 +1,7 @@
+.footer {
+  padding-top: 3rem;
+}
+
+.footer-text {
+  font-size: 0.8rem;
+}

src/_includes/assets/css/header.css

@@ -0,0 +1,71 @@
+.topbar {
+  width: 100%;
+  height: 0.18rem;
+  background: var(--color-gradient);
+}
+
+.skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-primary);
+  color: #fff;
+  text-decoration: none;
+  transform: translateY(-100%);
+}
+
+.skip-link:focus {
+  transform: none;
+}
+
+.header {
+  margin-bottom: 2rem;
+}
+
+.header-big-title {
+  font-size: 6.9rem;
+  line-height: 1.06;
+  margin: 2.1rem 0;
+  color: var(--color-primary);
+  word-break: break-word;
+}
+
+@supports (mix-blend-mode: lighten) {
+  .header-big-title {
+    display: inline-block;
+    position: relative;
+    color: #000;
+    background: #fff;
+    mix-blend-mode: multiply;
+  }
+  .header-big-title::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: url('/assets/images/gradient.svg');
+    pointer-events: none;
+  }
+  .header-big-title::before {
+    mix-blend-mode: screen;
+  }
+}
+
+.header-heading {
+  font-size: 2.3rem;
+  text-transform: uppercase;
+}
+
+.header-big-description {
+  font-size: 1.8rem;
+  line-height: 1.4;
+  padding: 1rem 0;
+}
+
+.header-description {
+  padding-top: 1rem;
+}

src/_includes/assets/css/navigation.css

@@ -0,0 +1,24 @@
+.nav {
+  padding: 1rem 0;
+  margin-bottom: 1rem;
+}
+
+.navigation {
+  list-style: none;
+  display: flex;
+  font-size: 1rem;
+}
+
+.navigation-item-emoji {
+  margin-right: 0.8rem;
+}
+
+.navigation-item-emoji a {
+  text-decoration: none;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.navigation-item:not(:last-of-type) {
+  margin-right: 0.8rem;
+}

src/_includes/assets/css/prism.css

@@ -0,0 +1,146 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+   color: #c5c8c6;
+   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+     font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+   direction: ltr;
+   text-align: left;
+   white-space: pre;
+   word-spacing: normal;
+   word-break: normal;
+   line-height: 1.5;
+
+   -moz-tab-size: 4;
+   -o-tab-size: 4;
+   tab-size: 4;
+
+   -webkit-hyphens: none;
+   -moz-hyphens: none;
+   -ms-hyphens: none;
+   hyphens: none;
+ }
+
+ /* Code blocks */
+ pre[class*="language-"] {
+   padding: 1em;
+   margin: .5em 0;
+   overflow: auto;
+   border-radius: 0.3em;
+ }
+
+ :not(pre) > code[class*="language-"],
+ pre[class*="language-"] {
+   background: #1d1f21;
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*="language-"] {
+   padding: .1em;
+   border-radius: .3em;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+   color: #7C7C7C;
+ }
+
+ .token.punctuation {
+   color: #c5c8c6;
+ }
+
+ .namespace {
+   opacity: .7;
+ }
+
+ .token.property,
+ .token.keyword,
+ .token.tag {
+     color: #96CBFE;
+ }
+
+ .token.class-name {
+   color: #FFFFB6;
+   text-decoration: underline;
+ }
+
+ .token.boolean,
+ .token.constant {
+     color: #99CC99;
+ }
+
+ .token.symbol,
+ .token.deleted {
+   color: #f92672;
+ }
+
+ .token.number {
+   color: #FF73FD;
+ }
+
+ .token.selector,
+ .token.attr-name,
+ .token.string,
+ .token.char,
+ .token.builtin,
+ .token.inserted {
+   color: #A8FF60;
+ }
+
+ .token.variable {
+   color: #C6C5FE;
+ }
+
+ .token.operator {
+     color: #EDEDED;
+ }
+
+ .token.entity {
+     color: #FFFFB6;
+     /* text-decoration: underline; */
+ }
+
+ .token.url {
+     color: #96CBFE;
+ }
+
+ .language-css .token.string,
+ .style .token.string {
+   color: #87C38A;
+ }
+
+ .token.atrule,
+ .token.attr-value {
+     color: #F9EE98;
+ }
+
+ .token.function {
+   color: #DAD085;
+ }
+
+ .token.regex {
+     color: #E9C062;
+ }
+
+ .token.important {
+   color: #fd971f;
+ }
+
+ .token.important,
+ .token.bold {
+   font-weight: bold;
+ }
+ .token.italic {
+   font-style: italic;
+ }
+
+ .token.entity {
+   cursor: help;
+ }

src/_includes/assets/css/variables.css

@@ -0,0 +1,17 @@
+:root {
+  --font-family-heading: sans-serif;
+  --font-family-body: Georgia, serif;
+  --font-family-code: Menlo, Monaco, 'Courier New', monospace;
+  --color-primary: #835EFF;
+  --color-secondary: #FF008D;
+  --color-safe: #8338EC;
+  --color-gradient: linear-gradient(to right, var(--color-primary), var(--color-secondary));
+  --color-highlight: var(--color-primary);
+  --color-gray-opacity: rgba(39,39,39,0.04);
+  --color-heading: #23231A;
+  --color-text: #23231A;
+  --background-default: #F9F9F9;
+  --border-radius-default: 5px;
+  --box-shadow-default: 0 2rem 4rem rgba(0,0,0,.15);
+  --transition-duration: 0.27s;
+}

src/_includes/assets/js/app.js

@@ -0,0 +1,4 @@
+console.log(
+  '%cA black belt is a white belt that didn\'t quit.',
+  'color: #fff; font-size: 80px; text-shadow: 1px 1px 1px #000; font-family: serif;'
+)

src/_includes/components/footer.njk

@@ -0,0 +1,11 @@
+<footer class="footer">
+  <p class="footer-text">
+    Copyright (c) 2012 - 2018. Contributors to
+    <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions">Front-end-Developer-Interview-Questions.</a><br>
+    This project is maintained by
+    {% for person in maintainers.all %}
+      <a href="{{ person.github }}" target="_blank" rel="noreferrer noopener">{{ person.name }}</a>{% if not loop.last %}{% if loop.index != loop.length - 1 %}, {% else %} and {% endif %}{% endif %}
+    {% endfor %}.<br>
+    Curious about the project? <a href="/about/">Read more about here</a>.
+  </p>
+</footer>

src/_includes/components/navigation.njk

@@ -0,0 +1,15 @@
+<nav class="nav">
+  <ul class="navigation">
+    <li class="navigation-item"><span class="navigation-anchor">Questions:</span></li>
+    {% for entry in questions.all %}
+      {% if not entry.external %}
+      <li class="navigation-item"><a class="navigation-anchor" href="{{ entry.url }}" title="{{ entry.title }}">{{ entry.abbreviation }}</a></li>
+      {% else %}
+      <li class="navigation-item"><a rel="external noreferrer noopener" target="_blank" class="navigation-anchor" href="{{ entry.url }}" title="{{ entry.title }} (external link)">{{ entry.abbreviation }}</a></li>
+      {% endif %}
+    {% endfor %}
+    <li class="navigation-item">|</li>
+    <li class="navigation-item-emoji"><a class="navigation-anchor" href="/" title="Home">🏠</a></li>
+    <li class="navigation-item-emoji"><a class="navigation-anchor" href="/translations" title="Translations">🌐</a></li>
+  </ul>
+</nav>

src/_includes/layouts/default.njk

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="https://schema.org/Article">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% if title and page.fileSlug != '' %}{{ title }} ★ {% endif %}{{ site.title }}</title>
+  <meta name="description" content="{% if description %}{{ description | markdownify_inline | strip_html }}{% else %}{{ site.description }}{% endif %}">
+  <meta name="keywords" content="{{ site.keywords }}">
+  <meta name="author" content="{{ site.title }}">
+  <!-- schema.org -->
+  <meta itemprop="author" content="{{ site.title }}">
+  <meta itemprop="name" content="{% if title and page.fileSlug != '' %}{{ title }} ★ {% endif %}{{ site.title }}">
+  <meta itemprop="description" content="{% if description %}{{ description | markdownify_inline | strip_html }}{% else %}{{ site.description }}{% endif %}">
+  <meta itemprop="image" content="{{ site.url }}/assets/images/og-image.png">
+  <!-- facebook/open graph -->
+  <meta property="og:title" content="{% if title and page.fileSlug != '' %}{{ title }} ★ {% endif %}{{ site.title }}">
+  <meta property="og:description" content="{{ site.description }}">
+  <meta property="og:url" content="{{ site.url }}{{ page.url | permalink }}">
+  <meta property="og:site_name" content="{{ site.title }}">
+  <meta property="og:image" content="{{ site.url }}/assets/images/og-image.png">
+  <meta property="og:image:secure_url" content="/assets/images/og-image.png">
+  <meta property="og:type" content="website">
+  <meta property="og:locale" content="{{site.language}}">
+  <!-- twitter -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="{% if title and page.fileSlug != '' %}{{ title }} ★ {% endif %}{{ site.title }}">
+  <meta name="twitter:description" content="{{ site.description }}">
+  <meta name="twitter:site" content="{{ site.twitter }}">
+  <meta name="twitter:image" content="{{ site.url }}/assets/images/og-image.png">
+  <meta name="twitter:creator" content="{{ site.twitter }}">
+  <!-- icons -->
+  <link type="image/png" rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png">
+  <link type="image/png" sizes="32x32" rel="icon" href="/assets/images/favicon-32x32.png">
+  <link type="image/png" sizes="16x16" rel="icon" href="/assets/images/favicon-32x32.png">
+  <link type="image/png" color="#181818" rel="mask-icon" href="/assets/images/favicon-96x96.png">
+  <!-- android -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <!-- robots and humans -->
+  <meta name="robots" content="index,follow">
+  <!-- inlined css -->
+  {% set css %}
+    {% include "assets/css/prism.css" %}
+    {% include "assets/css/variables.css" %}
+    {% include "assets/css/defaults.css" %}
+    {% include "assets/css/navigation.css" %}
+    {% include "assets/css/header.css" %}
+    {% include "assets/css/content.css" %}
+    {% include "assets/css/footer.css" %}
+  {% endset %}
+  <style>{{ css | cssmin | safe }}</style>
+</head>
+<body>
+  <div class="topbar"></div>
+  <div class="container">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+    {% include "components/navigation.njk" %}
+    <main id="main-content" tabindex="-1">
+      {% block pageTop %}{% endblock %}
+      {% block main %}{% endblock %}
+    </main>
+    {% include "components/footer.njk" %}
+  </div>
+  {% set js %}{% include "assets/js/app.js" %}{% endset %}
+  <script>{{ js | jsmin | safe }}</script>
+</body>
+</html>

src/_includes/layouts/page.njk

@@ -0,0 +1,25 @@
+{% extends 'layouts/default.njk' %}
+
+{% block pageTop %}
+  <header class="header">
+    {% if heading and heading === true %}
+      <h1 class="header-heading">{{ title }}</h1>
+    {% else %}
+      <h1 class="header-big-title">{{ title }}</h1>
+    {% endif %}
+    {% if description %}
+      <p class="header-description">{{ description | markdownify_inline | safe }}</p>
+    {% endif %}
+  </header>
+{% endblock %}
+
+{% block main %}
+  <div class="content">
+    {{ content | safe }}
+  </div>
+  <div class="content-edit">
+    <a rel="external noreferrer noopener" target="_blank" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src{{ permalink | github_permalink }}">
+      Edit this page
+    </a>
+  </div>
+{% endblock %}

src/about.njk

@@ -0,0 +1,54 @@
+---
+title: About
+permalink: /about/index.html
+---
+{% extends 'layouts/page.njk' %}
+
+{% set header %}
+## This Project 🤳
+
+This file contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.
+
+**Note:** Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would.
+
+## Contribute 🕶
+
+Saw something wrong? Want to add a question? suggest something? Check our [contributing guidelines](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/.github/CONTRIBUTING.md), open a pull-request or [fill a bug](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues/new).
+
+## Maintainers 🦄
+{% endset %}
+
+{% set table %}
+<ul class="inline-list">
+  {% for person in maintainers.all %}
+  <li style="width: {{ 100 / loop.length }}%">
+    <img class="avatar" src="{{ person.avatar }}">
+    <a href="{{ person.website }}" target="_blank" rel="noreferrer noopener">{{ person.name }}</a>
+    <a aria-label="Github" href="{{ person.github }}">
+      <svg focusable="false" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#24292E" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
+    </a>
+    <a aria-label="Twitter" href="{{ person.twitter }}">
+      <svg focusable="false" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#55ACEE" d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"></path></svg>
+    </a>
+  </li>
+  {% endfor %}
+</ul>
+{% endset %}
+
+{% set footer %}
+It has since been active thanks to these [incredibly wonderful people](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTORS.md).
+
+Looking to contribute? Check our [Contributing guide](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/.github/CONTRIBUTING.md) to get started!
+
+## Honorable Mentions 🎠
+
+This project started in 2009 as a collaboration of [@paul_irish](https://twitter.com/paul_irish) [@bentruyman](https://twitter.com/bentruyman) [@cowboy](https://twitter.com/cowboy) [@ajpiano](https://twitter.com/ajpiano)  [@SlexAxton](https://twitter.com/slexaxton) [@boazsender](https://twitter.com/boazsender) [@miketaylr](https://twitter.com/miketaylr) [@vladikoff](https://twitter.com/vladikoff) [@gf3](https://twitter.com/gf3) [@jon_neal](https://twitter.com/jon_neal) [@sambreed](https://twitter.com/sambreed) and [@iansym](https://twitter.com/iansym).
+{% endset %}
+
+{% block main %}
+  <div class="content">
+    {{ header | markdownify | safe }}
+    {{ table | safe }}
+    {{ footer | markdownify | safe }}
+  </div>
+{% endblock %}

src/assets/images/gradient.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800px" height="740px" viewBox="0 0 800 740" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="3%" y1="3%" x2="100%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#835EFF" offset="0%"></stop>
+            <stop stop-color="#FF008D" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="x" fill="url(#linearGradient-1)">
+            <polygon id="Path" points="0 0 800 0 800 740 0 740"></polygon>
+        </g>
+    </g>
+</svg>

src/index.njk

@@ -0,0 +1,20 @@
+---
+title: Front-end Job Interview Questions
+permalink: /index.html
+---
+{% extends 'layouts/default.njk' %}
+
+{% block pageTop %}
+  <main class="header">
+    <iframe title="GitHub stars for Front-end Job Interview Questions" src="https://ghbtns.com/github-btn.html?user=h5bp&repo=Front-end-Developer-Interview-Questions&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px" style="margin-bottom: -1.8rem;"></iframe><br>
+    <h1 class="header-big-title gradient1">
+    {{ title }}</h1>
+    <p class="header-big-description">
+      A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. <a href="/about/">Read more about here</a>. Better in your language? See one of our <a href="/translations/">translations</a>.
+    </p>
+    <p class="header-description">
+      Since this project begun, thousands of questions were added by an amazing group of people, and translated to more than 30 different languages. <b>Want to contribute?</b> See our <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/.github/CONTRIBUTING.md" target="_blank" rel="noreferrer noopener">contribute</a> guide. We have a <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTORS.md">Hall of Fame 👑</a>.
+    </p>
+  </main>
+{% endblock %}
+{% block main %}{% endblock %}

src/questions/coding-questions.md

@@ -1,32 +1,36 @@
-# Coding Questions:
+---
+title: Coding Questions
+layout: layouts/page.njk
+permalink: /questions/coding-questions/index.html
+---
 
-*Question: What is the value of `foo`?*
+Question: What is the value of `foo`?
 ```javascript
 var foo = 10 + '20';
 ```
 
-*Question: What will be the output of the code below?*
+Question: What will be the output of the code below?
 ```javascript
 console.log(0.1 + 0.2 == 0.3);
 ```
 
-*Question: How would you make this work?*
+Question: How would you make this work?
 ```javascript
 add(2, 5); // 7
 add(2)(5); // 7
 ```
 
-*Question: What value is returned from the following statement?*
+Question: What value is returned from the following statement?
 ```javascript
 "i'm a lasagna hog".split("").reverse().join("");
 ```
 
-*Question: What is the value of `window.foo`?*
+Question: What is the value of `window.foo`?
 ```javascript
 ( window.foo || ( window.foo = "bar" ) );
 ```
 
-*Question: What is the outcome of the two alerts below?*
+Question: What is the outcome of the two alerts below?
 ```javascript
 var foo = "Hello";
 (function() {
@@ -36,21 +40,21 @@ var foo = "Hello";
 alert(foo + bar);
 ```
 
-*Question: What is the value of `foo.length`?*
+Question: What is the value of `foo.length`?
 ```javascript
 var foo = [];
 foo.push(1);
 foo.push(2);
 ```
 
-*Question: What is the value of `foo.x`?*
+Question: What is the value of `foo.x`?
 ```javascript
 var foo = {n: 1};
 var bar = foo;
 foo.x = foo = {n: 2};
 ```
 
-*Question: What does the following code print?*
+Question: What does the following code print?
 ```javascript
 console.log('one');
 setTimeout(function() {
@@ -62,7 +66,7 @@ Promise.resolve().then(function() {
 console.log('four');
 ```
 
-*Question: What is the difference between these four promises?*
+Question: What is the difference between these four promises?
 ```javascript
 doSomething().then(function () {
   return doSomethingElse();

src/questions/css-questions.md

@@ -1,4 +1,8 @@
-# CSS Questions:
+---
+title: CSS Questions
+layout: layouts/page.njk
+permalink: /questions/css-questions/index.html
+---
 
 * What is CSS selector specificity and how does it work?
 * What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

src/questions/fun-questions.md

@@ -1,4 +1,8 @@
-# Fun Questions:
+---
+title: Fun Questions
+layout: layouts/page.njk
+permalink: /questions/fun-questions/index.html
+---
 
 * What's a cool project that you've recently worked on?
 * What are some things you like about the developer tools you use?

src/questions/general-questions.md

@@ -1,4 +1,8 @@
-# General Questions:
+---
+title: General Questions
+layout: layouts/page.njk
+permalink: /questions/general-questions/index.html
+---
 
 * What did you learn yesterday/this week?
 * What excites or interests you about coding?

src/questions/html-questions.md

@@ -1,4 +1,8 @@
-# HTML Questions:
+---
+title: HTML Questions
+layout: layouts/page.njk
+permalink: /questions/html-questions/index.html
+---
 
 * What does a `doctype` do?
 * How do you serve a page with content in multiple languages?

src/questions/javascript-questions.md

@@ -1,4 +1,8 @@
-# JS Questions:
+---
+title: JavaScript Questions
+layout: layouts/page.njk
+permalink: /questions/javascript-questions/index.html
+---
 
 * Explain event delegation
 * Explain how `this` works in JavaScript

src/questions/network-questions.md

@@ -1,4 +1,8 @@
-# Network Questions:
+---
+title: Network Questions
+layout: layouts/page.njk
+permalink: /questions/network-questions/index.html
+---
 
 * Traditionally, why has it been better to serve site assets from multiple domains?
 * Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen.

src/questions/performance-questions.md

@@ -1,4 +1,8 @@
-# Performance Questions:
+---
+title: Performance Questions
+layout: layouts/page.njk
+permalink: /questions/performance-questions/index.html
+---
 
 * What tools would you use to find a performance bug in your code?
 * What are some ways you may improve your website's scrolling performance?

src/questions/testing-questions.md

@@ -1,4 +1,8 @@
-# Testing Questions:
+---
+title: Testing Questions
+layout: layouts/page.njk
+permalink: /questions/testing-questions/index.html
+---
 
 * What are some advantages/disadvantages to testing your code?
 * What tools would you use to test your code's functionality?

src/sitemap.xml.njk

@@ -0,0 +1,16 @@
+---
+permalink: /sitemap.xml
+excludeFromSitemap: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+{%- for page in collections.all %}
+{%- if not page.data.excludeFromSitemap %}
+  {% set absoluteUrl %}{{ site.url }}{{ page.url | url }}{% endset %}
+  <url>
+    <loc>{{ absoluteUrl }}</loc>
+    <lastmod>{{ page.date | html_date_string }}</lastmod>
+  </url>
+{%- endif %}
+{%- endfor %}
+</urlset>

src/translations.njk

@@ -0,0 +1,27 @@
+---
+title: Translations
+description: Doesn't see yours or see something wrong? Open an [issue](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues).
+permalink: /translations/index.html
+---
+{% extends 'layouts/default.njk' %}
+
+{% block pageTop %}
+  <header class="header">
+    <h1 class="header-big-title">{{ title }}</h1>
+    <p class="header-description">{{ description | markdownify_inline | safe }}</p>
+  </header>
+{% endblock %}
+
+{% block main %}
+  <section>
+    <div class="content content-simple">
+      <ul style="column-count: 3;">
+        {% for entry in translations.all %}
+        <li>
+          <a href="{{ entry.url }}">{{ entry.language }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </section>
+{% endblock %}

src/translations/arabic/README.md

@@ -1,3 +1,8 @@
+---
+title: أسئلة مقابله شخصية في تطوير واجهةالويب
+layout: layouts/page.njk
+permalink: /translations/arabic/index.html
+---
 <div dir="rtl">
 <h1>أسئلة مقابله شخصية في تطوير واجهةالويب</h1>
 <p>هذا الملف يحتوي على عدد من أسئلة مقابلة شخصية في تطوير واجهة الويب التي من الممكن ان تساعدك في فحص المرشحين المحتملين للوظيفة.

src/translations/bulgarian/README.md

@@ -1,3 +1,9 @@
+---
+title: Въпроси за интервю за front-end разработчици
+layout: layouts/page.njk
+permalink: /translations/bulgarian/index.html
+---
+
 # Въпроси за интервю за front-end разработчици
 
 Това репозитори съдържа въпроси от интервюта на front-end разработчици, които могат да бъдат използвани за отсяване на потенциални кандидати. Не препоръчваме използването на всеки въпрос за всеки кандидат (това би отнело часове). Избирането на няколко въпроса от списъка би могло да помогне да се проверят търсените умения у кандидатите.

src/translations/burmese/README.md

@@ -1,4 +1,10 @@
-#Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ
+---
+title: Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ
+layout: layouts/page.njk
+permalink: /translations/burmese/index.html
+---
+
+# Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ
 
 ယခုဖိုင်တွင် Front-end developer အလုပ်အတွက် အလုပ်လျှောက်ထားသူများအား အင်တာဗျူးများပြုလုပ်ရာတွင် အထောက်အကူပြုနိုင်သည့် မေးခွန်းများပါဝင်ပါသည်။ အလုပ်လျှောက်ထားသူတစ်ဦးစီတိုင်းကို ရှိသမျှမေးခွန်းတိုင်းမေးရန် အကြံပြုခြင်းမဟုတ်ပါ။ (ဖြေရလွန်း၍ လျှာထွက်နိုင်ကိန်းရှိသည်။) မိမိခန့်အပ်လိုသောအလုပ်နှင့်သက်ဆိုင်သည့် အလုပ်တာဝန်၊ လိုအပ်ချက်များနှင့်သက်ဆိုင်သည့် မေးခွန်းများကိုသာရွေးချယ်ကာမေးရန် ရည်ရွယ်ပါသည်။
 

src/translations/chinese-traditional/README.md

@@ -1,3 +1,9 @@
+---
+title: 前端工程師面試問題集
+layout: layouts/page.njk
+permalink: /translations/chinese-traditional/index.html
+---
+
 # 前端工程師面試問題集
 
 譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文，翻譯不好地方請協助 Pull request。

src/translations/chinese/README.md

@@ -1,3 +1,9 @@
+---
+title: 前端工作面试问题
+layout: layouts/page.njk
+permalink: /translations/chinese/index.html
+---
+
 # 前端工作面试问题
 
 本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能。

src/translations/croatian/README.md

@@ -1,4 +1,10 @@
-#Intervju za posao Front-end Developera
+---
+title: Intervju za posao Front-end Developera
+layout: layouts/page.njk
+permalink: /translations/croatian/index.html
+---
+
+# Intervju za posao Front-end Developera
 
 @version 2.0.0
 
@@ -8,7 +14,7 @@ Ovaj repozitorij sadrži brojna pitanja za intervju iz područja front-end-a koj
 
 **Napomena:** Imajte na umu da su mnoga ovdje navedena pitanja otvorenog tipa i mogla bi voditi u zanimljive rasprave koje govore više o sposobnostima osobe nego pitanja sa direktnim odgovorima.
 
-####Autori originalne liste
+#### Autori originalne liste
 
 Većina pitanja je preuzeta sa [oksoclap](http://oksoclap.com/) tj. rasprave koju je u originalu pokrenuo [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) i kojoj su pridonijele sljedeće osobe:
 

src/translations/czech/README.md

@@ -1,3 +1,9 @@
+---
+title: Front-end vývojář – otázky k pohovoru
+layout: layouts/page.njk
+permalink: /translations/czech/index.html
+---
+
 # Front-end vývojář – otázky k pohovoru 
 
 Tento repozitář obsahuje řadu otázek, které můžete směle položit u pohovoru kandidátovi na pozici front-end vývojář a ověřit si tak jeho znalosti v tomto oboru. Není zamýšleno položit všechny tyto otázky (jejich korektní zodpovězení by trvalo hodiny), leč pouze určitou část vyhovující vašim potřebám.   

src/translations/danish/README.md

@@ -1,4 +1,10 @@
-#Front-end Job Interview Spørgsmål
+---
+title: Front-end Job Interview Spørgsmål
+layout: layouts/page.njk
+permalink: /translations/danish/index.html
+---
+
+# Front-end Job Interview Spørgsmål
 
 @version 1.0