theowenyoung / gatsby-theme-primer-wiki

A Gatsby Theme for Wiki/Docs/Knowledge Base, which using Primer style as the UI theme, can work well with Foam or Obsibian or just markdown files.
https://demo-wiki.owenyoung.com/
MIT License
117 stars 18 forks source link

working with mermaid #36

Closed Casyfill closed 2 years ago

Casyfill commented 2 years ago

Hey! Thanks again for doing this theme!

One question I have is re use of mermaid diagrams. I set up the remark mermaid plugin and installed both gatsby-remark, remark-mermaid, and puppeteer (see versions below), but the snippets are rendered just as snippets, not diagrams. Am I missing something, or there are issues between the theme, foam, and gatsby?

 "dependencies": {
    "foam-cli": "^0.11.0",
    "gatsby": "^3.12.0",
    "gatsby-plugin-manifest": "^3.12.0",
    "gatsby-remark-mermaid": "^2.1.0",
    "gatsby-source-filesystem": "^3.12.0",
    "gatsby-theme-primer-wiki": "^1.13.1",
    "gatsby-transformer-remark": "^4.0.0",
    "puppeteer": "^11.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sharp": "^0.29.1"
  }
Casyfill commented 2 years ago

PS. i am adding mermaid diagrams in the markdown as such: (escaping to keep markdown from rendering) \ ### Grouping Elements \ ```mermaid

\ flowchart TB

\ c1-->a2

\ subgraph ide1 [one]

\ a1-->a2

\ end

\ ```

Casyfill commented 2 years ago

P.S found notes that foam does not render it right now, but I wonder if this is something where gatsby could kick in

theowenyoung commented 2 years ago

I'll try it, I guess it's ok for gatsby.

theowenyoung commented 2 years ago

Hi, @Casyfill , for remark plugins, I have added a new option gatsbyRemarkPlugins, you can config it like this:

I have tried this locally, it works! try it~


   {
      resolve: "gatsby-theme-primer-wiki",
      // Change me
      options: {
        gatsbyRemarkPlugins: ["gatsby-remark-mermaid"],
        icon: "./static/logo.png",
        sidebarComponents: ["latest", "tag"],
        nav: [
          {
            title: "Github",
            url: "https://github.com/theowenyoung/foam-template-gatsby-theme-primer-wiki/",
          },
          {
            title: "Twitter",
            url: "https://twitter.com/theowenyoung",
          },
        ],
        editUrl:
          "https://github.com/theowenyoung/foam-template-gatsby-theme-primer-wiki/tree/main/",
      },
    },
theowenyoung commented 2 years ago

"gatsby-theme-primer-wiki": "^1.14.3",

Casyfill commented 2 years ago

Thanks Owen, this worked without any hitch, works great!

On Sat, Nov 20, 2021 at 09:25 Owen Young @.***> wrote:

"gatsby-theme-primer-wiki": "^1.14.3",

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/theowenyoung/gatsby-theme-primer-wiki/issues/36#issuecomment-974657426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUNHJKSTLNMPKNRICXMACDUM6VT5ANCNFSM5IM5M3KA .