mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
7543d23e3d
requires https://github.com/TryGhost/Ghost/pull/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 "/bookmark<kbd>Enter</kbd>" or "/bookmark {url}<kbd>Enter</kbd>" for short (you might want to do this if you want the bookmark version instead of a full embed) Pressing <kbd>Ctrl/Cmd+Z</kbd> after pasting will convert the bookmark card back to a link if that's preferred, alternatively a URL can be pasted with <kbd>Ctrl/Cmd+Shift+V</kbd> to avoid any automatic transformation to an embed/bookmark. --- - 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
83 lines
4.0 KiB
Handlebars
83 lines
4.0 KiB
Handlebars
{{#koenig-card
|
|
class="flex flex-column"
|
|
isSelected=isSelected
|
|
isEditing=isEditing
|
|
selectCard=(action selectCard)
|
|
deselectCard=(action deselectCard)
|
|
onDeselect=(action "onDeselect")
|
|
editCard=(action editCard)
|
|
toolbar=toolbar
|
|
hasEditMode=false
|
|
showSelectedOutline=payload.metadata
|
|
addParagraphAfterCard=addParagraphAfterCard
|
|
moveCursorToPrevSection=moveCursorToPrevSection
|
|
moveCursorToNextSection=moveCursorToNextSection
|
|
editor=editor
|
|
as |card|
|
|
}}
|
|
{{#if payload.metadata}}
|
|
<div class="kg-card-hover">
|
|
<div class="koenig-embed-{{payload.type}} flex justify-center relative" data-kg-embed>
|
|
{{!-- <iframe class="bn miw-100" scrolling="no"></iframe> --}}
|
|
<figure class="kg-card kg-bookmark-card also-new-tag">
|
|
<a href={{payload.metadata.url}} class="kg-bookmark-container">
|
|
<div class="kg-bookmark-content">
|
|
<div class="kg-bookmark-title">{{payload.metadata.title}}</div>
|
|
<div class="kg-bookmark-description">{{payload.metadata.description}}</div>
|
|
<div class="kg-bookmark-metadata">
|
|
{{#if payload.metadata.icon}}
|
|
<img src={{payload.metadata.icon}} class="kg-bookmark-icon">
|
|
{{/if}}
|
|
{{#if payload.metadata.author}}
|
|
<span class="kg-bookmark-author">{{payload.metadata.author}}</span>
|
|
{{/if}}
|
|
{{#if payload.metadata.publisher}}
|
|
<span class="kg-bookmark-publisher">{{payload.metadata.publisher}}</span>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{#if payload.metadata.thumbnail}}
|
|
<div class="kg-bookmark-thumbnail">
|
|
<img src={{payload.metadata.thumbnail}} >
|
|
</div>
|
|
{{/if}}
|
|
</a>
|
|
</figure>
|
|
<div class="koenig-card-click-overlay ba b--transparent" data-kg-overlay></div>
|
|
</div>
|
|
|
|
{{#if (or isSelected (clean-basic-html payload.caption))}}
|
|
{{card.captionInput
|
|
caption=payload.caption
|
|
update=(action "updateCaption")
|
|
placeholder="Type caption for bookmark (optional)"
|
|
}}
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
{{#if convertUrl.isRunning}}
|
|
<div class="miw-100 pa2 ba br2 b--lightgrey-d1 flex items-center justify-center bg-whitegrey-l2 f6 lh-title h10">
|
|
<div class="ghost-spinner spinner-blue"></div>
|
|
</div>
|
|
{{else if hasError}}
|
|
<div class="miw-100 flex flex-row pa2 pl3 ba br2 b--red-l3 red bg-error-red f7 fw4 lh-title h10 items-center">
|
|
<span class="mr3">There was an error when parsing the URL.</span>
|
|
<button type="button" class="red-d2 mr3 fw6 hover-red" {{action "retry"}}><span class="underline">Retry</span></button>
|
|
<button type="button" class="red-d2 mr-auto fw6 underline hover-red" {{action "insertAsLink"}}><span class="underline">Paste URL as link</span></button>
|
|
<button type="button" {{action deleteCard}} class="nudge-right--2">
|
|
{{svg-jar "close" class="w3 stroke-red-l3"}}
|
|
</button>
|
|
</div>
|
|
{{else}}
|
|
<input
|
|
type="text"
|
|
value={{payload.url}}
|
|
name="url"
|
|
placeholder="Paste URL to add bookmark content..."
|
|
class="miw-100 pa2 ba br2 b--lightgrey-d2 f7 form-text lh-title tracked-2 h10 nl2 nr2"
|
|
oninput={{action "updateUrl"}}
|
|
onkeydown={{action "urlKeydown"}}>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{/koenig-card}}
|