This week we're announcing a feature built for bloggers: embedded notes. Like what you're reading at this very moment. Bring your own stylesheet if that's your thing. 🤓
Here are some of the cases where embedded Amplenote blog posts improve outcomes compared to Wordpress:
Blog post instantly updated (upon page refresh) as you edit your note content
Draft and edit blog posts while online or offline, from any mobile or desktop platform
No BS around "media uploads." Embed pictures or videos (!) in your blog posts effortlessly, even while you're offline.
Blog post content becomes instantly searchable within an everyday UI (i.e., as links update, easy to find the blog to keep fresh)
Organize blog content via tag hierarchy
Collaboratively draft blog posts by sharing your note with co-authors
You want to post "lite blogs" where you jot down a few thoughts for yourself and post those thoughts to the blog, with auto-updates
It's not just for blogs: you can embed an Amplenote on any page of any site
The GitClear blog features numerous examples of styled, embedded notes in action
The largest live demo of embedded Amplenotes is the GitClear blog. Here are a few of the best examples of notes becoming blog posts:
What makes embedded notes so cool for a purpose like the GitClear blog is that we can style the area around the note however we please. In the case of the screenshots above, the title and social media links are part of the outer shell of the blog. But, thanks to the stylesheet include, the inner blog (your note) is indistinguishable from its aesthetically pleasing surroundings.
In a couple weeks, our share dialog will include a tab that provides the latest version of the embed HTML. As of blog publication time, the embed HTML is:
<div class="amplenote-embed" data-note-token="PUBLIC_NOTE_ID" data-styles="/path/to/optional/stylesheet.css"><iframe frameborder="0" src="https://public.amplenote.com/embed/PUBLIC_NOTE_ID?hostname=www.gitclear.com&styles=%2Fpath%2Fto%2Foptional%2Fstylesheet.css"></iframe></div> <script defer src="https://assets.amplenote.com/embed.js"></script>
Yes, there's some redundancy in it at the moment, but there are also some pretty cool options:
hostname is used to make an Amplenote link appear without it's usual 🔗icon that appears on most links. Thus, if you want to link to another blog post on your domain, you can link there directly without the user having to click on an interstitial popup.
data-styles is used to provide a path to a stylesheet that is included by your note. To see how this works, see for example a recent GitClear blog post and the stylesheet we're using to give the note a Medium-esque facade.
Hopefully at this point it's a non-controversial view that Wordpress = 🔥🗑️. It has served its purpose, but it's time to move on.
What we're after is a path by which we can edit our a draft in a smooth, polished, instant-save environment with content versioning. Oh, and of course we want Rich Footnotes, because writing in 3d has considerable advantages.
There are surely blog platforms that could solve this problem, but we also didn't want to have to rely on a blog platform. Problems with blog platforms include
There are too damn many of them to evaluate
A blog platform is at least one layer divorced from the tool we'd use to draft the blog content
Embedded Amplenotes fix all these problems, while making it trivial to switch between blog providers on a whim, since you own all the blog content in your Amplenote account.