Over the past few years, I have used var­i­ous Read-It-Lat­er apps to save links to web­sites or arti­cles that inter­est­ed me. Since such a col­lec­tion should ide­al­ly be main­tained and accessed from dif­fer­ent devices, web ser­vices seemed like a good solu­tion at first. Unfor­tu­nate­ly, they have the dis­ad­van­tage that they are often bought up at some point and then usu­al­ly dis­con­tin­ued. This is what hap­pened to me, for exam­ple, with Deli­cious (2019), Omni­vore (2024) and cur­rent­ly with Pock­et.

So I moved from these ser­vices to solu­tions I host­ed myself, like Book­marks for Nextcloud. For some time now, I have used an Apple Short­cut and Obsid­i­an as an inde­pen­dent solu­tion. In this blog, I already pre­sent­ed Three Styles to Save Book­marks in Obsid­i­an. Now, I use an updat­ed ver­sion. This ver­sion is ful­ly in line with the Obsid­i­an phi­los­o­phy. The book­marks are now saved local­ly as sim­ple Mark­down files. This means that they remain com­plete­ly in your own own­er­ship, can be read and edit­ed by oth­er apps, and remain acces­si­ble even if Obsid­i­an itself is no longer devel­oped.

What a Read-It-Later Solution Should Do

Tra­di­tion­al­ly, the require­ments for a read-it-lat­er app are:

1. easy access in the web brows­er
2. con­tent orga­ni­za­tion
3. visu­al ori­en­ta­tion
4. good read­abil­i­ty
5. syn­chro­niza­tion across the devices used

Because I use Apple Short­cuts, there are dif­fer­ent ways to start the tool. I use the share sheet option on the iPhone and iPad, but this is too com­pli­cat­ed to use on the Mac. That’s why I ini­tial­ly used the “Pin in Menu Bar” option, but I now use the Bar­cuts app from the indie devel­op­er Car­lo Zottmann, which I have described here.

I want­ed to keep cre­at­ing book­marks sim­ple. The URL is just processed and, as you can see in the two exam­ples, stored either with­out or with a pre­view image:

Whether a pre­view image is dis­played depends on whether the short­cut finds one. This does not seem to be the case with my Word­Press pages. Most of the time, how­ev­er, an image like in the sec­ond exam­ple is dis­played (@Carlo, I hope I was allowed to use the URL as an exam­ple).

I orga­nize the con­tent when I read it lat­er. I edit the col­lect­ed book­marks dai­ly: arti­cles are either processed direct­ly, sum­ma­rized in new or inte­grat­ed into exist­ing notes and delet­ed from the list. Some­times I leave them in the book­mark for fur­ther pro­cess­ing, but add tags that help cat­e­go­rize them by top­ic, impor­tance, or both, so I can eas­i­ly find them using the search func­tion.

Implementation

My solu­tion con­sists of 3 parts:

1. An Apple Short­cut that process­es the web page and cre­ates a Mark­down Call­out for the book­mark note.
2. Car­lo Zottman­n’s app Actions for Obsid­i­an, which writes the call­out into the book­mark note.
3. A CSS snip­pet in my Obsid­i­an Vault that defines the design of the book­mark.

The Shortcut

The short­cut per­forms the fol­low­ing steps:

1. Acti­vate the options “Receive What’s On Screen” and, if need­ed, “Pin to menu bar” in the short­cut details.
2. Select only “URLs” and “Arti­cle” as input sources in the short­cut edi­tor. I define also a mes­sage if the short­cut is not start­ed in a brows­er.
3. Save the cur­rent­ly active app in a vari­able, so the brows­er come back to the front at the end.
4. Cre­ate the “Arti­cle object” with the data from the active web­site for lat­er pro­cess­ing.
5. Use an “if” state­ment to check if a “Main Image URL” is avail­able:
   1. If yes, cre­ate the mark­down for the book­mark call­out includ­ing a pre­view image from the arti­cle data and store it in the vari­able Text.
   2. If not, cre­ate the mark­down with­out a pre­view image.
