GithubHelp home page GithubHelp logo

remark-link-card's People

Contributors

gladevise avatar yamat47 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

yamat47 furkanarabaci ponzufujikawa

remark-link-card's Issues

Cannot use remark-link-card with remark-embedder

When using remark-link-card and remark-embedder together, the remark-link-card is always applied regardless of the order of the remark plugins.

Test code

const remark = require('remark')
const remarkHtmll = require('remark-html')
const { default: remarkEmbdder } = require('@remark-embedder/core')
const rlc = require('remark-link-card')

const CodeSandboxTransformer = {
  name: 'CodeSandbox',
  // shouldTransform can also be async
  shouldTransform(url) {
    const { host, pathname } = new URL(url)
    return (
      ['codesandbox.io', 'www.codesandbox.io'].includes(host) &&
      pathname.includes('/s/')
    )
  },
  // getHTML can also be async
  getHTML(url) {
    const iframeUrl = url.replace('/s/', '/embed/')

    return `<iframe src="${iframeUrl}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>`
  },
}

const exampleMarkdown = `
This is a CodeSandbox:

https://codesandbox.io/s/css-variables-vs-themeprovider-df90h

https://www.npmjs.com/package/remark-link-card
`
( async () => { 
  const result = await remark()
    .use(remarkEmbdder, {
      transformers: [CodeSandboxTransformer]
    })
    .use(rlc)
    .use(remarkHtmll)
    .process(exampleMarkdown)

 console.log(result.contents);

})()

Expected result

<p>This is a CodeSandbox:</p>
<iframe src="https://codesandbox.io/embed/css-variables-vs-themeprovider-df90h" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
<a class="rlc-container" href="https://www.npmjs.com/package/remark-link-card">
  <div class="rlc-info">
    <div class="rlc-title">remark-link-card</div>
    <div class="rlc-description">Remark plugin to convert text links to link cards inspired by gatsby-remark-link-card</div>
    <div class="rlc-url-container">
      <img class="rlc-favicon" src="https://www.google.com/s2/favicons?domain=www.npmjs.com" alt="remark-link-card favicon" width="16px" height="16px">
      <span class="rlc-url">https://www.npmjs.com/package/remark-link-card</span>
    </div>
  </div>
  <div class="rlc-image-container">
      <img class="rlc-image" src="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png" alt="remark-link-card" width="100%" height="100%"/>
    </div>
</a>

Actual result

<p>This is a CodeSandbox:</p>
<a class="rlc-container" href="https://codesandbox.io/s/css-variables-vs-themeprovider-df90h">
      <div class="rlc-info">
        <div class="rlc-title">CSS Variables vs ThemeProvider - CodeSandbox</div>
        <div class="rlc-description">https://epicreact.dev/css-variables</div>
        <div class="rlc-url-container">
          <img class="rlc-favicon" src="https://www.google.com/s2/favicons?domain=codesandbox.io" alt="CSS Variables vs ThemeProvider - CodeSandbox favicon" width="16px" height="16px">
          <span class="rlc-url">https://codesandbox.io/s/css-variables-vs-themeprovider-df90h</span>
        </div>
      </div>
      <div class="rlc-image-container">
          <img class="rlc-image" src="https://codesandbox.io/api/v1/sandboxes/df90h/screenshot.png" alt="CSS Variables vs ThemeProvider - CodeSandbox" width="100%" height="100%"/>
        </div>
    </a>
<a class="rlc-container" href="https://www.npmjs.com/package/remark-link-card">
  <div class="rlc-info">
    <div class="rlc-title">remark-link-card</div>
    <div class="rlc-description">Remark plugin to convert text links to link cards inspired by gatsby-remark-link-card</div>
    <div class="rlc-url-container">
      <img class="rlc-favicon" src="https://www.google.com/s2/favicons?domain=www.npmjs.com" alt="remark-link-card favicon" width="16px" height="16px">
      <span class="rlc-url">https://www.npmjs.com/package/remark-link-card</span>
    </div>
  </div>
  <div class="rlc-image-container">
      <img class="rlc-image" src="https://static.npmjs.com/338e4905a2684ca96e08c7780fc68412.png" alt="remark-link-card" width="100%" height="100%"/>
    </div>
</a>

Stop using optional chaining.

Although optional chaining is very useful and can make your code more concise, it has the following drawbacks

  • It is only supported in Node.js 14 or later.
  • Requires wabpack 5 or later to be supported.
    Currently, many libraries and deployment environments are in the process of moving from Node.js 12 to 14 and from webpack 4 to 5. For example, Next.js.
    In order to expand the environment where remark-link-card can be used, it is necessary to stop using optional chaining, or to set up an appropriate loader and publish the loader's output to npm.

Faced an error that is wanting to fetch `favicon.ico` but the domain path seems like wrong

When I used this library on my blog created with the astro.build, it came from fetching favicon.ico.

Failed to load resource: the server responded with a status of 404 ()

As I dug into that error, it seems failed to fetch a favicon.ico because protocols are mismatched which means the application should fetch favicon.ico from https://www.funailog.com but wants to fetch from http://www.funailog.com.

Requested URL: https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://www.funailog.com&size=16

I'd like to know how to fix this problem using by option if exist.

Materials

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.