Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Added new bookmark card #1293

Merged
merged 17 commits into from Aug 27, 2019
Merged

Conversation

rishabhgrg
Copy link
Contributor

@rishabhgrg rishabhgrg commented Aug 15, 2019

requires TryGhost/Ghost#11024

With the bookmark card you can present links in a much richer format, similar to Twitter cards. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.

Bookmark cards can be created in two ways:

  1. pasting a link as the first thing in blank paragraph - we'll check to see if we can create an embed, if we can't then we'll create a bookmark card instead
  2. manually selecting the bookmark card from the (+) menu or by typing "/bookmarkEnter" or "/bookmark {url}Enter" for short (you might want to do this if you want the bookmark version instead of a full embed)

If automatic conversion of a pasted link is not desired then a URL can be pasted with Ctrl/Cmd+Shift+V rather than the normal Ctrl/Cmd+V.


  • adds "bookmark" card that functions similarly to the embed card
  • if the oembed API request returns type: "bookmark" then the metadata is used to create a bookmark card

@rishabhgrg rishabhgrg changed the title [WIP] Added new bookmark card Added new bookmark card Aug 27, 2019
@rishabhgrg rishabhgrg marked this pull request as ready for review August 27, 2019 10:16
kevinansfield pushed a commit to TryGhost/Ghost that referenced this pull request Aug 27, 2019
requires TryGhost/Admin#1293

- updates `oembed` endpoint behaviour
  - if an oembed provider is not found then we use `metascraper` to populate a metadata object
  - when metadata is returned rather than an oembed response the payload will look like this:
    ```json
    {
        "url": "...",
        "type": "bookmark",
        "metadata": {
            "url": "...",
            "title": "...",
            "description": "...",
            "author": "...",
            "publisher": "...",
            "thumbnail": "...",
            "icon": "..."
        }
    }
    ```
- adds a `bookmark` card which generates output for the bookmark card:
  ```html
  <figure class="kg-card kg-bookmark-card">
    <a href="[URL]" class="kg-bookmark-container">
      <div class="kg-bookmark-content">
        <div class="kg-bookmark-title">[TITLE]</div>
        <div class="kg-bookmark-description">[DESCRIPTION]</div>
        <div class="kg-bookmark-metadata">
          <img src="[ICON]" class="kg-bookmark-icon">
          <span class="kg-bookmark-author">[AUTHOR]</span>
          <span class="kg-bookmark-publisher">[PUBLISHER]</span>
        </div>
      </div>
      <div class="kg-bookmark-thumbnail">
        <img src="[THUMBNAIL]">
      </div>
    </a>
  </figure>
  ```
  - if a particular bit of data does not exist then the associated html element will not be present
@kevinansfield kevinansfield merged commit 9bfd340 into TryGhost:master Aug 27, 2019
kevinansfield pushed a commit to kevinansfield/Koenig that referenced this pull request Mar 20, 2020
requires TryGhost/Admin#1293

- updates `oembed` endpoint behaviour
  - if an oembed provider is not found then we use `metascraper` to populate a metadata object
  - when metadata is returned rather than an oembed response the payload will look like this:
    ```json
    {
        "url": "...",
        "type": "bookmark",
        "metadata": {
            "url": "...",
            "title": "...",
            "description": "...",
            "author": "...",
            "publisher": "...",
            "thumbnail": "...",
            "icon": "..."
        }
    }
    ```
- adds a `bookmark` card which generates output for the bookmark card:
  ```html
  <figure class="kg-card kg-bookmark-card">
    <a href="[URL]" class="kg-bookmark-container">
      <div class="kg-bookmark-content">
        <div class="kg-bookmark-title">[TITLE]</div>
        <div class="kg-bookmark-description">[DESCRIPTION]</div>
        <div class="kg-bookmark-metadata">
          <img src="[ICON]" class="kg-bookmark-icon">
          <span class="kg-bookmark-author">[AUTHOR]</span>
          <span class="kg-bookmark-publisher">[PUBLISHER]</span>
        </div>
      </div>
      <div class="kg-bookmark-thumbnail">
        <img src="[THUMBNAIL]">
      </div>
    </a>
  </figure>
  ```
  - if a particular bit of data does not exist then the associated html element will not be present
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
3 participants