When I was building my site on my local computer, I had a shell script to initialize a new Markdown file for sharing a link. When I moved to Cloudflare Pages 6 months ago, it opened a new opportunity to share links more easily in my Eleventy content, directly from the page I wanted to share. Bookmarklets are still an awesome invention!
The main features of my bookmarklet are:
- get the page title, ask for any change in a
window.prompt() - get some content
- the selection made on current page,
- or the page's meta description,
- or the first paragraph of the first
mainelement, - or the first paragraph of the first
articleelement, - or the first paragraph of the page
- compute the slug based on the title
- compute the file path for my links content type (
/links/YYYY/MM/DD/slug/index.md) - create the Markdown file content, with YAML Front Matter
- open a new file editor on GitHub, so I can add some content and metadata
I can then commit the file, push it directly to my main branch or open a pull request.
And then the build runs on Cloudflare Pages, and the new link is online. It is also available in the feeds, to it soon becomes a toot on Mastodon, thanks to my GitHub Action!
The JavaScript source code is here on GitHub:
// ==Bookmarklet==
// @name +🔗
// @description New link for nicolas-hoizey.com
// @version 1.0
// ==/Bookmarklet==
// Adapted from https://gist.github.com/codeguy/6684588#gistcomment-3361909
const slugify = (str) => {
let slug = str.toString();
console.log(`1: ${slug}`);
slug = slug.replaceAll('/', ' ');
console.log(`2: ${slug}`);
slug = slug.normalize('NFD');
console.log(`3: ${slug}`);
slug = slug.replace(/[\u0300-\u036f]/g, '');
console.log(`4: ${slug}`);
slug = slug.toLowerCase();
console.log(`5: ${slug}`);
slug = slug.replace(/\s+/g, ' ');
console.log(`6: ${slug}`);
slug = slug.replace(/[^\w]+/g, ' ');
console.log(`7: ${slug}`);
slug = slug.trim();
console.log(`8: ${slug}`);
slug = slug.replace(/ +/g, '-');
console.log(`9: ${slug}`);
return slug;
};
/* **********************************************************************************
/* Get data from the page
/* ********************************************************************************* /
let pageTitle = window.document.title;
let linkSelection =
'getSelection' in window ? window.getSelection().toString().trim() : '';
let linkContent =
linkSelection ||
window.document
.querySelector('head meta[name=description i]')
?.content.trim() ||
window.document.querySelector('main p')?.textContent.trim() ||
window.document.querySelector('article p')?.textContent.trim() ||
window.document.querySelector('p')?.textContent.trim();
let linkUrl = window.location.href;
/* **********************************************************************************
/* Ask the user to confirm/modify the title
/* ********************************************************************************* /
let title = window.prompt('Title of the link?', pageTitle);
if (title !== null) {
let slug = window.prompt('Slug of the link?', slugify(title));
if (slug !== null) {
/* **********************************************************************************
/* Build the content
/* ********************************************************************************* /
const today = new Date();
const dateString = today
.toISOString()
.replace('T', ' ')
.replace(/\.[0-9]{3}Z/, ' +00:00');
let value = `---
date: ${dateString}
title: "${title}"
lang: en
link: ${linkUrl}
authors:
- ""
tags: []
---
\n
${linkContent ? `> ${linkContent.replaceAll('\n', '\n> ')}` : ''}
`;
/* **********************************************************************************
/* Build the URL
/* ********************************************************************************* /
const pathDate = dateString.slice(0, 10).replaceAll('-', '/');
const filename = `src/links/${pathDate}/${slug}/index.md`;
let newFileUrl = `https://github.com/nhoizey/nicolas-hoizey.com/new/main/?filename=${filename}&value=${encodeURIComponent(
value
)}`;
window.open(newFileUrl);
}
}
The metadata in the comment on top of this script is used by bookmarklet, the npm package I use to transform my source JS into a proper bookmarklet, with a page from which I can drag the link to my bookmarks bar:
bookmarklet --demo assets/js/bookmarklets/new-link.js src/tools/bookmarklets/new-link.html
Good old bookmarklets are still great in 2023! 🥰
Top comments (0)