WIP

.github/workflows/main.yml

@@ -11,14 +11,14 @@ jobs:
         with:
           fetch-depth: 0
 
-      - run: zip -r Hugo.zip Hugo -x "*.DS_Store"
+      - run: zip -r MDX.zip MDX -x "*.DS_Store"
 
       - name: Upload style to release
         uses: svenstaro/upload-release-action@v2
         if: startsWith(github.ref, 'refs/tags/')
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: Hugo.zip
+          file: MDX.zip
 
   test:
     runs-on: ubuntu-latest
@@ -37,10 +37,10 @@ jobs:
           mkdir bin && tar -xvzf vale_${VALE_VERSION}_Linux_64-bit.tar.gz -C bin
           echo "./bin" >> $GITHUB_PATH
         env:
-          VALE_VERSION: 3.3.0
+          VALE_VERSION: 3.9.1
 
       - name: Features
         run: |
-          zip -r Hugo.zip Hugo -x "*.DS_Store"
+          zip -r MDX.zip MDX -x "*.DS_Store"
           cd testdata && ../bin/vale sync && cd -
           go test -v ./...

.gitignore

@@ -1,4 +1,4 @@
-Hugo.zip
+MDX.zip
 /testdata/styles
 
 # Binaries for programs and plugins

MDX/.vale.ini

@@ -0,0 +1,21 @@
+[formats]
+mdx = md
+
+[*.mdx]
+CommentDelimiters = {/*, */}
+
+# Exclude:
+#
+# `import ...`, `export ...`
+# `<Component ... />`
+# `<Component>...</Component>`
+# `{ ... }`
+TokenIgnores = (?sm)((?:import|export) .+?$), \
+(<[A-Z]+ ?.+ ?\/>), \
+(<[A-Z]\w+>.+?<\/[A-Z]\w+>)
+
+# Exclude:
+#
+# `<Component \n ... />`
+BlockIgnores = (?sm)^(<\w+\n .*\s\/>)$, \
+(?sm)^({.+\n.*})

Makefile

@@ -3,10 +3,9 @@
 all: test
 
 zip:
-	zip -r Hugo.zip Hugo -x "*.DS_Store"
+	zip -r MDX.zip MDX -x "*.DS_Store"
 
 sync:
-	cd testdata && vale sync && cd -
+	cd testdata && vale sync && vale transform test.mdx > test.md && cd -
 
 test: zip sync
-	go test -v ./...

README.md

@@ -1,9 +1,11 @@
-# Hugo
+# MDX
 
-A Vale configuration for Hugo-generated static sites.
+A Vale configuration for sites using [MDX][1].
 
 ## Testing
 
 ```
 $ make test
 ```
+
+[1]: https://mdxjs.com

testdata/.vale.ini

@@ -1,6 +1,6 @@
 StylesPath = styles
 
-Packages = ../Hugo.zip
+Packages = ../MDX.zip
 
-[*.md]
+[*.mdx]
 BasedOnStyles = Vale

testdata/test.md

@@ -0,0 +1,56 @@
+# Hello, world!
+
+`import {External} from './some/place.js'`
+`import {Chart} from './chart.js'`
+`import population from './population.js'`
+
+`export const pi = 3.14`
+`export const Local = properties => <span style={{color: 'red'}} {...properties} />`
+
+`<Chart data={population} label={'Something with ' + pi} />`
+
+An `<External>external</External>` component and a `<Local>local one</Local>`.
+
+<div className="note">
+  > Some notable things in a block quote!
+</div>
+
+`<Welcome name="Venus" />`
+`<Welcome name="Mars" />`
+
+`<MyComponent id="123" />`
+
+You can also use objects with components, such as the `thisOne` component on
+the `myComponents` object: <myComponents.thisOne />
+
+
+```
+<Component
+  open
+  x={1}
+  label={'this is a string, *not* markdown!'}
+  icon={`<Icon />`}
+/>
+```
+
+
+Two 🍰 is: {Math.PI * 2}
+
+
+```
+{(function () {
+  const guess = Math.random()
+
+  if (guess > 0.66) {
+    return <span style={{color: 'tomato'}}>Look at us.</span>
+  }
+
+  if (guess > 0.33) {
+    return <span style={{color: 'violet'}}>Who would have guessed?!</span>
+  }
+
+  return <span style={{color: 'goldenrod'}}>Not me.</span>
+})()}
+```
+
+

testdata/test.mdx

@@ -0,0 +1,47 @@
+# Hello, world!
+
+import {External} from './some/place.js'
+import {Chart} from './chart.js'
+import population from './population.js'
+
+export const pi = 3.14
+export const Local = properties => <span style={{color: 'red'}} {...properties} />
+
+<Chart data={population} label={'Something with ' + pi} />
+
+An <External>external</External> component and a <Local>local one</Local>.
+
+<div className="note">
+  > Some notable things in a block quote!
+</div>
+
+<Welcome name="Venus" />
+<Welcome name="Mars" />
+
+<MyComponent id="123" />
+
+You can also use objects with components, such as the `thisOne` component on
+the `myComponents` object: <myComponents.thisOne />
+
+<Component
+  open
+  x={1}
+  label={'this is a string, *not* markdown!'}
+  icon={<Icon />}
+/>
+
+Two 🍰 is: {Math.PI * 2}
+
+{(function () {
+  const guess = Math.random()
+
+  if (guess > 0.66) {
+    return <span style={{color: 'tomato'}}>Look at us.</span>
+  }
+
+  if (guess > 0.33) {
+    return <span style={{color: 'violet'}}>Who would have guessed?!</span>
+  }
+
+  return <span style={{color: 'goldenrod'}}>Not me.</span>
+})()}