As notebooks count grows, it’s harder to find the notebook you want
It would be good if
It seems I can’t add a notebook that’s unpublished to a collection. The option isn’t available in the menu that appears when clicking the “…” button on the notebook page. I have a notebook I want to keep private and add to a specific collection for my team. Is there any way to add it to a collection?
Not yet; collections are currently for showcasing public notebooks, but I expect we’ll add support for private collections (or other ways of organizing private notebooks) in the near future.
Update: Private (and shared) notebooks are now included in your personalized search results.
Update #2: Observable now has private collections (which are accessible only to you or your team, but may contain private, shared and public notebooks) … as well as the ability to add private and shared notebooks (invisibly to others) to your public collections.
Yes! Finally! Thank you! 
I’ve hacked together a snippet that adds any collections as linked tags to the current list of notebooks:
The snippet can be run in the dev tools (or turned into bookmarklet). Please be aware though that it performs a fetch request for each single notebook that is listed.
The snippet:
{
const options = {
// Assign custom colors by collection prefix.
colors: {
'#status-': '#dcfdcb',
'#type-': '#fbdccd',
':Project': '#dff0ff'
}
};
for(let n of document.querySelectorAll('.listing-grid')) attach(n, options);
async function attach(node, {colors = {}}) {
purge(node);
node.appendChild(getStyle(colors));
const user = await request('user');
const isOwner = slug => user && isPrefix(`@${user.login}/`, slug);
findItems(node).map(async ({node: n, slug}) => {
const data = await request('document/' + slug + (isOwner(slug) ? '@latest' : ''));
if(!data.collections || !data.collections.length) return;
const w = injectWrapper(n);
for(let c of data.collections) w.appendChild(createTag(c));
})
}
// Returns a list of notebook teasers and their slugs.
function findItems(node) {
const items = node.querySelectorAll(':scope > .flex-auto');
return Array.from(items)
.map(n => {
const a = n.querySelector('a[aria-label][href]');
return { node: n, slug: a && getSlug(a.pathname) };
})
.filter(o => o.slug);
}
// Removes previously attached elements.
function purge(node) {
const s = '[data-type="collection-wrapper"], style[data-type="collections"]';
for(let n of node.querySelectorAll(s)) n.parentNode.removeChild(n);
}
// Extracts identifying part from a notebook path.
function getSlug(pathname) {
return (pathname.match(/^\/d\/([a-f0-9]{16})$/) || pathname.match(/^\/(@[^\/]+?\/[^\/]+?)$/) || [])[1];
}
// Injects collections wrapper into an item.
function injectWrapper(node) {
const w = html('<div class="flex flex-wrap ph2 pt2 pb2 f7 b--black-10 bt" data-type="collection-wrapper">');
return node.querySelector(':scope > .bg-white').appendChild(w);
}
function createTag(collection) {
const a = attr(html('<a data-type=collection class="dib nowrap br2 mb1 bg-light-gray near-black no-underline mr1 ph1 lh-f6">'), {
title: `${collection.owner.name} / ${collection.title}`,
style: `--avatar: url(${collection.owner.avatar_url})`,
'data-count': collection.document_count,
'data-title': collection.title,
href: `/collection/@${collection.owner.login}/${collection.slug}`,
});
return a.textContent = collection.title, a;
}
// Creates style element for custom CSS.
function getStyle(prefixColors = {}) {
const s = html('<style data-type=collections>');
s.textContent = `
a[data-type="collection"] {border:1px solid rgba(0,0,0,.05); overflow: hidden}
a[data-type="collection"]:before {
content: "";
background: var(--avatar) center/contain no-repeat;
width: 16px;
height: 16px;
border-radius: var(--border-radius-circle);
margin-right: var(--spacing-extra-small);
vertical-align: text-top;
display: inline-block;
}
a[data-type="collection"][data-count]:after {
content: " ("attr(data-count)")";
}
${Object.entries(prefixColors).map(([prefix, color]) => `
a[data-type="collection"][data-title^="${prefix}"] { background-color: ${color} }
`).join('')}
`;
return s;
}
// Tests for string prefix.
function isPrefix(prefix, str) {
return str.slice(0, prefix.length) === prefix;
}
// Runs authenticated request against api.observablehq.com.
async function request(path) {
const opts = {credentials: 'include'};
const url = 'https://api.observablehq.com/' + path.replace(/^\//, '');
return (await fetch(url, opts)).json();
}
// Sets attributes on an Element.
function attr(node, attrs) {
return Object.entries(attrs).map(([k,v]) => node.setAttribute(k,v)), node;
}
// Creates an Element from an HTML string.
function html(markup) {
return document.createRange().createContextualFragment(markup).firstChild;
}
}
I would add it as an tamperMonkey script, if there weren’t too much network calls …
I am worried about Observable’s server load 
Yep, that’s what kept me from running it at all time. The number of automated requests might violate Observable’s TOS.
But for the moment it helps me a lot to discover notebooks that haven’t been sorted into collections yet.
@mootari, Thanks for the considerate feedback!
It should all be sorted alphabetically. Are you still seeing a different sort somewhere?
Fixed, the collections tab now has a type filter.
This, and your extremely nifty hack that displays collections as links on the notebook listing, are things we’re going to have to think about further…
Yes, unfortunately. It seems that collections in the collections tab are sorted by their slug, not the title.
Thanks for the quick fix!
Being able to create private notebooks has already been a huge help - I finally feel like I have a chance to get back control over the mess that has accumulated over the months. At the moment my conventions for collection names are:
:”: a group of notebooks (i.e. a notebook should only have one group assigned at a time), e.g. “:Project | GIF Capturing”, “:Project | Clip Space”#type-”: type of a notebook (only one assigned), e.g. “#type-sketch”, “#type-project”, “#type-support”, “#type-iteration” (for forks/variants)#status-”: temporary state of a notebook (multiple assignable), e.g. “#status-wip”, “#status-broken”I’ve tweaked my script some more. The output currently looks like this:
But I’ve also quickly hit the limit of what can be done reasonably with collections, especially on the collections tab. The large (and frequently changing) thumbnails add a lot of visual clutter that makes it difficult to find a specific collection:
And the size of the collections dialog is heavily restricted both horizontally and vertically:
To fight the problem of both notebook and collection slug changes my recommendation would be to introduce redirects:
Edit: Something I forgot to mention: Right now there’s no direct navigation path from a collection detail back to the collections tab; instead I have to click on my name, then navigate to the tab.
There’s an oddity that I haven’t figured out yet. Some requests against the /document route return the data with an empty collections set, even though a collection is assigned:
https://api.observablehq.com/document/f990a4814916f644 has collectionhttps://api.observablehq.com/document/@mootari/test-input-events doesn’t have collectionhttps://api.observablehq.com/document/@mootari/test-input-events@latest has collection (this is the route used by Observable)Note: Any @revision routes don’t even include the collections key - this is probably an optimization.
All requests were made with:
(await (await fetch(path, {credentials:"include",cache:"no-cache"})).json()).collections
This behavior causes my snippet to drop some collection tags, so any insight is highly appreciated. 
What you’re seeing is our public caching.
For public notebooks, we use different URLs for requests from the general public than for requests notebook owners; the former contain only public data and are cached, the latter may contain private data and are not.
In this case, it’s a private collection that is assigned to the notebook — right?
Yup, that’s right. I guess I’ll have to introduce some logic to determine wether the current user is the owner of the listed notebook (and can can safely append @latest to the API route). Edit: Fixed, updated snippet.
I ran a few more tests: The sorting appears to ignore any non-letter characters. This causes a different order compared to the collections dialog (and also mixes my prefixed and standard collections):
Edit: Here’s a screenshot from the Visualization collection with added collection tags. I believe it demonstrates nicely how these tags can help discover related collections and notebooks:
