Skip to content

Commit cb4e0ff

Browse files
Feature: Add option to hide transclusion styling using |clean (#61)
Adding the alias `|clean` to a transclusion hides the blockquote styling. Additionally, added `|left` and `|right` alias to float embeds left or right. This is required if embedding a block (such as an infobox callout) which already has a float property, because in Obsidian the `<span>` containing the embed will otherwise take up 100% page-width and prevent the floating embed from actually wrapping around other content. Quartz is unaffected as it handles transclusions differently, so the `left` and `right` aliases are not defined in the Quartz scss. This is purely a WYSIWYG compromise with Obsidian. This update also marks a change in approach for creating custom scss for Quartz. Because the `styles/custom.scss` file has bloated in size and is becoming more difficult to navigate, I opted to utilise scss modules. The new Quartz css for transclusions can be found in `styles/custom/transclusions.scss`, which is imported as a module into `custom.scss`. Closes #47
1 parent 8774d4b commit cb4e0ff

File tree

5 files changed

+89
-3
lines changed

5 files changed

+89
-3
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*Transclusions*/
2+
3+
.internal-embed[alt~=clean].is-loaded:not(.image-embed) {
4+
--embed-padding: 0;
5+
border: none;
6+
}
7+
8+
.internal-embed[alt~=right] {
9+
float: right;
10+
margin-left: 0.5em;
11+
}
12+
13+
.internal-embed[alt~=left] {
14+
float: left;
15+
margin-right: 0.5em;
16+
}
17+
18+
:not(.lp-embed-float) .is-live-preview .internal-embed:is([alt~=right], [alt~=left]) {
19+
float: unset;
20+
}

Diff for: content/contributing/custom-formatting-features.md

+48-1
Original file line numberDiff line numberDiff line change
@@ -237,4 +237,51 @@ A wiki-style infobox displayed in the top right of an article to summarize data
237237
> | --- | --- |
238238
> | Row | Row |
239239
> | Row | Row |
240-
```
240+
```
241+
242+
---
243+
244+
## Embed Adjustments
245+
246+
Adjustments for Obsidian [embedded files](https://help.obsidian.md/Linking+notes+and+files/Embed+files), otherwise known as 'transclusions'
247+
248+
```markdown title="syntax"
249+
![[Embedded Note|attribute attribute]]
250+
251+
![[intereting-note-title|clean right]]
252+
```
253+
254+
| Attribute | Description |
255+
| --------- | ---------------------------------- |
256+
| `clean` | Removes border to hide embed style |
257+
| `left` | Float |
258+
| `right` | Floats embed to the right |
259+
260+
### Hide Embed Styling
261+
262+
You can hide the borders of embedded notes and blocks by adding '`|clean]]`' to the wikilink's alias.
263+
^4beb5b
264+
265+
This allows the embed to appear seamlessly as a part of the page it is embedded in.
266+
267+
> [!column|2 flex clean no-t]
268+
> > [!example] This is a standard transclusion:
269+
> > ![[custom-formatting-features#^4beb5b]]
270+
>
271+
> > [!example] This is a 'clean' transclusion:
272+
> > ![[custom-formatting-features#^4beb5b|clean]]
273+
274+
> [!warning] Embedding block links which float left or right
275+
> You must add a `left` or `right` attribute to embeds if the embedded content itself already floats left or right.
276+
>
277+
> **Example:**
278+
> - The [[custom-formatting-features#Infobox|infobox callout]] already floats right. To embed it in another page, add `|right` to the embed wikilink's alias.
279+
>
280+
> This prevents the embed from taking up 100% of the page-width, instead of wrapping around other content
281+
282+
### Float Embed Left or Right
283+
284+
Embeds can be made to float to the left or right of a page by adding `|left` or `|right` to the embed wikilink's alias. ^cb5c00
285+
286+
As well as being a stylistic choice to move supplementary content outside of the main flow of the text, it is also necessary when embedding a block which contains an element with a float property already stipulated (e.g., an infobox callout).
287+

Diff for: content/contributing/manual-of-style/content-guidelines.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ aliases:
88
- Content Guidelines
99
---
1010

11-
![[contributing/manual-of-style/index#^3085e6|Manual of Style - 36 Sermons of MMW]]
11+
![[contributing/manual-of-style/index#^3085e6|Manual of Style - 36 Sermons of MMW clean]]
1212

1313
## Writing Style
1414

@@ -35,4 +35,10 @@ TO-DO
3535
- images
3636
- videos
3737
- downloads
38-
- first-person tone
38+
- first-person tone
39+
40+
## Transclusions
41+
42+
This allows for [[redundancy]] within the wiki, wherein an important piece of data (such as a table or a contents list), which must appear on multiple pages, can be stored in just one note. When updates are made to the data, only the original note needs to be edited; all pages where that data has been embedded will be updated automatically.
43+
44+
This is the same principle as [Wikipedia 'Templates'](https://en.wikipedia.org/wiki/Wikipedia:Templates). However, it has been renamed because ['Templates' in Obsidian serve a different function](https://help.obsidian.md/Plugins/Templates).

Diff for: quartz/styles/custom.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@use "./base.scss";
22
@use "./variables.scss" as *;
3+
/* -- MMW SCSS Modules -- */
4+
@use "./custom/transclusions.scss";
35

46
.page-title {
57
height: 175px;

Diff for: quartz/styles/custom/transclusions.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use "../base.scss";
2+
@use "../variables.scss" as *;
3+
4+
.transclude[data-embed-alias~=clean] {
5+
border-left: none;
6+
padding-left: 0;
7+
}
8+
9+
.transclude[data-embed-alias~=clean] > .transclude-src {
10+
display: none;
11+
}

0 commit comments

Comments
 (0)