Initial commit. Partial migration.

Author: robdodson

.eleventy.js

@@ -0,0 +1,67 @@
+const path = require('path');
+const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const helpers = require('./templateHelpers');
+
+module.exports = function(eleventyConfig) {
+  // Syntax highlighting for code snippets
+  eleventyConfig.addPlugin(pluginSyntaxHighlight);
+
+  // TODO: Add RSS plugin
+  // https://github.com/11ty/eleventy-plugin-rss
+
+  // Return the three most recent blog posts.
+  eleventyConfig.addCollection('recentPosts', function(collection) {
+    return collection
+      .getFilteredByTag('post')
+      .reverse()
+      .slice(0, 3);
+  });
+
+  eleventyConfig.addFilter('stripLanguage', function(url) {
+    let urlParts = url.split('/');
+    urlParts.splice(1, 1);
+    return urlParts.join('/');
+  });
+
+  eleventyConfig.addShortcode('getGuidesCount', function(learningPath) {
+    const count = learningPath.topics.reduce((guidesCount, topic) => {
+      return guidesCount + topic.guides.length;
+    }, 0);
+    const label = count > 1 ? 'resources' : 'resource';
+    return `${count} ${label}`;
+  });
+
+  eleventyConfig.addShortcode('nextGuideLink', function(page, paths) {
+    const collection = helpers.getCollectionName(page);
+    if (collection && paths[collection]) {
+      const guides = helpers.getGuidesFromTopics(paths[collection].topics);
+      const nextIndex = guides.indexOf(page.fileSlug) + 1;
+      if (nextIndex && nextIndex < guides.length) {
+        const nextUrl = `/${paths[collection].basePath}${guides[nextIndex]}/`;
+        return nextUrl;
+      }
+      return '';
+    }
+  });
+
+  eleventyConfig.addFilter('containsTag', function(article, tags) {
+    return article.data.tags && tags.filter(tag => article.data.tags.indexOf(tag) > -1).length > 0;
+  });
+
+  // https://www.11ty.io/docs/config/#configuration-options
+  return {
+    dir: {
+      input: 'src/site/content',
+      output: 'dist',
+      data: '../_data',
+      includes: '../_includes',
+    },
+    templateFormats: ['njk', 'md'],
+    htmlTemplateEngine: 'njk',
+    markdownTemplateEngine: 'njk',
+    // Because eleventy's passthroughFileCopy does not work with permalinks
+    // we need to manually copy assets ourselves using gulp.
+    // https://github.com/11ty/eleventy/issues/379
+    passthroughFileCopy: false,
+  };
+};

.eslintrc

@@ -1,17 +1,31 @@
 {
-  "plugins": ["prettier"],
-  "extends": ["eslint:recommended", "google"],
+  "plugins": [
+    "prettier"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "google"
+  ],
   "rules": {
-      "indent": ["error", 2, {
+    "indent": [
+      "error",
+      2,
+      {
         "SwitchCase": 1
-      }]
+      }
+    ]
   },
   "env": {
     "es6": true,
     "node": true,
-    "mocha": true
+    "mocha": true,
+    "browser": true
   },
   "parserOptions": {
-    "ecmaVersion": 2017
+    "ecmaVersion": 2017,
+    "sourceType": "module"
+  },
+  "globals": {
+    "customElements": true
   }
-}
+}

.gitignore

@@ -1,5 +1,68 @@
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
 node_modules/
-build/
-package-lock.json
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
 .env
+
+# next.js build output
+.next
+
+# build artifacts
+dist
+
+# deploy scripts
+devsite.js
+local-devsite.js

.sasslintrc

