Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rudesind/obsidian-publish-znybo
Configuration for my Obsidian Publish site.
https://github.com/rudesind/obsidian-publish-znybo
obsidian obsidian-md obsidian-publish
Last synced: 3 months ago
JSON representation
Configuration for my Obsidian Publish site.
- Host: GitHub
- URL: https://github.com/rudesind/obsidian-publish-znybo
- Owner: Rudesind
- License: gpl-3.0
- Created: 2024-08-22T05:25:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-05T04:49:52.000Z (4 months ago)
- Last Synced: 2024-10-09T12:42:13.942Z (3 months ago)
- Topics: obsidian, obsidian-md, obsidian-publish
- Language: CSS
- Homepage: https://znybo.com
- Size: 667 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Configuration for my [Obsidian Publish](https://obsidian.md/publish) site: https://znybo.com.
## Credits
---
- Powered by [Obsidian Publish](https://obsidian.md/publish).
- Icons from [Font Awesome](https://fontawesome.com/) and [Lucide.dev](https://lucide.dev/).
- Gruvbox theme by [Minimal Publish](https://github.com/kepano/obsidian-minimal-publish).
- Maps powered by [Leaflet](https://leafletjs.com/) and [OpenStreetMap](https://www.openstreetmap.org/copyright).
- CSS Snippets:
- Cards by [Minimal](https://minimal.guide/cards).
- Banner images from [Bluemoondragon07](https://forum.obsidian.md/t/banner-images-icons-experimental-more-image-options-css-snippet/53738).
- Embed Adjustments by [SIRvb](https://publish.obsidian.md/slrvb-docs/ITS+Theme/Embed+Adjustments).
- Outlined callout by [Kepano, sailKite and r-u-s-h-i-k-e-s-h](https://github.com/r-u-s-h-i-k-e-s-h/Obsidian-CSS-Snippets/blob/Collection/Snippets/Callout%20styling%20-%20Outlined%20callout.md).
- Modular CSS Layout by [efemkay](https://github.com/efemkay/obsidian-modular-css-layout).
- Fonts:
- [Oswald](https://fonts.google.com/specimen/Oswald)
- Logo, pictures and other site resources by me.
## Contents
---
- [Installation and Setup](https://github.com/Rudesind/obsidian-publish-znybo?tab=readme-ov-file#installation-and-setup)
- [Font Awesome](https://github.com/Rudesind/obsidian-publish-znybo?tab=readme-ov-file#font-awesome)
- [Leafletjs](https://github.com/Rudesind/obsidian-publish-znybo?tab=readme-ov-file#leafletjs)
- [Themes](https://github.com/Rudesind/obsidian-publish-znybo?tab=readme-ov-file#themes)
- [Site Footer](https://github.com/Rudesind/obsidian-publish-znybo?tab=readme-ov-file#site-footer)
- [CSS and Snippets](https://github.com/Rudesind/obsidian-publish-znybo?tab=readme-ov-file#css-and-snippets)
## Installation and Setup
---
Setup and use of both my `publish.css` and `publish.js` is pretty simple, just copy both files and place them in the root of your **Obsidian Publish** vault.
> [!note]
> Using `publish.js` requires the use of a custom domain. To use all features of my site, you'll need to acquire and setup a custom domain as seen in the [official product documentation](https://help.obsidian.md/Obsidian+Publish/Set+up+a+custom+domain).
## Font Awesome
---
I utilize the free version of [Font Awesome](https://fontawesome.com/account/general) with a [Kit](https://docs.fontawesome.com/v5/web/use-with/wordpress/install-manually/#cdn-vs-kit). As I understand it, version 6+ of **Font Awesome** is only available via a free **Kit** or their **Pro CDN**. Older versions of **Font Awesome** can still be used (versions 4 and 5) via publicly hosted [CDN](https://cdnjs.com/libraries/font-awesome/6.6.0), but note that your millage with those may vary.
> [!note]
> If you still wish to use a free CDN option, see [here](https://www.w3schools.com/icons/fontawesome_icons_intro.asp) for some setup instructions.
**Font Awesome Free** gives you access to all free icons, 10,000 pages view, and use with one domain. For smaller personal projects this is more than enough.
### Setup
I use JavaScript to initialize **Font Awesome**, so a custom domain is required.
> [!note]
> It may be possible to use **Font Awesome** with only CSS and a CDN by adding the following line to your `publish.css` file:
>
> `@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');`
>
> However I have not tested this method. [Source](https://stackoverflow.com/questions/37460680/how-to-add-font-awesome-in-css).
To use a **Kit**, you'll need to add the following element to the `` of your site:
```html
```
You will need to replace `` with the one provided to you by **Font Awesome**.
> [!note]
> If you copy my `publish.js` directly and try to run it, note that **Font Awesome** will not work. The **Kit** is specific to my domain and will not run anywhere else.
Since we don't have access to any HTML for our publish site, we have to inject this element using our `publish.js` file:
```javascript
var scriptElement = document.createElement('script');
scriptElement.setAttribute('src', 'https://kit.fontawesome.com/.js');
scriptElement.setAttribute('crossorigin', 'anonymous');
document.head.appendChild(scriptElement);
```
Thats it! We can now start using **Font Awesome**.
### Use
To use **Font Awesome**, simply navigate to any [icon](https://fontawesome.com/icons) on their site and copy the HTML:
```html
```
This element can be placed anywhere and it will add that icon to the page. Further styling can be achieved using CSS.
You can also add the **Font Awesome** class to other elements. For example, if you want to make an icon a clickable link:
This HTML can be injected in your `publish.js` file (not recommended), or placed directly in one of your Markdown notes (recommend).
> [!note]
> If you add the HTML to your note, preview mode will hide the HTML, so you will need to use **source** mode to view it. Additionally, the HTML will only render once it is pushed to your site.
#### CSS Pseudo Elements and Styling
It is also possible to add icons using [CSS Pseudo Elements](https://docs.fontawesome.com/web/add-icons/pseudo-elements). In my experience this option is best if you wish to style your site with icons, such as permanently adding them to a header, etc. Creating clickable links or other use cases may not work with this method.
In this example we add a capital "H" before all `h1` headings:
```css
.markdown-preview-view h1::before, {
font-family: 'Font Awesome 6 Free';
content: '\f1dc';
}
```
At a minimum you must provide the `font-family` and `content` for this to work. Icons are expected as unicode which is available on the **Font Awesome** site. Other styling options (such as color) can be added as desired.
## Leafletjs
---
While I haven't fully implemented [Leafletjs](https://leafletjs.com/), I did take some time to see if it was possible, and boy it is finicky.
Unfortunately I don't have a live example of this at the moment.
> [!note]
> Implementing maps utilizes JavaScript, and since [Obsidian sanitizes](https://help.obsidian.md/Editing+and+formatting/HTML+content) HTML in notes, a custom domain with a `publish.js` file is required.
### Setup
First, I recommend you read through the [Leaflet Quick Start Guide](https://leafletjs.com/examples/quick-start/), specifically the **Preparing your page** and **Setting up the map** sections.
You will need to add both the CSS and JavaScript file to the `` of your Obsidian site. Here are both the elements:
```html
```
This can be added to a `publish.js` file in the following format:
```javascript
var mapStyleSheet = document.createElement('link'),
mapScript = document.createElement('script');
mapStyleSheet.rel = 'stylesheet';
mapStyleSheet.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
mapStyleSheet.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
mapStyleSheet.crossOrigin = '';
mapScript.src = 'https://unpkg.com/[email protected]/dist/leaflet.js';
mapScript.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=';
mapScript.crossOrigin = '';
document.head.appendChild(mapStyleSheet);
document.head.appendChild(mapScript);
```
Next you can specify where you want your map by adding `
` to any note in your vault.
Now we need to create the map, and this is where things get a little tricky. While the `leaflet.js` file was included in our `` element, it takes a little bit to load. If we attempt to build the map immediately the `L` leaflet object won't be recognized. Instead we have to wait until the object becomes available. Here is the full code:
```javascript
var buildMap = document.createElement('script');
buildMap.innerHTML = `
var leafletInterval = setInterval(function () {
if (window.L) {
clearInterval(leafletInterval);
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap' }).addTo(map);
}
}, 100); // Check every 100ms
`;
document.body.appendChild(buildMap);
```
The above code is appended to the bottom of the `` element, and continuously runs until the `L` object is available. This should create a map at any element with the `map` ID.
There might be a better way of implementing this, but after hours of testing this was the only solution that worked. For example, it might be suggested to wait for the DOM to fully load by listening for the `DOMContentLoaded` event, but this never worked. The issue appears to be with how **Obsidian Publish** loads and processes `publish.js`, causing the above code to run before the `leaflet.js` file was loaded.
## Themes
---
Adding a theme to an **Obsidian Publish** requires you to add the CSS to your `publish.css` file. Personally I recommend using the [Minimal Publish Themes](https://github.com/kepano/obsidian-minimal-publish), which are publish versions of the popular [Minimal Theme](https://github.com/kepano/obsidian-minimal). These include most of **Minimals** features with a few exceptions (`embed-strict` doesn't seem to work for example).
## Site Footer
---
I opted not to use the stock **Obsidian Publish** footer. While you can overwrite it using `publish.js`, this was challenging, and often had unexpected results. Additionally, I ran into numerous issues where the HTML would render correctly in my browser but not on mobile.
Instead, I create the footer directly in my notes.
### Disable Stock Footer
You can disable stock "Powered by Obsidian Publish" footer by adding this block of code to your `publish.css` file:
```css
.site-footer a {
display: none;
}
```
### Custom Markdown Footer
As mentioned previously, trying to update the stock footer using JavaScript had unexpected results and was difficult to maintain. Instead, I add the footer *directly* to the bottom of my notes as HTML.
> [!note]
> For more information around adding HTML to your notes, see the [official documentation](https://help.obsidian.md/Editing+and+formatting/HTML+content).
For example, here is a simplified "socials" footer:
```html
```
A couple of things to note: