search

angeloashmore / gatsby-remark-find-replace

Gatsby remark plugin to find and replace text
5 stars 2 forks source link

How about to extend a functionality of a plugin a little bit? #7

Open nulltier opened 4 years ago

nulltier commented 4 years ago

Hi, Angelo

Do you have any strong opinion regarding the boundaries of the functionality the plugin? I see the possibility to add a feature for which I see no ready implementation. With some examples I'll try to explain the idea. Please, let me know you find it compatible with your vision then I'll prepare a PR.

So. What if your plugin will support the placeholders with the parameters?

i. Configuration

// gatsby-config.js
plugins: [
  'gatsby-plugin-sharp',
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-find-replace',
          options: {
            replacements: {
              COMPANY: 'My Company',
              COPYRIGHT: `Copyright ${new Date().getFullYear()} My Company`,
              AVATAR: ({src, width, height}) => {
                return `<div class="avatar"><imd src="${src}" width="${width}" height="${height}"/></div>` 
              }
            },
            prefix: '%',
          },
        },
      ],
    },
  },
]

ii. Markdown

%AVATAR?src=/avatar.png&width=100&height=100
<!-- OR -->
%AVATAR{src: "/avatar.png", width: 100, height: 100}

# My Special Blog Post

Welcome to %COMPANY's new blog! Please do not copy this post.

%COPYRIGHT

iii. Output

<div class="avatar"><imd src="/avatar.phg" width="100" height="100"/></div>

# My Special Blog Post

Welcome to My Company's new blog! Please do not copy this post.

Copyright 2019 My Company

I have several alternative versions of a syntax with different pros and cons. There will be a time to discuss them later.

Let me know what you think.

Strajk commented 4 years ago

@anzome hey!

First of all – I'm not an author nor an expert and I have no opinion about your proposal as I don't know your requirements. I stumbled upon this issue while searching for something else.

Have you heard about MDX? Might solve your needs and it's already semi-standardized

Instead of %AVATAR{src: "/avatar.png", width: 100, height: 100} you would write <Avatar src="…" width=100 height=100 />

cedricdelpoux commented 3 years ago

@Strajk I have some special needs too.

I created the gatsby-source-google-docs plugin for multiple reasons but the main ones are:

It would be awesome if I could find a way to have similar MDX functionalities, writing my content in Google Docs and find a way to declare some real React Components between two paragraphs

Strajk commented 3 years ago

@cedricdelpoux sounds nice, I would like that too, but I don't think that's possible with any tools nowadays – maybe give a try to https://github.com/xyc/vscode-mdx-preview