WWL initial scaffolding & architecture (#5)

.gitignore

@@ -1,37 +1,3 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# 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
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+.DS_Store
+node_modules/
+dest/

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "womenandweb",
+  "version": "1.0.0",
+  "description": "Women and Web Literacy",
+  "scripts": {
+    "autoprefix": "node scripts/autoprefix.js",
+
+    "build:folders": "shx mkdir -p dest/css",
+    "build:pug": "node scripts/build-pug.js",
+    "build:sass": "node-sass source/sass/main.scss dest/css/main.compiled.css && npm run autoprefix",
+    "build": "shx rm -rf dest && npm run build:folders && npm run build:pug && npm run build:sass && npm run copy:images",
+
+    "copy:images": "shx cp -r source/images dest/images",
+    "server": "live-server ./dest --port=2040",
+    "start": "npm i && npm run build && npm-run-all --parallel server watch:**",
+
+    "watch:images": "chokidar 'source/images/*' -c 'npm run copy:images'",
+    "watch:markdown": "chokidar 'source/markdown/**/*.md' -c 'npm run build:pug'",
+    "watch:pug": "chokidar 'source/index.pug' -c 'npm run build:pug'",
+    "watch:sass": "chokidar 'source/sass/main.scss' -c 'npm run build:sass'"
+  },
+  "author": "Mozilla",
+  "license": "MPL-2.0",
+  "devDependencies": {
+    "autoprefixer": "^6.2.3",
+    "chokidar-cli": "^1.2.0",
+    "jstransformer-markdown": "^1.1.0",
+    "live-server": "^0.9.0",
+    "node-sass": "^3.4.2",
+    "npm-run-all": "^1.4.0",
+    "postcss": "^5.1.2",
+    "postcss-cli": "^2.3.3",
+    "pug": "^2.0.0-beta5",
+    "shelljs": "^0.7.3",
+    "shx": "^0.1.2"
+  },
+  "dependencies": {
+    "mofo-bootstrap": "^1.0.1"
+  }
+}

scripts/autoprefix.js

@@ -0,0 +1,19 @@
+'use strict';
+
+let autoprefixer = require(`autoprefixer`);
+let postcss = require(`postcss`);
+let shelljs = require(`shelljs`);
+
+let cssPath = `dest/css/main.compiled.css`;
+let css = shelljs.cat(cssPath).toString();
+
+postcss([ autoprefixer ]).process(css).then((result) => {
+  result.warnings().forEach((warn) => {
+    console.warn(warn.toString());
+    shelljs.exit(1);
+  });
+
+  console.log(`Autoprefixed CSS: ${cssPath}`);
+  shelljs.ShellString(result.css).to(cssPath);
+  shelljs.exit(0);
+});

scripts/build-pug.js

@@ -0,0 +1,10 @@
+'use strict';
+
+let pug = require(`pug`);
+let shelljs = require(`shelljs`);
+
+let compiled = pug.renderFile(`source/index.pug`, {
+  pretty: true
+});
+
+shelljs.ShellString(compiled).to(`dest/index.html`);

source/index.pug

@@ -0,0 +1,38 @@
+doctype html
+html
+  head
+    meta(charset='utf-8')
+
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    meta(name='description', content='Women and Web Literacy')
+
+    meta(property='og:type', content='website')
+    meta(property='og:site_name', content='Women and Web Literacy')
+    meta(property='og:locale', content='en_US')
+    meta(property='og:url', content='https://mozilla.github.io/womenandweb')
+    meta(property='og:image', content='TODO')
+    meta(property='og:title', content='Women and Web Literacy')
+    meta(property='og:description', content='Women and Web Literacy')
+
+    link(rel='stylesheet', href='css/main.compiled.css')
+    link(rel='stylesheet', href='//code.cdn.mozilla.net/fonts/fira.css')
+
+    title Women and Web Literacy
+  body
+    header.container
+      img(src='images/logo.png')
+
+  .container
+    .row
+      .col-sm-12
+        include:markdown markdown/index.md
+
+    .row
+      .col-sm-4
+        include:markdown markdown/resources/case-studies.md
+      .col-sm-4
+        include:markdown markdown/resources/reports.md
+      .col-sm-4
+        include:markdown markdown/resources/teaching-resources.md
+
+  footer

source/markdown/index.md

@@ -0,0 +1,11 @@
+# Women And Web Literacy
+
+Mozilla strives to build and support an equitable and inclusive online world for everyone. To do this, we want to challenge the existing gender imbalances that exist and create an online space where we can reach gender equality at scale.
+
+We want to help shift the default to one where women have a strong, equitable role in reading, writing and participating on the web—and, ultimately, help lead the next wave of openness, innovation and opportunity online. **That’s why in 2016 Mozilla created a Mozilla Leadership Network Program focused on Women and Web Literacy.**
+
+Mozilla’s Women and Web Literacy Program is a community of allies, executives, grassroots and young leaders who are actively advancing the principles of the open Internet by:
+
+- Bringing women in technology
+- Increasing Web Literacy
+- Challenging gender equality and inclusion online

source/markdown/resources/case-studies.md

@@ -0,0 +1,7 @@
+**Teaching Resources**
+
+- Mozilla Club for Women Training Report from Cape Town
+- Mozilla Club for Women Training Report from Nairobi
+- Mozilla Club Web Titans
+- Mozilla Club Lookout Hill
+- Mozilla Club COSAT

source/markdown/resources/reports.md

@@ -0,0 +1,5 @@
+**Reports**
+
+- Women and Web Literacy Research Paper
+- Women and Web Literacy Report
+- Cyberviolence Research Paper

source/markdown/resources/teaching-resources.md

@@ -0,0 +1,8 @@
+**Teaching Resources**
+
+- Teaching Kit: Combatting Cyber Violence Against Women and Girls
+- Teaching Kit: Hacking My Media Online
+- Guide: Tips for designing safe and inclusive events for women and girls
+- Guide: Teaching Web Literacy to Women
+- Run a Mozilla Club Leadership Training for Women
+- Mozilla Learning Community Call celebrating Women on the Web

source/sass/main.scss

@@ -0,0 +1,19 @@
+@import '../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap';
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  max-width: 960px;
+  margin: 20px auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+ul {
+  list-style: none;
+}