NativeScript / docs-v8

https://docs.nativescript.org
29 stars 41 forks source link

feat(plugins): transform note styles #52

Closed janoshrubos closed 3 years ago

janoshrubos commented 3 years ago

This enhancement will wrap the notes in the plugins docs with :::tip Note ::::, so the plugins will follow the main docs styling without messing up the original README.md

Before:

Screenshot 2021-10-15 at 10 17 23

After

Screenshot 2021-10-15 at 10 19 19

:

rigor789 commented 3 years ago

We could reuse the title from the markdown ie. > **Whatever**: something would render a tip with Whatever as the title instead of Note.

Here's one possible regex to also match a few more possible cases like multiline quotes:

/^>\s+\*{2}([^\*]+)\*{2}:?\s+(.+(?:\n>.*)*)/gim

see https://regexr.com/67j2k

matches all of these variants:

> **Tip:** This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like `code` etc.

> **Tip**: This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like `code` etc.

> **Note:** This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like `code` etc.

> **Note**: This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like `code` etc.

> **Note**: This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like `code` etc.
> but also multi line comments and code blocks like 
> ```ts
> console.log('hello world')
> ```
>    also accepts spaces and stuff...
>

With this we get 2 capture groups:

  1. the title (anything between the **<title>** qutoes
  2. The content

Post-processing needed:

  1. normalize title, remove trailing : to make both > **Note:** and **Note**: work consistently
  2. replace /^>\s+/ in the second matching group to get rid of extra >'s from multiline quotes.

A quick test that seems to cover all of the above:

(() => {
  const debug = false;
  let content = `
> **Tip:** This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like \`code\` etc.

> **Tip**: This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like \`code\` etc.

> **Note:** This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like \`code\` etc.

> **Note**: This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like \`code\` etc.

> **Note**: This is the content of the tip **including** other syntax like __this__ or _this_ or whatever else like \`code\` etc.
> but also multi line comments and code blocks like 
> \`\`\`ts
> console.log('hello world')
> \`\`\`
>    also accepts spaces and stuff...
>
`

  const NOTE_RE = /^>\s+\*{2}([^\*]+)\*{2}:?\s+(.+(?:\n>.*)*)/gim;
  let match_;

  while(match_ = NOTE_RE.exec(content)) {
    let [match, title, cont] = match_;

    debug && console.log({
      match, title, cont
    })

    // normalize title
    title = title.replace(/:/g, '');

    // replace "> " from multiline quotes
    cont = cont.replace(/^>\s*/gim, '');

    // generate replacement
    const replacement = `:::tip ${title}\n\n${cont}\n\n:::`

    // replace the match with the replacement
    content = content.replace(match, replacement);
  }

  console.log(content);
})()