@icij/murmur-next 4.0.0 → 4.0.1

package/docs/pages/utilities/assets/doc.md

@@ -1,138 +0,0 @@
-Some components like `textured-deck` need to load images. Those images are not bundled with Murmur anymore and are available throught a public URL. Therefore, you might need to customize how those image are loaded.
-
-## TexturedDeck
-
-The `TexturedDeck` components allow you to quickly create a textured block following ICIJ branding with zero configuration:
-
-<div class="row">
-  <div class=" col-6">
-    <textured-deck class="p-4 mb-3" value="carbon">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </textured-deck>
-  </div>
-  <div class=" col-6">
-    <textured-deck class="p-4 mb-3" black value="carbon">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </textured-deck>
-  </div>
-  <div class=" col-6">
-    <textured-deck class="p-4 mb-3" value="sand">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </textured-deck>
-  </div>
-  <div class=" col-6">
-    <textured-deck class="p-4 mb-3" black value="sand">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </textured-deck>
-  </div>
-  <div class=" col-6">
-    <textured-deck class="p-4 mb-3" value="rock">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </textured-deck>
-  </div>
-  <div class=" col-6">
-    <textured-deck class="p-4 mb-3" black value="rock">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </textured-deck>
-  </div>
-</div>
-
-Those background are currently loaded from a remote location:
-
-<p><b-input type="text" :value="texturedDeckBackgroundBaseUrl" readonly /></p>
-
-So everytime you pick a textured deck, the background is created using this host, such as:
-
-<p><b-input type="text" :value="texturedDeckBackgroundRockUrl" readonly /></p>
-
-This base location is configured using Murmur config object, in the property 
-called `textured-deck.background-base-url`. If for any reason you need to avoid
-loading the image from a remote location, you can always change the base URL (please 
-ensure your base URL has not tailing slash):
-
-```js
-Murmur.config.set('textured-deck.background-base-url', 'https://projects.icij.org')
-// Or from inside a Vue component:
-this.$config.set('textured-deck.background-base-url', 'https://projects.icij.org')
-```
-
-## ChoroplethMap and SymbolMap
-
-Both `ChoroplethMap` and `SymbolMap` use a remote topojson file to draw the background 
-of the map. This topojson contains the features for every countries except Antarctica.
-
-<symbol-map class="bg-light p-5 mb-3" hide-legend feature-color="#333" />
-
-This topojson is currently loaded from a remote location:
-
-<p><b-input type="text" :value="mapTopojsonWorldCountriesSansAntarctica" readonly /></p>
-
-The default topojson is configured globally using Murmur config object, in the property 
-called `map.topojson.world-countries-sans-antarctica`. If for any reason you need to 
-use a different topojson by default **on every maps** you can change the configuration:
-
-```js
-Murmur.config.set('map.topojson.world-countries-sans-antarctica', 'https://raw.githubusercontent.com/deldersveld/topojson/master/world-continents.json')
-// Or from inside a Vue component:
-this.$config.set('map.topojson.world-countries-sans-antarctica', 'https://raw.githubusercontent.com/deldersveld/topojson/master/world-continents.json')
-```
-
-Alternativly, if you want to change the topojson on a specify maps, both  `ChoroplethMap` and 
-`SymbolMap` can receive a `topojsonUrl` property. 
-
-::: sample-card
-<div class="row">
-  <div class="col-6 text-center mb-3">
-    <symbol-map class="p-3"
-      feature-color="#333"
-      hide-legend
-      topojson-url="https://raw.githubusercontent.com/deldersveld/topojson/master/countries/italy/italy-provinces.json"
-      topojson-objects="ITA_adm2"
-      topojson-objects-path="properties.ID_2" />
-    Italy
-  </div>
-  <div class="col-6 text-center mb-3">
-    <symbol-map class="p-3"
-      feature-color="#333"
-      hide-legend
-      topojson-url="https://raw.githubusercontent.com/deldersveld/topojson/master/countries/japan/jp-prefectures.json"
-      topojson-objects="JPN_adm1"
-      topojson-objects-path="properties.ID_1" />
-    Japan
-  </div>
-  <div class="col-6 text-center mb-3">
-    <symbol-map class="p-3"
-      feature-color="#333"
-      hide-legend
-      topojson-url="https://raw.githubusercontent.com/deldersveld/topojson/master/countries/united-kingdom/uk-counties.json"
-      topojson-objects="GBR_adm2"
-      topojson-objects-path="properties.ID_2" />
-    United Kingdom
-  </div>
-  <div class="col-6 text-center mb-3">
-    <symbol-map class="p-3"
-      feature-color="#333"
-      hide-legend
-      topojson-url="https://raw.githubusercontent.com/deldersveld/topojson/master/countries/venezuela/venezuela-estados.json"
-      topojson-objects="VEN_adm1"
-      topojson-objects-path="properties.ID_1" />
-    Venezuela
-  </div>
-</div>
-:::
-
-
-<script>
-  import config from '@/config.default'
-
-  export default {
-    data () {
-      return {
-        texturedDeckBackgroundBaseUrl: config['textured-deck.background-base-url'],
-        texturedDeckBackgroundRockUrl: `${config['textured-deck.background-base-url']}/assets/img/texture-rock.jpg`,
-        mapTopojsonWorldCountriesSansAntarctica: config['map.topojson.world-countries-sans-antarctica']
-      }
-    }
-  }
-</script>
-

