Create links in the same style as Ghost bookmark cards

[Backspaze]

I'd like to be able to create links that look like the bookmark cards in Ghost. What would be the easiest way to add this feature to Publii? Is there perhaps already someone who has made it? Is there an unofficial plugin somewhere out there that adds this feature?

Preferably, I'd like to be able to add these bookmark cards via a button in the toolbar in the editor. Based on the quick research I've done so far, it looks like I have to do some customizing according to the articles linked below. However, I don't have much experience in theme customization, so I'd appreciate some tips/pointers/ideas from someone before I take the plunge.

• Custom formats
• How to add custom config or JS for post editor?
• Allow custom tags in the TinyMCE editor

[bjazmoore]

I think plugins can link into the render process and make changes to a page/post after the render is complete. You could use that hook to scan the completed HTML file and enhance all links (or certain links with a special encoding that you have decided to use). If you are up to learning how to create plugins.

Otherwise this would require an application wide enhancement to add it to the editor.

You could make this a feature request for a future version of Publii.

[Backspaze]

Thanks of chiming in @bjazmoore.

Yeah, the more I looked into it, I figured it would take more than just adding a custom format. I don't think the developers would qualify this as a feature that should be native to the app (or what say you @bobmitro and @dziudek?). So, the plugin route seems to be the way to go.

I've got no experience at all when it comes to building plugins for Publii, so that will probably be a steep hill to climb. especially since the documentation for plugins isn't complete yet. I've built a site from scratch using HTML, CSS and JS (which behaves like a SPA), and I've written a bunch of PowerShell scripts, so I'm not completely lost when it comes to coding, but it'll still be a major challenge.

I'll put this one in my backlog, and keep an eye on updates to this thread, and post a reply here if or when I get around to working on this.

[candidexmedia]

I know exactly what you mean! Notion also has those types of bookmark cards, and I love them!

My past experiments

Is there perhaps already someone who has made it?

Two years ago, I dabbled in creating this type of element in Publii by inspecting the code in Ghost, and recreating it for a static site. Here's the result of that experiment: https://codepen.io/candidee/pen/MWGgOYd?editors=1100

Here's what I pasted in Publii:

Custom CSS: (Click to reveal)

/* GHOST CARDS */

.kg-bookmark-card, .kg-bookmark-card * {
	box-sizing: border-box;
}

.kg-bookmark-card, .kg-bookmark-publisher {
	position: relative;
	width: 100%;
}

.gh-content .kg-card + :not(.kg-card):not([id]), .gh-content :not(.kg-card):not([id]) + .kg-card {
	margin-top: 4rem;
}

.kg-bookmark-card a.kg-bookmark-container, .kg-bookmark-card a.kg-bookmark-container:hover {
	display: flex;
	text-decoration: none;
	border-radius: 3px;
	border: 1px solid rgb(124 139 154/25%);
	overflow: hidden;
	color: inherit;
}

.gh-content a {
	color: var(--ghost-accent-color);
	text-decoration: underline;
	word-break: break-word;
}

.kg-bookmark-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-basis: 100%;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 20px;
	overflow: hidden;
}

.kg-bookmark-title {
	font-size: 1.3rem;
	line-height: 1.4em;
	font-weight: 600;
}

.kg-bookmark-description {
	display: -webkit-box;
	line-height: 1.5em;
	margin-top: 3px;
	font-weight: 400;
	overflow-y: hidden;
	opacity: .7;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.kg-bookmark-metadata {
	display: flex;
	align-items: center;
	margin-top: 22px;
	width: 100%;
	font-size: 1.4rem;
	font-weight: 500;
	white-space: nowrap;
}

.kg-bookmark-icon {
	width: 20px;
	height: 20px;
	margin-right: 6px;
}

.kg-bookmark-metadata > span:last-of-type {
	overflow: hidden;
	text-overflow: ellipsis;
}

.kg-bookmark-thumbnail {
	position: relative;
	flex-grow: 1;
	min-width: 33%;
}

.kg-bookmark-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 0 2px 2px 0;
}

Raw HTML

<figure class="kg-card kg-bookmark-card">
  <a class="kg-bookmark-container" href="https://ghost.org/themes/">

    <div class="kg-bookmark-content">

      <p class="kg-bookmark-title">Ghost Themes - The Marketplace</p>

      <p class="kg-bookmark-description">Discover beautiful professional themes for the Ghost publishing platform. Custom templates for magazines, blogs, news websites, content marketing &amp; more!</p>

      <p class="kg-bookmark-metadata">
        <img class="kg-bookmark-icon" src="https://ghost.org/favicon.ico" alt="">
        <span class="kg-bookmark-author">Ghost - The Professional Publishing Platform</span>
      </p>

    </div>

    <div class="kg-bookmark-thumbnail">
      <img src="https://ghost.org/images/meta/ghost.png" alt="">
    </div>
    
  </a>
</figure>

Demo

I tested it with the Block Editor:

and WYSYIWYG Editor (source code button):

Challenges

CSS Styling

Admittedly, the HTML + CSS doesn't always translate directly from codepen to Publii because I'm using a theme (Mercury) that has its own styling for <figure> tags, and Publii handles images in its own ✨ unique ✨ way... 🫠 The Block Editor is the best for preserving HTML tags as is.

Furthermore, your mileage may vary depending on the theme you use, and you might find a better code example or generator of Ghost-style bookmarks for static sites somewhere else.

Assets

Once you get the styling on lock, the next challenge is the images (open graph image and icon) and text (page title, metadescription). You will have to fetch those elements yourself afaik, and update them manually if the title or images ever change in the future. That's what makes this whole thing a bit tedious...

Toolbar Buttons

Preferably, I'd like to be able to add these bookmark cards via a button in the toolbar in the editor.

See my gist on TinyMCE editor extension experiments (particularly: the one on the Template Plugin)

[candidexmedia]

Another thing to look into is custom helpers or the Smart Replace Plugin

See:

• #each over an array entered in config #1423 (reply in thread)
• this old forum post: https://forum.getpublii.com/topic/global-string-variable/

Essentially: instead of having to paste in the entire HTML for the bookmark and sift through it to replace the images and text, you could create some kind of custom shorthand, and tell Publii to find, say, $foo and replace it with the necessary code.

[Backspaze]

Thanks for all the input @candidexmedia!

I'll take a close look on all options if/when I get around to work on this. Regarding the manual update, I know that Ghost suffers from the same issue. Without having done any more research about this, I'm thinking that if a plugin can provide this feature, maybe it's possible to add an option in the plugin where you can tick a box which triggers a complete refresh of all bookmark cards on the next build.