npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grapesjs-open-graph-embed-card

v1.0.4

Published

open-graph-embed-card

Downloads

9

Readme

open-graph-embed-card

DEMO

Provide a live demo of your plugin A simple embed card that uses open graph protocol to provide a website snapshot for your hyperlink.

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-open-graph-embed-card"></script>

<div id="gjs"></div>

JS

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-open-graph-embed-card'],
    pluginsOpts: {
    'grapesjs-open-graph-embed-card': { /* Your options here */ }
  }
});

CSS

The css has variables that are loaded into the styles. You can override these variables in your project to style the cards

  • --og-card-background: #f8f9fa;
  • --og-card-border-radius: 0rem;
  • --og-card-border-color: #dcdcdc;
  • --og-card-border-style: solid;
  • --og-card-border-width: 1px;
  • --og-card-max-width: 600px;
  • --og-card-font-size: 1em;
  • --og-card-font-color: #494949;
  • --og-card-font-hover-color: #494949;
  • --og-card-figure-background: #848482;
  • --og-card-header-background: transparent;
  • --og-card-body-background: transparent;
  • --og-card-footer-background: transparent;
  • ... Please see src/grapesjs-open-graph-embed-card/components.js for how these styles are applied

Summary

  • Plugin name: grapesjs-open-graph-embed-card
  • Components
    • open-graph-card
  • Blocks
    • open-graph-card

Options

| Option | Description | Default | Type |-|-|-|- | category | Specify the category you can find the block. | Basic | blocks | | | | | url | The url used to query/parse the website and return the open graph styled json. | '' | components | request_type | The type of request to pass. | GET | components | headers | Necessary headers to pass with the query url. | {} | components | params | Necessary params to pass with the query url. | {} | components | query_name | The name of the query var that is appended to the url. Note, this would like something like this: https://my_fake_website_parser.com?url=https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol. | url | components

Download

  • CDN
    • https://unpkg.com/grapesjs-open-graph-embed-card
  • NPM
    • npm i grapesjs-open-graph-embed-card
  • GIT
    • git clone https://github.com/booellean/grapesjs-open-graph-embed-card.git

Usage

From your server

  • It's important to note that this plugin expects a specific return value to operate. It was developed with the same json return values as Mozilla's page-metadata-parser. Please set up your server and/or callbacks from public parsers to return in that format in the 'data' field;
  data: {
    description: "A user displayable description for the page.",
    icon: "A URL which contains an icon for the page.",
    image: "A URL which contains a preview image for the page.",
    keywords: "The meta keywords for the page.",
    provider: "A string representation of the sub and primary domains.",
    title: "A user displayable title for the page.",
    type: "The type of content as defined by opengraph.",
    url: "A canonical URL for the page."
  }

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-open-graph-embed-card.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-open-graph-embed-card'],
      pluginsOpts: {
        'grapesjs-open-graph-embed-card': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-open-graph-embed-card';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: ['grapesjs-open-graph-embed-card'],
  pluginsOpts: {
    'grapesjs-open-graph-embed-card' : { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

As a package

import loadComponents from './grapesjs-open-graph-embed-card/components';
import loadBlocks from './grapesjs-open-graph-embed-card/blocks';

/** Your custom template codes */
loadComponents(editor, options);
loadBlocks(editor, options);

Development

Clone the repository

$ git clone https://github.com/booellean/grapesjs-open-graph-embed-card.git
$ cd grapesjs-open-graph-embed-card

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT