Replies: 6 comments 31 replies
-
|
wow, this is cool, out of my imagination. Is it possible to adapt itself to the light/dark mode? |
Beta Was this translation helpful? Give feedback.
-
|
@Gitbreast, no-no I just added param |
Beta Was this translation helpful? Give feedback.
-
|
About properties: I get it! The problem is that Awesome Links plugin is responsible for displaying an icon near author's name (but not Full House). So, I literally cant handle this in Full House. But I guess you can use the same icon with Tabler Icons plugin... Oh, no. I've checked: it doesn't work for now. I guess we need to wait for @yoyurec to fix it: Awesome Links cant display icons from Tabler Icons now. But you still can use icons from Nerd font (some of them). eg for |
Beta Was this translation helpful? Give feedback.
-
@stdword The point of my thought was, is there a way to automatically get the prop icon of property “author” and show it on the card, before the value of it. But as you say, handling the displaying would be another big project and it’s not worth it. So just ignore it. I played a while in /* book card adaptive */
.dark-theme #main-content-container .glass-card {
background-image: linear-gradient(to bottom right, #3e3f45 70%, #232427 99%);
}
.dark-theme #main-content-container .glass-card .flex{
background-color: #20212480;
}
.dark-theme #main-content-container .glass-card div > a > strong {
color: #cccccc ;
}
.light-theme.white-theme #main-content-container .glass-card {
background-image: linear-gradient(to bottom right, #dfdedc 50%, #f4f4f4 99%);
}
.light-theme.white-theme #main-content-container .glass-card .flex{
background-color: #ffffff80 ;
}
.light-theme.white-theme #main-content-container .glass-card div > a > strong {
color: #433f38 ;
} |
Beta Was this translation helpful? Give feedback.
-
|
Wow! Looks very cool 💪 Idea: use kanban board with columns (To Read, Reading, Done) and move book cards between them 😎 🙌 I've created issues to improve this tuning card UX. Left the links here if you want to subscribe to it: |
Beta Was this translation helpful? Give feedback.
-
|
@stdword Indeed! |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible to do the same with a block as book and the cover as block-property value? |
Beta Was this translation helpful? Give feedback.
-
|
@alxlg @hewcaw , guys, I've started work on this. Could you share a couple of your book blocks examples, please? |
Beta Was this translation helpful? Give feedback.
-
|
@stdword I hope this helps: |
Beta Was this translation helpful? Give feedback.
-
|
@alxlg @hewcaw Hi! I've updated the guide: take a look at the Tuning the And update |
Beta Was this translation helpful? Give feedback.
-
|
Got some time to tune a little bit to fit my own request. Thanks to your work it works well with a simple intuitive tuning.👍 @stdword
var title = ''
if (c.args.title && mode === 'block') {
title = dev.get(mode + c.args.title) || c.args.title }
else if (mode === 'page') {
title = c.page.name
}
else { title = 'No Title' }
var markup
/* if (!c.args.cover)
markup = top.logseq.api.get_page_blocks_tree(c.page.name)[1].content
markup = c.args.info3
else */
markup = when(c.args.cover, dev.get(mode + c.args.cover))
var cover = ''
/* change the path of default cover below */
if (!markup) {
cover = dev.links('')
if (!cover) {
cover = dev.asset('')
}
}
else if (markup) {
[ cover ] = dev.links(markup)
if (!cover) {
cover = dev.asset(markup)
}
}without cover property:
|
Beta Was this translation helpful? Give feedback.
-
|
Hi! Nice! Thank you for kind words 🙏
|
Beta Was this translation helpful? Give feedback.
-
|
Just updated the view: it should nicely display glass card for any DARK theme |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I'm new at Logseq and I don't know how to properly add a view, I have Full House extension, I copy the code glass-card view, and I copy the example and I get this: And a blank space |
Beta Was this translation helpful? Give feedback.
-
|
Hello! Yep, there was a problem. Just fixed it: copy template code again. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it works perfectly |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I've designed a new card template, but I've found that the rendering result does not meet my expectations. <style>
#``c.identity.slot`` body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#``c.identity.slot`` .ticket {
position: relative;
width: 100%;
max-width: 520px;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
#``c.identity.slot`` .ticket-number {
font-size: 24px;
font-weight: bold;
color: red;
}
#``c.identity.slot`` .station {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
margin: 10px 0;
}
#``c.identity.slot`` .arrow {
margin: 0 10px;
font-size: 24px;
}
#``c.identity.slot`` .date-train {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 10px 0;
}
#``c.identity.slot`` .additional-info {
font-size: 14px;
margin: 10px 0;
}
#``c.identity.slot`` .bottom-section {
display: flex;
justify-content: space-between;
border-top: 1px solid #ccc;
padding-top: 10px;
margin-top: 10px;
}
#``c.identity.slot`` .qr-code {
width: 46px;
height: 46px;
}
#``c.identity.slot`` .barcode {
margin-top: 10px;
height: 24px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
}
</style>
``{_
var mode = c.args.block ? 'block' : 'page'
var title = when(c.args.title, dev.get(mode + c.args.title) || c.args.title)
var info1 = when(c.args.info1, dev.get(mode + c.args.info1) || c.args.info1)
var info2 = when(c.args.info2, dev.get(mode + c.args.info2) || c.args.info2)
var info3 = when(c.args.info3, dev.get(mode + c.args.info3) || c.args.info3)
var markup = when(c.args.cover, dev.get(mode + c.args.cover) || c.args.cover)
var ref_link = when(c.args.ref_link, dev.get(mode + c.args.ref_link) || c.args.ref_link)
function createElement(tag, attributes, ...children) {
const element = document.createElement(tag);
for (const key in attributes) {
if (key.startsWith('on')) {
element.addEventListener(key.substring(2).toLowerCase(), attributes[key]);
} else {
element.setAttribute(key, attributes[key]);
}
}
children.forEach(child => {
if (typeof child === 'string') {
element.appendChild(document.createTextNode(child));
} else {
element.appendChild(child);
}
});
return element;
}
function generateTicket({
fromStation = 'Beijing',
toStation = 'SH',
trainNumber = '01-002',
date = '2024-04-05',
departureTime = '08:28',
color = 'green'
}) {
const colorMap = {
green: '#e8f6f6',
blue: '#e8f0f6',
pink: '#f6e8e8',
yellow: '#f6f3e8',
};
const id = Math.random().toString(36).substring(2, 10).toUpperCase() + 'Q';
const ticketDiv = createElement('div', {
class: 'ticket',
style: `background-color: ${colorMap[color]};`
});
// Ticket Number
const ticketNumberDiv = createElement('div', { class: 'ticket-number' }, id);
ticketDiv.appendChild(ticketNumberDiv);
// Stations
const stationsDiv = createElement('div', { class: 'station' },
createElement('span', null, `${fromStation} 站`),
createElement('span', { class: 'arrow' }, '→'),
createElement('span', null, `${toStation} 站`)
);
ticketDiv.appendChild(stationsDiv);
// Date and Train Info
const dateTrainDiv = createElement('div', { class: 'date-train' },
createElement('div', null, `${new Date(date).toLocaleDateString('zh-CN')} ${departureTime}开`),
createElement('div', null, `${trainNumber}号`)
);
ticketDiv.appendChild(dateTrainDiv);
// Additional Info
const additionalInfoDiv = createElement('div', { class: 'additional-info' },
createElement('div', null, '新至通特等座'),
createElement('div', null, '限乘当日当次车')
);
ticketDiv.appendChild(additionalInfoDiv);
// Bottom Section with QR Code
const bottomDiv = createElement('div', { class: 'bottom-section' });
const infoDiv = createElement('div', { class: 'info' },
createElement('div', { class: 'mb-1' },
createElement('span', null, '买票请到12306'),
createElement('span', null, '发货请到95306')
),
createElement('div', { class: 'insurance' }, '中国铁路旅客运输保险')
);
bottomDiv.appendChild(infoDiv);
// QR Code
const qrCodeDiv = createElement('img', {
src: `https://api.qrserver.com/v1/create-qr-code/?data=ticket:${id}&size=46x46`,
class: 'qr-code'
});
bottomDiv.appendChild(qrCodeDiv);
ticketDiv.appendChild(bottomDiv);
// Barcode placeholder
const barcodeDiv = createElement('div', { class: 'barcode' });
ticketDiv.appendChild(barcodeDiv);
return ticketDiv;
}
var ticket_card = generateTicket({
fromStation: '北京',
toStation: '上海',
trainNumber: 'G101',
date: '2024-05-01',
departureTime: '14:30',
color: 'pink'
})
_}``
<div>
``_ `<div>${ticket_card}</div>` _``
</div>
</div>
</div>block: block render result: |
Beta Was this translation helpful? Give feedback.
-
|
my expected result ： |
Beta Was this translation helpful? Give feedback.
-
|
The issue doesn't related to the plugin, but in Javascript. You cannot just create HTMLDevElement and convert it to string via .toString() method. Use .outerHTML instead: ...
// Barcode placeholder
const barcodeDiv = createElement('div', { class: 'barcode' });
ticketDiv.appendChild(barcodeDiv);
return ticketDiv.outerHTML;
}
... |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I've tried the showcase but the render command give me an error back. "Cannot read properties of undefined (reading 'content')" in line 40 of the jsx copy-pastet content. |
Beta Was this translation helpful? Give feedback.
-
|
Hello! Sorry for the late reply. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks man! But probably it didn't worked. The error is still there and I thought it would be in the code 🤔. |
Beta Was this translation helpful? Give feedback.
-
|
Never mind, I figured it out. But yet I don't understand how to adapt the example 😅 |
Beta Was this translation helpful? Give feedback.
-
|
@N4gasak1 but it works. No error in the code itself. But it may be related to the context of the execution. Here is the demo: 2025-07-19.23.45.56.mp4 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Inspired by reddit post in
r/logseqLet's replicate the book card from Logseq.com main page 💪
video
demo3.mp4
🏛viewfor pages🏛view(use copy button in the top right corner):code
name,author,categoryand the link to book cover from the second page block (you could change it: see Tuning section).iconproperty to[[Peter Morville]]page:icon:: 👤.🏛viewcode to some block and enjoy book card:{{renderer :template-view, glass-card, :page [[Intertwingled]] }}🏛viewfor blocks🏛viewas for pages🏛viewfor blocks:🏛viewcode to some block and enjoy book card. Note: use:blockargument as content source for the view:{{renderer :template-view, book-card, :block ((643338ba-…)) }}Tuning the
🏛viewYou could change the displaying content with
:cover,:title,:info1,:info2&:info3arguments (or with its correspondingarg--prefixed properties in template block):{{renderer :template-view, book-card, :block ((643338ba-…)), :title @subtitle, :info3 @year, :card-width 470px, :cover-width 100px}} {{renderer :template-view, book-card, :block ((643338ba-…)) }} {{renderer :template-view, book-card, :block ((643338ba-…)), :cover ""}} {{renderer :template-view, book-card, :block ((643338ba-…)), :title "", :info1 "", :info2 ""}}@yearmeans🏛viewwould accessyearproperty of provided page or blockcoverargument and page source: if no property would be provided the value would be retrieved from the second page blockUse
:title-sizeto change title's size. Available choices can be found here.{{renderer :template-view, book-card, :page [[Intertwingled]], :title-size text-xl}}Use
:card-widthto change card's size (it is automatic by default):{{renderer :template-view, book-card, :page [[Intertwingled]], :card-width 350px}}Use
:cover-height&:cover-width: to change card's cover size{{renderer :template-view, book-card, :page [[Intertwingled]], :cover-width 56px, :cover-height 84px}}Additional info
Beta Was this translation helpful? Give feedback.
All reactions