+ 
+
-{{product.name}}
+ + + +
+ {{product.company}}
+
+ {{product.blurb}}
+ {{product.url}}
+ {{product.price}}
+ Camera: {{product.camera}}
+ Microphone: {{product.microphone}}
+ Location: {{product.location}}
+ Need account: {{product.need_account}}
+ Privacy Controls: {{product.privacy_controls}}
+ Delete Data: {{product.delete_data}}
+ Share Data: {{product.share_data}}
+ Child rules: {{product.child_rules}}
+ Privacy Policy: {{product.privacy_policy}}
+ Worst case scenario: {{product.worst_case}}
{{product.blurb}}
-{{product.url}}
-{{product.price}}
-Camera: {{product.camera}}
-Microphone: {{product.microphone}}
-Location: {{product.location}}
-Need account: {{product.need_account}}
-Privacy Controls: {{product.privacy_controls}}
-Delete Data: {{product.delete_data}}
-Share Data: {{product.share_data}}
-Child rules: {{product.child_rules}}
-Privacy Policy: {{product.privacy_policy}}
-Worst case scenario: {{product.worst_case}}
+
+{% endblock %}
diff --git a/package.json b/package.json
index 274e0b462a7..972e61a8291 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"build:images": "shx rm -rf network-api/networkapi/frontend/_images && shx cp -r source/images network-api/networkapi/frontend/_images",
"build:js-uncompressed": "webpack",
"build:js": "webpack -p",
- "build:sass": "shx mkdir -p network-api/networkapi/frontend/_css && node-sass source/sass/main.scss network-api/networkapi/frontend/_css/main.compiled.css && npm run autoprefix",
+ "build:sass": "shx mkdir -p network-api/networkapi/frontend/_css && node-sass source/sass/main.scss network-api/networkapi/frontend/_css/main.compiled.css && node-sass source/sass/buyers-guide/bg-main.scss network-api/networkapi/frontend/_css/buyers-guide.compiled.css && npm run autoprefix",
"build": "npm run build:common && npm run build:js",
"build-uncompressed": "npm run build:common && npm run build:js-uncompressed",
"heroku-postbuild": "npm run build",
@@ -23,7 +23,7 @@
"server": "pipenv run python network-api/manage.py runserver",
"start": "npm i && npm run build-uncompressed && run-p server watch:**",
"snyk": "snyk test --file=package.json",
- "test:eslint": "eslint --config ./.eslintrc.yaml scripts/**/*.js source/js/**/*.js source/js/components/**/*.jsx",
+ "test:eslint": "eslint --config ./.eslintrc.yaml scripts/**/*.js source/js/**/*.js source/js/components/**/*.jsx webpack.config.js",
"test:scss": "stylelint \"source/sass/**/*.scss\" \"source/js/components/**/*.scss\" --syntax scss",
"test": "npm run build && run-s test:**",
"watch:images": "chokidar 'source/images/**/*' -c 'npm run build:images'",
diff --git a/source/images/glyphs/email.svg b/source/images/glyphs/email.svg
new file mode 100644
index 00000000000..34ec0e2d8f3
--- /dev/null
+++ b/source/images/glyphs/email.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/source/images/glyphs/fb.svg b/source/images/glyphs/fb.svg
new file mode 100644
index 00000000000..64dc50a0a01
--- /dev/null
+++ b/source/images/glyphs/fb.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js
new file mode 100644
index 00000000000..728ee8511ec
--- /dev/null
+++ b/source/js/buyers-guide/bg-main.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Creepometer from './components/creepometer/creepometer.jsx';
+
+let main = {
+ init() {
+ this.injectReactComponents();
+ },
+
+ // Embed various React components based on the existence of containers within the current page
+ injectReactComponents() {
+ if (document.querySelectorAll(`.creepometer`)) {
+ Array.from(document.querySelectorAll(`.creepometer`)).forEach(element => {
+ ReactDOM.render(Creepometer 😬
+ );
+ }
+}
diff --git a/source/js/buyers-guide/components/creepometer/creepometer.scss b/source/js/buyers-guide/components/creepometer/creepometer.scss
new file mode 100644
index 00000000000..4a1fc320878
--- /dev/null
+++ b/source/js/buyers-guide/components/creepometer/creepometer.scss
@@ -0,0 +1,3 @@
+.creepometer {
+ border: 1px solid papayawhip;
+}
diff --git a/source/js/main.js b/source/js/main.js
index eee73aac16d..2c1ebbf9a38 100644
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -322,4 +322,3 @@ let main = {
};
main.init();
-
diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss
new file mode 100644
index 00000000000..e249da19d6d
--- /dev/null
+++ b/source/sass/buyers-guide/bg-main.scss
@@ -0,0 +1,105 @@
+// Bootstrap
+
+@import '../../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap';
+@import '../../../node_modules/mofo-bootstrap/src/scss/custom/_colors';
+@import '../../../node_modules/bootstrap/scss/_variables';
+@import '../../../node_modules/bootstrap/scss/mixins';
+
+// Breakpoints (imported from Bootstrap)
+
+$bp-xs: #{map-get($grid-breakpoints, xs)}; // < 576px
+$bp-sm: #{map-get($grid-breakpoints, sm)}; // >= 576px
+$bp-md: #{map-get($grid-breakpoints, md)}; // >= 768px
+$bp-lg: #{map-get($grid-breakpoints, lg)}; // >= 992px
+$bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
+
+//Site-wide
+
+@import '../colors';
+@import '../mixins';
+
+// React Components
+
+@import '../../js/buyers-guide/components/creepometer/creepometer';
+
+// Non-React Components
+
+@import './components/future-non-react-component';
+
+.btn-blue {
+ color: $white;
+ background: #3302ff;
+
+ &:hover {
+ color: $white;
+ background: #4a90e2;
+ }
+}
+
+// Misc
+
+@import '../resets';
+@import '../type';
+@import '../buttons';
+@import '../global';
+@import '../utilities';
+
+// Header
+
+.moz-logo {
+ width: 97px;
+ height: 28px;
+ background-image: url("../_images/mozilla-on-black.svg");
+ flex-shrink: 0;
+}
+
+.primary-nav {
+ overflow-x: scroll;
+ white-space: nowrap;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+
+ a {
+ display: inline-block;
+ font-family: "Nunito Sans";
+ font-size: 17px;
+ color: #909090;
+ font-weight: 900;
+ margin-right: 20px;
+ padding: 10px 0 6px;
+ text-decoration: none;
+
+ &:hover {
+ color: $black;
+ }
+ }
+}
+
+#pni-home .nav-home {
+ border-bottom: 4px solid $black;
+ color: $black;
+}
+
+.social-button {
+ display: block;
+ width: 25px;
+ height: 25px;
+ margin: 0 12px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.social-button-fb {
+ background-image: url("/_images/glyphs/fb.svg");
+}
+
+.social-button-twitter {
+ background-image: url("/_images/glyphs/twitter.svg");
+}
+
+.social-button-email {
+ background-image: url("/_images/glyphs/email.svg");
+}
+
+// View specific
diff --git a/source/sass/buyers-guide/components/future-non-react-component.scss b/source/sass/buyers-guide/components/future-non-react-component.scss
new file mode 100644
index 00000000000..70b786d12ed
--- /dev/null
+++ b/source/sass/buyers-guide/components/future-non-react-component.scss
@@ -0,0 +1 @@
+// TODO
diff --git a/webpack.config.js b/webpack.config.js
index 7f5e7c3eebc..0f0f69f16b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,17 +1,28 @@
-module.exports = {
+let loaders = [
+ {
+ test: /\.js(x?)$/,
+ exclude: /node_modules/,
+ loader: `babel-loader`,
+ query: {
+ presets: [`es2015`, `react`]
+ }
+ }
+];
+
+module.exports = [{
entry: `./source/js/main.js`,
output: {
filename: `./network-api/networkapi/frontend/_js/main.compiled.js`
},
module: {
- loaders: [
- {
- test: /\.js(x?)$/,
- exclude: /node_modules/,
- loader: `babel-loader`,
- query: {
- presets: [`es2015`, `react`]
- }
- }
- ]
- }};
+ loaders: loaders
+ }
+}, {
+ entry: `./source/js/buyers-guide/bg-main.js`,
+ output: {
+ filename: `./network-api/networkapi/frontend/_js/bg-main.compiled.js`
+ },
+ module: {
+ loaders: loaders
+ }
+}];