](https://www.buymeacoffee.com/hidekaz)
2 |
3 | English / [日本語](https://scrapbox.io/logseq-ja/Logseq_Cardbox_Plugin%2F%E4%BD%BF%E3%81%84%E6%96%B9)
4 |
5 | Plugin to add thumbnail cards to [Logseq](https://github.com/logseq/logseq) that are displayed in order of update.
6 |
7 | 
8 |
9 | ## How to launch
10 | Any of the following:
11 | - "CardBox" button on the left sidebar
12 | - Click the CardBox icon in the top right corner of the page
13 | - Enter "Open CardBox" in the command palette
14 | - Shortcut:
15 | - (Windows) Ctrl + Shift + Enter
16 | - (macOS) Cmd + Shift + Enter
17 |
18 | 
19 |
20 | - Immediately after installation, CardBox will automatically build the database. During this time, the message "Building..." will appear in the upper left corner of the CardBox. Do not exit Logseq until this message disappears.
21 |
22 | ## Selecting a card
23 | - The thumbnail cards of the pages are ordered by the date of the last update, starting from the top left.
24 | - Only pages are displayed. The journal and whiteboard are not displayed.
25 | - Click on a page or use the cursor keys to move the selection and press Enter to open it.
26 | - If you hold down Shift while performing the open operation, the page will open in the sidebar.
27 |
28 | ## Filtering using page tags
29 | - Type a character key to filter cards by a page tag
30 | - What is a page tag? See below:
31 |
32 | 
33 |
34 | ## Closing the CardBox
35 | - Close CardBox by pressing the X button in the top right-hand corner or pressing the Esc key.
36 |
37 | ## Key bindings
38 | - Any character keys: Input a page tag
39 | - Up, Down, Left, Right: Move the cursor to select a card
40 | - Enter: Open the selected card
41 | - Shift+Enter: Open the selected card in the sidebar
42 | - Esc: Close the CardBox
43 |
44 | ## Languages supported
45 | - English
46 | - Japanese
47 |
48 | You need to restart Logseq for the language change to take effect.
49 |
50 | ## Limitations
51 | - CardBox will not display pages without body text.
52 | - Logseq does not create a .md file for a page with only a title without body text. This plug-in reads the modification time of the .md file directly, so it cannot display pages with no file.
53 | - Since Logseq is currently in beta, it cannot correctly manage the modification time of pages. If the modification time is incorrect, please press the "Rebuild" button (it will get the modification time directly from the specified pages folder).
54 | - See https://github.com/logseq/logseq/issues/8556
55 | - Changes made directly to the .md file while Logseq is not running will not be reflected in the CardBox.
56 | - To reflect them, press the 'Rebuild' button.
57 | - After executing the "Re-index" in Logseq, press the "Rebuild" button in the CardBox.
58 | - If you do not rebuild, pages may not be displayed in the correct time order.
59 | - If you do not rebuild, you cannot open the page in the sidebar from CardBox.
60 | - Pages with a slash at the end of the title (e.g. MyPage/ ) will not display correctly.
61 |
62 | # Support
63 |
64 | If you like it, please donate to me to continue the development.
65 |
66 | [](https://www.buymeacoffee.com/hidekaz)
67 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.tsx'
4 | import "@fontsource/roboto"
5 | import "@fontsource/roboto/700.css"
6 | import '@fontsource/noto-sans-jp'
7 | import '@fontsource/noto-sans-jp/700.css'
8 | import './main.css'
9 | import '@logseq/libs'
10 | import './i18n/configs';
11 | import { SimpleCommandKeybinding } from '@logseq/libs/dist/LSPlugin'
12 |
13 | const openCardBox = () => {
14 | logseq.showMainUI();
15 | }
16 |
17 | function main() {
18 | // Ctrl+Shift+Enter or Command+Shift+Enter
19 | /*
20 | logseq.App.registerCommandShortcut(
21 | { binding: 'mod+shift+enter' },
22 | () => logseq.showMainUI(),
23 | );
24 | */
25 | // It might be more in line with the Logseq way to register it in the command palette.
26 | // In this case, it's also possible to assign a name to the shortcut."
27 | const command: {
28 | key: string;
29 | keybinding: SimpleCommandKeybinding
30 | label: string;
31 | } = {
32 | key: 'cardbox:open',
33 | keybinding: {
34 | binding: 'mod+shift+enter',
35 | mode: 'global',
36 | },
37 | label: 'Open CardBox',
38 | };
39 | logseq.App.registerCommandPalette(command, openCardBox);
40 |
41 | logseq.provideStyle(`
42 | @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
43 | `)
44 |
45 | logseq.setMainUIInlineStyle({
46 | position: 'fixed',
47 | zIndex: 20,
48 | })
49 |
50 | logseq.App.registerUIItem('pagebar', {
51 | key: 'cardbox',
52 | template: `
53 |
54 |
55 | grid_view
56 |
57 |
58 | `,
59 | });
60 |
61 | const cardboxDiv = document.createElement('div');
62 | cardboxDiv.innerHTML = `
63 |
64 |
67 | CardBox
68 |
69 | `;
70 | cardboxDiv.className = `cardbox-nav`;
71 | cardboxDiv.addEventListener('click', openCardBox);
72 |
73 | const navHeader = window.parent.document.querySelector('.nav-header');
74 | const cardboxNav = navHeader!.querySelector(`.cardbox-nav`);
75 | if (cardboxNav) {
76 | navHeader!.removeChild(cardboxNav);
77 | }
78 | navHeader!.insertBefore(cardboxDiv, navHeader!.lastChild);
79 |
80 | document.body.addEventListener('click', (e) => {
81 | if ((e.target as HTMLElement).classList.length === 0) {
82 | // stopPropagation on