envek / anycable-web

AnyCable web page

About

AnyCable website generator (https://anycable.io).

Includes:

• Jade HTML preprocessor;
• PostCSS with autoprefixer, precss and cssnext;
• JSPM with ES6 set up.

Usage

Run npm install and then npm start or gulp to start dev server with livereload.

SVG Optimization

Use svgo to optimize SVG images.

For animated illustration use: svgo --disable=moveGroupAttrsToElems --disable=convertTransform src/images/illustration.svg src/images/illustration.min.svg

JSPM config issue

When you run yarn install (or jspm install explicitly) it updates the jspm.config.js in the following way:

   },
   paths: {
     "*": "src/js/*.js",
-    "github:*": "/jspm_packages/github/*",
-    "npm:*": "/jspm_packages/npm/*"
+    "github:*": "jspm_packages/github/*",
+    "npm:*": "jspm_packages/npm/*"
   },
   baseUrl: "/",

This configuration breaks non-root pages; revert this change to use the absolute path.

GTM Integration

To send custom events to GTM do the following:

• For links (or link-like elements) use gtm-link class and specify action and category using data-gtm-action and data-gtm-category attributes:

a.gtm-link(href="#", data-gtm-category="landingButton", data-gtm-action="tryIt1")

• For footer links you can alternatively just add a gtm-footer-link class without specifying any data attributes (footerLinks category and action derived from the link text will be used automatically). The action value could be overriden by setting data-gtm-action attribute.

• For form submissions use gtm-form class and the same data-gtm-category and data-gtm-action attributes.

NOTE: in development, we print events in the console instead of sending them to GTM. See dochead.pug for more.