json-timeline

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Home</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Home</h1> <h3> </h3> <section> <article><h1>json-timeline</h1> <h2>Overview</h2> <p>Generate Interactive Timelines stored in JSON Advents with Tags.</p> <h2>Usage</h2> <p>To install the command-line application:</p> <pre class="prettyprint source lang-shell"><code>npm install json-timeline </code></pre> <p>To use the command-line application:</p> <pre class="prettyprint source lang-shell"><code>json-timeline path/to/advents/ path/to/output/ [vf] </code></pre> <h3>Process</h3> <p>Advents are loaded from the <code>path/to/advents</code> directory to generate a HTML/CSS/JS template (<code>index.html</code>, <code>index.css</code>, <code>index.js</code>, <code>renderAdvents.js</code>, <code>advents.js</code>) in the <code>path/to/output</code> directory. Existing files that clash names with the generated files will not be overwritten by default except for <code>advents.js</code>.</p> <h3>Arguments</h3> <table> <thead> <tr> <th>Argument</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>path/to/advents/</code></td> <td>Path to Advents Directory</td> </tr> <tr> <td><code>path/to/output/</code></td> <td>Path to Output Directory</td> </tr> <tr> <td><code>[vf]</code></td> <td><code>v</code>: verbose logging, <code>f</code>: force overwrites</td> </tr> </tbody> </table> <h2>Advents</h2> <p>Advents represent events in the timeline that each include a mandatory start date, title, content, and tags. An optional end date can also be supplied to change the date range in the rendered Advent DOM.</p> <p>Advents are stored as JSON objects in <code>*.advent.json</code> files or default exports of <code>*.advent.js</code> files in a directory specified in <code>path/to/advents/</code>.</p> <p>The Advent Schema can be found in <a href="./src/schema/schemas.js"><code>schemas.js</code></a>:</p> <pre class="prettyprint source lang-javascript"><code>// AdventSchema { "start": DateSchema, "end?": DateSchema, "title": String, "content": String, "tags": Array.of(String) } // DateSchema { "month": Number, "day": Number, "year": Number } </code></pre> <p>Examples of Advents can be found in <a href="./tst/example/"><code>tst/example/</code></a>.</p> <h2>Customization</h2> <p>By default, json-timeline generates a basic template that can be deployed as a static site (such as on GitHub pages). The template files can be edited safely after they have been generated once since running json-timeline again will not overwrite the edited files by default.</p> <ul> <li><code>index.html</code> provides a minimal HTML file</li> <li><code>index.css</code> provides styling for the rendered HTML</li> <li><code>index.js</code> is the entry point of the javascript</li> <li><code>renderedAdvents.js</code> dynamically generates HTML</li> <li><code>advents.js</code> provides the Advents and Tags and should NOT be edited</li> </ul> <p>As reference for writing custom HTML/CSS/JS extending the template, minimal HTML are listed below.</p> <h3>Timeline</h3> <pre class="prettyprint source lang-html"><code><body>  <p class="timeline mono-text">Timeline</p>  <nav></nav>  <main></main> </body> </code></pre> <h3>Tag Toggles DOM</h3> <pre class="prettyprint source lang-html"><code><nav>  <p class="toggle-container-title mono-text">Tags [▼]</p>  <div class="toggles-container hidden"></div> </nav> </code></pre> <h3>Tag Toggle DOM</h3> <pre class="prettyprint source lang-html"><code><div class="toggles-container hidden">  <div class="toggle-container">  <input type="checkbox" checked="true" class="tag-toggle">  <label class="tag-toggle-label mono-text">Tag Name</label> </div> </div> </code></pre> <h3>Advent Group DOM</h3> <pre class="prettyprint source lang-html"><code><main>  <div class="group">  <p class="group-date mono-text">1/1/1970 [▼]</p>  <div class="advents hidden"></div> </div> </main> </code></pre> <h3>Advent DOM</h3> <pre class="prettyprint source lang-html"><code><div class="advents hidden">  <div class="advent">  <p class="title mono-text">Advent Title</p>  <p class="date mono-text">1/1/1970</p>  <p class="tags mono-text">Tags:Tag1,Tag2</p>  <p class="content read-text">Output content here.</p> </div> </div> </code></pre></article> </section> </div> <nav> <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-advents.html">advents</a></li><li><a href="module-compareDates.html">compareDates</a></li><li><a href="module-groupAdvents.html">groupAdvents</a></li><li><a href="module-index.html">index</a></li><li><a href="module-isType.html">isType</a></li><li><a href="module-json-timeline.html">json-timeline</a></li><li><a href="module-loadAdvents.html">loadAdvents</a></li><li><a href="module-renderAdvents.html">renderAdvents</a></li><li><a href="module-schemas.html">schemas</a></li><li><a href="module-sortAdvents.html">sortAdvents</a></li><li><a href="module-validateSchema.html">validateSchema</a></li></ul> </nav> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.6</a> on Mon Dec 14 2020 23:14:56 GMT-0500 (Eastern Standard Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"> </script> </body> </html>