feat(remark): add support for spoilers (#206)

.eslintrc.json

@@ -60,7 +60,6 @@
       "error",
       { "allowTypedFunctionExpressions": true }
     ],
-    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-non-null-assertion": "error",
     "@typescript-eslint/no-unused-vars": [
       "warn",
@@ -74,30 +73,31 @@
     ],
     "import/no-unresolved": "off",
     "import/prefer-default-export": "off",
-    "react/jsx-no-useless-fragment": ["warn", { "allowExpressions": true }],
     "no-console": ["warn", { "allow": ["error"] }],
     "no-nested-ternary": "off",
-    "no-use-before-define": "off",
-    "no-shadow": "off",
-    "no-underscore-dangle": "off",
-    "react/jsx-filename-extension": [
+    "no-param-reassign": ["error", { "props": false }],
+    "no-restricted-syntax": [
       "error",
-      { "extensions": [".jsx", ".tsx"] }
+      "ForInStatement",
+      "LabeledStatement",
+      "WithStatement"
     ],
-    "react/jsx-props-no-spreading": "off",
+    "no-shadow": "off",
+    "no-underscore-dangle": "off",
+    "no-use-before-define": "off",
     "react/function-component-definition": [
       "error",
       {
         "namedComponents": "arrow-function",
         "unnamedComponents": "arrow-function"
       }
     ],
-    "no-restricted-syntax": [
+    "react/jsx-filename-extension": [
       "error",
-      "ForInStatement",
-      "LabeledStatement",
-      "WithStatement"
-    ]
+      { "extensions": [".jsx", ".tsx"] }
+    ],
+    "react/jsx-no-useless-fragment": ["warn", { "allowExpressions": true }],
+    "react/jsx-props-no-spreading": "off"
   },
   "settings": {
     "import/resolver": {

CONTRIBUTING_WITH_MARKDOWN.org

@@ -73,30 +73,30 @@ Duress | STA | 92
 in Markdown parlance. It should start with a triple-dash lines and end with
 another. Within that section, a body of YAML metadata can be written.
 
-- =order= ::
-  A number to specificy the order of your chapter in its accordion within the
-  sidebar. By default chapters are alpha-sorted using their slug (their path).
 - =title= (mandatory) ::
   A string for your chapter title. Wrap it with double quotes ="= to allow
   special characters within such as =:= and ='=.
+- =order= ::
+  A number to specificy the order of your chapter in its accordion within the
+  sidebar. By default chapters are alpha-sorted using their slug (their path).
 
 *Articles* don't have an =order= property but support other fields. Use other
 existing articles for inspiration.
 
-- =authors= ::
-  Comma-separated list of authors that you want to credit for the article.
 - =banner= (mandatory) ::
   Set a banner for the article to display in the homepage as well as at the top
   of the article in its own page. Scryfall syntax is supported.
 - =kind= (mandatory) ::
   A kind symbol. Available values can be found in the keys at
   [[./src/tools/markdown/constants/Kind.ts][Kind.ts]]
-- =tags= ::
-  An array of tag symbols. Available values can be found in the keys at
-  [[./src/tools/markdown/constants/Tag.ts][Tag.ts]]
 - =title= (mandatory) ::
   A string for your article title. Wrap it with double quotes ="= to allow
   special characters within such as =:= and ='=.
+- =authors= ::
+  Comma-separated list of authors that you want to credit for the article.
+- =tags= ::
+  An array of tag symbols. Available values can be found in the keys at
+  [[./src/tools/markdown/constants/Tag.ts][Tag.ts]]
 
 ** Tables of Content
 
@@ -107,13 +107,25 @@ empty since all of its content will not be rendered.
 The table will look for level 2 and 3 headings in the whole document and render
 as a numbered list of anchor links for each of them.
 
-** Custom Constructions
+** Custom Directives
 
 A number of custom directives are parsed within Markdown content. For the
 technicalities, the supported specifications for directives in Markdown are
 presented
 [[https://talk.commonmark.org/t/generic-directives-plugins-syntax/444][here]].
 
+The following sections will assume you know of /inline/, /leaf/ and /container/
+directives.
+
+- Inline directives (single colon =:=) ::
+  Inline markup where the text does not create a new paragraph.
+- Leaf directives (double colons =::=) ::
+  Create a new paragraph but accept no children within.
+- Container directives (a pair of triple or more colons =:::=) ::
+  Also create a new paragraph but accept children between the opening and
+  closing pairs. It is possible to nest /container/ directives by using more
+  than 3 colons.
+
 *** Inline Card Links
 
 You can insert inline Scryfall links for cards using the following syntax:
@@ -123,12 +135,13 @@ You can insert inline Scryfall links for cards using the following syntax:
 #+END_SRC
 
 This will render an inline link reading "Brainstorm" and pointing to
-https://scryfall.com/search?q=!"Brainstorm" .
+[[https://scryfall.com/search?q=!Brainstorm]].
 
 *** Card Rows
 
-Use this directive to render card images within your Markdown content. Scryfall
-queries are supported and you can specify which set to use.
+Use this directive to render card images within your Markdown content.
+[[#scryfall][Scryfall queries]] are supported and you can specify which set to
+use.
 
 By default rows of cards are rendered with the =CENTERED= variant but you can
 specify the variant with the =variant= keyword.
@@ -189,7 +202,7 @@ column for the sideboard. In doubt, follow existing conventions.
 1 Duress
 #+END_SRC
 
-For more details about color symbols, see the Mana section.
+For more details about color symbols, see the [[#mana][Mana section]].
 
 *** Media Embeds
 
@@ -208,49 +221,55 @@ parameter in the address bar.
 ::youtube{id=3LLIFHv5kbo}
 #+END_SRC
 
-*Twitter* embeds. Provide the ID found in a tweet URL. Do note that their
-implemenation can be somewhat unreliable on mobile devices where the bottom end
-of the tweet can be cut hiding relevant links such as likes and comments.
+*Twitter* embeds. Provide the ID found in a tweet URL. They can easily introduce
+[[https://web.dev/cls/][CLS issues]] in pages where they are rendered /too
+early/ ie. too high in the document: don't overuse them.
 
+#+BEGIN_SRC markdown
 ::tweet{id=1574576125535129600}
+#+END_SRC
 
 *** Accordions
 
 Collapsible blocks can be stacked against one another or used alone. Provide a
 title for the CTA as well as content for it.
 
-The content can be Markdown content directly, albeit with limited support for
-[[#card-rows][row directives]]:
+The content can be Markdown text directly, or even directives.
 
 #+BEGIN_SRC markdown
-Note the `:::` to delimit a containing block.
+Note the `:::` to delimit a *container* block.
 
 :::accordion[Click to expand]
-Markdown content with *limited* support for **row directives**.
+*Always* be **casting** :card[Doomsday].
 :::
 #+END_SRC
 
 Or pulled from a partial:
 
 #+BEGIN_SRC markdown
-Note the `::` to denote a *leaf* block with no children.
+Note the `::` to mean a *leaf* block with no children.
 
 ::accordion[Click to expand]{path=path/to/partial/one/sans/extension}
 ::accordion[Click to expand]{path=path/to/partial/two/sans/extension}
 #+END_SRC
 
 Do not specify the extension for the partial, =.md= is always assumed.
 
-** Mana
+*** Mana
+
+You can inline mana symbols /almost/ everywhere.
+
+#+BEGIN_SRC markdown
+{W} {U} {B} {R} {G}
+#+END_SRC
 
-You can inline mana symbols in Markdown as well as in decklist blocks. When used
-collectively, for instance to indicate the color identity of an archetype, use
-the same order as found on the back of a /Magic: the Gathering/ card. This makes
-searching for guilds and clans much easier later on. As an exception to this
-rule and when referring to Doomsday colors, start with blue and black as it
-makes it easier for the eyes to parse quickly the differences from one list to
-the next.
+When used collectively, for instance to indicate the color identity of an
+archetype, use the same order as found on the back of a /Magic: the Gathering/
+card. This makes searching for guilds and clans much easier later on. As an
+exception to this rule and when referring to Doomsday colors, start with blue
+and black as it makes it easier for the eyes to parse quickly the differences
+from one wedge to the next.
 
-The syntax that was followed during implementation can be found
+The syntax that was chosen for the implementation can be found
 [[https://mana.andrewgioia.com/icons.html][here]]. Currently only the mana costs
-are implemented but loyalty and color indicators may come soon :tm:.
+are available but loyalty and other color indicators may come soon :tm:.

markdown/articles/2020/03/21/the-mindkiller.md

@@ -175,7 +175,7 @@ how they should play out.
 
 ### Hand 1
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - City of Brass
 - Gemstone Mine
 - LP
@@ -194,7 +194,7 @@ Echo.
 
 ### Hand 2
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - LP
 - LP
 - LED
@@ -214,7 +214,7 @@ have enough mana to still cast Echo afterwards.
 
 ### Hand 3
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - LP
 - DR
 - LED
@@ -235,7 +235,7 @@ have a chance even against decks that could race the goblins.
 
 ### Hand 4
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - LP
 - DR
 - DD
@@ -267,7 +267,7 @@ O R P H O S E.
 
 ### Hand 5
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - LP
 - EoE
 - DD
@@ -283,7 +283,7 @@ on the haters.
 
 ### Hand 6
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - LP
 - Gemstone Mine
 - Rite of Flame
@@ -301,7 +301,7 @@ guaranteed, and the deck mulligans pretty well. I'd throw this back.
 
 ### Hand 7
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - LP
 - DR
 - City of Brass

markdown/articles/2020/06/22/fat-stacks.md

@@ -221,7 +221,7 @@ some real world game examples.
 > You already played a land.  
 > Opponent has a single uncracked fetchland in play. 4 cards in hand.
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DR|MMQ
 - DD
 - FoW|EMA
@@ -330,7 +330,7 @@ protect us.
 
 #### If we play Duress and it resolves we see the following hand
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - Spell Snare
 - Stifle
 - Scalding Tarn
@@ -364,7 +364,7 @@ find additional protection or free up our mana.
 > Opponent has 6 untapped lands, 4 that can make {U}. 5 cards in hand. We know
 > they have at least 1 Force of Will and blue card.
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DR|MMQ
 - DD
 - FoW|EMA
@@ -480,7 +480,7 @@ turn, play a land and have the following hand / board state:
 
 My hand is thus:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DD
 - FoW
 - Daze
@@ -552,7 +552,7 @@ let's break it down from the other side too.
 First we should consider what AgyePA had in hand. On my Doomsday being placed on
 the stack it looked like this:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DD
 - FoW
 - Daze

markdown/articles/2020/10/05/gangsta-trippin.md

@@ -246,7 +246,7 @@ Brainstorm. We know that Brainstorm, in conjecture with an additional card in
 hand post-Doomsday resolving, can lead to a deterministic, same-turn win. Let's
 consider the following hand:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DR
 - Pnd
 - FoW
@@ -258,7 +258,7 @@ consider the following hand:
 
 In this scenario we have 2 lands in play, Underground Sea and a Polluted Delta.
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - Underground Sea
 - Polluted Delta
 :::
@@ -412,14 +412,14 @@ targeting our tapped Underground Sea.
 
 Our board is:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - Underground Sea
 - Polluted Delta
 :::
 
 Our hand is:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DR
 - EoA
 - FoW
@@ -454,14 +454,14 @@ state and hand:
 
 Our board is:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - Underground Sea
 - Underground Sea
 :::
 
 Our hand is:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - DR
 - SW
 - Pre
@@ -496,13 +496,13 @@ turn 2. Our opponent has just cantripped turn 1 and passed.
 
 Our board is:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - Underground Sea
 :::
 
 Our hand is:
 
-:::row{variant=hand}
+:::row{variant=HAND}
 - Daze
 - Island
 - Pre