package/docs/pages/utilities/config/doc.md

@@ -1,52 +0,0 @@
----
-title: Configure Murmur
-order: 0
----
-
-Murmur comes with a built-in configuration system. To access the configuration
-object, just use the `config` static property from the Murmur class:
-
-```js
-import Murmur from '@icij/murmur'
-
-Murmur.config.set('project', 'Demo Project')
-Murmur.config.get('project')
-```
-
-New key/value pair can be define using namespaces and dot notation:
-
-```js
-Murmur.config.set('foo.bar', 'value')
-// same as...
-Murmur.config.scope('foo').set('bar', 'value')
-```
-
-Here is the list of default values:
-
-<div class="table-responsive border border-top-0">
-  <table class="table table-sm table-striped text-nowrap m-0">
-    <tr v-for="(value, key) in config">
-      <td>    
-        <haptic-copy class="btn-sm btn-info" hide-label :text="key" />
-      </td>
-      <td class="align-middle">
-        <code>{{ key }}</code>
-      </td>
-      <td class="small text-monospace text-muted align-middle">
-        {{ value }}
-      </td>
-    </tr>
-  </table>
-</div>
-
-<script>
-  import config from '@/config.default'
-
-  export default {
-    data () {
-      return {
-        config
-      }
-    }
-  }
-</script>

package/docs/pages/utilities/iframes/doc.md

@@ -1,3 +0,0 @@
----
-badge: TODO
----

package/docs/pages/visual/colors/doc.md

@@ -1,31 +0,0 @@
-### Theme
-    
-The default theme is  extending Boostrap with custom colors. The primary color
-comes from ICIJ graphical charter. Every color utility classes provided by
-Boostrap (`bg-primary`, `text-primary`, ...) work as expected.
-
-<palette-presenter :colors="themeColors" />
-
-### Grays
-
-The colour tones to be used are outlined below and are on a gray scale that
-incorporates the new brand colour ways. Amount of gray was reduced
-tones used in illustration to create higher contrast in images. Only the grays
-outlined below should be used in any illustrations.
-
-<palette-presenter :colors="grays" />
-
-<script>
-  import sassVars from '@/styles/variables.scss?sass-vars'
-
-  export default {
-    computed: {
-      themeColors () {
-        return sassVars["$theme-colors"]
-      },
-      grays () {
-        return sassVars["$brand-grays"]
-      },
-    }
-  }
-</script>

package/docs/pages/visual/iconography/doc.md

