Merge pull request #26 from johnnyhuy/feature/add-spoilers

feat: Added remark spoilers plugin

README.md

@@ -6,6 +6,7 @@ Monorepo of [remark](https://github.com/remarkjs/remark) packages including a Ma
 
 - [`ggsmark`](https://github.com/johnnyhuy/ggsmark/tree/master/packages/ggsmark) - Markdown package used in ggs.sx
 - [`remark-text-alignment`](https://github.com/johnnyhuy/ggsmark/tree/master/packages/remark-text-alignment) - remark plugin to align text
+- [`remark-spoilers`](https://github.com/johnnyhuy/ggsmark/tree/master/packages/remark-spoilers) - remark spoilers to hide Markdown content
 - [`remark-color-text`](https://github.com/johnnyhuy/ggsmark/tree/master/packages/remark-color-text) - remark plugin to set colors inline and blocks
 
 ## Credits
@@ -14,10 +15,6 @@ This package is built on top of the [remarkjs/remark](https://github.com/remarkj
 
 Packages in this monorepo have taken inspiration from [zestedesavoir/zmarkdown](https://github.com/zestedesavoir/zmarkdown). Check out their large suite of plugins!
 
-## Installing
+## Contibuting
 
-When you have Node JS installed run the following command in your project.
-
-```bash
-yarn add ggsmark
-```
+Follow the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard to calculate versioning.

packages/ggsmark/README.md

@@ -1,13 +1,16 @@
 # GGSMark
 
-This is the Markdown package used in the GGS.SX website.
+Markdown package used in the [GGS.SX](https://ggs.sx/) website.
 
-## Usage
+## Installation
+
+```bash
+npm i ggsmark
+```
 
-Basic usage example:
+## Usage
 
 ```js
-// If you use ESModules
 import ggsmark from 'ggsmark'
 
 let output = ggsmark('**foo** bar')
@@ -20,15 +23,11 @@ It's also worth investigating unit tests to understand the expected output.
 ## Examples
 
 ### Strikethrough
+
 ```markdown
 ~~Text~~
 ```
 
-<!-- ### Spoiler
-```
-||secret suprise||
-``` -->
-
 ### SoundCloud
 
 ```markdown
@@ -40,4 +39,3 @@ It's also worth investigating unit tests to understand the expected output.
 ```markdown
 !(https://www.youtube.com/watch?v=pwmY1XUTBpE)
 ```
-

packages/ggsmark/index.js

@@ -8,6 +8,7 @@ import sanitize from 'rehype-sanitize'
 import iframe from 'remark-iframes'
 import align from 'remark-text-alignment'
 import color from 'remark-color-text'
+import spoilers from 'remark-spoilers'
 
 // Don't use remark-html otherwise we can't customize HTML
 import stringify from 'rehype-stringify'
@@ -85,6 +86,7 @@ export default (text) => {
     .use(rehype)
     .use(stringify)
     .use(color)
+    .use(spoilers)
     .use(sanitize, schema)
     .processSync(text)
     .toString()

packages/ggsmark/package.json

@@ -10,6 +10,7 @@
     "hast-util-sanitize": "^3.0.0",
     "rehype-sanitize": "^4.0.0",
     "rehype-stringify": "^8.0.0",
+    "remark-spoilers": "^0.0.0",
     "remark-color-text": "^0.0.2",
     "remark-iframes": "^4.0.4",
     "remark-parse": "^8.0.3",

packages/remark-color-text/README.md

@@ -1,6 +1,12 @@
 # remark-color-text
 
-Markdown extension for the Gentlemen's Gaming Society website.
+[remark](https://github.com/remarkjs/remark) plugin to color text via block and inline text in Markdown.
+
+## Installation
+
+```bash
+npm i remark-color-text
+```
 
 ## Usage
 
@@ -9,14 +15,11 @@ import remark from 'remark'
 import html from 'remark-html'
 import color from 'remark-color-text'
 
-// Basic use
-let output = remark()
+remark()
   .use(html)
   .use(color)
-  .processSync('example markdown text')
-  .toString()
 
-console.log(output)
+...
 ```
 
 ## Options
@@ -27,7 +30,7 @@ Add the color plugin to remark.
 
 ### `options`
 
-#### `options.tokens`
+#### `options.token`
 
 Token used to open and close colored text.
 

packages/remark-spoilers/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Johnny Huynh <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/remark-spoilers/README.md

@@ -0,0 +1,76 @@
+# remark-spoilers
+
+remark spoiler plugin that uses native [details and summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements.
+
+```html
+<details>
+  <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
+  A keyboard.
+</details>
+```
+
+## Installation
+
+```bash
+npm i remark-spoilers
+```
+
+## Usage
+
+```js
+import remark from 'remark'
+import html from 'remark-html'
+import spoilers from 'remark-spoilers'
+
+remark()
+  .use(html)
+  .use(spoilers)
+
+...
+```
+
+## Options
+
+### `.use(spoilers [, options])`
+
+Add the spoilers plugin to remark.
+
+### `options`
+
+#### `options.defaultSummary`
+
+The default summary text in the spoiler.
+
+**Default** `Open spoiler`
+
+#### `options.token`
+
+Token used to open and close spoilers text.
+
+**Default** `!spoiler`
+
+#### `options.detailsClassName`
+
+Class name for the `<details />` HTML element. No class name set by default.
+
+**Default** `''`
+
+#### `options.summaryClassName`
+
+Class name for the `<summary />` HTML element. No class name set by default.
+
+**Default** `''`
+
+## Examples
+
+```markdown
+# Basic spoiler
+!spoiler
+Hello world, I'm in a spoiler
+!spoiler
+
+# Basic spoiler with custom summary
+!spoiler Hello summary, click me to open the spoiler!
+Hello world, I'm in a spoiler
+!spoiler
+```

packages/remark-spoilers/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`spoilers should not show spoiler if duped start token 1`] = `
+"<details></details>
+<details></details>
+<details></details>
+<details></details>
+<details></details>
+<details></details>
+<p>why isn't this working!?</p>
+<p>there's no end!!!</p>
+"
+`;
+
+exports[`spoilers should not show spoiler if duped start token with summary 1`] = `
+"<details><summary>testestestsetset</summary></details>
+<details><summary>testipsum</summary></details>
+<p>!spoiler yeet</p>
+<p>why isn't this working!?</p>
+<p>there's no end!!!</p>
+"
+`;
+
+exports[`spoilers should not show spoiler if not closed 1`] = `
+"<p>!spoiler</p>
+<p>why isn't this working!?</p>
+<p>there's no end!!!</p>
+"
+`;
+
+exports[`spoilers should show multiple spoilers 1`] = `
+"<h1>Hello world</h1>
+<p>This is some text.</p>
+<details><summary>Click me to see a surprise</summary><p>peek-a-boo!</p></details>
+<p>between the spoilers</p>
+<details><summary>Another click me to see a surprise</summary><p>peek-a-boo!</p></details>
+<p>the end</p>
+"
+`;
+
+exports[`spoilers should show spoiler with custom summary 1`] = `
+"<details><summary>Click me to see a surprise</summary><p>peek-a-boo!</p></details>
+"
+`;
+
+exports[`spoilers should show spoiler without custom summary 1`] = `
+"<details><p>peek-a-boo!</p></details>
+"
+`;