How to create card view showcased in the docs.obsidianweb.net?

[hi-jin]

After visiting the documentation site at docs.obsidianweb.net, I was particularly impressed by the "card" view showcased in the following screenshot.
I'm eager to implement a similar feature in my own project.

However, I've encountered some difficulties attempting to replicate this card view using the CSS snippet from the Minimal theme, specifically with the cssClasses: list-cards configuration.
Unfortunately, this approach doesn't seem to work when I export it.

Could you please provide some guidance on how you implemented those cards?
Any advice or insights you could share would be greatly appreciated.

[KosmosisDire]

This card view is a little experiment I created to showcase the power of custom head content and the new RSS feed. I might bring this "feed" view to the plugin as an optional featuer in the future. However, right now I have just written a script that you can paste into a .html file and then include that file as the custom head content in the plugin's settings. This script will dynamically generate a card view of all the files in the vault sorted by most recently modified with the time since it was last modified. This time will update dynamically as well. I will provide the script here in a paste bin: https://pastebin.com/KzsHFFUN

Please note that this is a very experimental script, it might break, or it might not work after an update. But this is the way I did it. I will likely improve the script over time. If I have updates or the script breaks I will post a new version here.

Finally, more detailed instructions on how to implement this:

1. Open the pastebin: https://pastebin.com/KzsHFFUN
2. Copy the full contents of the file
3. In your vault (or anywhere you'd like) create a new .html file.
4. Paste the file contents into the .html file
5. Edit lines 116 and 117 to use your own url, and edit line 73 to use the path on which you would like the feed to be shown (it is index by default)
6. Open the plugin settings to: Webpage HTML Export > Page Features > Custom head content
7. Choose the path to your .html file USING THE BROWSE BUTTON (right now there is a bug where it thinks any path is invalid, but it will work if you use the browse button)
8. Go to the settings: Webpage HTML Export > Metadata > Create RSS feed and turn it on.
9. In the same section Webpage HTML Export > Metadata > Public site URL set the url of your website. (For my site this is https://docs.obsidianweb.net/)
10. Finally export as an Online Web Server export

Let me know if you have difficulties following this. I realize these are somewhat involved instructions, however the script in it's current state isn't really meant to be flexible. Good luck!

[hi-jin]

Oh, that was the problem :)

Actually I have kept the .git directory (to publish on git pages) in the plugin export folder.
I was able to kept those stuffs in the previous version, but in this beta I can't.
If any file (even empty file) exist in the export folder, It stops.

If �this is your intention, I will find another way to publish! Thanks

[KosmosisDire]

It should be able to finish. Can you create an issue for this and include a screenshot of the developer log as well after it freezes (Ctrl+Shift+i). Thanks.

Were you able to get the cards working?

[hi-jin]

It should be able to finish. Can you create an issue for this and include a screenshot of the developer log as well after it freezes (Ctrl+Shift+i). Thanks.

Sure! Wait a sec :)

Were you able to get the cards working?

Yes, it works!
But, the graph doesn't work.

And there was some error message when I do export.

Not found error occurred. But as you can see, there is a file in the right position.

[KosmosisDire]

The error is fine, this error is just relating to something else. The graph view probably isn't showing because there are not links between multiple files to show? Looks like you only have two files, and none of them are linked.

[hi-jin]

OMG I totally forgot I've deleted the index file with links. sry :(

Now I'm gonna write an issue you mentioned before. thanks!