@@ -1,56 +0,0 @@
-### FontAwesome
-
-This library heavily relies on [Font Awesome](https://fontawesome.com/) to display icons.
-As they state on their website "Font Awesome gives you scalable vector icons that
-can instantly be customized — size, color, drop shadow, and anything that can be
-done with the power of CSS".
-
-All available icons [can be found here](https://fontawesome.com/icons?d=gallery&m=free).
-
-### Adding icons to the library
-
-Since all icons are not imported automaticly, you must indicate which icons are
-available in your application. This documentation, like any application using this
-package, has its own subset of icons:
-
-<ul class="list-inline">
-  <li v-for="(icon, i) in fas" :key="i" class="p-1 text-primary list-inline-item mb-2">
-    <fa :icon="icon" fixed-width size="2x" />
-  </li>  
-</ul>
-
-This way, your application stays small and doesn't load unecessary icon — especialy
-if it only uses components that require only a few icons. Because icons are lazy
-loaded, you might see this list grow while visiting other components. These icons
-are added using the following method:
-
-```js
-// Target the icon you need to add to your library
-import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
-// Import the library instance provided by FontAwesome
-import { library } from '@icij/murmur/lib/components/Fa'
-
-// And add the bars to the library
-library.add(faBars)
-```
-
-You can now use the `bars` icon in you templates using the Fa component:
-
-```html
-<fa icon="bars" />
-```
-
-<script>
-  import { get, uniqBy } from 'lodash'
-  import { library } from '@/components/Fa'
-
-  export default {
-    computed: {
-      fas () {
-        return uniqBy(Object.keys(library.definitions.fas || {}), key => {
-          return get(library.definitions.fas, [key, 2])
-        })
-      }
-    }
-  }
-</script>

package/docs/pages/visual/states/doc.md

@@ -1,77 +0,0 @@
-
-## Alerts
-
-Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-
-:::sample-card
-<template>
-  <div class="p-4 bg-white">
-    <b-alert variant="primary" show>
-      A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <b-alert variant="secondary" show>
-      A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <b-alert variant="success" show>
-      A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <b-alert variant="danger" show>
-      A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <b-alert variant="warning" show>
-      A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <b-alert variant="info" show>
-      A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <hr />
-    <b-alert variant="light" show>
-      A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-    <b-alert variant="dark" show>
-      A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
-    </b-alert>
-  </div>
-</template>
-:::
-
-## Badges
-
-Provide badges, our small count and labeling component.
-
-:::sample-card
-<template>
-  <div class="p-4 bg-white">
-    <b-badge variant="primary" class="mr-1">Primary</b-badge>
-    <b-badge variant="secondary" class="mr-1">Secondary</b-badge>
-    <b-badge variant="success" class="mr-1">Success</b-badge>
-    <b-badge variant="danger" class="mr-1">Danger</b-badge>
-    <b-badge variant="warning" class="mr-1">Warning</b-badge>
-    <b-badge variant="info" class="mr-1">Info</b-badge>
-    <hr />
-    <b-badge variant="light" class="mr-1">Light</b-badge>
-    <b-badge variant="dark" class="mr-1"">Dark</b-badge>
-  </div>
-</template>
-:::
-
-## Buttons
-
-Provide custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
-
-:::sample-card
-<template>
-  <div class="p-4 bg-white">
-    <b-button variant="primary" class="mr-1">Primary</b-button>
-    <b-button variant="secondary" class="mr-1">Secondary</b-button>
-    <b-button variant="success" class="mr-1">Success</b-button>
-    <b-button variant="danger" class="mr-1">Danger</b-button>
-    <b-button variant="warning" class="mr-1">Warning</b-button>
-    <b-button variant="info" class="mr-1">Info</b-button>
-    <hr />
-    <b-button variant="light" class="mr-1">Light</b-button>
-    <b-button variant="dark" class="mr-1">Dark</b-button>
-    <b-button variant="link" class="mr-1">Link</b-button>
-  </div>
-</template>
-:::

package/docs/pages/visual/themes/doc.md

@@ -1,3 +0,0 @@
----
-badge: TODO
----

package/docs/pages/visual/typography/doc.md

@@ -1,71 +0,0 @@
-## Headings
-
-All HTML headings, `<h1>` through `<h6>`, are available with the <strong>{{ headingsFontFamily }}</strong> font.
-
-Heading | Example
---- | ---
-`<h1></h1>` | <h1>h1. Bootstrap heading</h1>
-`<h2></h2>` | <h2>h2. Bootstrap heading</h2>
-`<h3></h3>` | <h3>h3. Bootstrap heading</h3>
-`<h4></h4>` | <h4>h4. Bootstrap heading</h4>
-`<h5></h5>` | <h5>h5. Bootstrap heading</h5>
-`<h6></h6>` | <h6>h6. Bootstrap heading</h6>
-
-## Jumbotron
-
-A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. Jumbotron main header uses the <strong>{{ jumbotronFontFamily }}</strong> font.
-
-Bellow an example combined with a  `textured-deck`:
-
-:::sample-card
-<div>
-  <textured-deck black value="brick">
-    <b-jumbotron header="ICIJ" lead="For more information visit ICIJ website" bg-variant="transparent" class="m-0">
-      <b-button variant="primary" href="https://icij.org">More Info</b-button>
-    </b-jumbotron>
-  </textured-deck>
-</div>
-:::
-
-## Font utilities
-
-Alternativly you can specify which font use with a class:
-
-
-Class | Example | Font
---- | --- | ---
-`text-jumbotron` | <div class="text-jumbotron">div. Text with font jumbotron</div> | {{ jumbotronFontFamily }}
-`text-serif` | <div class="text-serif">div. Text with font serif</div> | {{ serifFontFamily }}
-`text-sans-serif` | <div class="text-sans-serif">div. Text with font sans-serif</div> | {{ sansSerifFontFamily }}
-`text-monospace` | <div class="text-monospace">div. Text with font monospace</div> | {{ monospaceFontFamily }}
-
-<script>
-  import { get, trim } from 'lodash'
-  import mainVariables from '@/styles/variables.scss?sass-vars'
-
-  export default {
-    computed: {
-      headingsFontFamily () {
-        return this.getFontValue("$headings-font-family")
-      },
-      jumbotronFontFamily () {
-        return this.getFontValue("$jumbotron-font-family")
-      },
-      serifFontFamily () {
-        return this.getFontValue("$font-family-serif")
-      },
-      sansSerifFontFamily () {
-        return this.getFontValue("$font-family-sans-serif")
-      },
-      monospaceFontFamily () {
-        return this.getFontValue("$font-family-monospace")
-      }
-    },
-    methods: {
-      getFontValue (name) {
-        const [ font ] = get(mainVariables, name, [null])
-        return trim(font, '\'"')
-      }
-    }
-  }
-</script>

package/docs/routes.js

@@ -1,25 +0,0 @@
-import filter from 'lodash/filter'
-import docsFrontMatter from 'virtual:docs'
-
-const PAGE_COMPONENTS = import.meta.glob(`./pages/**/*/doc.md`)
-
-export function loadComponent(section, name) {
-  return PAGE_COMPONENTS[`./pages/${section}/${name}/doc.md`]
-}
-
-export function filterRoutes(predicate = {}) {
-  return filter(routes, predicate)
-}
-
-const routes = [
-  {
-    path: '/',
-    redirect: '/getting-started/installation-guide'
-  },
-  ...docsFrontMatter.map(doc => {
-    const component = loadComponent(doc.meta.section, doc.name)
-    return { ...doc, component }
-  })
-]
-
-export default routes;

package/docs/store/index.js

@@ -1,21 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-    collapseMenu: true
-  },
-  mutations: {
-    toggleMenu (state) {
-      state.collapseMenu = !state.collapseMenu
-    },
-    collapseMenu (state) {
-      state.collapseMenu = true
-    },
-    showMenu (state) {
-      state.collapseMenu = false
-    }
-  }
-})

