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

Commit

Permalink
feat(Extensions): Add cite-author-year extension
Browse files Browse the repository at this point in the history
  • Loading branch information
@nokome
nokome committed Mar 18, 2021
1 parent f5eeff2 commit fb534e2
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 85 deletions.
110 changes: 56 additions & 54 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,16 +130,18 @@ 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`). |
| [cite-apa](./themes/cite-apa) | Provides styling for in-text citations and bibliographies in accordance with the [American Psychological Association (APA) style](https://en.wikipedia.org/wiki/APA_style). |
| [cite-mla](./themes/cite-mla) | Provides styling for in-text citations and bibliographies in accordance with the [Modern Language Association (MLA) style](https://style.mla.org/). |
| [code](./themes/code) | Provides syntax highlighting for `CodeFragment` and `CodeBlock` nodes using [Prism](https://prismjs.com/). Will not style executable node types like `CodeExpression` and `CodeChunk` which are styled by the base Stencila Web Components. |
| [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. |
| [organization](./themes/organization) | Provides styling of `Organization` nodes e.g the `authors` of an article, or affiliations for each `author` in it's `authors` list. |
| [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`. |
| 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`). |
| [cite-apa](./themes/cite-apa) | Provides styling for in-text citations and bibliographies in accordance with the [American Psychological Association (APA) style](https://en.wikipedia.org/wiki/APA_style). |
| [cite-author-year](./themes/cite-author-year) | CSS styles to support author-year in-text citations as used in citation styles such as APA, Chicago and MLA. |
| [cite-mla](./themes/cite-mla) | Provides styling for in-text citations and bibliographies in accordance with the [Modern Language Association (MLA) style](https://style.mla.org/). |
| [cite-numeric](./themes/cite-numeric) | CSS styles to support numeric in-text citations (e.g. Vancouver, IEEE citation styles). |
| [code](./themes/code) | Provides syntax highlighting for `CodeFragment` and `CodeBlock` nodes using [Prism](https://prismjs.com/). Will not style executable node types like `CodeExpression` and `CodeChunk` which are styled by the base Stencila Web Components. |
| [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. |
| [organization](./themes/organization) | Provides styling of `Organization` nodes e.g the `authors` of an article, or affiliations for each `author` in it's `authors` list. |
| [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 @@ -438,15 +440,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 @@ -457,23 +459,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 @@ -483,23 +485,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 @@ -509,27 +511,27 @@ select(elem, ':--author')
### create([spec], [attributes], ...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 (or SVG) string (b) a CSS selector like string, or (c) an `Element`.
CSS selectors are a 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.
Alternatively, the second argument can be an object of attribute name:value pairs.

| Param | Type | Description |
| --- | --- | --- |
| [spec] | <code>string</code> \| <code>Element</code> | Specification of element to create. |
| [attributes] | <code>object</code> \| <code>undefined</code> \| <code>null</code> \| <code>boolean</code> \| <code>number</code> \| <code>string</code> \| <code>Element</code> | Attributes for the element. |
| ...children | <code>undefined</code> \| <code>null</code> \| <code>boolean</code> \| <code>number</code> \| <code>string</code> \| <code>Element</code> | Child nodes to to add as text content or elements. |

**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 @@ -539,15 +541,15 @@ 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'))
// <div itemscope="" itemtype="http://schema.org/Person">
// <span itemprop="name">John Doe</span>
// </div>
```
**Example** *(Create a link around an SVG image)*
**Example** *(Create a link around an SVG image)*
```js

create('a', {href: 'https://example.com'}, create(imageSVG))
Expand All @@ -560,31 +562,31 @@ create('a', {href: 'https://example.com'}, create(imageSVG))
### tag(target, [value]) ⇒ <code>string</code> \| <code>Element</code>
Get or set the tag name of an element.

**Kind**: global function
**Kind**: global function
**Returns**: <code>string</code> \| <code>Element</code> - The lowercase tag name when getting,
a new element when setting.
a new element when setting.
**Detail**: Caution must be used when setting the tag. This function
does not actually change the tag of the element (that is not possible)
but instead returns a new `Element` that is a clone of the original apart
from having the new tag name. Use the `replace` function where necessary
in association with this function.
in association with this function.

| Param | Type | Description |
| --- | --- | --- |
| target | <code>Element</code> | The element to get or set the tag |
| [value] | <code>string</code> | The value of the tag (when setting) |

**Example** *(Get the tag name as a lowercase string)*
**Example** *(Get the tag name as a lowercase string)*
```js

tag(elem) // "h3"
```
**Example** *(Setting the tag actually returns a new element)*
**Example** *(Setting the tag actually returns a new element)*
```js

tag(tag(elem, 'h2')) // "h2"
```
**Example** *(Change the tag name of an element)*
**Example** *(Change the tag name of an element)*
```js

replace(elem, tag(elem, 'h2'))
Expand All @@ -594,8 +596,8 @@ replace(elem, tag(elem, 'h2'))
### attrs(target, [attributes]) ⇒ <code>object</code> \| <code>undefined</code>
Get or set the attributes of an element

**Kind**: global function
**Returns**: <code>object</code> \| <code>undefined</code> - The attributes of the element when getting, `undefined` when setting
**Kind**: global function
**Returns**: <code>object</code> \| <code>undefined</code> - The attributes of the element when getting, `undefined` when setting

| Param | Type | Description |
| --- | --- | --- |
Expand All @@ -607,21 +609,21 @@ Get or set the attributes of an element
### attr(target, name, [value]) ⇒ <code>string</code> \| <code>null</code>
Get or set the value of an attribute on an element.

**Kind**: global function
**Returns**: <code>string</code> \| <code>null</code> - a `string` if the attribute exists, `null` if does not exist, or when setting
**Kind**: global function
**Returns**: <code>string</code> \| <code>null</code> - a `string` if the attribute exists, `null` if does not exist, or 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 @@ -631,21 +633,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 @@ -655,7 +657,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 @@ -667,10 +669,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 @@ -682,7 +684,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 @@ -694,7 +696,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 @@ -706,7 +708,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 @@ -718,17 +720,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
31 changes: 3 additions & 28 deletions src/extensions/cite-apa/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,9 @@
/*
In-text citations
/*
Author-year style in-text citations
See https://en.wikipedia.org/wiki/APA_style#In-text_citations
*/
:--CiteGroup {
&::before {
content: '(';
}

&::after {
content: ')';
}

:--Cite {
&:not(:last-child)::after {
content: ';\00a0';
order: 100;
}
}
}

/* Hide numeric citation format */
:--Cite > a > :first-child {
display: none;
}

/* Ensure that at least one citation format is visible */
:--Cite > a > :only-child {
display: inline;
}
@import '../cite-author-year/styles.css';

/*
Reference list
Expand Down
3 changes: 3 additions & 0 deletions src/extensions/cite-author-year/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Author-year in-text citations extension

CSS styles to support author-year in-text citations as used in citation styles such as APA, Chicago and MLA.
Loading

0 comments on commit fb534e2

Please sign in to comment.