Giter Club home page Giter Club logo

gridsome-plugin-remark-twitter's Introduction

Gridsome Remark Twitter

Embed Tweet and Moment cards in Gridsome markdown.

Install

npm install gridsome-plugin-remark-twitter

How to use

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            [ 'gridsome-plugin-remark-twitter']
          ]
        }
      }
    }
  ]
}

If you want to get debug output, turn on the debug option in the plugin options.

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            [ 'gridsome-plugin-remark-twitter', {
                debug: true
            }]
          ]
        }
      }
    }
  ]
}

These other options are also available, to control how the widget is rendered:

  • hideThread Default true. Set to false to also show the tweet that a tweet is in reply to. (This is enabled by default because typically you'd just embed both tweets, and it gets really noisy when embedding entire twitter threads in a post.)
  • hideMedia Default false. Set to true to hide media that is included in a tweet. For example, if a tweet has a photo or a video embedded, this means that the user has to click through to view it.
  • align Set to 'left', 'right' or 'center' to make the embedded tweet float left, right, or be center-aligned. (The default is left-aligned, but not floated.)
  • theme Set to 'dark' to use the dark theme.
  • linkColor Set to a valid RGB value to specify link colors.
  • widgetType Set to 'video' to return a Twitter Video embed for the given Tweet.

Usage

# Blog post title

This is an example of embedding a single tweet card. Add any markdown as you normally do, and then insert a valid Tweet link anywhere to automatically transform it into an embed card.

https://twitter.com/gridsome/status/1088777983987335170

You can embed several tweets

https://twitter.com/therealdanvega/status/1093481502283841538

https://twitter.com/therealdanvega/status/1092077147370356736

Or a moment

https://twitter.com/i/moments/650667182356082688

NOTE: Make sure to copy the Tweet link instead of the embed code.

How this looks like

License

MIT

Open Source Love

I wish I could take credit for this plugin but all the credit in the world goes to weknowinc. Instead of reinventing the wheel I borrowed what they did for Gatsby. Thank you!

https://github.com/weknowinc/gatsby-remark-twitter

gridsome-plugin-remark-twitter's People

Contributors

danvega avatar imumesh18 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

sanscheese

gridsome-plugin-remark-twitter's Issues

How to handle deleted tweets?

Hi, thanks so much for making and maintaining this! I've been using it to rebuild my website and ran into an odd behavior.

I was converting an old blog post that included a tweet that had been deleted by the author on Twitter. Before I figured out the root cause, each time I included the tweet URL and ran the build process (which includes this plugin), it produced a blank white screen. The build process seemed to completed successfully, but I got a blank, white screen with the following markup for every blog post on my site:

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="app"></div>
    
  <script type="text/javascript" src="/assets/js/app.js"></script></body>
</html>

In my case I'm able to work around this by including a <blockquote> of the text in the tweet, but wanted to point this out in case there's more graceful way to handle deleted tweets.

Twitter card display issue.

The generated twitter card html doesn't have the following script due to which the card UI is not properly rendering.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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.