feat: add support for the Jekyll markdownify filter #621

TomasHubelbauer · 2023-06-04T16:25:02Z

I have selected Marked as the library to use for the MD > HTML conversion and I am using isomorphic-dompurify because normal DOMPurify doesn't work in the test runner (it only works in the browser environment while isomorphic-dompurify is a wrapper that runs on both browser and Node).

Closes #620

I have selected Marked as the library to use for the MD > HTML conversion and I am using isomorphic-dompurify because normal DOMPurify doesn't work in the test runner (it only works in the browser environment while isomorphic-dompurify is a wrapper that runs on both browser and Node).

Typos everywhere!

TomasHubelbauer · 2023-06-04T16:28:32Z

CONTRIBUTING.md

  - `git switch -c your_branch_name` (do this in your fork not the main repo)
  - `git add .`
-  - `git commit -m "feat: Adding my change"`
+  - `git commit -m "feat: adding my change"`


I fix this because it is not compatible with the commit lint used in the repository and when I was creating this document I didn't yet know the rules it enforced very well so this slipped in.

TomasHubelbauer · 2023-06-04T16:30:25Z

package.json

@@ -104,7 +105,9 @@
    "typescript": "^4.5.3"
  },
  "dependencies": {
-    "commander": "^10.0.0"
+    "commander": "^10.0.0",
+    "isomorphic-dompurify": "^1.6.0",


I am using isomorphic-dompurify over normal dompurify because that doesn't run in Node and was failing in the test runner. isomorphic-dompurify runs in both the browser and Node.

The `stringify` helper always returns a valid string.

TomasHubelbauer · 2023-06-04T16:30:40Z

package.json

-    "commander": "^10.0.0"
+    "commander": "^10.0.0",
+    "isomorphic-dompurify": "^1.6.0",
+    "marked": "^5.0.4"


I chose Marked because it is the most popular regularly maintained Markdown to HTML converter NPM package I could find.

src/filters/string.ts

TomasHubelbauer · 2023-06-04T16:33:59Z

package-lock.json

I made sure this remained in lockfile version 1 but the diff is still pretty wild because isomorphic-dompurify brings in jsdom which itself depends on a lot of stuff.

TomasHubelbauer · 2023-06-04T16:40:31Z

There are two problems with this PR:

It doesn't work in older Node versions (as used in the Check workflow):

/home/runner/work/liquidjs/liquidjs/node_modules/isomorphic-dompurify/node_modules/jsdom/lib/jsdom/living/nodes/HTMLInputElement-impl.js:583
    this[filesSymbol] ||= FileList.createImpl(this._globalObject);

    SyntaxError: Unexpected token '||='

JSDOM's minimal Node version is Node 16:
https://github.com/jsdom/jsdom/blob/master/package.json

LiquidJS minimal Node version is Node 14:
https://github.com/harttle/liquidjs/blob/master/package.json

The Check CI is using Node 14:
https://github.com/harttle/liquidjs/blob/master/.github/workflows/check.yml

@harttle Are you open to bumping the minimal Node version to 16?
If not, I will try to find another dependency such that we can still implement this without reducing support.

And it doesn't work when I build and use the built file in the Playground.

Testing with: {{ 'test' | markdownify }}

N is undefined, line:1, col:1
>> 1| {{ 'test' | markdownify }}
      ^
   2| 
ne@http://localhost:4000/js/liquid.browser.min.js:1:5485
he@http://localhost:4000/js/liquid.browser.min.js:1:6069
Xt.prototype.renderTemplates/<@http://localhost:4000/js/liquid.browser.min.js:1:19675
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
w/</<@http://localhost:4000/js/liquid.browser.min.js:1:9482
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
i@http://localhost:4000/js/liquid.browser.min.js:1:1104
promise callback*o@http://localhost:4000/js/liquid.browser.min.js:1:1220
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1231
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
w@http://localhost:4000/js/liquid.browser.min.js:1:9331
P.prototype.parseAndRender/</<@http://localhost:4000/js/liquid.browser.min.js:1:73513
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1253
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
P.prototype.parseAndRender@http://localhost:4000/js/liquid.browser.min.js:1:73446
update@http://localhost:4000/js/main.js:121:33
@http://localhost:4000/js/main.js:78:3
@http://localhost:4000/js/main.js:142:2

From markdownify@http://localhost:4000/js/liquid.browser.min.js:1:53040
_r.prototype.render/<@http://localhost:4000/js/liquid.browser.min.js:1:38013
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
w/</<@http://localhost:4000/js/liquid.browser.min.js:1:9482
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1253
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
w@http://localhost:4000/js/liquid.browser.min.js:1:9331
w/</<@http://localhost:4000/js/liquid.browser.min.js:1:9569
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
n@http://localhost:4000/js/liquid.browser.min.js:1:1058
promise callback*o@http://localhost:4000/js/liquid.browser.min.js:1:1220
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1231
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
w@http://localhost:4000/js/liquid.browser.min.js:1:9331
w/</<@http://localhost:4000/js/liquid.browser.min.js:1:9569
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1253
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
w@http://localhost:4000/js/liquid.browser.min.js:1:9331
w/</<@http://localhost:4000/js/liquid.browser.min.js:1:9569
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1253
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
w@http://localhost:4000/js/liquid.browser.min.js:1:9331
P.prototype.parseAndRender/</<@http://localhost:4000/js/liquid.browser.min.js:1:73513
x/e/<@http://localhost:4000/js/liquid.browser.min.js:1:2207
a/<@http://localhost:4000/js/liquid.browser.min.js:1:1253
a@http://localhost:4000/js/liquid.browser.min.js:1:1004
P.prototype.parseAndRender@http://localhost:4000/js/liquid.browser.min.js:1:73446
update@http://localhost:4000/js/main.js:121:33
@http://localhost:4000/js/main.js:78:3
@http://localhost:4000/js/main.js:142:2

@harttle Is there a way to do a non-minimized build so that I could check what the error is? My browser has not picked up the source map.

harttle · 2023-06-04T16:52:14Z

src/filters/string.ts

@@ -4,6 +4,8 @@
 * * prefer stringify() to String() since `undefined`, `null` should eval ''
 */
 import { assert, escapeRegExp, stringify } from '../util'
+import { marked } from 'marked'
+import { sanitize } from 'isomorphic-dompurify'


currently liquidjs has only one run time dependency commander and that is not included in dist files. Let's avoid introducing dependencies.

Markdown functionality is better to be maintained in another repo, maybe liquidjs-plugin-markdown, or liquidjs-plugin-jekyll.

harttle · 2023-06-04T16:53:25Z

@TomasHubelbauer There is a non minified build under dist/ after npm run build.

TomasHubelbauer · 2023-06-04T17:07:19Z

Closing the PR for now and will redo as a LiquidJS filter once clearer on how to do that.

TomasHubelbauer added 2 commits June 4, 2023 18:17

docs: fix CONTRIBUTING document typos

9f5d406

Typos everywhere!

TomasHubelbauer commented Jun 4, 2023

View reviewed changes

fix: remove unnecessary string fallback value

8bfba7c

The `stringify` helper always returns a valid string.

TomasHubelbauer commented Jun 4, 2023

View reviewed changes

TomasHubelbauer mentioned this pull request Jun 4, 2023

Support for all built-in Jekyll filters: slugify, number_of_words, date_to_xmlschema, date_to_rfc822 #443

Closed

harttle reviewed Jun 4, 2023

View reviewed changes

TomasHubelbauer closed this Jun 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add support for the Jekyll markdownify filter #621

feat: add support for the Jekyll markdownify filter #621

TomasHubelbauer commented Jun 4, 2023

TomasHubelbauer Jun 4, 2023

TomasHubelbauer Jun 4, 2023

TomasHubelbauer Jun 4, 2023

TomasHubelbauer Jun 4, 2023

TomasHubelbauer commented Jun 4, 2023 •

edited

Loading

harttle Jun 4, 2023

harttle commented Jun 4, 2023

TomasHubelbauer commented Jun 4, 2023

feat: add support for the Jekyll markdownify filter #621

feat: add support for the Jekyll markdownify filter #621

Conversation

TomasHubelbauer commented Jun 4, 2023

TomasHubelbauer Jun 4, 2023

Choose a reason for hiding this comment

TomasHubelbauer Jun 4, 2023

Choose a reason for hiding this comment

TomasHubelbauer Jun 4, 2023

Choose a reason for hiding this comment

TomasHubelbauer Jun 4, 2023

Choose a reason for hiding this comment

TomasHubelbauer commented Jun 4, 2023 • edited Loading

harttle Jun 4, 2023

Choose a reason for hiding this comment

harttle commented Jun 4, 2023

TomasHubelbauer commented Jun 4, 2023

TomasHubelbauer commented Jun 4, 2023 •

edited

Loading