Obsidian Publish resources

Share & showcase
, ,
1

howdy, after discussion on the discord we felt that a forum post would be the best way to start collecting css snippets, tweaks, and visual resources for obsidian publish websites. if you have some css or js to share, we would love to see it!

i’ll start us off:

.markdown-rendered p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.05em;
    text-justify: distribute;
    text-align-last: left;
}

the above justifies webtext (note: only in some browsers, firefox and safari confirmed working) without the massive spaces in-between words. another note is that ‘“distribute” has been deprecated in favor of “inter-character”’ [@cawlinteffid].

an example can be seen on my website: https://kneecaps.org/

Mod Edit: We now have a Status page for displaying Publish’s current server status. https://status.obsidian.md

5 Likes
2

Here are two good topics on setting custom fonts for Publish:

1 Like
3

You can remove the Obsidian Publish footer in your publish.css with:

.published-container {
    --footer-display: none;
}
2 Likes
4

as an addon/alternative:

.site-footer a {
	opacity: 0;
	transition: 700ms;
}

.site-footer:hover a {
	opacity: 1;
	transition: 700ms;
}

will make it appear on hover

5

Excalidraw has some support for Obsidian Publish.

3 Likes
6

To use the list cards found on our help documentation.

It is easiest to grab a copy of one of Kepano’s minimal publish themes: Minimal for Obsidian Publish - Minimal Documentation

You can also extract the .list-cards selectors if you do not wish to use Minimal.

Once added to your publish.css, add the following to the top of the note you will publish.

cssclasses:
  - list-cards

Any list item on that note will now generate those boxes. Try the below on your note to check.

- [[Introduction to Obsidian Sync|Obsidian Sync]]
	- A safe and secure way to synchronize your notes across any device and OS.
- [[Introduction to Obsidian Publish|Obsidian Publish]]
	- Publish your notes as a wiki, knowledge base, documentation, or digital garden.
2 Likes
8

Here is a way to enlarge image by clicking on it for publish.

publish.css

.markdown-preview-view .internal-embed img {
  cursor: zoom-in;
}

.markdown-preview-view .internal-embed.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100; /* Below the image, covers the viewport */
  display: flex;
  justify-content: center;
  align-items: center;
}

.markdown-preview-view .internal-embed.zoomed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
  z-index: -1; /* Behind the content of .internal-embed */
}

.markdown-preview-view .internal-embed.zoomed img {
  cursor: zoom-out;
  max-height: 100vh;
  max-width: 100vw;
  height: auto;
  width: auto;
  object-fit: contain;
}

publish.js

function initialize() {
  document.querySelectorAll('.markdown-preview-view .internal-embed img').forEach(img => {
    // Ensure we don't add multiple event listeners to the same image
    if (!img.classList.contains('zoom-event-attached')) {
      img.addEventListener('click', function() {
        this.parentNode.classList.toggle('zoomed'); // Toggle on parent
      });
      img.classList.add('zoom-event-attached');
    }
  });
}

// Observer to watch for changes in the DOM
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes.length > 0) {
      initialize();
    }
  });
});

// Start observing the document body for added nodes
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// Run initialize at the start to catch any images already in the DOM
initialize();
2 Likes
9

Updated the thread name so I can add some plugin love here.

Komenstaub maintains a plugin to be able to copy your note’s public url from context menu.

1 Like
10

Templater fun

Breadcrumbs

This quick template snippet can be used to print out the file path breadcrumb on your note, for use within Obsidian. This is a way to add some really navigation for Publish users who disable the navigation sidebar.

<%* if (tp.file.folder(true).contains("/")) { %>[[<% tp.file.folder(true).replaceAll("/", "]] / [[") %>]] <%* } else { %> [[<% tp.file.folder(true) %>]] <%* } %> / [[<% tp.file.title %>]]

Note, that this will also print out folder notes as a link as well.

11

Callouts

Tabbed callouts

A use pointed out to me that this tabbed callout snippet by @sailKite works in Publish!

1 Like
12

If you would like to make your Obsidian Publish website look a little bit more like a traditional blog, well you can. Here is a guide writting on Obsidian Publish, for Obsidian Publish on how to create a worklow that lets you create content in a way that looks like a blog with traditional hero cards and descriptions for your readers using some small CSS edits, and the templater plugin.