package/docs/styles/app.scss

@@ -1,36 +0,0 @@
-// Import your library's styles
-@import './variables.scss';
-@import '../../lib/styles/lib.scss';
-@import 'node_modules/bootstrap/scss/bootstrap';
-@import 'node_modules/bootstrap-vue/dist/bootstrap-vue';
-@import 'node_modules/highlight.js/styles/base16/bright';
-
-.app__main {
-  p a:not(.nav-link):not(.btn),
-  article a:not(.nav-link):not(.btn),
-  li:not(.ordinal-legend__item) a:not(.nav-link):not(.btn) {
-    border-bottom: 1px solid $primary;
-  }
-
-  &__view {
-    table {
-      @extend .table;
-    }
-  }
-}
-
-.card-xs {
-  max-width: 330px;
-}
-
-@each $breakpoint, $width in $container-max-widths {
-  .card-#{$breakpoint} {
-    max-width: $width;
-  }
-}
-
-.header-anchor {
-  display: none
-}
-
-

package/docs/styles/variables.scss

@@ -1,20 +0,0 @@
-@import '@/styles/variables.scss';
-
-$docs-menu-bg: #000;
-$docs-menu-color: #fff;
-$docs-menu-muted: mix($docs-menu-bg, $docs-menu-color, 50%);
-
-$docs-header-bg: $jumbotron-bg;
-$docs-header-border-color: darken($docs-header-bg, 10%);
-
-$pre-color: $light;
-$app-menu-max-width: 300px;
-$app-main-max-width: 770px;
-
-$modal-backdrop-bg: rgba(darken($dark, 10%), .5);
-$code-color: $info;
-
-$link-color: #000;
-$link-decoration: none;
-$link-hover-color: $primary;
-$link-hover-decoration: none;

