Skip to content
This repository has been archived by the owner on Nov 17, 2021. It is now read-only.

Commit

Permalink
fix(README): Fix generation of MD table for list of Themes and Extension
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-ketch
alex-ketch committed Feb 27, 2020
1 parent e22a489 commit 5039e41
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 47 deletions.
93 changes: 49 additions & 44 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,18 @@ npm install @stencila/thema

<!-- prettier-ignore-start -->
<!-- THEMES-START -->
| 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) |

<!-- THEMES-END -->
<!-- prettier-ignore-end -->

Expand Down Expand Up @@ -109,6 +112,7 @@ Extensions provide styling, and potentially interactivity, for node types that d

<!-- prettier-ignore-start -->
<!-- EXTS-START -->

| 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`). |
Expand All @@ -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`. |

<!-- EXTS-END -->
<!-- prettier-ignore-end -->

Expand Down Expand Up @@ -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 | <code>function</code> | Function to register |

**Example**
**Example**
```js
ready(() => {
// Use other DOM manipulation functions here
Expand All @@ -411,23 +416,23 @@ ready(() => {
### first([elem], selector) ⇒ <code>Element</code> \| <code>null</code>
Select the first element matching a CSS selector.

**Kind**: global function
**Returns**: <code>Element</code> \| <code>null</code> - An `Element` or `null` if no match
**Kind**: global function
**Returns**: <code>Element</code> \| <code>null</code> - 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] | <code>Element</code> | The element to query (defaults to the `window.document`) |
| selector | <code>string</code> | 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')
Expand All @@ -437,23 +442,23 @@ first(elem, ':--author')
### select([elem], selector) ⇒ <code>Array.&lt;Element&gt;</code>
Select all elements matching a CSS selector.

**Kind**: global function
**Returns**: <code>Array.&lt;Element&gt;</code> - An array of elements
**Kind**: global function
**Returns**: <code>Array.&lt;Element&gt;</code> - 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] | <code>Element</code> | The element to query (defaults to the `window.document`) |
| selector | <code>string</code> | 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')
Expand All @@ -463,27 +468,27 @@ select(elem, ':--author')
### create([spec], ...children) ⇒ <code>Element</code>
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] | <code>string</code> \| <code>Element</code> | Specification of element to create. |
| ...children | <code>object</code> \| <code>string</code> \| <code>number</code> \| <code>Element</code> | Additional child elements to add. If the first is an object then it is used to set the element's attributes. |

**Example** *(Create a &lt;figure&gt; with id, class and itemtype attributes)*
**Example** *(Create a &lt;figure&gt; with id, class and itemtype attributes)*
```js

create('figure #fig1 .fig :--Figure')
// <figure id="fig1" class="fig" itemscope="" itemtype="http://schema.stenci.la/Figure">
// </figure>
```
**Example** *(As above but using an object to specify attributes)*
**Example** *(As above but using an object to specify attributes)*
```js

create('figure', {
Expand All @@ -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'))
Expand All @@ -506,22 +511,22 @@ create(':--Person', create('span :--name', 'John Doe'))
### attr(target, name, [value]) ⇒ <code>string</code> \| <code>null</code> \| <code>undefined</code>
Get or set the value of an attribute on an element.

**Kind**: global function
**Kind**: global function
**Returns**: <code>string</code> \| <code>null</code> \| <code>undefined</code> - `null` if the attribute does not exist,
`undefined` when setting
`undefined` when setting

| Param | Type | Description |
| --- | --- | --- |
| target | <code>Element</code> | The element to get or set the attribute |
| name | <code>string</code> | The name of the attribute |
| [value] | <code>string</code> | 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"
Expand All @@ -531,21 +536,21 @@ attr(elem, "attr") // "value"
### text(target, [value]) ⇒ <code>string</code> \| <code>null</code> \| <code>undefined</code>
Get or set the text content of an element.

**Kind**: global function
**Kind**: global function
**Returns**: <code>string</code> \| <code>null</code> \| <code>undefined</code> - `null` if there is no text content,
`undefined` when setting
`undefined` when setting

| Param | Type | Description |
| --- | --- | --- |
| target | <code>Element</code> | The element to get or set the text content |
| [value] | <code>string</code> | 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"
Expand All @@ -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 |
| --- | --- | --- |
Expand All @@ -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 |
| --- | --- | --- |
Expand All @@ -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 |
| --- | --- | --- |
Expand All @@ -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 |
| --- | --- | --- |
Expand All @@ -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 |
| --- | --- | --- |
Expand All @@ -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 &lt;div&gt;)*
**Example** *(Wrap all figure captions in a &lt;div&gt;)*
```js

select(':--Figure :--caption')
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/scripts/readme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ async function generateThemeDocs(readme: string): Promise<string> {
)
return readme.replace(
/<!-- THEMES-START -->[\s\S]*?<!-- THEMES-END -->/gm,
`<!-- THEMES-START -->\n${md}\n<!-- THEMES-END -->`
`<!-- THEMES-START -->\n\n${md}\n\n<!-- THEMES-END -->`
)
}

Expand All @@ -68,7 +68,7 @@ async function generateExtsDocs(readme: string): Promise<string> {
)
return readme.replace(
/<!-- EXTS-START -->[\s\S]*?<!-- EXTS-END -->/gm,
`<!-- EXTS-START -->\n${md}\n<!-- EXTS-END -->`
`<!-- EXTS-START -->\n\n${md}\n\n<!-- EXTS-END -->`
)
}

Expand Down

0 comments on commit 5039e41

Please sign in to comment.