Obisidian Blog Guide - JordanTheITGuy

3 Likes
13

Image tricks

Zoom

Minimal Theme for Publish was updated to include a custom publish.js to create better zooming of images and a more seamless gallery.

2 Likes
15

While the full Properties view is not yet available in Publish, it seems to be a little-known fact that the underlying YAML codeblock / Frontmatter that supports Properties is actually present in the Publish DOM, meaning that it is possible via a little CSS to show at least a basic version of the Frontmatter to readers.

The simplest version of the snippet would be something such as:

.publish-renderer pre.frontmatter.language-yaml {
    /* !important is required to override a style attribute declaration on the element */
    display: block !important; 
}

Alternatively, if one wanted to only show particular Frontmatter sections to users, it is a simple adjustment to pivot into a cssclasses approach (in this case, expecting a value of publish-frontmatter:

.publish-renderer > .publish-frontmatter > .markdown-preview-section > div > .frontmatter {
    /* !important is required to override a style attribute declaration on the element */
    display: block !important; 
}

A fun side-effect of the element being in the DOM by default means that users can also override this behaviour on any Publish site, either forcing display or hiding the Frontmatter as desired with their own user styles (such as via the Stylus browser extension/add-on).

1 Like
16

Graph, graph, graph!

Moving the graph

User Franz101 on the discord extended this to move the graph to the bottom on mobile.

@media (max-width: 1000px) {
    .render-container {
      position: relative;
      max-width: 100%;
/*      height: 100%;*/
      width: 100%;
/*      overflow: hidden;*/
      flex-direction: column;
    }

    .render-container-inner {
    flex-direction: column; /* Stack elements vertically on small screens */
    overflow-y: auto; /* Enable vertical scrolling */
  }


  .graph-view-outer{
    margin-top: 12px !important;
  }

  .site-body-right-column-inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-body-right-column {
    line-height: 1.3;
    width: 100% !important;
    border-top: var(--sidebar-left-border-width) solid var(--sidebar-left-border-color);
  }

  .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    margin-right: 0;
  }
  .published-container.has-outline .site-body-right-column,
  .published-container.has-graph .site-body-right-column {
    display: block;
    position: relative;
  }
}

Showing graph on mobile

A common question asked is how to enable Graph view on smaller screens.

Change the display: none; to another display item, such as display: block;. Note, that this may not look good on all screens so use this wisely.

@media screen and (max-width: 1000px) {
  .publish-renderer > .markdown-preview-view > .markdown-preview-sizer {
    margin-right: 0;
  }
  .published-container.has-outline .site-body-right-column,
  .published-container.has-graph .site-body-right-column {
    display: none;
  }
}
1 Like
17

Hi! I’d love to get my site to justify the margins, but I’m using a RTL format, with an css code that enables me to make some sections LTR. It looks to me like this snippet will make the last line of every text go to the left, which won’t work for me. Do you think its possible to change the code so that the last word aligns in the same direction as the rest of the text (to the right for RTL and to the left for LTR)?

Thanks

18

Are you still experiencing this?

19

Hi! Thanks for asking. I haven’t tried justifying the alignment of the text on the website yet. If I can’t manage I’ll ask for help.

20

Apache Fun

Site url ligatures

A very helpful Obsidian Publish user supplied the Obsidian Support box with a method to have their site process ligatures and diacritics in the URL’s properly for their language (French).

The Apache mod_rewrite rule to achieve this is:

RewriteCond %{REQUEST_METHOD} !=POST
RewriteRule ^(.*)(É|é|È|è|Ê|ê|Ë|ë|À|à|Â|â|Ä|ä|Î|î|Ï|ï|Ô|ô|Ö|ö|Ù|ù|Û|û|Ü|ü|Ç|ç)(.*)$ $1$2$3 [E=Redirect:1,N,R=301]
21

Enable Folder Notes with publish.js

The data engineering team made a folder-notes like feature for publish.js a while back.

And user @gardener created a general update earlier this year.

You may have to edit these to work for your specific setup, but its a start!

22

Show frontmatter in Publish

These users have posted ways to use publish.js to show your frontmatter