@@ -0,0 +1,49 @@
+{
+  "options": {
+    "merge-default-rules": false
+  },
+  "files": {
+    "ignore": [
+      "src/styles/devsite/**/*.scss",
+      "src/styles/tools/**/*.scss"
+    ]
+  },
+  "rules": {
+    "attribute-quotes": 1,
+    "brace-style": [
+      1,
+      {
+        "style": "1tbs"
+      }
+    ],
+    "border-zero": [
+      1,
+      {
+        "convention": "0"
+      }
+    ],
+    "class-name-format": [
+      1,
+      {
+        "convention": "^w-.+",
+        "convention-explanation": "Classes must be namedspaced with w-* prefix."
+      }
+    ],
+    "declarations-before-nesting": 1,
+    "no-debug": 1,
+    "no-css-comments": 1,
+    "property-sort-order": [
+      1,
+      {
+        "order": "alphabetical"
+      }
+    ],
+    "variable-name-format": [
+      1,
+      {
+        "convention": "^[_A-Z0-9]+$",
+        "convention-explanation": "Variable names should be in $SCREAMING_SNAKE_CASE"
+      }
+    ]
+  }
+}

.travis.yml

@@ -11,4 +11,3 @@ cache:
 script:
 - npm run lint
 - npm run build
-- npm run test

README.md

@@ -2,54 +2,75 @@
 
 [![Build Status](https://travis-ci.org/GoogleChrome/web.dev.svg?branch=master)](https://travis-ci.org/GoogleChrome/web.dev)
 
-web.dev is the ultimate resource for developers of all backgrounds to learn, create, and solve on the web. It's meant to not only educate developers, but help them apply what they've learned to any site they work on, be it personal or business.
+web.dev is the ultimate resource for developers of all backgrounds to learn,
+create, and solve on the web. It's meant to not only educate developers, but
+help them apply what they've learned to any site they work on, be it personal or
+business.
 
-Note: this repo contains the written content for web.dev. The actual front-end
-(CSS,JS) is not yet open source.
+Note: this repo contains the written content for web.dev. The client-side JS and
+server are not yet open source.
 
 ## Authoring content
 
-[Our wiki](https://github.com/GoogleChrome/web.dev/wiki) provides docs on authoring guides and codelabs.
+[Our wiki](https://github.com/GoogleChrome/web.dev/wiki) provides docs on
+authoring guides and codelabs.
 
-## Development
+## Get started
 
-```shell
-git clone https://github.com/GoogleChrome/web.dev.git
+Install dependencies.
+
+```
+npm ci
 ```
 
-Install the deps:
+Compile docs into the `dist` directory.
 
-```shell
-yarn
+```
+npm run build
 ```
 
-### Previewing the site
-
-To create/edit content and preview a page locally as you make edits, start the "preview server":
+Start a local server to preview the site. Changes to assets will rebuild
+the site. Refresh to see changes.
 
-```shell
- yarn dev
 ```
-
-This also runs `gulp watch` which rebuild pages as you make edits.
+npm run dev
+```
 
 Next,  open `http://localhost:8080/` to see the site locally. The preview server
 allows you to see how the content will look on the production site, but it's
 not a true staging server. For example, features like search and JS components
 may not work or be entirely broken on the local preview.
 
-### Running the tests
+## Debugging
 
-The preview server has tests to verify that pages render locally.
+The easiest way to debug the site is to add a `debugger` statement to
+`.eleventy.js`, then run `npm run debug`, and go to `chrome://inspect` to
+attach to the running process.
 
-```shell
-yarn test
-```
+## Creating templates
+
+### Includes vs. macros
+
+[includes](https://mozilla.github.io/nunjucks/templating.html#include)
+have access to the global data objects created by eleventy's `_data` folder and
+have access to the scope of their including template.
+
+[macros](https://mozilla.github.io/nunjucks/templating.html#macro) define their
+own scope and must have all data passed in as arguments.
+
+Whenever possible, **use macros instead of includes**. Explicitly passing data
+to a function is preferred over relying on global state. This avoids situations
+where the global object is accidentally renamed without updating the dependent
+templates.
 
 ## Found a bug?
 
-You can file an issue [in our issue tracker](https://github.com/GoogleChrome/web.dev/issues) and a team member should reply shortly.
+You can file an issue [in our issue
+tracker](https://github.com/GoogleChrome/web.dev/issues) and a team member
+should reply shortly.
 
 ## Want to help?
 
-Take a look [in the issue tracker](https://github.com/GoogleChrome/web.dev/issues) for any bugs with a **content** label.
+Take a look [in the issue
+tracker](https://github.com/GoogleChrome/web.dev/issues) for any bugs with a
+**content** label.