package/loaders/highlight-loader.js

@@ -1,13 +0,0 @@
-const hljs = require('highlight.js')
-const loaderUtils = require('loader-utils')
-
-module.exports = function highlightLoader(source) {
-  this && this.cacheable && this.cacheable()
-  const query = loaderUtils.parseQuery(this.query || '?')
-  const language = query.lang
-  const code = hljs.getLanguage(language) ? hljs.highlight(source, { language }) : hljs.highlightAuto(source)
-  const json = JSON.stringify(code.value)
-    .replace(/\u2028/g, '\\u2028')
-    .replace(/\u2029/g, '\\u2029');
-  return `module.exports = ${json}`;
-}

package/loaders/markdown-loader.js

@@ -1,91 +0,0 @@
-'use strict'
-
-/**
- * @src https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/markdown-loader
- * Module dependencies.
- */
-
-const { EventEmitter } = require('events')
-const { getOptions } = require('loader-utils')
-const { fs, path, hash, parseFrontmatter, } = require('@vuepress/shared-utils')
-const LRU = require('lru-cache')
-const md = require('@vuepress/markdown')
-
-const cache = LRU({ max: 1000 })
-
-/**
- * Expose markdown loader.
- */
-
-module.exports = function (src) {
-  const isProd = process.env.NODE_ENV === 'production'
-  const options = getOptions(this)
-  const { sourceDir } = options
-  let { markdown } = options
-  // Duck-typing to ensure we received a correct markdown-it instance
-  if (!markdown || !markdown.parse) {
-    markdown = md()
-  }
-
-  // we implement a manual cache here because this loader is chained before
-  // vue-loader, and will be applied on the same file multiple times when
-  // selecting the individual blocks.
-  const file = this.resourcePath
-  const key = hash(file + src)
-  const cached = cache.get(key)
-  if (cached && (isProd || /\?vue/.test(this.resourceQuery))) {
-    return cached
-  }
-
-  const frontmatter = parseFrontmatter(src)
-  const content = frontmatter.content
-
-  // the render method has been augmented to allow plugins to
-  // register data during render
-  const { html, data: { hoistedTags, links }, dataBlockString } = markdown.render(content)
-
-  // check if relative links are valid
-  links && links.forEach(link => {
-    link = decodeURIComponent(link)
-
-    const shortname = link
-      .replace(/#.*$/, '')
-      .replace(/\.html$/, '.md')
-
-    const filename = shortname
-      .replace(/\/$/, '/README.md')
-      .replace(/^\//, sourceDir + '/')
-
-    const altname = shortname
-      .replace(/\/$/, '/index.md')
-      .replace(/^\//, sourceDir + '/')
-
-    const dir = path.dirname(this.resourcePath)
-    const file = path.resolve(dir, filename)
-    const altfile = altname !== filename ? path.resolve(dir, altname) : null
-
-    if (!fs.existsSync(file) && (!altfile || !fs.existsSync(altfile))) {
-      this.emitWarning(
-        new Error(
-          `\nFile for relative link "${link}" does not exist.\n` +
-          `(Resolved file: ${file})\n`
-        )
-      )
-    }
-  })
-
-  const res = (
-    `<template>\n` +
-      `<div>${html}</div>\n` +
-    `</template>\n` +
-    `<script>
-      export default { }
-    </script>` +
-    (hoistedTags || []).join('\n') +
-    `\n${dataBlockString}\n`
-  )
-  cache.set(key, res)
-  return res
-}
-
-module.exports.frontmatterEmitter = new EventEmitter()

package/loaders/metadata-loader.js

@@ -1,18 +0,0 @@
-const frontmatter = require('front-matter')
-const startCase = require('lodash/startCase')
-const { dirname, extname, relative } = require('path')
-
-module.exports = function metadataLoader(source) {
-  this && this.cacheable && this.cacheable();
-
-  const metadata = {
-    title: startCase(dirname(this.resourcePath).split('/').pop()),
-    resourcePath: relative('./', this.resourcePath)
-  }
-
-  if (extname(this.resourcePath) === '.md') {
-    Object.assign(metadata, frontmatter(source).attributes)
-  }
-
-  return JSON.stringify(metadata)
-}