Merge pull request #392 from datamol-io/feat-google-analytics-support

add google analytics support and little tweaks

Author: hadim

docs/_assets/css/custom-graphium.css

@@ -1,5 +1,5 @@
 :root {
-  --graphium-primary: #70ad47ff;
+  --graphium-primary: #70ad47;
   --graphium-secondary: #343a40;
 
   /* Primary color shades */
@@ -17,59 +17,58 @@
   --md-accent-bg-color--light: var(--graphium-secondary);
 }
 
-:root>* {
+:root > * {
   /* Code block color shades */
   --md-code-bg-color: hsla(0, 0%, 96%, 1);
   --md-code-fg-color: hsla(200, 18%, 26%, 1);
 
   /* Footer */
-  --md-footer-bg-color: var(--datamol-primary);
+  --md-footer-bg-color: var(--graphium-primary);
   /* --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32); */
   --md-footer-fg-color: var(--graphium-secondary);
   --md-footer-fg-color--light: var(--graphium-secondary);
   --md-footer-fg-color--lighter: var(--graphium-secondary);
-
 }
 
 .md-header {
-  background-image: linear-gradient(to right, #70ad47ff, #70ad47ff);
+  background-color: #70ad47;
 }
 
 .md-footer {
-  background-image: linear-gradient(to right, #70ad47ff, #70ad47ff);
+  background-color: #70ad47;
 }
 
 .md-tabs {
-  background-image: linear-gradient(to right, #F4F6F9, #E2CEC3);
+  background-image: linear-gradient(to right, #f4f6f9, #e2cec3);
 }
 
 .md-header__topic {
-  color: rgb(255, 255, 255);
+  color: #fff;
 }
 
 .md-source__repository,
 .md-source__icon,
 .md-search__input,
 .md-search__input::placeholder,
-.md-search__input~.md-search__icon,
+.md-search__input ~ .md-search__icon,
 .md-footer__inner.md-grid,
 .md-copyright__highlight,
 .md-copyright,
 .md-footer-meta.md-typeset a,
 .md-version {
-  color: rgb(255, 255, 255) !important;
+  color: #fff !important;
 }
 
 .md-search__form {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 .md-search__input {
-  color: #222222 !important;
+  color: #222 !important;
 }
 
 .md-header__topic {
-  color: rgb(255, 255, 255);
+  color: #fff;
   font-size: 1.4em;
 }
 

docs/_assets/css/custom.css

@@ -1,7 +1,7 @@
 /* Indentation. */
 div.doc-contents:not(.first) {
   padding-left: 25px;
-  border-left: 4px solid rgba(230, 230, 230);
+  border-left: 4px solid #e6e6e6;
   margin-bottom: 80px;
 }
 

docs/_assets/js/google-analytics.js

@@ -0,0 +1,12 @@
+var gtag_id = "G-K76VNHBRM4";
+
+var script = document.createElement("script");
+script.src = "https://www.googletagmanager.com/gtag/js?id=" + gtag_id;
+document.head.appendChild(script);
+
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+  dataLayer.push(arguments);
+}
+gtag("js", new Date());
+gtag("config", gtag_id);

mkdocs.yml

@@ -48,7 +48,7 @@ nav:
 theme:
   name: material
   # NOTE(hadim): to customize the material primary and secondary
-  # color check `docs/assets/css/datamol-custom.css`.
+  # color check `docs/_assets/css/custom-graphium.css`.
   features:
     - navigation.tabs
     - navigation.expand
@@ -60,9 +60,9 @@ extra_css:
   - _assets/css/custom-graphium.css
 
 extra_javascript:
-  - javascripts/config.js
   - https://polyfill.io/v3/polyfill.min.js?features=es6
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
+  - _assets/js/google-analytics.js
 
 markdown_extensions:
   - admonition