Custom page preview: Automatic generation using plugins

[dxcore35]

Hello.

I tried to replicate and build the text formatting from your snippet. To build the snippet automatically from note's metadata. But as you see the CSS is not behaving in same way if it is inserted as text.

1. It is visible in note body
2. It is not rendered inside preview popup

Markdown

Preview mode

Do you have any ideas how to fix it? Possible with adding some CSS class?

[zamsyt]

The issue seems to be that your Dataviewjs block creates the callout at a different position in the DOM than normal, and my CSS doesn't account for that. Could be solved by changing the CSS, but here's a different way to do it with Dataview without changing the CSS:

> [!page preview]
> `=this.summary`
> 
> ```dataviewjs
> dv.el("div", "![[" + dv.current().cover + "]]")
> ```

I think there might be a simpler way to do the image embed, but not sure, I'm not that familiar with Dataview. This also seems to render unreliably in Live Preview for me.

[zamsyt]

Depending on your needs, another option would be to mark the values as Dataview inline fields (instead of storing them in the yaml):

> [!page preview]
> (summary:: Summary text)
> 
> (cover:: ![[image 123.png]])

And a snippet to reset their appearance:

.dataview.inline-field-standalone-value {
    padding: 0;
    font-family: inherit;
    background-color: transparent;
    color: inherit;
}

[dxcore35]

I check both solution but non are really good solutions :D What about trying the way by adaption of CSS?

[zamsyt]

Here's a patched version for you (Warning: Probably broken): Custom page preview (ignore position).css. I removed everything that checks the exact position of the page preview in the DOM hierarchy. I also added an extra use of the :has selector, and it means the preview is probably broken with installer versions older than v1.1.9. I also suspect this will create unexpected behavior with embeds, but haven't tested the extent of it.

I think the better solution would be to find out how to generate the correct html output using DataviewJS or Templater if possible.

edit: To avoid the margins added by the paragraph element you're creating, use a div instead:

dv.el("div", "> [!page preview]\n> " + summary + "\n>\n ![[" + cover + "]]")

[zamsyt]

If you want to stick to this solution (and assuming you run into issues with the patch), I could probably add additional checks to the snippet for the DataviewJS output for a more robust solution

[dxcore35]

I have used your snippet above. My installer is 1.1.9. But the preview is different and as you see it is still visible in page.

CODE

---

cover: "Pasted image 20230126162029.png" summary: Testing view

let cover = dv.current().cover
let summary = dv.current().summary

dv.el("div", "> [!page preview]\n> " + summary + "\n>\n ![[" + cover + "]]")

Page preview

Emblemed preview

[zamsyt]

The screenshots look as if you don't have the snippet enabled (or you have the unpatched snippet).

This is how it looks like for me in the sandbox vault with just the patched snippet and Dataview installed (with JS queries enabled)

Note content:

---
cover: "Pasted image 20230308145507.png"
summary: Testing view
---

```dataviewjs
let cover = dv.current().cover
let summary = dv.current().summary
dv.el("div", "> [!page preview]\n> " + summary + "\n>\n ![[" + cover + "]]")

Live preview:
![image](https://user-images.githubusercontent.com/102934832/223720741-89fe31af-2fea-4a77-ac6a-e7fb880da8e9.png)

![image](https://user-images.githubusercontent.com/102934832/223719162-cfb965f9-b0b9-46b5-93cf-906bf55025ef.png)

[zamsyt]

I'd also be interested to hear what your issues were with the other solutions

[dxcore35]

Now your code works! The custom CSS was disabled as I renamed it... I tried to create custom dv.view and add whole script there.

Here is the script: dx_Project_preview.zip

Here is how you need to call it from note text:

---

cover: "Pasted image 20230126162029.png" summary: Testing view

await dv.view("dx_Project_preview")

But the result looks like this:

[dxcore35]

Also there is a side affect, that the notes without this code are previewed empty

[zamsyt]

Also there is a side affect, that the notes without this code are previewed empty

I fixed that in patch 2

[dxcore35]

I have indeed fixed the side effect but now the the DataviewJS and neither dv.view methods are not producing preview.