From 5039e411aa5b6749b11ee64db64f2bfac6dc3f7d Mon Sep 17 00:00:00 2001 From: alex-ketch Date: Wed, 26 Feb 2020 22:04:45 -0500 Subject: [PATCH] fix(README): Fix generation of MD table for list of Themes and Extension --- README.md | 93 +++++++++++++++++++++++-------------------- package.json | 2 +- src/scripts/readme.ts | 4 +- 3 files changed, 52 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 39ba2c0d0..5f0ae36da 100644 --- a/README.md +++ b/README.md @@ -63,15 +63,18 @@ npm install @stencila/thema -| Name | Description | -| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [bootstrap](./themes/bootstrap) | A theme that pulls itself up using Twitter's [Bootstrap](https://getbootstrap.com/) toolkit. | -| [elife](./themes/elife) | A theme for the journal eLife. | -| [nature](./themes/nature) | A theme for the journal Nature. | -| [plos](./themes/plos) | A theme for the journal PLoS. | -| [rpng](./themes/rpng) | A theme for reproducible PNGs (rPNGs). This theme is used in Encoda when generating rPNGs. | -| [skeleton](./themes/skeleton) | A theme with lots of bones but no flesh. Designed to be used as a starting point for creating new themes, it only has empty stubs for each semantic selector e.g. | -| [stencila](./themes/stencila) | A theme reflecting Stencila's brand and [design system](https://github.com/stencila/designa). | + +| Name | Description | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [bootstrap](./themes/bootstrap) | A theme that pulls itself up using Twitter's [Bootstrap](https://getbootstrap.com/) toolkit. | +| [elife](./themes/elife) | A theme for the journal eLife. | +| [nature](./themes/nature) | A theme for the journal Nature. | +| [plos](./themes/plos) | A theme for the journal PLoS. | +| [rpng](./themes/rpng) | A theme for reproducible PNGs (rPNGs). This theme is used in Encoda when generating rPNGs. | +| [skeleton](./themes/skeleton) | A theme with lots of bones but no flesh.Designed to be used as a starting point for creating new themes, it tries to be as unopinionated as possible. | +| [stencila](./themes/stencila) | A theme reflecting Stencila's brand and [design system](https://github.com/stencila/designa). It is based on the Skeleton theme, and demonstrates how to customize a theme using CSS variables. | +| [wilmore](./themes/wilmore) | A theme well suited for consuming long-form manuscripts and prose. Named after Edmond Dantés' alias, [“Lord Wilmore: An Englishman, and the persona in which Dantès performs random acts of generosity.“](https://en.wikipedia.org/wiki/The_Count_of_Monte_Cristo#Edmond_Dantès_and_his_aliases) | + @@ -109,6 +112,7 @@ Extensions provide styling, and potentially interactivity, for node types that d + | Name | Description | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [cite](./themes/cite) | Provides styling for in-text citations (i.e. `Cite` and `CiteGroup` nodes) and bibliographies (i.e. `CreativeWork` nodes in the `references` property of another `CreativeWork`). | @@ -118,6 +122,7 @@ Extensions provide styling, and potentially interactivity, for node types that d | [math](./themes/math) | Provides styling of math nodes using MathJax fonts and styles. Use this if there is any likely to be math content, i.e. `MathFragment` and/or `MathBlock` nodes, in documents that your theme targets. | | [pages](./themes/pages) | Provides a [`@media print` CSS at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@page) to modify properties when printing a document e.g. to PDF. | | [person](./themes/person) | Provides styling of `Person` nodes e.g the `authors` of an article, or authors for each `citation` in it's `references`. | + @@ -392,15 +397,15 @@ Several utility functions are provided in the [`util`](./src/util) module for tr ### ready(func) Register a function to be executed when the DOM is fully loaded. -**Kind**: global function +**Kind**: global function **Detail**: Use this to wrap calls to the DOM selection and manipulation functions -to be sure that the DOM is ready before working on it. +to be sure that the DOM is ready before working on it. | Param | Type | Description | | --- | --- | --- | | func | function | Function to register | -**Example** +**Example** ```js ready(() => { // Use other DOM manipulation functions here @@ -411,23 +416,23 @@ ready(() => { ### first([elem], selector) ⇒ Element \| null Select the first element matching a CSS selector. -**Kind**: global function -**Returns**: Element \| null - An `Element` or `null` if no match +**Kind**: global function +**Returns**: Element \| null - An `Element` or `null` if no match **Detail**: This function provides a short hand for `querySelector` but also allowing for the use of semantic selectors. -You can use it for the whole document, or scoped to a particular element. +You can use it for the whole document, or scoped to a particular element. | Param | Type | Description | | --- | --- | --- | | [elem] | Element | The element to query (defaults to the `window.document`) | | selector | string | The selector to match | -**Example** *(Select the first element from the document matching selector)* +**Example** *(Select the first element from the document matching selector)* ```js first(':--CodeChunk') ``` -**Example** *(Select the first element within an element matching the selector)* +**Example** *(Select the first element within an element matching the selector)* ```js first(elem, ':--author') @@ -437,23 +442,23 @@ first(elem, ':--author') ### select([elem], selector) ⇒ Array.<Element> Select all elements matching a CSS selector. -**Kind**: global function -**Returns**: Array.<Element> - An array of elements +**Kind**: global function +**Returns**: Array.<Element> - An array of elements **Detail**: Provides a short hand for using `querySelectorAll` but also allowing for the use of semantic selectors. You can use it for -the whole document, or scoped to a particular element. +the whole document, or scoped to a particular element. | Param | Type | Description | | --- | --- | --- | | [elem] | Element | The element to query (defaults to the `window.document`) | | selector | string | The selector to match | -**Example** *(Select all elements from the document matching selector)* +**Example** *(Select all elements from the document matching selector)* ```js select(':--CodeChunk') ``` -**Example** *(Select all elements within an element matching the selector)* +**Example** *(Select all elements within an element matching the selector)* ```js select(elem, ':--author') @@ -463,27 +468,27 @@ select(elem, ':--author') ### create([spec], ...children) ⇒ Element Create a new element. -**Kind**: global function +**Kind**: global function **Detail**: This function allows creation of new elements using either a (a) HTML string (b) CSS selector like string, or (c) an `Element`. CSS selectors are are convenient way to create elements with attributes, particularly Microdata elements. They can be prone to syntax errors however. Alternatively, the second argument can -be an object of attribute name:value pairs. +be an object of attribute name:value pairs. | Param | Type | Description | | --- | --- | --- | | [spec] | string \| Element | Specification of element to create. | | ...children | object \| string \| number \| Element | Additional child elements to add. If the first is an object then it is used to set the element's attributes. | -**Example** *(Create a <figure> with id, class and itemtype attributes)* +**Example** *(Create a <figure> with id, class and itemtype attributes)* ```js create('figure #fig1 .fig :--Figure') //
//
``` -**Example** *(As above but using an object to specify attributes)* +**Example** *(As above but using an object to specify attributes)* ```js create('figure', { @@ -493,7 +498,7 @@ create('figure', { itemtype: translate(':--Figure') }) ``` -**Example** *(Create a Person with a name property)* +**Example** *(Create a Person with a name property)* ```js create(':--Person', create('span :--name', 'John Doe')) @@ -506,9 +511,9 @@ create(':--Person', create('span :--name', 'John Doe')) ### attr(target, name, [value]) ⇒ string \| null \| undefined Get or set the value of an attribute on an element. -**Kind**: global function +**Kind**: global function **Returns**: string \| null \| undefined - `null` if the attribute does not exist, - `undefined` when setting + `undefined` when setting | Param | Type | Description | | --- | --- | --- | @@ -516,12 +521,12 @@ Get or set the value of an attribute on an element. | name | string | The name of the attribute | | [value] | string | The value of the attribute (when setting) | -**Example** *(Set an attribute value)* +**Example** *(Set an attribute value)* ```js attr(elem, "attr", "value") ``` -**Example** *(Get an attribute)* +**Example** *(Get an attribute)* ```js attr(elem, "attr") // "value" @@ -531,21 +536,21 @@ attr(elem, "attr") // "value" ### text(target, [value]) ⇒ string \| null \| undefined Get or set the text content of an element. -**Kind**: global function +**Kind**: global function **Returns**: string \| null \| undefined - `null` if there is no text content, - `undefined` when setting + `undefined` when setting | Param | Type | Description | | --- | --- | --- | | target | Element | The element to get or set the text content | | [value] | string | The value of the text content (when setting) | -**Example** *(Set the text content)* +**Example** *(Set the text content)* ```js text(elem, "text content") ``` -**Example** *(Get the text content)* +**Example** *(Get the text content)* ```js text(elem) // "text content" @@ -555,7 +560,7 @@ text(elem) // "text content" ### append(target, ...elems) Append new child elements to an element. -**Kind**: global function +**Kind**: global function | Param | Type | Description | | --- | --- | --- | @@ -567,10 +572,10 @@ Append new child elements to an element. ### prepend(target, ...elems) Prepend new child elements to an element. -**Kind**: global function +**Kind**: global function **Detail**: When called with multiple elements to prepend will maintain the order of those elements (at the top -of the target element). +of the target element). | Param | Type | Description | | --- | --- | --- | @@ -582,7 +587,7 @@ of the target element). ### before(target, ...elems) Insert new elements before an element. -**Kind**: global function +**Kind**: global function | Param | Type | Description | | --- | --- | --- | @@ -594,7 +599,7 @@ Insert new elements before an element. ### after(target, ...elems) Insert new elements after an element. -**Kind**: global function +**Kind**: global function | Param | Type | Description | | --- | --- | --- | @@ -606,7 +611,7 @@ Insert new elements after an element. ### replace(target, ...elems) Replace an element with a new element. -**Kind**: global function +**Kind**: global function | Param | Type | Description | | --- | --- | --- | @@ -618,17 +623,17 @@ Replace an element with a new element. ### wrap(target, elem) Wrap an element with a new element. -**Kind**: global function +**Kind**: global function **Detail**: This function can be useful if you need to create a container element to more easily style -a type of element. +a type of element. | Param | Description | | --- | --- | | target | The element to wrap | | elem | The element to wrap it in | -**Example** *(Wrap all figure captions in a <div>)* +**Example** *(Wrap all figure captions in a <div>)* ```js select(':--Figure :--caption') diff --git a/package.json b/package.json index 8831116be..f428c37b3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "types": "./dist/lib/index.d.ts", "scripts": { "prepare": "npm run update", - "update": "npm run update:selectors && npm run update:examples && npm run update:themes && npm run update:extensions", + "update": "npm run update:selectors && npm run update:examples && npm run update:themes && npm run update:extensions && npm run docs", "update:selectors": "ts-node --files src/scripts/selectors.ts", "update:examples": "ts-node --files src/scripts/examples.ts", "create:theme": "ts-node --files src/scripts/themes.ts create", diff --git a/src/scripts/readme.ts b/src/scripts/readme.ts index 80a957394..a9629dc81 100644 --- a/src/scripts/readme.ts +++ b/src/scripts/readme.ts @@ -51,7 +51,7 @@ async function generateThemeDocs(readme: string): Promise { ) return readme.replace( /[\s\S]*?/gm, - `\n${md}\n` + `\n\n${md}\n\n` ) } @@ -68,7 +68,7 @@ async function generateExtsDocs(readme: string): Promise { ) return readme.replace( /[\s\S]*?/gm, - `\n${md}\n` + `\n\n${md}\n\n` ) }