feat: Publish v0.0.1

kewitz · Nov 8, 2017 · db721ea · db721ea
commit db721ea
Show file tree

Hide file tree

Showing 10 changed files with 1,867 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,12 @@
+{
+  "extends": ["@invisible"],
+  "globals": {
+    "define": true,
+    "document": true,
+    "self": true,
+    "window": true
+  },
+  "rules": {
+    "no-restricted-globals": 0
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,63 @@
+![](demo.png)
+
+# concealed
+
+Tired of Lorem Ipsum? Use dummy text blocks.
+
+## Using
+
+### Browser Global
+```html
+<head>
+  ...
+  <script src="concealed.js"></script>
+</head>
+<body>
+  ...
+  <h1 data-conceal="3"></h1>
+  <div class="summary" data-conceal="15"></div>
+  ...
+  <script>
+    Conceal()
+  </script>
+</body>
+```
+
+### Module
+
+```
+yarn install concealed
+```
+
+```js
+import conceal from 'concealed'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const App = () => (
+  <div>
+    <div className="content">
+      <h1 data-conceal="2"></h1>
+    </div>
+    <div className="content">
+      <h2 data-conceal="4"></h2>
+      <div className="summary" data-conceal="50"></div>
+    </div>
+    <div className="content">
+      <h2 data-conceal="3"></h2>
+      <div className="summary" data-conceal="30"></div>
+    </div>
+    <div className="content">
+      <h2 data-conceal="2"></h2>
+      <div className="summary" data-conceal="20"></div>
+    </div>
+  </div>
+)
+
+ReactDOM.render(
+  <App />,
+  document.body,
+)
+
+conceal()
+```
diff --git a/concealed.js b/concealed.js
@@ -0,0 +1,60 @@
+'use strict'
+
+;(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], factory)
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory()
+  } else {
+    // Browser globals (root is window)
+    root.Conceal = factory()
+  }
+}(typeof self !== 'undefined' ? self : this, () => {
+  const toI = v => parseInt(v, 10)
+  const range = length => Array.from({ length }, (v, i) => i)
+  const findLast = (predicate, array) =>
+    array.reduce((p, c) => (predicate(c) ? c : p))
+
+  const wordLengthCummulativeHistogram = [0, 0.04983818770226537, 0.20614886731391585, 0.4, 0.5799352750809061, 0.7016181229773463, 0.8090614886731391, 0.8822006472491909, 0.9242718446601941, 0.9540453074433656, 0.9721682847896439, 0.9841423948220064, 0.9915857605177992, 0.9961165048543688, 0.9977346278317151, 0.9993527508090614, 0.9999999999999999]
+
+  const genWordLength = () => {
+    const pred = v => v < Math.random()
+    return wordLengthCummulativeHistogram
+      .indexOf(findLast(pred, wordLengthCummulativeHistogram))
+  }
+
+  const conceal = element => {
+    const words = toI(element.attributes['data-conceal'].value)
+    const style = window.getComputedStyle(element)
+    const height = toI(style.fontSize)
+    const { color } = style
+
+    const makeWord = () => {
+      const word = document.createElement('canvas')
+      const letters = genWordLength()
+      word.height = height
+      word.width = toI(letters * (height * 0.6))
+      word.style.backgroundColor = color
+      return word
+    }
+
+    range(words)
+      .map(makeWord)
+      .forEach(e => element.appendChild(e))
+  }
+
+  const init = () =>
+    [...document
+      .querySelectorAll('[data-conceal]')]
+      .map(conceal)
+
+  const style = document.createElement('style')
+  style.textContent = '[data-conceal] canvas { border: none; display: inline; margin-right: .2em; vertical-align: top; }'
+  document.head.appendChild(style)
+
+  return init
+}))
diff --git a/demo.png b/demo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Concealed.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="description" content="Tired of Lorem Ipsum? Use dummy text blocks.">
+    <meta name="author" content="Leonardo Kewitz">
+    <meta name="keywords" content="Leonardo Kewitz, Software Engineer, JavaScript">
+    <meta property="og:description" content="Tired of Lorem Ipsum? Use dummy text blocks.">
+    <meta property="og:title" content="Concealed.js">
+    <link href="styles/style.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <script src="concealed.js"></script>
+    <!-- Highlight.JS -->
+    <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/color-brewer.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+  </head>
+  <body>
+    <header>
+      <div class="content">
+        <h1 data-conceal="2"></h1>
+        <div class="summary" data-conceal="10"></div>
+      </div>
+    </header>
+
+    <section>
+      <div class="content">
+        <h1 data-conceal="3"></h1>
+        <div class="summary" data-conceal="15"></div>
+        <pre><code class="html">&lt;head&gt;
+  ...
+  &lt;script src="concealed.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  ...
+  &lt;h1 data-conceal="3"&gt;&lt;/h1&gt;
+  &lt;div class="summary" data-conceal="15"&gt;&lt;/div&gt;
+  ...
+  &lt;script&gt;
+    Conceal()
+  &lt;/script&gt;
+&lt;/body&gt;</code></pre>
+        <div class="summary" data-conceal="15"></div>
+        <pre><code class="js">import conceal from "concealed";
+import React from "react";
+import ReactDOM from "react-dom";
+
+const App = () =&gt; (
+  &lt;div&gt;
+    &lt;div className="content"&gt;
+      &lt;h1 data-conceal="2" /&gt;
+    &lt;/div&gt;
+    &lt;div className="content"&gt;
+      &lt;h2 data-conceal="4" /&gt;
+      &lt;div className="summary" data-conceal="50" /&gt;
+    &lt;/div&gt;
+    &lt;div className="content"&gt;
+      &lt;h2 data-conceal="3" /&gt;
+      &lt;div className="summary" data-conceal="30" /&gt;
+    &lt;/div&gt;
+    &lt;div className="content"&gt;
+      &lt;h2 data-conceal="2" /&gt;
+      &lt;div className="summary" data-conceal="20" /&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+);
+
+ReactDOM.render(&lt;App /&gt;, document.body);
+
+conceal();</code></pre>
+      </div>
+    </section>
+
+  <script>
+    Conceal()
+  </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "concealed",
+  "version": "0.0.1",
+  "description": "Tired of Lorem Ipsum? Use dummy text blocks.",
+  "main": "concealed.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "eslint conceal.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/kewitz/concealed.git"
+  },
+  "keywords": [
+    "lorem",
+    "ipsum",
+    "concealed",
+    "dummy",
+    "text",
+    "generator"
+  ],
+  "author": "Leonardo Kewitz <leokewitz@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kewitz/concealed/issues"
+  },
+  "homepage": "https://github.com/kewitz/concealed#readme",
+  "devDependencies": {
+    "@invisible/eslint-config": "^1.1.7",
+    "eslint": "^4.10.0"
+  }
+}