6. Insert the cre­at­ed call­out in the vari­able Text into the book­mark note using the “Actions for Obsid­i­an” action “Prepend Note” below the head­ing # Bookmarks. Adjust the Vault and path as need­ed.
7. macOS only: Close the “Actions for Obsid­i­an” app so it does not stay vis­i­ble in the dock or app switch­er (⌘ tab). This is not pos­si­ble on iPadOS/iOS.
8. Bring the brows­er back to the front.

This is how it looks:

That’s it for the short­cut part. Before test­ing the short­cut, you should cre­ate your book­mark note with the head­line # Bookmarks. When this is done, start your brows­er, vis­it a web­page, and run the short­cut. You can use any browser—at least Safari, Chrome (and Chrome-based), and Fire­fox should work.

Because there is no [!bookmark] call­out by default, the book­mark is shown like this at first:

To cus­tomize the appear­ance, you need to define a CSS snip­pet.

The CSS snippet

I use a CSS snip­pet to define the appear­ance. If you are not famil­iar with this con­cept, here is a short intro­duc­tion:

Obsid­i­an allows you to cus­tomize the appear­ance either with themes, which change the whole inter­face, or with CSS snip­pets, which only change spe­cif­ic parts. CSS snip­pets must be stored in a spe­cial fold­er. You can find this fold­er via Set­tings → Appear­ance → CSS snip­pets by click­ing the fold­er icon in the top right cor­ner, which open this fold­er in the FInd­er.

Now, use a text edi­tor that saves plain text—such as Sub­lime, Text­Mate, VS Code, or in the ter­mi­nal with nano, vim, or emacs—to cre­ate a CSS file. Name it, for exam­ple, bookmark.css, and add the fol­low­ing con­tent. Save it in the fold­er you opened before.

/* Callout for Bookmarks */

.callout[data-callout="bookmark"] {
    --callout-color: white;
    --callout-icon: book-open-text;

    background: white !important;
    border: 1px solid black;
    border-right: 5px solid #6666 !important;
    border-bottom: 5px solid #6666 !important;
    border-radius: 12px;
    padding: 15px;
}

.callout[data-callout="bookmark"] .callout-title {
    font-weight: bold;
    color: #005a9c;
    font-size: 1.3em;
}

.callout[data-callout="bookmark"] .callout-title a {
    text-decoration: none !important;
    color: #005a9c;
    font-weight: bold;
}

.callout[data-callout="bookmark"] .callout-title a:hover {
    text-decoration: none !important;
    color: #003366;
}

.callout[data-callout="bookmark"] p {
    color: black !important;
}

.callout[data-callout="bookmark"] img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 10px;
    display: block;
}

After you put the CSS file in the cor­rect fold­er, go back to the Obsid­i­an set­tings, click the reload icon next to the fold­er icon, and acti­vate the CSS snip­pet.

The book­marks should The book­marks should now look like the images above. look like the images shown above.

A small but annoy­ing issue occurs when the Obsid­i­an Vault is saved in the iCloud: For rea­sons that are not entire­ly clear, the CSS files are not shown in the Find­er, but they do appear in the Obsid­i­an set­tings dia­log. Apple has appar­ent­ly decid­ed that all files in hid­den fold­ers in the Find­er will not be dis­played if they are in iCloud. How­ev­er, you can use the key com­bi­na­tion ⌘-⇧-. to tem­porar­i­ly show these hid­den files. Please note: This applies to all fold­ers, and many of these hid­den files and fold­ers are impor­tant for macOS or for apps to work. You should not change or delete them.

Conclusion

I hope this short arti­cle has shown how you can cre­ate a replace­ment for Pock­et and sim­i­lar ser­vices with sim­ple tools. This solu­tion makes you inde­pen­dent of exter­nal providers and gives you more flex­i­bil­i­ty, because you can also process the files with oth­er pro­grams or scripts. I still think this is one of the great advan­tages of Obsidian’s open­ness.