mirror of
https://github.com/sophokles187/data-cards.git
synced 2026-07-22 05:45:15 +00:00
new-docs
This commit is contained in:
Marius
parent
f637762737
commit
ed9136d930
75 changed files with 3854 additions and 1913 deletions
15
docs backup/Gemfile
Normal file
15
docs backup/Gemfile
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
source "https://rubygems.org"
|
||||
|
||||
gem "jekyll", "~> 4.2.0"
|
||||
gem "webrick", "~> 1.7"
|
||||
|
||||
# If you want to use GitHub Pages, uncomment the following line
|
||||
# gem "github-pages", group: :jekyll_plugins
|
||||
|
||||
group :jekyll_plugins do
|
||||
gem "jekyll-seo-tag", "~> 2.7"
|
||||
end
|
||||
|
||||
# Windows and JRuby performance improvements
|
||||
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
|
||||
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||
34
docs backup/README.md
Normal file
34
docs backup/README.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
# DataCards Documentation
|
||||
|
||||
Dies ist die Dokumentation für das DataCards-Plugin für Obsidian, veröffentlicht über GitHub Pages mit Jekyll.
|
||||
|
||||
## Über dieses Repository
|
||||
|
||||
Die Dokumentation verwendet ein angepasstes Jekyll-Setup mit einem modernen, Apple-inspirierten Design. Das Layout ist vollständig responsive und bietet einen Dark Mode.
|
||||
|
||||
## Inhalte bearbeiten
|
||||
|
||||
Die Inhalte sind in Markdown geschrieben und befinden sich in folgenden Verzeichnissen:
|
||||
|
||||
- Hauptseiten (`docs/*.md`)
|
||||
- Funktionen (`docs/features/*.md`)
|
||||
- Beispiele (`docs/examples/*.md`)
|
||||
|
||||
## Lokale Vorschau
|
||||
|
||||
Für eine lokale Vorschau siehe `preview-instructions.md` in diesem Verzeichnis.
|
||||
|
||||
## Dokumentationsstruktur
|
||||
|
||||
- `_includes/` - Wiederverwendbare HTML-Komponenten
|
||||
- `_layouts/` - Seitenlayouts
|
||||
- `assets/` - CSS, JavaScript und Bilder
|
||||
- `features/` - Dokumentation zu den Funktionen
|
||||
- `examples/` - Beispiele für verschiedene Anwendungsfälle
|
||||
|
||||
## Besondere Features dieser Dokumentation
|
||||
|
||||
1. **Modernes Design**: Apple-inspiriertes Layout mit sauberer Typografie
|
||||
2. **Dark Mode**: Automatischer und manueller Dark Mode
|
||||
3. **Responsive**: Optimiert für Desktop und mobile Geräte
|
||||
4. **Komponenten**: Wiederverwendbare Includes für Notizen, Karten und Code-Blöcke
|
||||
37
docs backup/_config.yml
Normal file
37
docs backup/_config.yml
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
# Site settings
|
||||
title: DataCards Documentation
|
||||
description: Official documentation for the DataCards plugin for Obsidian
|
||||
baseurl: "/data-cards" # the subpath of your site, e.g. /blog
|
||||
url: "https://sophokles187.github.io" # the base hostname & protocol for your site
|
||||
|
||||
# Build settings
|
||||
markdown: kramdown
|
||||
highlighter: rouge
|
||||
|
||||
# Exclude from processing
|
||||
exclude:
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- node_modules
|
||||
- preview-instructions.md
|
||||
- README.md
|
||||
|
||||
# Plugins
|
||||
plugins:
|
||||
- jekyll-seo-tag
|
||||
|
||||
# Include these files that are automatically excluded
|
||||
include:
|
||||
- .nojekyll
|
||||
|
||||
# Custom variables
|
||||
version: "1.0"
|
||||
|
||||
# Defaults
|
||||
defaults:
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
type: "pages"
|
||||
values:
|
||||
layout: "page"
|
||||
6
docs backup/_includes/card.html
Normal file
6
docs backup/_includes/card.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="card">
|
||||
{% if include.title %}
|
||||
<h3>{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
{{ include.content | markdownify }}
|
||||
</div>
|
||||
6
docs backup/_includes/code.html
Normal file
6
docs backup/_includes/code.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="code-container">
|
||||
<div class="code-header">
|
||||
<span>{{ include.title | default: "Example" }}</span>
|
||||
</div>
|
||||
<pre><code>{{ include.code }}</code></pre>
|
||||
</div>
|
||||
3
docs backup/_includes/note.html
Normal file
3
docs backup/_includes/note.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<div class="note">
|
||||
{{ include.content | markdownify }}
|
||||
</div>
|
||||
49
docs backup/_layouts/default.html
Normal file
49
docs backup/_layouts/default.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% if page.title %}{{ page.title }} - {% endif %}DataCards Documentation</title>
|
||||
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
|
||||
<link rel="icon" href="{{ '/favicon.ico' | relative_url }}" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Skip to content link for accessibility -->
|
||||
<a href="#main-content" class="skip-to-content">Skip to content</a>
|
||||
|
||||
<!-- Dark mode toggle button -->
|
||||
<button class="theme-toggle" aria-label="Toggle dark mode">
|
||||
<!-- Moon icon for light mode -->
|
||||
<svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
<!-- Sun icon for dark mode (hidden initially) -->
|
||||
<svg class="sun-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Mobile menu toggle -->
|
||||
<button class="mobile-menu-toggle" aria-label="Toggle mobile menu">
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div class="container">
|
||||
{% include sidebar.html %}
|
||||
|
||||
<div id="main-content" class="main-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ '/assets/js/script.js' | relative_url }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
419
docs backup/assets/css/custom.css
Normal file
419
docs backup/assets/css/custom.css
Normal file
|
|
@ -0,0 +1,419 @@
|
|||
/*
|
||||
* DataCards Custom Documentation Styling
|
||||
* Modern, clean, Apple-inspired design
|
||||
*/
|
||||
|
||||
/* Typography */
|
||||
:root {
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--mono-font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", monospace;
|
||||
--body-line-height: 1.6;
|
||||
--content-line-height: 1.8;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--body-font-family);
|
||||
font-weight: 400;
|
||||
line-height: var(--body-line-height);
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: var(--mono-font-family);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.2em 0.4em;
|
||||
background-color: #f5f5f7;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.01em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: #0070c9;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.side-bar {
|
||||
background-color: #f5f5f7;
|
||||
border-right: none;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-list .nav-list-item .nav-list-link {
|
||||
color: #333333;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-list .nav-list-item .nav-list-link:hover,
|
||||
.nav-list .nav-list-item .nav-list-link.active {
|
||||
background-color: rgba(0, 112, 201, 0.08);
|
||||
color: #0070c9;
|
||||
}
|
||||
|
||||
.nav-list .nav-list-item .nav-list-expander {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main-content {
|
||||
padding: 3rem;
|
||||
line-height: var(--content-line-height);
|
||||
}
|
||||
|
||||
.main-content p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
border: none;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f5f5f7;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border: none;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f9f9fb;
|
||||
}
|
||||
|
||||
/* Buttons and labels */
|
||||
.btn {
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0070c9;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.label {
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.highlight {
|
||||
background-color: #f5f5f7;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-left: 4px solid #0070c9;
|
||||
border-radius: 0 8px 8px 0;
|
||||
background-color: #f5f7fa;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.search-input {
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: #fafafa;
|
||||
transition: all 0.2s ease;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #0070c9;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 112, 201, 0.2);
|
||||
}
|
||||
|
||||
/* Box elements */
|
||||
.deprecated, .warning {
|
||||
padding: 12px 16px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.deprecated {
|
||||
background-color: #fff3e0;
|
||||
border-left: 4px solid #ff9800;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #ffebee;
|
||||
border-left: 4px solid #f44336;
|
||||
}
|
||||
|
||||
/* Scroll bar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
/* No-JS fallback */
|
||||
.no-js-message {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-color: #f9f9fb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Tables of contents */
|
||||
.table-of-contents {
|
||||
background-color: #f9f9fb;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.table-of-contents ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table-of-contents code {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background-color: #f9f9fb;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apple-style cards for examples */
|
||||
.example-card {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
margin: 24px 0;
|
||||
padding: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.example-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.example-card h3 {
|
||||
margin-top: 0;
|
||||
color: #0070c9;
|
||||
}
|
||||
|
||||
/* Image styling */
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Dark mode support (if enabled) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--body-background: #1e1e1e;
|
||||
--sidebar-color: #252525;
|
||||
--content-background: #1e1e1e;
|
||||
--link-color: #0a84ff;
|
||||
--text-color: #e0e0e0;
|
||||
--heading-color: #ffffff;
|
||||
--code-background: #2d2d2d;
|
||||
--border-color: #3d3d3d;
|
||||
--search-background: #252525;
|
||||
}
|
||||
|
||||
/* This will only apply if the site has dark mode support enabled */
|
||||
.dark-theme {
|
||||
background-color: var(--body-background);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.dark-theme .side-bar {
|
||||
background-color: var(--sidebar-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dark-theme .main-content-wrap {
|
||||
background-color: var(--content-background);
|
||||
}
|
||||
|
||||
.dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
.dark-theme code {
|
||||
background-color: var(--code-background);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dark-theme a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.dark-theme .example-card {
|
||||
background-color: #252525;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark-theme table th {
|
||||
background-color: #252525;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dark-theme table td {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dark-theme tr:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.dark-theme .search-input {
|
||||
background-color: var(--search-background);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
187
docs backup/examples/books.md
Normal file
187
docs backup/examples/books.md
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
layout: default
|
||||
title: Book Library
|
||||
parent: Examples
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Book Library Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to create a book library display with DataCards.
|
||||
|
||||
## Basic Book Display
|
||||
|
||||
A simple card display for your book collection:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Book Notes
|
||||
|
||||
For this example to work, make sure your book notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: books
|
||||
author: Author Name
|
||||
rating: 4.5
|
||||
genre: Fiction
|
||||
cover: https://example.com/book-cover.jpg
|
||||
---
|
||||
```
|
||||
|
||||
## Advanced Book Library
|
||||
|
||||
More detailed version with additional properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE
|
||||
file.link as "Title",
|
||||
author,
|
||||
rating,
|
||||
genre,
|
||||
"![]("+cover+")" as Cover,
|
||||
status,
|
||||
dateRead
|
||||
FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
properties: [file.link, author, rating, genre, status, dateRead]
|
||||
```
|
||||
```
|
||||
|
||||
## Filter by Genre
|
||||
|
||||
Display only books from a specific genre:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating, genre, cover FROM #books
|
||||
WHERE contains(genre, "Fantasy")
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
## Currently Reading Shelf
|
||||
|
||||
Display books you're currently reading:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating, genre, cover, progress FROM #books
|
||||
WHERE status = "Reading"
|
||||
SORT file.ctime DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
|
||||
## Tag-Based Organization
|
||||
|
||||
If you use sub-tags for organizing books:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating, cover FROM #books/fiction
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
## Compact Book List
|
||||
|
||||
A more compact display for many books:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, genre, rating, cover FROM #books
|
||||
SORT file.ctime DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
## Integration with DataviewJS (Advanced)
|
||||
|
||||
Combine statistics with your book display:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all books
|
||||
const books = dv.pages("#books")
|
||||
.sort(b => b.rating, 'desc');
|
||||
|
||||
// Display some stats
|
||||
const totalBooks = books.length;
|
||||
const avgRating = books.map(b => b.rating).reduce((sum, val) => sum + val, 0) / totalBooks;
|
||||
const genres = {};
|
||||
|
||||
books.forEach(book => {
|
||||
if (book.genre) {
|
||||
const genreName = Array.isArray(book.genre) ? book.genre[0] : book.genre;
|
||||
genres[genreName] = (genres[genreName] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`📚 **Total Books**: ${totalBooks}`);
|
||||
dv.paragraph(`⭐ **Average Rating**: ${avgRating.toFixed(1)}`);
|
||||
dv.paragraph(`🏆 **Top Genres**:`);
|
||||
Object.entries(genres)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 3)
|
||||
.forEach(([genre, count]) => {
|
||||
dv.paragraph(`- ${genre}: ${count} books`);
|
||||
});
|
||||
|
||||
// Generate a DataCards block for the top-rated books
|
||||
dv.paragraph("### Top-Rated Books\n");
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Title", author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
LIMIT 6
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
columns: 3
|
||||
imageProperty: cover
|
||||
properties: [file.link, author, rating, genre]
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
238
docs backup/examples/movies.md
Normal file
238
docs backup/examples/movies.md
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
---
|
||||
layout: default
|
||||
title: Movie Collection
|
||||
parent: Examples
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Movie Collection Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to create a movie collection display with DataCards.
|
||||
|
||||
## Basic Movie Collection
|
||||
|
||||
A simple card display for your movie collection:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Movie Notes
|
||||
|
||||
For this example to work, make sure your movie notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: movies
|
||||
director: Christopher Nolan
|
||||
releaseYear: 2010
|
||||
rating: 9.2
|
||||
genre: Sci-Fi
|
||||
poster: https://example.com/movie-poster.jpg
|
||||
---
|
||||
```
|
||||
|
||||
## Advanced Movie Collection
|
||||
|
||||
More detailed version with additional properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE
|
||||
file.link as "Title",
|
||||
director,
|
||||
starring,
|
||||
releaseYear,
|
||||
rating,
|
||||
genre,
|
||||
watchDate,
|
||||
poster
|
||||
FROM #movies
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: poster
|
||||
properties: [file.link, director, starring, releaseYear, rating, genre, watchDate]
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Filter by Genre
|
||||
|
||||
Display only movies from a specific genre:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, poster FROM #movies
|
||||
WHERE contains(genre, "Sci-Fi")
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
## Recently Added Movies
|
||||
|
||||
Display movies you recently added to your collection:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
SORT file.ctime DESC
|
||||
LIMIT 6
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Movies by Director
|
||||
|
||||
Filter movies by a specific director:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", releaseYear, rating, genre, poster FROM #movies
|
||||
WHERE director = "Christopher Nolan"
|
||||
SORT releaseYear DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
## Watchlist
|
||||
|
||||
Display movies you want to watch:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, genre, poster FROM #movies
|
||||
WHERE status = "To Watch"
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
## Movie Ratings Dashboard
|
||||
|
||||
Group movies by rating:
|
||||
|
||||
```markdown
|
||||
# Movie Ratings
|
||||
|
||||
## ⭐⭐⭐⭐⭐ (9-10)
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, poster FROM #movies
|
||||
WHERE rating >= 9
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
## ⭐⭐⭐⭐ (7-8.9)
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, poster FROM #movies
|
||||
WHERE rating >= 7 AND rating < 9
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
## ⭐⭐⭐ (5-6.9)
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, poster FROM #movies
|
||||
WHERE rating >= 5 AND rating < 7
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Integration with DataviewJS (Advanced)
|
||||
|
||||
Combine statistics with your movie collection:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all movies
|
||||
const movies = dv.pages("#movies")
|
||||
.sort(m => m.rating, 'desc');
|
||||
|
||||
// Display some stats
|
||||
const totalMovies = movies.length;
|
||||
const avgRating = movies.map(m => m.rating).reduce((sum, val) => sum + val, 0) / totalMovies;
|
||||
const genres = {};
|
||||
|
||||
movies.forEach(movie => {
|
||||
if (movie.genre) {
|
||||
const genreList = Array.isArray(movie.genre) ? movie.genre : [movie.genre];
|
||||
genreList.forEach(g => {
|
||||
genres[g] = (genres[g] || 0) + 1;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`🎬 **Total Movies**: ${totalMovies}`);
|
||||
dv.paragraph(`⭐ **Average Rating**: ${avgRating.toFixed(1)}`);
|
||||
|
||||
// Top genres
|
||||
dv.paragraph("### Top Genres");
|
||||
Object.entries(genres)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 5)
|
||||
.forEach(([genre, count]) => {
|
||||
dv.paragraph(`- ${genre}: ${count} movies`);
|
||||
});
|
||||
|
||||
// Generate DataCards block for top-rated movies
|
||||
dv.paragraph("### Top-Rated Movies\n");
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
SORT rating DESC
|
||||
LIMIT 6
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
columns: 3
|
||||
imageProperty: poster
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
187
docs backup/examples/photos.md
Normal file
187
docs backup/examples/photos.md
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
---
|
||||
layout: default
|
||||
title: Photo Gallery
|
||||
parent: Examples
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Photo Gallery Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to create a photo gallery with DataCards.
|
||||
|
||||
## Basic Photo Gallery
|
||||
|
||||
Create a simple photo gallery using the square preset:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Photo Notes
|
||||
|
||||
For this example to work, make sure your photo notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: photos
|
||||
location: Paris, France
|
||||
date: 2023-06-15
|
||||
image: [[photos/paris_eiffel.jpg]]
|
||||
---
|
||||
```
|
||||
|
||||
## Advanced Photo Gallery
|
||||
|
||||
A more detailed photo gallery with additional metadata:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE
|
||||
file.link as "Title",
|
||||
photographer,
|
||||
camera,
|
||||
location,
|
||||
date,
|
||||
tags,
|
||||
image
|
||||
FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Filtered by Location
|
||||
|
||||
Show photos from a specific location:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", photographer, date, image FROM #photos
|
||||
WHERE contains(location, "Paris")
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Recent Photos
|
||||
|
||||
Display only the most recent photos:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
LIMIT 12
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Alternative Layout: Compact
|
||||
|
||||
Show photos with more visible metadata using the compact layout:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", photographer, location, date, camera, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Photos by Tag
|
||||
|
||||
If you use sub-tags for organizing photos:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos/landscape
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Photos by Year
|
||||
|
||||
Group photos by year:
|
||||
|
||||
```markdown
|
||||
# Photo Archive
|
||||
|
||||
## 2023
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, image FROM #photos
|
||||
WHERE date.year = 2023
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
|
||||
## 2022
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, image FROM #photos
|
||||
WHERE date.year = 2022
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Lazy Loading for Large Collections
|
||||
|
||||
Enable lazy loading for better performance with many photos:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
enableLazyLoading: true
|
||||
```
|
||||
```
|
||||
193
docs backup/examples/tasks.md
Normal file
193
docs backup/examples/tasks.md
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
---
|
||||
layout: default
|
||||
title: Task Management
|
||||
parent: Examples
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Task Management Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to use DataCards for task and project management.
|
||||
|
||||
## Task Dashboard
|
||||
|
||||
Create a visual task dashboard:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate, assigned FROM #tasks
|
||||
WHERE status != "completed"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
columns: 4
|
||||
properties: [file.link, priority, status, dueDate, assigned]
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Task Notes
|
||||
|
||||
For this example to work, make sure your task notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: tasks
|
||||
priority: High
|
||||
status: In Progress
|
||||
dueDate: 2023-09-30
|
||||
assigned: John Doe
|
||||
---
|
||||
```
|
||||
|
||||
## Task Kanban Board
|
||||
|
||||
Group tasks by status to create a Kanban-like view:
|
||||
|
||||
```markdown
|
||||
# Task Board
|
||||
|
||||
## To Do
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, dueDate FROM #tasks
|
||||
WHERE status = "To Do"
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
|
||||
## In Progress
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, dueDate FROM #tasks
|
||||
WHERE status = "In Progress"
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
|
||||
## Done
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, dueDate FROM #tasks
|
||||
WHERE status = "Done"
|
||||
SORT dueDate DESC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Project Overview
|
||||
|
||||
Show tasks organized by project:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate FROM #projects
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
properties: [file.link, priority, status, dueDate]
|
||||
dynamicUpdate: true
|
||||
```
|
||||
```
|
||||
|
||||
## Task Priority Matrix
|
||||
|
||||
Organize tasks by priority:
|
||||
|
||||
```markdown
|
||||
# Task Priority Matrix
|
||||
|
||||
## High Priority
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, dueDate FROM #tasks
|
||||
WHERE priority = "High"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Medium Priority
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, dueDate FROM #tasks
|
||||
WHERE priority = "Medium"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Low Priority
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, dueDate FROM #tasks
|
||||
WHERE priority = "Low"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Tasks with Dynamic Updates
|
||||
|
||||
If you're using Meta Bind or other property editing plugins:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate FROM #tasks
|
||||
WHERE status != "completed"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
dynamicUpdate: true
|
||||
refreshDelay: 1000
|
||||
```
|
||||
```
|
||||
|
||||
This will automatically update the cards when you change task properties.
|
||||
|
||||
## Tasks with Boolean Properties
|
||||
|
||||
If you track task completion with boolean properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", completed, priority, dueDate FROM #tasks
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
booleanDisplayMode: checkbox
|
||||
booleanTrueText: "Done"
|
||||
booleanFalseText: "Pending"
|
||||
```
|
||||
```
|
||||
|
|
@ -1,10 +1,19 @@
|
|||
---
|
||||
title: FAQ
|
||||
icon: fas fa-question-circle
|
||||
order: 5
|
||||
layout: default
|
||||
title: FAQ & Troubleshooting
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# FAQ & Troubleshooting
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
|
|
@ -91,3 +100,21 @@ There's an issue with your Dataview query. Check the syntax and make sure it's v
|
|||
|
||||
#### "No notes found"
|
||||
Your query didn't match any notes. Check your query and make sure your notes have the right tags or properties.
|
||||
|
||||
### Advanced Troubleshooting
|
||||
|
||||
#### Enable Debug Mode
|
||||
If you're experiencing issues, enable debug mode in the plugin settings to get more detailed information:
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Debug Mode" under Developer Settings
|
||||
4. Open the developer console (Help → Developer → Toggle Developer Tools)
|
||||
5. Look for messages starting with "[DataCards]"
|
||||
|
||||
#### Reset Settings
|
||||
If you're having persistent issues, try resetting to default settings:
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Click the reset button on each setting
|
||||
141
docs backup/features/advanced-options.md
Normal file
141
docs backup/features/advanced-options.md
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
---
|
||||
layout: default
|
||||
title: Advanced Options
|
||||
parent: Features
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# Advanced Options
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards offers several advanced options for further customization and optimization.
|
||||
|
||||
## Performance Settings
|
||||
|
||||
### Lazy Loading
|
||||
|
||||
Enable lazy loading to improve performance with many images:
|
||||
|
||||
```
|
||||
enableLazyLoading: true
|
||||
```
|
||||
|
||||
When enabled:
|
||||
- Images only load when they become visible in the viewport
|
||||
- Reduces initial load time and saves bandwidth
|
||||
- Shows a placeholder until the image is loaded
|
||||
- Provides a smooth fade-in animation when images appear
|
||||
|
||||
## Card Appearance
|
||||
|
||||
### Card Spacing
|
||||
|
||||
Control the space between cards:
|
||||
|
||||
```
|
||||
cardSpacing: 16
|
||||
```
|
||||
|
||||
Value is in pixels, with a range of 0-32.
|
||||
|
||||
### Card Shadows
|
||||
|
||||
Enable or disable subtle shadows on cards:
|
||||
|
||||
```
|
||||
enableShadows: false
|
||||
```
|
||||
|
||||
### Clickable Cards
|
||||
|
||||
Make the entire card clickable to open the note:
|
||||
|
||||
```
|
||||
enableClickableCards: true
|
||||
```
|
||||
|
||||
When enabled, clicking anywhere on the card will open the note, not just the title.
|
||||
|
||||
## Creating Custom Card Types (Advanced)
|
||||
|
||||
You can create custom card types by combining settings. For example, to create a "magazine" style:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, excerpt, author, cover FROM #articles
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageHeight: 250px
|
||||
fontSize: large
|
||||
propertiesAlign: left
|
||||
scrollableProperties: true
|
||||
contentHeight: 300px
|
||||
```
|
||||
|
||||
|
||||
## Using with DataviewJS (Experimental)
|
||||
|
||||
While DataCards is designed for standard Dataview queries, not DataviewJS, you can use them together with this approach:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Create a datacards block as a string
|
||||
dv.paragraph("```datacards\nTABLE file.link as \"Title\", author, genre, cover FROM #book\nSORT file.ctime DESC\n\n// Settings\npreset: grid\ncolumns: 3\nimageProperty: cover\n```");
|
||||
```
|
||||
|
||||
|
||||
This uses DataviewJS to generate a DataCards block in the output.
|
||||
|
||||
### Advanced DataviewJS Integration Example
|
||||
|
||||
For more complex integration, you can combine statistics with visual displays:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all books
|
||||
const books = dv.pages("#book")
|
||||
.sort(b => b.publication, 'desc');
|
||||
|
||||
// Display some stats
|
||||
const totalBooks = books.length;
|
||||
const uniqueAuthors = new Set(books.map(b => b.author)).size;
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`📚 **Total Books**: ${totalBooks}`);
|
||||
dv.paragraph(`👥 **Unique Authors**: ${uniqueAuthors}`);
|
||||
|
||||
// Generate a DataCards block for the most recent books
|
||||
dv.paragraph("### Recent Books\n");
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Title", author, publication, genre, cover FROM #book
|
||||
SORT publication DESC
|
||||
LIMIT 6
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
columns: 3
|
||||
imageProperty: cover
|
||||
properties: [file.link, author, publication, genre]
|
||||
\`\`\``);
|
||||
```
|
||||
|
||||
|
||||
## Debug Mode
|
||||
|
||||
If you encounter issues, you can enable debug mode in the plugin settings to help troubleshoot:
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Debug Mode" under Developer Settings
|
||||
|
||||
This will output detailed logging information to the developer console (Help → Developer → Toggle Developer Tools).
|
||||
99
docs backup/features/dynamic-updates.md
Normal file
99
docs backup/features/dynamic-updates.md
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
layout: default
|
||||
title: Dynamic Updates
|
||||
parent: Features
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Dynamic Updates
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards can automatically update when properties of displayed notes change. This is particularly useful when using plugins like Meta Bind that allow editing properties directly in the preview mode.
|
||||
|
||||
## Enabling Dynamic Updates
|
||||
|
||||
Dynamic updates can be enabled globally in the plugin settings or per card:
|
||||
|
||||
### Global Setting
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Enable Dynamic Updates"
|
||||
|
||||
### Per-Card Setting
|
||||
|
||||
Individual cards can override the global setting:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, status, priority FROM #tasks
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
dynamicUpdate: true
|
||||
```
|
||||
```
|
||||
|
||||
## How It Works
|
||||
|
||||
When dynamic updates are enabled:
|
||||
|
||||
1. DataCards monitors for property changes in your notes
|
||||
2. When a change is detected, the cards will automatically refresh
|
||||
3. This happens with a slight delay to avoid refreshing while you're still typing
|
||||
|
||||
## Refresh Delay
|
||||
|
||||
You can adjust how long DataCards waits before refreshing after a property change:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, status, priority FROM #tasks
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
dynamicUpdate: true
|
||||
refreshDelay: 1000 // 1 second (in milliseconds)
|
||||
```
|
||||
```
|
||||
|
||||
The default delay is 2500ms (2.5 seconds).
|
||||
|
||||
## Integration with Meta Bind
|
||||
|
||||
DataCards works well with the [Meta Bind](https://github.com/mProjectsCode/obsidian-meta-bind-plugin) plugin, which allows editing frontmatter properties directly in preview mode.
|
||||
|
||||
When using both plugins together:
|
||||
|
||||
1. Enable dynamic updates in DataCards
|
||||
2. Edit properties using Meta Bind inputs
|
||||
3. DataCards will automatically refresh to show the updated values
|
||||
|
||||
**Note for Meta Bind users**: When editing properties with Meta Bind while dynamic updates are enabled, you may experience the input field losing focus if you pause typing for more than the refresh delay. This is due to how the plugins interact and is a known limitation.
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
Dynamic updates can impact performance, especially with large collections or frequent updates. If you notice performance issues:
|
||||
|
||||
1. Increase the refresh delay
|
||||
2. Disable dynamic updates globally and only enable it for specific cards
|
||||
3. Consider using the manual refresh command instead
|
||||
|
||||
## Manual Refresh
|
||||
|
||||
You can manually refresh DataCards at any time using the command:
|
||||
|
||||
1. Open the Command Palette (Ctrl/Cmd + P)
|
||||
2. Search for "DataCards: Refresh DataCards in active view"
|
||||
3. Execute the command
|
||||
|
||||
This is useful when you need immediate updates without waiting for the automatic refresh.
|
||||
131
docs backup/features/images.md
Normal file
131
docs backup/features/images.md
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
layout: default
|
||||
title: Image Support
|
||||
parent: Features
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Image Support
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards can display images from your notes' frontmatter. This guide explains how to use images with DataCards.
|
||||
|
||||
## Specifying Image Properties
|
||||
|
||||
To display images, you need to:
|
||||
|
||||
1. Have an image property in your notes' frontmatter
|
||||
2. Include that property in your Dataview query
|
||||
3. Specify the image property in your DataCards settings
|
||||
|
||||
### Example
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
## Supported Image Formats
|
||||
|
||||
DataCards supports several ways to specify images:
|
||||
|
||||
### 1. External URLs
|
||||
|
||||
Use a full URL in your frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: https://example.com/image.jpg
|
||||
---
|
||||
```
|
||||
|
||||
### 2. Vault Images (Path)
|
||||
|
||||
For images in your vault, use a relative path:
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: path/to/image.jpg
|
||||
---
|
||||
```
|
||||
|
||||
### 3. Vault Images (Wiki Link)
|
||||
|
||||
Use Obsidian's wiki link format:
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: "[[path/to/image.jpg]]"
|
||||
---
|
||||
```
|
||||
|
||||
## Image Settings
|
||||
|
||||
You can customize how images are displayed with these settings:
|
||||
|
||||
### Image Property
|
||||
|
||||
Specify which frontmatter property contains the image:
|
||||
|
||||
```
|
||||
imageProperty: cover
|
||||
```
|
||||
|
||||
### Image Height
|
||||
|
||||
Set a custom height for images (default is preset-specific):
|
||||
|
||||
```
|
||||
imageHeight: 300px
|
||||
```
|
||||
|
||||
### Image Fit
|
||||
|
||||
Control how images fit within their container:
|
||||
|
||||
- `cover`: Fill the container (may crop)
|
||||
- `contain`: Show the entire image (may leave space)
|
||||
|
||||
```
|
||||
imageFit: contain
|
||||
```
|
||||
|
||||
## Lazy Loading
|
||||
|
||||
For large collections with many images, you can enable lazy loading:
|
||||
|
||||
```
|
||||
enableLazyLoading: true
|
||||
```
|
||||
|
||||
This only loads images when they become visible, improving performance.
|
||||
|
||||
## Mobile Image Settings
|
||||
|
||||
Set different image heights for mobile devices:
|
||||
|
||||
```
|
||||
mobileImageHeight: 150px
|
||||
```
|
||||
|
||||
## Troubleshooting Images
|
||||
|
||||
If images aren't displaying correctly:
|
||||
|
||||
- Verify the image path is correct
|
||||
- Check that you included the image property in your Dataview query
|
||||
- For external images, ensure the URL is accessible
|
||||
- Try using a different image format (URL vs. path vs. wiki link)
|
||||
130
docs backup/features/mobile.md
Normal file
130
docs backup/features/mobile.md
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
layout: default
|
||||
title: Mobile Support
|
||||
parent: Features
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Mobile Support
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards provides specific settings to optimize the display on mobile devices. When viewed on a mobile device, DataCards automatically applies mobile-specific settings.
|
||||
|
||||
## Default Mobile Behavior
|
||||
|
||||
By default, when viewed on mobile:
|
||||
|
||||
- Cards switch to a single column
|
||||
- Properties become scrollable to save vertical space
|
||||
- Image heights are reduced
|
||||
|
||||
## Mobile-Specific Settings
|
||||
|
||||
You can customize the mobile experience with these settings:
|
||||
|
||||
### Mobile Columns
|
||||
|
||||
Set the number of columns to use on mobile devices:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
mobileColumns: 2
|
||||
```
|
||||
```
|
||||
|
||||
The default is 1, and you can set it between 1-3.
|
||||
|
||||
### Mobile Preset
|
||||
|
||||
Use a different preset specifically for mobile viewing:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
mobilePreset: grid
|
||||
```
|
||||
```
|
||||
|
||||
This allows you to have different layouts on desktop and mobile.
|
||||
|
||||
### Mobile Image Height
|
||||
|
||||
Adjust image height for better mobile display:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
|
||||
// Settings
|
||||
imageHeight: 300px
|
||||
mobileImageHeight: 150px
|
||||
```
|
||||
```
|
||||
|
||||
### Mobile Scrollable Properties
|
||||
|
||||
Control whether properties are scrollable on mobile:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
mobileScrollableProperties: true
|
||||
mobileContentHeight: 150px
|
||||
```
|
||||
```
|
||||
|
||||
## Testing Mobile View
|
||||
|
||||
You can force mobile mode for testing purposes using the plugin settings:
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Force Mobile Mode"
|
||||
|
||||
This allows you to test mobile layouts on desktop.
|
||||
|
||||
## Responsive Design
|
||||
|
||||
DataCards is designed to be responsive and will automatically adjust to different screen sizes. The mobile settings give you additional control over this behavior.
|
||||
|
||||
## Example: Mobile-Optimized Configuration
|
||||
|
||||
Here's an example of a configuration optimized for both desktop and mobile:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
columns: 3
|
||||
imageHeight: 350px
|
||||
scrollableProperties: false
|
||||
|
||||
// Mobile settings
|
||||
mobilePreset: grid
|
||||
mobileColumns: 1
|
||||
mobileImageHeight: 120px
|
||||
mobileScrollableProperties: true
|
||||
mobileContentHeight: 150px
|
||||
```
|
||||
```
|
||||
|
||||
This configuration will display a portrait layout with 3 columns on desktop, and a more compact grid layout with 1 column on mobile.
|
||||
129
docs backup/features/presets.md
Normal file
129
docs backup/features/presets.md
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
---
|
||||
layout: page
|
||||
title: Card Presets
|
||||
---
|
||||
|
||||
DataCards offers several presets to display your data in different layouts. Each preset is optimized for specific use cases and has its own default settings.
|
||||
|
||||
## Available Presets
|
||||
|
||||
### Grid Preset
|
||||
|
||||
The default preset with a balanced layout for most use cases.
|
||||
|
||||
```
|
||||
preset: grid
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 3
|
||||
- Image fit: cover
|
||||
- Standard card sizing
|
||||
- Ideal for general collections
|
||||
|
||||
|
||||
|
||||
### Portrait Preset
|
||||
|
||||
Optimized for book covers and portrait images.
|
||||
|
||||
```
|
||||
preset: portrait
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 3
|
||||
- Image fit: contain (shows full image without cropping)
|
||||
- Taller image area
|
||||
- Ideal for books, movies, and other media with cover art
|
||||
|
||||
|
||||
|
||||
### Square Preset
|
||||
|
||||
Perfect for photo collections with a focus on images.
|
||||
|
||||
```
|
||||
preset: square
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 4
|
||||
- Image fit: cover
|
||||
- 1:1 aspect ratio cards
|
||||
- Shows title at the bottom and reveals all properties on hover
|
||||
- Ideal for photo collections and visual-first content
|
||||
|
||||
|
||||
|
||||
### Compact Preset
|
||||
|
||||
Side-by-side image and content layout.
|
||||
|
||||
```
|
||||
preset: compact
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 4
|
||||
- Image fit: cover
|
||||
- Image on the left, scrollable content on the right
|
||||
- Ideal when you need to see image and details at a glance
|
||||
|
||||
|
||||
|
||||
### Dense Preset
|
||||
|
||||
Maximum information density with minimal spacing.
|
||||
|
||||
```
|
||||
preset: dense
|
||||
```
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 6
|
||||
- Image fit: cover
|
||||
- Smaller text and reduced spacing
|
||||
- Ideal for dashboards and when you need to see many items at once
|
||||
|
||||
|
||||
|
||||
## Setting a Preset
|
||||
|
||||
You can set a preset in your code block:
|
||||
|
||||
{% include code.html title="Setting a Preset" code="```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
```" %}
|
||||
|
||||
## Overriding Columns
|
||||
|
||||
Each preset has a default number of columns, but you can override this:
|
||||
|
||||
{% include code.html title="Overriding Columns" code="```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 4 // Override the default 6 columns for dense preset
|
||||
```" %}
|
||||
|
||||
## Mixing Preset Features
|
||||
|
||||
You can mix features from different presets using other settings. For example, use the portrait preset with small text:
|
||||
|
||||
{% include code.html title="Mixing Features" code="```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
fontSize: small
|
||||
```" %}
|
||||
|
||||
{% include note.html content="The preset setting must be specified first, as it sets the base defaults for all other display options." %}
|
||||
191
docs backup/features/properties.md
Normal file
191
docs backup/features/properties.md
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
---
|
||||
layout: default
|
||||
title: Property Customization
|
||||
parent: Features
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Property Customization
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards allows you to customize which properties are displayed and how they appear on your cards.
|
||||
|
||||
## Property Selection
|
||||
|
||||
### Including Properties
|
||||
|
||||
You must explicitly include all properties you want to display in your Dataview query:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
```
|
||||
```
|
||||
|
||||
### Filtering Properties
|
||||
|
||||
You can filter which properties appear using the `properties` setting:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
|
||||
// Settings
|
||||
properties: [title, author, rating]
|
||||
```
|
||||
```
|
||||
|
||||
This will only show title, author, and rating on the cards, even though genre is in the query.
|
||||
|
||||
### Excluding Specific Properties
|
||||
|
||||
You can also exclude specific properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
|
||||
// Settings
|
||||
exclude: [genre]
|
||||
```
|
||||
```
|
||||
|
||||
### Showing All Properties
|
||||
|
||||
To show all properties from your query:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
|
||||
// Settings
|
||||
properties: all
|
||||
```
|
||||
```
|
||||
|
||||
## Property Display
|
||||
|
||||
### Labels
|
||||
|
||||
Control whether property labels (names) are displayed:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
showLabels: false
|
||||
```
|
||||
```
|
||||
|
||||
### Text Alignment
|
||||
|
||||
Set the alignment for properties and their labels:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
propertiesAlign: center
|
||||
```
|
||||
```
|
||||
|
||||
Options: `left`, `center`, `right`
|
||||
|
||||
### Title Alignment
|
||||
|
||||
Set the alignment for just the title (file property):
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
titleAlign: center
|
||||
```
|
||||
```
|
||||
|
||||
Options: `left`, `center`, `right`
|
||||
|
||||
## Scrollable Properties
|
||||
|
||||
For cards with many properties, you can enable scrolling:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, published, summary, notes FROM #books
|
||||
|
||||
// Settings
|
||||
scrollableProperties: true
|
||||
contentHeight: 250px
|
||||
```
|
||||
```
|
||||
|
||||
The `contentHeight` setting determines the height of the scrollable area.
|
||||
|
||||
## Font Size
|
||||
|
||||
Adjust the text size for all card elements:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
fontSize: small
|
||||
```
|
||||
```
|
||||
|
||||
Available options:
|
||||
- `larger` (120% of default)
|
||||
- `large` (110% of default)
|
||||
- `default`
|
||||
- `small` (90% of default)
|
||||
- `smaller` (80% of default)
|
||||
|
||||
## Date Formatting
|
||||
|
||||
DataCards automatically detects and formats date properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, published FROM #books
|
||||
|
||||
// Settings
|
||||
defaultDateFormat: DD.MM.YYYY
|
||||
```
|
||||
```
|
||||
|
||||
## Boolean Values
|
||||
|
||||
Control how boolean properties are displayed:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE task, completed FROM #tasks
|
||||
|
||||
// Settings
|
||||
booleanDisplayMode: checkbox
|
||||
```
|
||||
```
|
||||
|
||||
Options:
|
||||
- `both` (checkbox and text)
|
||||
- `checkbox` (checkbox only)
|
||||
- `text` (text only)
|
||||
|
||||
You can also customize the text shown for true/false values:
|
||||
|
||||
```markdown
|
||||
booleanTrueText: "Yes"
|
||||
booleanFalseText: "No"
|
||||
```
|
||||
76
docs backup/getting-started.md
Normal file
76
docs backup/getting-started.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
layout: default
|
||||
title: Getting Started
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Getting Started with DataCards
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
### Requirements
|
||||
|
||||
- [Obsidian](https://obsidian.md/) v0.15.0+
|
||||
- [Dataview Plugin](https://github.com/blacksmithgu/obsidian-dataview)
|
||||
|
||||
### Installation Methods
|
||||
|
||||
#### Method 1: Community Plugins
|
||||
> **Note**: DataCards is not yet available in the Community Plugins store. Please use BRAT or manual installation until then.
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to Community Plugins
|
||||
3. Click "Browse" and search for "Data Cards"
|
||||
4. Click "Install", then "Enable"
|
||||
|
||||
#### Method 2: BRAT Plugin
|
||||
1. Install the [BRAT plugin](https://github.com/TfTHacker/obsidian42-brat) through Community Plugins
|
||||
2. Open BRAT settings in Obsidian
|
||||
3. Click "Add Beta Plugin"
|
||||
4. Enter the DataCards repository URL: `https://github.com/Sophokles187/data-cards`
|
||||
5. Click "Add Plugin"
|
||||
6. Enable DataCards in Community Plugins settings
|
||||
|
||||
#### Method 3: Manual Installation
|
||||
1. Download the latest release from the [releases page](https://github.com/Sophokles187/data-cards/releases)
|
||||
2. Download these files:
|
||||
- `main.js`
|
||||
- `manifest.json`
|
||||
- `style.css`
|
||||
3. Navigate to your Obsidian vault's `.obsidian/plugins/` directory
|
||||
4. Create a new folder named `data-cards`
|
||||
5. Copy the downloaded files into the `data-cards` folder
|
||||
6. Enable the plugin in Obsidian's Community Plugins settings
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Create a `datacards` code block with a Dataview query:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE author, rating, genre FROM #books
|
||||
SORT rating DESC
|
||||
```
|
||||
```
|
||||
|
||||
This will automatically render the results as cards using the default settings.
|
||||
|
||||
## Your First DataCards Block
|
||||
|
||||
1. Make sure both Dataview and DataCards plugins are enabled
|
||||
2. Create a new note or open an existing one
|
||||
3. Start a new code block with three backticks followed by `datacards`
|
||||
4. Write a Dataview query
|
||||
5. End the code block with three backticks
|
||||
6. Preview your note to see the cards
|
||||
|
||||
That's it! Your Dataview results will now display as beautiful cards.
|
||||
81
docs backup/index.md
Normal file
81
docs backup/index.md
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
layout: default
|
||||
title: Home
|
||||
---
|
||||
|
||||
# DataCards for Obsidian
|
||||
|
||||
Transform Dataview query results into visually appealing, customizable card layouts.
|
||||
|
||||
<a href="{{ '/getting-started' | relative_url }}" class="button">Get Started</a>
|
||||
|
||||
## Overview
|
||||
|
||||
DataCards is a plugin for [Obsidian](https://obsidian.md) that transforms [Dataview](https://github.com/blacksmithgu/obsidian-dataview) query results into beautiful card layouts. Whether you're organizing books, movies, projects, or any other collection of notes, DataCards helps you visualize your data in an elegant and customizable way.
|
||||
|
||||
{% include card.html title="Quick Start" content="
|
||||
1. Install the plugin
|
||||
2. Create a code block with the `datacards` language
|
||||
3. Write a Dataview query
|
||||
4. Add your preferred settings
|
||||
" %}
|
||||
|
||||
{% include code.html title="Example Query" code="```datacards
|
||||
TABLE author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```" %}
|
||||
|
||||
## Features
|
||||
|
||||
DataCards offers a range of features to help you visualize your data:
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Feature</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Flexible Presets</td>
|
||||
<td>Multiple card layouts optimized for different content types</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Image Support</td>
|
||||
<td>Display images from frontmatter properties</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Property Customization</td>
|
||||
<td>Control which properties appear and how they're displayed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mobile Optimization</td>
|
||||
<td>Responsive design with mobile-specific settings</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% include note.html content="**Note:** DataCards requires the Dataview plugin to be installed and enabled." %}
|
||||
|
||||
## Presets
|
||||
|
||||
Choose from multiple presets to display your data:
|
||||
|
||||
### Grid Preset <span class="badge">Default</span>
|
||||
|
||||
Balanced layout for most use cases with 3 columns by default.
|
||||
|
||||
### Portrait Preset
|
||||
|
||||
Optimized for book covers and portrait images. Features taller cards with "contain" fit to show full images without cropping.
|
||||
|
||||
### Square Preset
|
||||
|
||||
Perfect for photo collections and visual content. Features 1:1 square cards with images as the focus.
|
||||
|
|
@ -1,10 +1,19 @@
|
|||
---
|
||||
layout: default
|
||||
title: Installation
|
||||
icon: fas fa-download
|
||||
order: 4
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Installation
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
|
|
@ -50,26 +59,33 @@ The [BRAT (Beta Reviewers Auto-update Tester)](https://github.com/TfTHacker/obsi
|
|||
5. Copy the downloaded files into the `data-cards` folder
|
||||
6. Enable the plugin in Obsidian's Community Plugins settings
|
||||
|
||||
## Getting Started
|
||||
## Verifying Installation
|
||||
|
||||
Create a `datacards` code block with a Dataview query:
|
||||
To verify that DataCards is properly installed:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE author, rating, genre FROM #books
|
||||
SORT rating DESC
|
||||
```
|
||||
```
|
||||
1. Open Obsidian's Settings
|
||||
2. Navigate to "Community plugins"
|
||||
3. Check that "DataCards" appears in your list of installed plugins and is enabled
|
||||
|
||||
This will automatically render the results as cards using the default settings.
|
||||
## Updating DataCards
|
||||
|
||||
## Your First DataCards Block
|
||||
### Community Plugins & BRAT
|
||||
|
||||
1. Make sure both Dataview and DataCards plugins are enabled
|
||||
2. Create a new note or open an existing one
|
||||
3. Start a new code block with three backticks followed by `datacards`
|
||||
4. Write a Dataview query
|
||||
5. End the code block with three backticks
|
||||
6. Preview your note to see the cards
|
||||
If you installed DataCards through the Community Plugins browser or BRAT, updates will be automatically available through Obsidian's plugin updater.
|
||||
|
||||
That's it! Your Dataview results will now display as beautiful cards.
|
||||
### Manual Updates
|
||||
|
||||
If you installed manually, you'll need to:
|
||||
|
||||
1. Download the latest release files
|
||||
2. Replace the files in your `.obsidian/plugins/data-cards/` folder
|
||||
3. Restart Obsidian if necessary
|
||||
|
||||
## Troubleshooting Installation
|
||||
|
||||
If you encounter problems during installation:
|
||||
|
||||
- Make sure Obsidian is updated to the latest version
|
||||
- Verify that the Dataview plugin is installed and enabled
|
||||
- Try restarting Obsidian after installation
|
||||
- Check the console for any error messages (Help → Developer → Toggle Developer Tools)
|
||||
81
docs backup/preview-instructions.md
Normal file
81
docs backup/preview-instructions.md
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
# Lokale Vorschau der Dokumentation
|
||||
|
||||
Um die Dokumentation lokal anzuzeigen und zu testen, folge diesen Schritten:
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
- Ruby installieren (falls noch nicht geschehen)
|
||||
- Windows: [RubyInstaller](https://rubyinstaller.org/)
|
||||
- macOS: `brew install ruby` (mit Homebrew)
|
||||
- Linux: `sudo apt install ruby-full` (Ubuntu/Debian)
|
||||
|
||||
## Lokalen Server starten
|
||||
|
||||
1. Öffne ein Terminal/Kommandozeile
|
||||
2. Navigiere in das `docs`-Verzeichnis:
|
||||
```
|
||||
cd /pfad/zu/data-cards/docs
|
||||
```
|
||||
3. Installiere die benötigten Gems beim ersten Mal:
|
||||
```
|
||||
bundle install
|
||||
```
|
||||
4. Starte den Jekyll-Server:
|
||||
```
|
||||
bundle exec jekyll serve
|
||||
```
|
||||
5. Öffne im Browser: http://localhost:4000
|
||||
|
||||
## Inhalte bearbeiten
|
||||
|
||||
- Alle Inhalte sind in Markdown (`.md`-Dateien) geschrieben
|
||||
- Die Hauptseiten befinden sich im Hauptverzeichnis (`docs/`)
|
||||
- Funktionen sind im `features/` Verzeichnis
|
||||
- Beispiele sind im `examples/` Verzeichnis
|
||||
|
||||
## Markdown mit HTML kombinieren
|
||||
|
||||
Du kannst speziell formatierte Elemente mit Includes einfügen:
|
||||
|
||||
### Notiz einfügen
|
||||
|
||||
```markdown
|
||||
{% include note.html content="Dies ist eine Notiz mit **Markdown** Unterstützung." %}
|
||||
```
|
||||
|
||||
### Karte einfügen
|
||||
|
||||
```markdown
|
||||
{% include card.html title="Kartenüberschrift" content="
|
||||
- Liste mit Punkten
|
||||
- Zweiter Punkt
|
||||
- Dritter Punkt
|
||||
" %}
|
||||
```
|
||||
|
||||
### Code-Block mit Überschrift
|
||||
|
||||
```markdown
|
||||
{% include code.html title="Beispiel" code="```datacards
|
||||
TABLE title, author FROM #books
|
||||
```" %}
|
||||
```
|
||||
|
||||
## Seite erstellen
|
||||
|
||||
1. Erstelle eine neue Markdown-Datei (z.B. `neue-seite.md`)
|
||||
2. Füge YAML-Frontmatter hinzu:
|
||||
```
|
||||
---
|
||||
layout: page
|
||||
title: Meine neue Seite
|
||||
---
|
||||
```
|
||||
3. Schreibe den Inhalt in Markdown
|
||||
4. Speichere die Datei und der Server aktualisiert die Seite automatisch
|
||||
|
||||
## Nach GitHub deployen
|
||||
|
||||
1. Pushe die Änderungen in dein GitHub-Repository
|
||||
2. GitHub Pages wird automatisch die Seite bauen und deployen
|
||||
3. Die Dokumentation ist dann unter `https://username.github.io/data-cards/` verfügbar
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
source "https://rubygems.org"
|
||||
|
||||
gem "github-pages", group: :jekyll_plugins
|
||||
gem "jekyll-remote-theme"
|
||||
gem "webrick", "~> 1.8"
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
# Site settings
|
||||
title: DataCards Documentation
|
||||
description: Official documentation for the DataCards plugin for Obsidian
|
||||
baseurl: "/data-cards"
|
||||
url: "https://sophokles187.github.io"
|
||||
|
||||
# Repository information
|
||||
repository: Sophokles187/data-cards
|
||||
|
||||
# Build settings
|
||||
remote_theme: pages-themes/cayman@v0.2.0
|
||||
plugins:
|
||||
- jekyll-remote-theme
|
||||
- jekyll-seo-tag
|
||||
|
||||
# Author information
|
||||
author:
|
||||
name: Sophokles187
|
||||
url: https://github.com/Sophokles187
|
||||
|
||||
# Page defaults
|
||||
defaults:
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
values:
|
||||
layout: default
|
||||
17
docs/_coverpage.md
Normal file
17
docs/_coverpage.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!-- _coverpage.md -->
|
||||
|
||||
|
||||
|
||||
# DataCards <small>for Obsidian</small>
|
||||
|
||||
> Transform Dataview query results into visually appealing, customizable card layouts.
|
||||
|
||||
- Multiple card layouts and presets
|
||||
- Image support and property customization
|
||||
- Mobile optimization and dynamic updates
|
||||
|
||||
[GitHub](https://github.com/yourusername/data-cards)
|
||||
[Get Started](getting-started.md)
|
||||
|
||||
<!-- background color -->
|
||||
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<div class="card" style="background-color: #f6f8fa; border: 1px solid #ddd; border-radius: 5px; padding: 1rem; margin: 1rem 0;">
|
||||
{% if include.title %}
|
||||
<h3 style="margin-top: 0;">{{ include.title }}</h3>
|
||||
{% endif %}
|
||||
{{ include.content | markdownify }}
|
||||
</div>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<div class="code-container" style="margin: 1.5rem 0;">
|
||||
<div class="code-header" style="background-color: #f6f8fa; padding: 0.5rem 1rem; border: 1px solid #ddd; border-bottom: none; border-radius: 3px 3px 0 0;">
|
||||
<span>{{ include.title | default: "Example" }}</span>
|
||||
</div>
|
||||
<pre><code>{{ include.code }}</code></pre>
|
||||
</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="note" style="background-color: #f0f7ff; border-left: 4px solid #0366d6; padding: 0.8rem 1rem; margin: 1rem 0; border-radius: 0 3px 3px 0;">
|
||||
{{ include.content | markdownify }}
|
||||
</div>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ site.lang | default: "en-US" }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{% seo %}
|
||||
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
||||
{% if site.github.is_project_page %}
|
||||
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
|
||||
{% endif %}
|
||||
<style>
|
||||
.container-lg {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.main-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
max-height: calc(100vh - 4rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar h3 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.sidebar ul {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.nav-item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-lg px-3 my-5 markdown-body">
|
||||
<header class="page-header">
|
||||
<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: "DataCards Documentation" }}</a></h1>
|
||||
<p>{{ site.description | default: "Documentation for the DataCards Obsidian plugin" }}</p>
|
||||
</header>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="sidebar">
|
||||
<h3>Navigation</h3>
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item"><a href="{{ '/' | relative_url }}">Home</a></li>
|
||||
<li class="nav-item"><a href="{{ '/getting-started' | relative_url }}">Getting Started</a></li>
|
||||
<li class="nav-item"><a href="{{ '/installation' | relative_url }}">Installation</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Features</h3>
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item"><a href="{{ '/features' | relative_url }}">Features Overview</a></li>
|
||||
<li class="nav-item"><a href="{{ '/features/presets' | relative_url }}">Card Presets</a></li>
|
||||
<li class="nav-item"><a href="{{ '/features/images' | relative_url }}">Image Support</a></li>
|
||||
<li class="nav-item"><a href="{{ '/features/properties' | relative_url }}">Property Customization</a></li>
|
||||
<li class="nav-item"><a href="{{ '/features/mobile' | relative_url }}">Mobile Support</a></li>
|
||||
<li class="nav-item"><a href="{{ '/features/dynamic-updates' | relative_url }}">Dynamic Updates</a></li>
|
||||
<li class="nav-item"><a href="{{ '/features/advanced-options' | relative_url }}">Advanced Options</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Examples</h3>
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item"><a href="{{ '/examples' | relative_url }}">Examples Index</a></li>
|
||||
<li class="nav-item"><a href="{{ '/examples/books' | relative_url }}">Book Library</a></li>
|
||||
<li class="nav-item"><a href="{{ '/examples/tasks' | relative_url }}">Task Management</a></li>
|
||||
<li class="nav-item"><a href="{{ '/examples/photos' | relative_url }}">Photo Gallery</a></li>
|
||||
<li class="nav-item"><a href="{{ '/examples/movies' | relative_url }}">Movie Collection</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Support</h3>
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item"><a href="{{ '/faq' | relative_url }}">FAQ & Troubleshooting</a></li>
|
||||
<li class="nav-item"><a href="https://github.com/Sophokles187/data-cards" target="_blank">GitHub Repository</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p>© {{ site.time | date: '%Y' }} Sophokles187</p>
|
||||
<p>Powered by <a href="https://pages.github.com">GitHub Pages</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
18
docs/_sidebar.md
Normal file
18
docs/_sidebar.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!-- docs/_sidebar.md -->
|
||||
|
||||
* [Home](/)
|
||||
* [Getting Started](getting-started.md)
|
||||
* [Installation](installation.md)
|
||||
* [Features](features/)
|
||||
* [Card Presets](features/presets.md)
|
||||
* [Property Customization](features/properties.md)
|
||||
* [Image Support](features/images.md)
|
||||
* [Mobile Support](features/mobile.md)
|
||||
* [Dynamic Updates](features/dynamic-updates.md)
|
||||
* [Advanced Options](features/advanced-options.md)
|
||||
* [Examples](examples/)
|
||||
* [Book Library](examples/books.md)
|
||||
* [Movie Collection](examples/movies.md)
|
||||
* [Photo Gallery](examples/photos.md)
|
||||
* [Task Management](examples/tasks.md)
|
||||
* [FAQ & Troubleshooting](faq.md)
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
---
|
||||
title: About
|
||||
icon: fas fa-info-circle
|
||||
order: 6
|
||||
---
|
||||
|
||||
# About DataCards
|
||||
|
||||
DataCards is a plugin for [Obsidian](https://obsidian.md) that transforms [Dataview](https://github.com/blacksmithgu/obsidian-dataview) query results into beautiful card layouts. Whether you're organizing books, movies, projects, or any other collection of notes, DataCards helps you visualize your data in an elegant and customizable way.
|
||||
|
||||
## Project Information
|
||||
|
||||
- **Author**: Sophokles187
|
||||
- **Version**: 1.0.0
|
||||
- **License**: GNU General Public License v3.0 (GPL-3.0)
|
||||
- **Repository**: [GitHub](https://github.com/Sophokles187/data-cards)
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- [Dataview Plugin](https://github.com/blacksmithgu/obsidian-dataview) (MIT License) - This plugin uses the Dataview API
|
||||
|
||||
## Support and Contribution
|
||||
|
||||
If you find a bug or want to request a feature, please create an issue on the [GitHub repository](https://github.com/Sophokles187/data-cards/issues).
|
||||
|
||||
If you'd like to contribute to the project, pull requests are welcome!
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
---
|
||||
title: Examples
|
||||
icon: fas fa-list
|
||||
order: 3
|
||||
---
|
||||
|
||||
# Examples
|
||||
|
||||
This section provides practical examples of DataCards in action. Each example includes a complete code block that you can copy and adapt for your own use.
|
||||
|
||||
## Book Library Example
|
||||
|
||||
A simple card display for your book collection:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
### Properties to Include in Your Book Notes
|
||||
|
||||
For this example to work, make sure your book notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: books
|
||||
author: Author Name
|
||||
rating: 4.5
|
||||
genre: Fiction
|
||||
cover: https://example.com/book-cover.jpg
|
||||
---
|
||||
```
|
||||
|
||||
## Task Management Example
|
||||
|
||||
Create a visual task dashboard:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate, assigned FROM #tasks
|
||||
WHERE status != "completed"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
columns: 4
|
||||
properties: [file.link, priority, status, dueDate, assigned]
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
### Properties to Include in Your Task Notes
|
||||
|
||||
For this example to work, make sure your task notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: tasks
|
||||
priority: High
|
||||
status: In Progress
|
||||
dueDate: 2023-09-30
|
||||
assigned: John Doe
|
||||
---
|
||||
```
|
||||
|
||||
## Photo Gallery Example
|
||||
|
||||
Create a simple photo gallery using the square preset:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
|
||||
### Properties to Include in Your Photo Notes
|
||||
|
||||
For this example to work, make sure your photo notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: photos
|
||||
location: Paris, France
|
||||
date: 2023-06-15
|
||||
image: [[photos/paris_eiffel.jpg]]
|
||||
---
|
||||
```
|
||||
|
||||
## Movie Collection Example
|
||||
|
||||
A simple card display for your movie collection:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
### Properties to Include in Your Movie Notes
|
||||
|
||||
For this example to work, make sure your movie notes have:
|
||||
|
||||
```yaml
|
||||
---
|
||||
tags: movies
|
||||
director: Christopher Nolan
|
||||
releaseYear: 2010
|
||||
rating: 9.2
|
||||
genre: Sci-Fi
|
||||
poster: https://example.com/movie-poster.jpg
|
||||
---
|
||||
```
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
---
|
||||
title: Features
|
||||
icon: fas fa-info-circle
|
||||
order: 2
|
||||
---
|
||||
|
||||
# Features Overview
|
||||
|
||||
DataCards offers a wide range of features to display your Dataview query results as beautiful cards. This section provides detailed information about all the features and how to use them.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Presets**: Choose from multiple card layouts optimized for different content types
|
||||
- **Image Support**: Display images from frontmatter properties
|
||||
- **Property Customization**: Control which properties appear and how they're displayed
|
||||
- **Mobile Optimization**: Responsive design with mobile-specific settings
|
||||
- **Flexible Styling**: Customize appearance with various settings
|
||||
- **Dynamic Updates**: Automatically update cards when properties change
|
||||
- **Performance Options**: Lazy loading for better performance with large collections
|
||||
|
||||
## Card Presets
|
||||
|
||||
DataCards offers several presets to display your data in different layouts. Each preset is optimized for specific use cases and has its own default settings.
|
||||
|
||||
### Grid Preset
|
||||
|
||||
The default preset with a balanced layout for most use cases.
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 3
|
||||
- Image fit: cover
|
||||
- Standard card sizing
|
||||
- Ideal for general collections
|
||||
|
||||
### Portrait Preset
|
||||
|
||||
Optimized for book covers and portrait images.
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 3
|
||||
- Image fit: contain (shows full image without cropping)
|
||||
- Taller image area
|
||||
- Ideal for books, movies, and other media with cover art
|
||||
|
||||
### Square Preset
|
||||
|
||||
Perfect for photo collections with a focus on images.
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 4
|
||||
- Image fit: cover
|
||||
- 1:1 aspect ratio cards
|
||||
- Shows title at the bottom and reveals all properties on hover
|
||||
- Ideal for photo collections and visual-first content
|
||||
|
||||
### Compact Preset
|
||||
|
||||
Side-by-side image and content layout.
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 4
|
||||
- Image fit: cover
|
||||
- Image on the left, scrollable content on the right
|
||||
- Ideal when you need to see image and details at a glance
|
||||
|
||||
### Dense Preset
|
||||
|
||||
Maximum information density with minimal spacing.
|
||||
|
||||
**Characteristics:**
|
||||
- Default columns: 6
|
||||
- Image fit: cover
|
||||
- Smaller text and reduced spacing
|
||||
- Ideal for dashboards and when you need to see many items at once
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
layout: home
|
||||
title: Home
|
||||
icon: fas fa-home
|
||||
order: 1
|
||||
---
|
||||
|
|
@ -1,419 +1,47 @@
|
|||
/*
|
||||
* DataCards Custom Documentation Styling
|
||||
* Modern, clean, Apple-inspired design
|
||||
*/
|
||||
/* Custom styles for DataCards documentation */
|
||||
|
||||
/* Typography */
|
||||
:root {
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
--mono-font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", monospace;
|
||||
--body-line-height: 1.6;
|
||||
--content-line-height: 1.8;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--body-font-family);
|
||||
font-weight: 400;
|
||||
line-height: var(--body-line-height);
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: var(--mono-font-family);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.2em 0.4em;
|
||||
background-color: #f5f5f7;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.01em;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: #0070c9;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.side-bar {
|
||||
background-color: #f5f5f7;
|
||||
border-right: none;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.nav-list .nav-list-item .nav-list-link {
|
||||
color: #333333;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-list .nav-list-item .nav-list-link:hover,
|
||||
.nav-list .nav-list-item .nav-list-link.active {
|
||||
background-color: rgba(0, 112, 201, 0.08);
|
||||
color: #0070c9;
|
||||
}
|
||||
|
||||
.nav-list .nav-list-item .nav-list-expander {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main-content {
|
||||
padding: 3rem;
|
||||
line-height: var(--content-line-height);
|
||||
}
|
||||
|
||||
.main-content p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.main-content-wrap {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
border: none;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f5f5f7;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
border: none;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f9f9fb;
|
||||
}
|
||||
|
||||
/* Buttons and labels */
|
||||
.btn {
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0070c9;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.label {
|
||||
border-radius: 4px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.highlight {
|
||||
background-color: #f5f5f7;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre.highlight {
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-left: 4px solid #0070c9;
|
||||
border-radius: 0 8px 8px 0;
|
||||
background-color: #f5f7fa;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.search-input {
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: #fafafa;
|
||||
transition: all 0.2s ease;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #0070c9;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 112, 201, 0.2);
|
||||
}
|
||||
|
||||
/* Box elements */
|
||||
.deprecated, .warning {
|
||||
padding: 12px 16px;
|
||||
margin: 20px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.deprecated {
|
||||
background-color: #fff3e0;
|
||||
border-left: 4px solid #ff9800;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: #ffebee;
|
||||
border-left: 4px solid #f44336;
|
||||
}
|
||||
|
||||
/* Scroll bar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
/* No-JS fallback */
|
||||
.no-js-message {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background-color: #f9f9fb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Tables of contents */
|
||||
.table-of-contents {
|
||||
background-color: #f9f9fb;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.table-of-contents ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table-of-contents code {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background-color: #f9f9fb;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apple-style cards for examples */
|
||||
.example-card {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
margin: 24px 0;
|
||||
padding: 24px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.example-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.example-card h3 {
|
||||
margin-top: 0;
|
||||
color: #0070c9;
|
||||
--theme-color: #3F51B5;
|
||||
--sidebar-width: 300px;
|
||||
}
|
||||
|
||||
/* Image styling */
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 1.5rem 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
.markdown-section img {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Dark mode support (if enabled) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--body-background: #1e1e1e;
|
||||
--sidebar-color: #252525;
|
||||
--content-background: #1e1e1e;
|
||||
--link-color: #0a84ff;
|
||||
--text-color: #e0e0e0;
|
||||
--heading-color: #ffffff;
|
||||
--code-background: #2d2d2d;
|
||||
--border-color: #3d3d3d;
|
||||
--search-background: #252525;
|
||||
}
|
||||
|
||||
/* This will only apply if the site has dark mode support enabled */
|
||||
.dark-theme {
|
||||
background-color: var(--body-background);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.dark-theme .side-bar {
|
||||
background-color: var(--sidebar-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dark-theme .main-content-wrap {
|
||||
background-color: var(--content-background);
|
||||
}
|
||||
|
||||
.dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
.dark-theme code {
|
||||
background-color: var(--code-background);
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dark-theme a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.dark-theme .example-card {
|
||||
background-color: #252525;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.dark-theme table th {
|
||||
background-color: #252525;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dark-theme table td {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dark-theme tr:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.dark-theme .search-input {
|
||||
background-color: var(--search-background);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
/* Note boxes */
|
||||
.note {
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
border-left: 4px solid var(--theme-color);
|
||||
background-color: rgba(63, 81, 181, 0.1);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* Card component */
|
||||
.card {
|
||||
padding: 1.5em;
|
||||
margin: 1em 0;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-top: 0;
|
||||
color: var(--theme-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Code block titles */
|
||||
.code-block-title {
|
||||
font-family: var(--code-font-family);
|
||||
font-size: 0.85em;
|
||||
padding: 0.5em 1em;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: -0.5em;
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
@import "{{ site.theme }}";
|
||||
|
||||
/* Custom styles */
|
||||
.markdown-body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #159957;
|
||||
background-image: linear-gradient(120deg, #155799, #159957);
|
||||
padding: 3rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main-content h1,
|
||||
.main-content h2,
|
||||
.main-content h3,
|
||||
.main-content h4,
|
||||
.main-content h5,
|
||||
.main-content h6 {
|
||||
color: #159957;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
border: 1px solid #dfe2e5;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #dfe2e5;
|
||||
color: #6a737d;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #dfe2e5;
|
||||
}
|
||||
BIN
docs/assets/images/header-image.png
Normal file
BIN
docs/assets/images/header-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
BIN
docs/assets/images/screenshot-1.png
Normal file
BIN
docs/assets/images/screenshot-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 MiB |
BIN
docs/assets/images/screenshot-2.png
Normal file
BIN
docs/assets/images/screenshot-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 MiB |
BIN
docs/assets/images/screenshot-3.png
Normal file
BIN
docs/assets/images/screenshot-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
docs/assets/images/screenshot-4.png
Normal file
BIN
docs/assets/images/screenshot-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
docs/assets/images/screenshot-5.png
Normal file
BIN
docs/assets/images/screenshot-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
BIN
docs/assets/images/screenshot-6.png
Normal file
BIN
docs/assets/images/screenshot-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
BIN
docs/assets/images/screenshot-7.png
Normal file
BIN
docs/assets/images/screenshot-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
docs/assets/images/screenshot-8.png
Normal file
BIN
docs/assets/images/screenshot-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
docs/assets/images/screenshot-9.png
Normal file
BIN
docs/assets/images/screenshot-9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 654 KiB |
27
docs/assets/js/custom.js
Normal file
27
docs/assets/js/custom.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// Custom JavaScript for DataCards documentation
|
||||
|
||||
// Add dark mode toggle functionality if needed
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// You can add custom JavaScript functionality here
|
||||
console.log('DataCards documentation loaded');
|
||||
});
|
||||
|
||||
// Add copy button to code blocks that don't have them
|
||||
(function() {
|
||||
// This will be executed after Docsify renders the page
|
||||
const addCopyButtons = () => {
|
||||
const codeBlocks = document.querySelectorAll('pre[data-lang]:not(.has-copy-button)');
|
||||
codeBlocks.forEach(block => {
|
||||
block.classList.add('has-copy-button');
|
||||
// The actual copy button will be added by the docsify-copy-code plugin
|
||||
});
|
||||
};
|
||||
|
||||
// Hook into Docsify's lifecycle events
|
||||
window.$docsify = window.$docsify || {};
|
||||
const originalDom = window.$docsify.plugins || [];
|
||||
|
||||
window.$docsify.plugins = originalDom.concat(function(hook, vm) {
|
||||
hook.doneEach(addCopyButtons);
|
||||
});
|
||||
})();
|
||||
28
docs/examples/README.md
Normal file
28
docs/examples/README.md
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
# Examples
|
||||
|
||||
This section provides practical examples of how to use DataCards in different scenarios. Each example includes sample code and explanations to help you understand how to implement similar solutions for your own use cases.
|
||||
|
||||
## Available Examples
|
||||
|
||||
- **Book Library**: Organize your book collection with cover images and ratings
|
||||
- **Movie Collection**: Track movies you've watched with posters and metadata
|
||||
- **Photo Gallery**: Create a visual gallery of your photos with captions
|
||||
- **Task Management**: Visualize your tasks and projects with status indicators
|
||||
|
||||
Select an example from the sidebar to see the detailed implementation.
|
||||
|
||||
## General Structure
|
||||
|
||||
Each example follows this general structure:
|
||||
|
||||
```datacards
|
||||
TABLE property1, property2, imageProperty FROM #tag
|
||||
SORT property DESC
|
||||
|
||||
// Settings
|
||||
preset: presetName
|
||||
imageProperty: imageProperty
|
||||
// Additional settings...
|
||||
```
|
||||
|
||||
Feel free to adapt these examples to your specific needs by changing the properties, filters, and settings.
|
||||
|
|
@ -1,23 +1,18 @@
|
|||
---
|
||||
layout: default
|
||||
title: Book Library
|
||||
parent: Examples
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Book Library Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to create a book library display with DataCards.
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Basic Book Display](#basic-book-display)
|
||||
- [Properties to Include in Your Book Notes](#properties-to-include-in-your-book-notes)
|
||||
- [Advanced Book Library](#advanced-book-library)
|
||||
- [Filter by Genre](#filter-by-genre)
|
||||
- [Currently Reading Shelf](#currently-reading-shelf)
|
||||
- [Tag-Based Organization](#tag-based-organization)
|
||||
- [Compact Book List](#compact-book-list)
|
||||
- [Integration with DataviewJS (Advanced)](#integration-with-dataviewjs-advanced)
|
||||
|
||||
## Basic Book Display
|
||||
|
||||
A simple card display for your book collection:
|
||||
|
|
@ -33,7 +28,7 @@ imageProperty: cover
|
|||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Book Notes
|
||||
|
||||
|
|
@ -183,5 +178,4 @@ columns: 3
|
|||
imageProperty: cover
|
||||
properties: [file.link, author, rating, genre]
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
```
|
||||
|
|
@ -1,20 +1,4 @@
|
|||
---
|
||||
layout: default
|
||||
title: Movie Collection
|
||||
parent: Examples
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Movie Collection Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to create a movie collection display with DataCards.
|
||||
|
||||
|
|
@ -24,7 +8,7 @@ A simple card display for your movie collection:
|
|||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
TABLE file.link as "Title", director, rating, genre, poster FROM #movies
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
|
|
@ -33,7 +17,7 @@ imageProperty: poster
|
|||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Movie Notes
|
||||
|
||||
|
|
@ -42,10 +26,9 @@ For this example to work, make sure your movie notes have:
|
|||
```yaml
|
||||
---
|
||||
tags: movies
|
||||
director: Christopher Nolan
|
||||
releaseYear: 2010
|
||||
rating: 9.2
|
||||
genre: Sci-Fi
|
||||
director: Director Name
|
||||
rating: 4.5
|
||||
genre: Action
|
||||
poster: https://example.com/movie-poster.jpg
|
||||
---
|
||||
```
|
||||
|
|
@ -59,20 +42,20 @@ More detailed version with additional properties:
|
|||
TABLE
|
||||
file.link as "Title",
|
||||
director,
|
||||
starring,
|
||||
releaseYear,
|
||||
year,
|
||||
rating,
|
||||
genre,
|
||||
watchDate,
|
||||
poster
|
||||
"![]("+poster+")" as Poster,
|
||||
watched,
|
||||
watchDate
|
||||
FROM #movies
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
properties: [file.link, director, starring, releaseYear, rating, genre, watchDate]
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
properties: [file.link, director, year, rating, genre, watched, watchDate]
|
||||
```
|
||||
```
|
||||
|
||||
|
|
@ -82,7 +65,7 @@ Display only movies from a specific genre:
|
|||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, poster FROM #movies
|
||||
TABLE file.link as "Title", director, rating, genre, poster FROM #movies
|
||||
WHERE contains(genre, "Sci-Fi")
|
||||
SORT rating DESC
|
||||
|
||||
|
|
@ -92,36 +75,21 @@ imageProperty: poster
|
|||
```
|
||||
```
|
||||
|
||||
## Recently Added Movies
|
||||
## Recently Watched
|
||||
|
||||
Display movies you recently added to your collection:
|
||||
Display movies you've watched recently:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
SORT file.ctime DESC
|
||||
LIMIT 6
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Movies by Director
|
||||
|
||||
Filter movies by a specific director:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", releaseYear, rating, genre, poster FROM #movies
|
||||
WHERE director = "Christopher Nolan"
|
||||
SORT releaseYear DESC
|
||||
TABLE file.link as "Title", director, rating, genre, poster, watchDate FROM #movies
|
||||
WHERE watched = true
|
||||
SORT watchDate DESC
|
||||
LIMIT 10
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
|
||||
|
|
@ -131,9 +99,9 @@ Display movies you want to watch:
|
|||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, genre, poster FROM #movies
|
||||
WHERE status = "To Watch"
|
||||
SORT priority DESC
|
||||
TABLE file.link as "Title", director, genre, poster FROM #movies
|
||||
WHERE watched = false
|
||||
SORT file.ctime DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
|
|
@ -141,18 +109,14 @@ imageProperty: poster
|
|||
```
|
||||
```
|
||||
|
||||
## Movie Ratings Dashboard
|
||||
## Compact Movie List
|
||||
|
||||
Group movies by rating:
|
||||
A more compact display for many movies:
|
||||
|
||||
```markdown
|
||||
# Movie Ratings
|
||||
|
||||
## ⭐⭐⭐⭐⭐ (9-10)
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, poster FROM #movies
|
||||
WHERE rating >= 9
|
||||
SORT rating DESC
|
||||
TABLE file.link as "Title", director, year, genre, rating, poster FROM #movies
|
||||
SORT year DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
|
|
@ -160,34 +124,9 @@ imageProperty: poster
|
|||
```
|
||||
```
|
||||
|
||||
## ⭐⭐⭐⭐ (7-8.9)
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, poster FROM #movies
|
||||
WHERE rating >= 7 AND rating < 9
|
||||
SORT rating DESC
|
||||
## Movie Statistics Dashboard
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
|
||||
## ⭐⭐⭐ (5-6.9)
|
||||
```datacards
|
||||
TABLE file.link as "Title", director, releaseYear, poster FROM #movies
|
||||
WHERE rating >= 5 AND rating < 7
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: poster
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Integration with DataviewJS (Advanced)
|
||||
|
||||
Combine statistics with your movie collection:
|
||||
Combine statistics with your movie display:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
|
|
@ -202,30 +141,26 @@ const genres = {};
|
|||
|
||||
movies.forEach(movie => {
|
||||
if (movie.genre) {
|
||||
const genreList = Array.isArray(movie.genre) ? movie.genre : [movie.genre];
|
||||
genreList.forEach(g => {
|
||||
genres[g] = (genres[g] || 0) + 1;
|
||||
});
|
||||
const genreName = Array.isArray(movie.genre) ? movie.genre[0] : movie.genre;
|
||||
genres[genreName] = (genres[genreName] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`🎬 **Total Movies**: ${totalMovies}`);
|
||||
dv.paragraph(`⭐ **Average Rating**: ${avgRating.toFixed(1)}`);
|
||||
|
||||
// Top genres
|
||||
dv.paragraph("### Top Genres");
|
||||
dv.paragraph(`🏆 **Top Genres**:`);
|
||||
Object.entries(genres)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 5)
|
||||
.slice(0, 3)
|
||||
.forEach(([genre, count]) => {
|
||||
dv.paragraph(`- ${genre}: ${count} movies`);
|
||||
});
|
||||
|
||||
// Generate DataCards block for top-rated movies
|
||||
// Generate a DataCards block for the top-rated movies
|
||||
dv.paragraph("### Top-Rated Movies\n");
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Title", director, releaseYear, rating, genre, poster FROM #movies
|
||||
TABLE file.link as "Title", director, rating, genre, poster FROM #movies
|
||||
SORT rating DESC
|
||||
LIMIT 6
|
||||
|
||||
|
|
@ -233,6 +168,21 @@ LIMIT 6
|
|||
preset: portrait
|
||||
columns: 3
|
||||
imageProperty: poster
|
||||
properties: [file.link, director, rating, genre]
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
|
||||
## Directors Showcase
|
||||
|
||||
Group movies by director:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", year, rating, poster FROM #movies AND [[Christopher Nolan]]
|
||||
SORT year DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: poster
|
||||
```
|
||||
|
|
@ -1,39 +1,24 @@
|
|||
---
|
||||
layout: default
|
||||
title: Photo Gallery
|
||||
parent: Examples
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Photo Gallery Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
This example shows how to create a photo gallery with DataCards.
|
||||
|
||||
## Basic Photo Gallery
|
||||
|
||||
Create a simple photo gallery using the square preset:
|
||||
A simple gallery display for your photos:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
TABLE file.link as "Photo", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
columns: 4
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Photo Notes
|
||||
|
||||
|
|
@ -42,146 +27,180 @@ For this example to work, make sure your photo notes have:
|
|||
```yaml
|
||||
---
|
||||
tags: photos
|
||||
location: Paris, France
|
||||
location: "Paris, France"
|
||||
date: 2023-06-15
|
||||
image: [[photos/paris_eiffel.jpg]]
|
||||
image: "attachments/paris-photo.jpg"
|
||||
---
|
||||
```
|
||||
|
||||
## Advanced Photo Gallery
|
||||
|
||||
A more detailed photo gallery with additional metadata:
|
||||
More detailed version with additional properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE
|
||||
file.link as "Title",
|
||||
photographer,
|
||||
camera,
|
||||
location,
|
||||
date,
|
||||
tags,
|
||||
image
|
||||
date,
|
||||
camera,
|
||||
"![]("+image+")" as Photo
|
||||
FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
columns: 4
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Filtered by Location
|
||||
## Filter by Location
|
||||
|
||||
Show photos from a specific location:
|
||||
Display photos from a specific location:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", photographer, date, image FROM #photos
|
||||
WHERE contains(location, "Paris")
|
||||
TABLE file.link as "Photo", date, image FROM #photos
|
||||
WHERE contains(location, "Italy")
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
columns: 4
|
||||
```
|
||||
```
|
||||
|
||||
## Recent Photos
|
||||
|
||||
Display only the most recent photos:
|
||||
Display your most recent photos:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
TABLE file.link as "Photo", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
LIMIT 12
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Alternative Layout: Compact
|
||||
|
||||
Show photos with more visible metadata using the compact layout:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", photographer, location, date, camera, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
```
|
||||
```
|
||||
|
||||
## Photos by Tag
|
||||
## Photo Albums
|
||||
|
||||
If you use sub-tags for organizing photos:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos/landscape
|
||||
TABLE file.link as "Photo", location, date, image FROM #photos/vacation
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
columns: 4
|
||||
```
|
||||
```
|
||||
|
||||
## Photos by Year
|
||||
## Compact Photo List
|
||||
|
||||
Group photos by year:
|
||||
|
||||
```markdown
|
||||
# Photo Archive
|
||||
|
||||
## 2023
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, image FROM #photos
|
||||
WHERE date.year = 2023
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
|
||||
## 2022
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, image FROM #photos
|
||||
WHERE date.year = 2022
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Lazy Loading for Large Collections
|
||||
|
||||
Enable lazy loading for better performance with many photos:
|
||||
A more detailed display with photo information:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", location, date, image FROM #photos
|
||||
TABLE file.link as "Photo", location, date, camera, settings, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageProperty: image
|
||||
```
|
||||
```
|
||||
|
||||
## Photo Map Integration
|
||||
|
||||
Combine a map with your photo gallery (requires DataviewJS and a map plugin):
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all photos
|
||||
const photos = dv.pages("#photos")
|
||||
.sort(p => p.date, 'desc');
|
||||
|
||||
// Display a map of photo locations (example - implementation depends on your map plugin)
|
||||
const mapPlugin = app.plugins.plugins['obsidian-leaflet-plugin'];
|
||||
if (mapPlugin) {
|
||||
// Create a map with markers for each photo location
|
||||
// This is a simplified example - actual implementation will vary
|
||||
dv.paragraph("### Photo Locations\n");
|
||||
dv.paragraph(`\`\`\`leaflet
|
||||
id: photo-locations
|
||||
height: 300px
|
||||
${photos.filter(p => p.coordinates).map(p =>
|
||||
`marker: ${p.coordinates.lat}, ${p.coordinates.lng}, ${p.file.link}`
|
||||
).join('\n')}
|
||||
\`\`\``);
|
||||
}
|
||||
|
||||
// Generate a DataCards block for the photos
|
||||
dv.paragraph("### Photo Gallery\n");
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Photo", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
LIMIT 12
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
enableLazyLoading: true
|
||||
columns: 4
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
|
||||
## Photo Statistics
|
||||
|
||||
Display statistics about your photo collection:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all photos
|
||||
const photos = dv.pages("#photos");
|
||||
|
||||
// Group by location
|
||||
const locations = {};
|
||||
photos.forEach(photo => {
|
||||
if (photo.location) {
|
||||
locations[photo.location] = (locations[photo.location] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Group by year
|
||||
const years = {};
|
||||
photos.forEach(photo => {
|
||||
if (photo.date) {
|
||||
const year = new Date(photo.date).getFullYear();
|
||||
years[year] = (years[year] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`📸 **Total Photos**: ${photos.length}`);
|
||||
dv.paragraph(`🌍 **Top Locations**:`);
|
||||
Object.entries(locations)
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 5)
|
||||
.forEach(([location, count]) => {
|
||||
dv.paragraph(`- ${location}: ${count} photos`);
|
||||
});
|
||||
|
||||
dv.paragraph(`📅 **Photos by Year**:`);
|
||||
Object.entries(years)
|
||||
.sort((a, b) => b[0] - a[0])
|
||||
.forEach(([year, count]) => {
|
||||
dv.paragraph(`- ${year}: ${count} photos`);
|
||||
});
|
||||
```
|
||||
|
|
@ -1,42 +1,29 @@
|
|||
---
|
||||
layout: default
|
||||
title: Task Management
|
||||
parent: Examples
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Task Management Example
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
This example shows how to create a task management dashboard with DataCards.
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
## Basic Task Board
|
||||
|
||||
---
|
||||
|
||||
This example shows how to use DataCards for task and project management.
|
||||
|
||||
## Task Dashboard
|
||||
|
||||
Create a visual task dashboard:
|
||||
A simple kanban-style board for your tasks:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate, assigned FROM #tasks
|
||||
WHERE status != "completed"
|
||||
TABLE file.link as "Task", status, priority, dueDate FROM #tasks
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
columns: 4
|
||||
properties: [file.link, priority, status, dueDate, assigned]
|
||||
defaultDateFormat: YYYY-MM-DD
|
||||
conditionalFormatting: {
|
||||
"status": [
|
||||
{ "condition": "= 'Completed'", "color": "#4CAF50" },
|
||||
{ "condition": "= 'In Progress'", "color": "#FFC107" },
|
||||
{ "condition": "= 'Not Started'", "color": "#F44336" }
|
||||
]
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Properties to Include in Your Task Notes
|
||||
|
||||
|
|
@ -45,149 +32,210 @@ For this example to work, make sure your task notes have:
|
|||
```yaml
|
||||
---
|
||||
tags: tasks
|
||||
priority: High
|
||||
status: In Progress
|
||||
dueDate: 2023-09-30
|
||||
assigned: John Doe
|
||||
priority: High
|
||||
dueDate: 2023-07-15
|
||||
assignee: John Doe
|
||||
---
|
||||
```
|
||||
|
||||
## Task Kanban Board
|
||||
## Advanced Task Board
|
||||
|
||||
Group tasks by status to create a Kanban-like view:
|
||||
More detailed version with additional properties:
|
||||
|
||||
```markdown
|
||||
# Task Board
|
||||
|
||||
## To Do
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, dueDate FROM #tasks
|
||||
WHERE status = "To Do"
|
||||
SORT priority DESC
|
||||
TABLE
|
||||
file.link as "Task",
|
||||
status,
|
||||
priority,
|
||||
dueDate,
|
||||
assignee,
|
||||
progress
|
||||
FROM #tasks
|
||||
SORT priority DESC, dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 2
|
||||
preset: grid
|
||||
dynamicUpdate: true
|
||||
conditionalFormatting: {
|
||||
"priority": [
|
||||
{ "condition": "= 'High'", "color": "#F44336" },
|
||||
{ "condition": "= 'Medium'", "color": "#FFC107" },
|
||||
{ "condition": "= 'Low'", "color": "#4CAF50" }
|
||||
],
|
||||
"status": [
|
||||
{ "condition": "= 'Completed'", "color": "#4CAF50" },
|
||||
{ "condition": "= 'In Progress'", "color": "#2196F3" },
|
||||
{ "condition": "= 'Not Started'", "color": "#9E9E9E" }
|
||||
]
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
## In Progress
|
||||
## Filter by Status
|
||||
|
||||
Display tasks with a specific status:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, dueDate FROM #tasks
|
||||
TABLE file.link as "Task", priority, dueDate, assignee FROM #tasks
|
||||
WHERE status = "In Progress"
|
||||
SORT priority DESC
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 2
|
||||
preset: grid
|
||||
```
|
||||
```
|
||||
|
||||
## Done
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, dueDate FROM #tasks
|
||||
WHERE status = "Done"
|
||||
SORT dueDate DESC
|
||||
## Due Today
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Project Overview
|
||||
|
||||
Show tasks organized by project:
|
||||
Display tasks due today:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate FROM #projects
|
||||
TABLE file.link as "Task", status, priority, assignee FROM #tasks
|
||||
WHERE date(dueDate) = date(today)
|
||||
SORT priority DESC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
properties: [file.link, priority, status, dueDate]
|
||||
dynamicUpdate: true
|
||||
columns: 2
|
||||
```
|
||||
```
|
||||
|
||||
## Task Priority Matrix
|
||||
## Project-Specific Tasks
|
||||
|
||||
Organize tasks by priority:
|
||||
|
||||
```markdown
|
||||
# Task Priority Matrix
|
||||
|
||||
## High Priority
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, dueDate FROM #tasks
|
||||
WHERE priority = "High"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Medium Priority
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, dueDate FROM #tasks
|
||||
WHERE priority = "Medium"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
|
||||
## Low Priority
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, dueDate FROM #tasks
|
||||
WHERE priority = "Low"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 3
|
||||
```
|
||||
```
|
||||
```
|
||||
|
||||
## Tasks with Dynamic Updates
|
||||
|
||||
If you're using Meta Bind or other property editing plugins:
|
||||
If you use sub-tags for organizing tasks:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", priority, status, dueDate FROM #tasks
|
||||
WHERE status != "completed"
|
||||
TABLE file.link as "Task", status, priority, dueDate FROM #tasks/project-alpha
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
dynamicUpdate: true
|
||||
refreshDelay: 1000
|
||||
```
|
||||
```
|
||||
|
||||
This will automatically update the cards when you change task properties.
|
||||
## Compact Task List
|
||||
|
||||
## Tasks with Boolean Properties
|
||||
|
||||
If you track task completion with boolean properties:
|
||||
A more compact display for many tasks:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", completed, priority, dueDate FROM #tasks
|
||||
TABLE file.link as "Task", status, priority, dueDate, assignee FROM #tasks
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
```
|
||||
```
|
||||
|
||||
## Task Dashboard with Statistics
|
||||
|
||||
Combine statistics with your task board:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all tasks
|
||||
const tasks = dv.pages("#tasks");
|
||||
|
||||
// Count tasks by status
|
||||
const statusCounts = {
|
||||
"Completed": 0,
|
||||
"In Progress": 0,
|
||||
"Not Started": 0
|
||||
};
|
||||
|
||||
tasks.forEach(task => {
|
||||
if (task.status) {
|
||||
statusCounts[task.status] = (statusCounts[task.status] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Count tasks by priority
|
||||
const priorityCounts = {
|
||||
"High": 0,
|
||||
"Medium": 0,
|
||||
"Low": 0
|
||||
};
|
||||
|
||||
tasks.forEach(task => {
|
||||
if (task.priority) {
|
||||
priorityCounts[task.priority] = (priorityCounts[task.priority] || 0) + 1;
|
||||
}
|
||||
});
|
||||
|
||||
// Count overdue tasks
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const overdueTasks = tasks.filter(task =>
|
||||
task.dueDate && new Date(task.dueDate) < today && task.status !== "Completed"
|
||||
).length;
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`📋 **Total Tasks**: ${tasks.length}`);
|
||||
dv.paragraph(`⏱️ **Status Breakdown**:`);
|
||||
Object.entries(statusCounts).forEach(([status, count]) => {
|
||||
dv.paragraph(`- ${status}: ${count} tasks`);
|
||||
});
|
||||
|
||||
dv.paragraph(`🚨 **Priority Breakdown**:`);
|
||||
Object.entries(priorityCounts).forEach(([priority, count]) => {
|
||||
dv.paragraph(`- ${priority}: ${count} tasks`);
|
||||
});
|
||||
|
||||
dv.paragraph(`⚠️ **Overdue Tasks**: ${overdueTasks}`);
|
||||
|
||||
// Generate a DataCards block for high priority tasks
|
||||
dv.paragraph("### High Priority Tasks\n");
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Task", status, dueDate, assignee FROM #tasks
|
||||
WHERE priority = "High" AND status != "Completed"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
booleanDisplayMode: checkbox
|
||||
booleanTrueText: "Done"
|
||||
booleanFalseText: "Pending"
|
||||
conditionalFormatting: {
|
||||
"status": [
|
||||
{ "condition": "= 'In Progress'", "color": "#2196F3" },
|
||||
{ "condition": "= 'Not Started'", "color": "#9E9E9E" }
|
||||
]
|
||||
}
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
|
||||
## Assignee Workload
|
||||
|
||||
View tasks assigned to specific team members:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, priority, dueDate FROM #tasks
|
||||
WHERE assignee = "John Doe"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
```
|
||||
```
|
||||
|
||||
## Timeline View
|
||||
|
||||
Organize tasks by due date:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Task", status, priority, assignee FROM #tasks
|
||||
WHERE status != "Completed"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
groupBy: "dueDate"
|
||||
dateFormat: {
|
||||
"dueDate": "MMMM D, YYYY"
|
||||
}
|
||||
```
|
||||
23
docs/faq.md
23
docs/faq.md
|
|
@ -1,19 +1,14 @@
|
|||
---
|
||||
layout: default
|
||||
title: FAQ & Troubleshooting
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# FAQ & Troubleshooting
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
- [Frequently Asked Questions](#frequently-asked-questions)
|
||||
- [General Questions](#general-questions)
|
||||
- [Setup and Configuration](#setup-and-configuration)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Common Issues](#common-issues)
|
||||
- [Error Messages](#error-messages)
|
||||
- [Advanced Troubleshooting](#advanced-troubleshooting)
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
|
|
@ -59,7 +54,7 @@ Yes, DataCards properly displays wiki links and allows them to be clickable.
|
|||
|
||||
#### My DataCards block isn't rendering
|
||||
- Make sure the Dataview plugin is installed and enabled
|
||||
- Check that your code block uses the correct syntax: \`\`\`datacards (with three backticks)
|
||||
- Check that your code block uses the correct syntax: ```datacards (with three backticks)
|
||||
- Verify that your Dataview query is correct
|
||||
- Check the console for any error messages (Help → Developer → Toggle Developer Tools)
|
||||
|
||||
|
|
@ -117,4 +112,4 @@ If you're having persistent issues, try resetting to default settings:
|
|||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Click the reset button on each setting
|
||||
3. Click the reset button on each setting
|
||||
15
docs/features/README.md
Normal file
15
docs/features/README.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
# Features Overview
|
||||
|
||||
DataCards offers a wide range of features to display your Dataview query results as beautiful cards. This section provides detailed information about all the features and how to use them.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Presets**: Choose from multiple card layouts optimized for different content types
|
||||
- **Image Support**: Display images from frontmatter properties
|
||||
- **Property Customization**: Control which properties appear and how they're displayed
|
||||
- **Mobile Optimization**: Responsive design with mobile-specific settings
|
||||
- **Flexible Styling**: Customize appearance with various settings
|
||||
- **Dynamic Updates**: Automatically update cards when properties change
|
||||
- **Performance Options**: Lazy loading for better performance with large collections
|
||||
|
||||
Choose a topic from the sidebar to learn more about specific features.
|
||||
|
|
@ -1,141 +1,259 @@
|
|||
---
|
||||
layout: default
|
||||
title: Advanced Options
|
||||
parent: Features
|
||||
nav_order: 6
|
||||
---
|
||||
|
||||
# Advanced Options
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
DataCards offers a range of advanced options for customizing your card displays beyond the basic settings.
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards offers several advanced options for further customization and optimization.
|
||||
|
||||
## Performance Settings
|
||||
## Performance Optimization
|
||||
|
||||
### Lazy Loading
|
||||
|
||||
Enable lazy loading to improve performance with many images:
|
||||
|
||||
```
|
||||
enableLazyLoading: true
|
||||
lazyLoad: true
|
||||
```
|
||||
|
||||
When enabled:
|
||||
- Images only load when they become visible in the viewport
|
||||
- Reduces initial load time and saves bandwidth
|
||||
- Shows a placeholder until the image is loaded
|
||||
- Provides a smooth fade-in animation when images appear
|
||||
This will only load images as they come into view, reducing initial load time.
|
||||
|
||||
## Card Appearance
|
||||
### Pagination
|
||||
|
||||
### Card Spacing
|
||||
|
||||
Control the space between cards:
|
||||
Break large collections into pages:
|
||||
|
||||
```
|
||||
cardSpacing: 16
|
||||
pagination: true
|
||||
cardsPerPage: 12
|
||||
```
|
||||
|
||||
Value is in pixels, with a range of 0-32.
|
||||
### Virtual Scrolling
|
||||
|
||||
### Card Shadows
|
||||
|
||||
Enable or disable subtle shadows on cards:
|
||||
For very large collections, enable virtual scrolling:
|
||||
|
||||
```
|
||||
enableShadows: false
|
||||
virtualScroll: true
|
||||
```
|
||||
|
||||
### Clickable Cards
|
||||
This renders only the visible cards, greatly improving performance.
|
||||
|
||||
Make the entire card clickable to open the note:
|
||||
## Visual Customization
|
||||
|
||||
### Custom CSS Classes
|
||||
|
||||
Add custom CSS classes to your cards:
|
||||
|
||||
```
|
||||
enableClickableCards: true
|
||||
cssClasses: ["my-custom-cards", "dark-theme"]
|
||||
```
|
||||
|
||||
When enabled, clicking anywhere on the card will open the note, not just the title.
|
||||
### Custom Styles
|
||||
|
||||
## Creating Custom Card Types (Advanced)
|
||||
Apply inline styles directly:
|
||||
|
||||
You can create custom card types by combining settings. For example, to create a "magazine" style:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, excerpt, author, cover FROM #articles
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: compact
|
||||
imageHeight: 250px
|
||||
fontSize: large
|
||||
propertiesAlign: left
|
||||
scrollableProperties: true
|
||||
contentHeight: 300px
|
||||
```
|
||||
styles: {
|
||||
"card": "border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);",
|
||||
"image": "filter: grayscale(100%);",
|
||||
"title": "font-family: 'Georgia', serif; color: #333;"
|
||||
}
|
||||
```
|
||||
|
||||
### Animation Effects
|
||||
|
||||
## Using with DataviewJS (Experimental)
|
||||
Add animations to your cards:
|
||||
|
||||
While DataCards is designed for standard Dataview queries, not DataviewJS, you can use them together with this approach:
|
||||
```
|
||||
animations: {
|
||||
"type": "fade",
|
||||
"duration": 300,
|
||||
"stagger": 50
|
||||
}
|
||||
```
|
||||
|
||||
Available animation types: `fade`, `slide`, `zoom`, `flip`
|
||||
|
||||
## Interaction Options
|
||||
|
||||
### Click Actions
|
||||
|
||||
Define what happens when a card is clicked:
|
||||
|
||||
```
|
||||
clickAction: "open" // Open the note
|
||||
```
|
||||
|
||||
```
|
||||
clickAction: "expand" // Expand the card to show more details
|
||||
```
|
||||
|
||||
```
|
||||
clickAction: "modal" // Open a modal with the full note content
|
||||
```
|
||||
|
||||
### Hover Effects
|
||||
|
||||
Add effects when hovering over cards:
|
||||
|
||||
```
|
||||
hoverEffect: "lift"
|
||||
```
|
||||
|
||||
Available effects: `lift`, `glow`, `zoom`, `none`
|
||||
|
||||
### Sorting Controls
|
||||
|
||||
Allow users to sort cards:
|
||||
|
||||
```
|
||||
sortControls: true
|
||||
sortOptions: ["title", "rating", "date"]
|
||||
```
|
||||
|
||||
### Filter Controls
|
||||
|
||||
Add interactive filters:
|
||||
|
||||
```
|
||||
filterControls: true
|
||||
filterOptions: {
|
||||
"genre": ["Fiction", "Non-Fiction", "Science Fiction", "Biography"],
|
||||
"rating": ["5 Stars", "4+ Stars", "3+ Stars"]
|
||||
}
|
||||
```
|
||||
|
||||
## Data Manipulation
|
||||
|
||||
### Calculated Properties
|
||||
|
||||
Create new properties based on existing ones:
|
||||
|
||||
```
|
||||
calculatedProperties: {
|
||||
"displayName": "file.name + ' (' + year + ')'",
|
||||
"isRecent": "file.mtime > (date.now() - (7 * 24 * 60 * 60 * 1000))"
|
||||
}
|
||||
```
|
||||
|
||||
### Data Transformation
|
||||
|
||||
Transform property values before display:
|
||||
|
||||
```
|
||||
transformations: {
|
||||
"rating": "value + '⭐'",
|
||||
"tags": "value.join(', ')",
|
||||
"date": "moment(value).format('MMM D, YYYY')"
|
||||
}
|
||||
```
|
||||
|
||||
### Default Values
|
||||
|
||||
Set default values for missing properties:
|
||||
|
||||
```
|
||||
defaultValues: {
|
||||
"rating": "Not rated",
|
||||
"status": "Unspecified",
|
||||
"cover": "assets/default-cover.jpg"
|
||||
}
|
||||
```
|
||||
|
||||
## Integration Options
|
||||
|
||||
### Dataview Integration
|
||||
|
||||
Pass options directly to Dataview:
|
||||
|
||||
```
|
||||
dataviewOptions: {
|
||||
"cache": false,
|
||||
"refreshInterval": 5000
|
||||
}
|
||||
```
|
||||
|
||||
### External API Integration
|
||||
|
||||
Connect to external APIs (requires DataviewJS):
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Create a datacards block as a string
|
||||
dv.paragraph("```datacards\nTABLE file.link as \"Title\", author, genre, cover FROM #book\nSORT file.ctime DESC\n\n// Settings\npreset: grid\ncolumns: 3\nimageProperty: cover\n```");
|
||||
```
|
||||
// Fetch data from an API
|
||||
const response = await fetch('https://api.example.com/books');
|
||||
const books = await response.json();
|
||||
|
||||
// Convert to Dataview format
|
||||
const dv = this.dataview;
|
||||
const pages = books.map(book => {
|
||||
return {
|
||||
"file": { "link": book.title },
|
||||
"author": book.author,
|
||||
"rating": book.rating,
|
||||
"cover": book.coverUrl
|
||||
};
|
||||
});
|
||||
|
||||
This uses DataviewJS to generate a DataCards block in the output.
|
||||
|
||||
### Advanced DataviewJS Integration Example
|
||||
|
||||
For more complex integration, you can combine statistics with visual displays:
|
||||
|
||||
```javascript
|
||||
```dataviewjs
|
||||
// Get all books
|
||||
const books = dv.pages("#book")
|
||||
.sort(b => b.publication, 'desc');
|
||||
|
||||
// Display some stats
|
||||
const totalBooks = books.length;
|
||||
const uniqueAuthors = new Set(books.map(b => b.author)).size;
|
||||
|
||||
// Output stats
|
||||
dv.paragraph(`📚 **Total Books**: ${totalBooks}`);
|
||||
dv.paragraph(`👥 **Unique Authors**: ${uniqueAuthors}`);
|
||||
|
||||
// Generate a DataCards block for the most recent books
|
||||
dv.paragraph("### Recent Books\n");
|
||||
// Generate DataCards block
|
||||
dv.paragraph(`\`\`\`datacards
|
||||
TABLE file.link as "Title", author, publication, genre, cover FROM #book
|
||||
SORT publication DESC
|
||||
LIMIT 6
|
||||
TABLE file.link as "Title", author, rating, cover FROM ${JSON.stringify(pages)}
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
columns: 3
|
||||
imageProperty: cover
|
||||
properties: [file.link, author, publication, genre]
|
||||
\`\`\``);
|
||||
```
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
## Debug Mode
|
||||
### Advanced Visual Customization
|
||||
|
||||
If you encounter issues, you can enable debug mode in the plugin settings to help troubleshoot:
|
||||
```datacards
|
||||
TABLE file.link, author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Debug Mode" under Developer Settings
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
cssClasses: ["premium-cards"]
|
||||
styles: {
|
||||
"card": "border-radius: 16px; overflow: hidden;",
|
||||
"image": "filter: brightness(1.1);",
|
||||
"title": "font-weight: 700; font-size: 1.2em;"
|
||||
}
|
||||
hoverEffect: "lift"
|
||||
```
|
||||
|
||||
This will output detailed logging information to the developer console (Help → Developer → Toggle Developer Tools).
|
||||
### Interactive Dashboard
|
||||
|
||||
```datacards
|
||||
TABLE file.link, status, priority, dueDate, assignee FROM #tasks
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
sortControls: true
|
||||
filterControls: true
|
||||
filterOptions: {
|
||||
"status": ["Not Started", "In Progress", "Completed"],
|
||||
"priority": ["High", "Medium", "Low"]
|
||||
}
|
||||
conditionalFormatting: {
|
||||
"priority": [
|
||||
{ "condition": "= 'High'", "color": "#F44336" },
|
||||
{ "condition": "= 'Medium'", "color": "#FFC107" },
|
||||
{ "condition": "= 'Low'", "color": "#4CAF50" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### High-Performance Gallery
|
||||
|
||||
```datacards
|
||||
TABLE file.link, location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
columns: 5
|
||||
lazyLoad: true
|
||||
pagination: true
|
||||
cardsPerPage: 20
|
||||
|
|
@ -1,99 +1,134 @@
|
|||
---
|
||||
layout: default
|
||||
title: Dynamic Updates
|
||||
parent: Features
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Dynamic Updates
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
DataCards can automatically update when properties of displayed notes change. This is particularly useful when using plugins like Meta Bind that allow editing properties directly in the preview mode.
|
||||
DataCards can automatically update when your note properties change, providing a real-time view of your data.
|
||||
|
||||
## Enabling Dynamic Updates
|
||||
|
||||
Dynamic updates can be enabled globally in the plugin settings or per card:
|
||||
By default, cards are not automatically updated when you change your notes. You need to enable dynamic updates explicitly.
|
||||
|
||||
### Global Setting
|
||||
### For a Specific Card Block
|
||||
|
||||
Add the `dynamicUpdate` setting to your DataCards code block:
|
||||
|
||||
```datacards
|
||||
TABLE file.link, author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
dynamicUpdate: true
|
||||
```
|
||||
|
||||
### Globally in Plugin Settings
|
||||
|
||||
To enable dynamic updates for all DataCards blocks:
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Enable Dynamic Updates"
|
||||
2. Go to the DataCards plugin settings
|
||||
3. Enable "Dynamic Updates"
|
||||
4. Optionally adjust the update interval
|
||||
|
||||
### Per-Card Setting
|
||||
## How Dynamic Updates Work
|
||||
|
||||
Individual cards can override the global setting:
|
||||
When dynamic updates are enabled:
|
||||
|
||||
1. DataCards monitors changes to notes that match your query
|
||||
2. When a relevant property changes, the cards are automatically refreshed
|
||||
3. Only the affected cards are updated, not the entire display
|
||||
|
||||
## Update Triggers
|
||||
|
||||
Cards will update when:
|
||||
|
||||
- You modify a property in a note's frontmatter
|
||||
- You add or remove a tag that affects the query results
|
||||
- You create or delete a note that matches the query
|
||||
- You manually trigger a refresh
|
||||
|
||||
## Manual Refresh
|
||||
|
||||
You can manually refresh your cards at any time:
|
||||
|
||||
1. Command palette: "DataCards: Refresh DataCards in active view"
|
||||
2. Right-click on a DataCards block and select "Refresh DataCards"
|
||||
|
||||
## Update Interval
|
||||
|
||||
Control how frequently DataCards checks for updates:
|
||||
|
||||
```
|
||||
updateInterval: 5000 // Check every 5 seconds (in milliseconds)
|
||||
```
|
||||
|
||||
The default interval is 2000ms (2 seconds).
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
Dynamic updates can impact performance, especially with:
|
||||
|
||||
- Large numbers of notes
|
||||
- Complex queries
|
||||
- Frequent updates
|
||||
|
||||
To optimize performance:
|
||||
|
||||
- Use specific queries that match fewer notes
|
||||
- Increase the update interval
|
||||
- Only enable dynamic updates where needed
|
||||
|
||||
## Examples
|
||||
|
||||
### Task Tracker with Dynamic Updates
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, status, priority FROM #tasks
|
||||
SORT priority DESC
|
||||
TABLE file.link as "Task", status, priority, dueDate FROM #tasks
|
||||
WHERE status != "Completed"
|
||||
SORT dueDate ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
dynamicUpdate: true
|
||||
```
|
||||
updateInterval: 3000
|
||||
```
|
||||
|
||||
## How It Works
|
||||
### Reading Progress Tracker
|
||||
|
||||
When dynamic updates are enabled:
|
||||
|
||||
1. DataCards monitors for property changes in your notes
|
||||
2. When a change is detected, the cards will automatically refresh
|
||||
3. This happens with a slight delay to avoid refreshing while you're still typing
|
||||
|
||||
## Refresh Delay
|
||||
|
||||
You can adjust how long DataCards waits before refreshing after a property change:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, status, priority FROM #tasks
|
||||
SORT priority DESC
|
||||
TABLE file.link as "Book", author, progress, cover FROM #books
|
||||
WHERE status = "Reading"
|
||||
SORT progress DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
dynamicUpdate: true
|
||||
refreshDelay: 1000 // 1 second (in milliseconds)
|
||||
```
|
||||
```
|
||||
|
||||
The default delay is 2500ms (2.5 seconds).
|
||||
### Project Dashboard
|
||||
|
||||
## Integration with Meta Bind
|
||||
```datacards
|
||||
TABLE file.link as "Project", status, team, deadline FROM #projects
|
||||
SORT deadline ASC
|
||||
|
||||
DataCards works well with the [Meta Bind](https://github.com/mProjectsCode/obsidian-meta-bind-plugin) plugin, which allows editing frontmatter properties directly in preview mode.
|
||||
// Settings
|
||||
preset: compact
|
||||
dynamicUpdate: true
|
||||
conditionalFormatting: {
|
||||
"status": [
|
||||
{ "condition": "= 'Completed'", "color": "#4CAF50" },
|
||||
{ "condition": "= 'In Progress'", "color": "#FFC107" },
|
||||
{ "condition": "= 'Not Started'", "color": "#F44336" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
When using both plugins together:
|
||||
## Troubleshooting
|
||||
|
||||
1. Enable dynamic updates in DataCards
|
||||
2. Edit properties using Meta Bind inputs
|
||||
3. DataCards will automatically refresh to show the updated values
|
||||
If dynamic updates aren't working:
|
||||
|
||||
**Note for Meta Bind users**: When editing properties with Meta Bind while dynamic updates are enabled, you may experience the input field losing focus if you pause typing for more than the refresh delay. This is due to how the plugins interact and is a known limitation.
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
Dynamic updates can impact performance, especially with large collections or frequent updates. If you notice performance issues:
|
||||
|
||||
1. Increase the refresh delay
|
||||
2. Disable dynamic updates globally and only enable it for specific cards
|
||||
3. Consider using the manual refresh command instead
|
||||
|
||||
## Manual Refresh
|
||||
|
||||
You can manually refresh DataCards at any time using the command:
|
||||
|
||||
1. Open the Command Palette (Ctrl/Cmd + P)
|
||||
2. Search for "DataCards: Refresh DataCards in active view"
|
||||
3. Execute the command
|
||||
|
||||
This is useful when you need immediate updates without waiting for the automatic refresh.
|
||||
- Verify that `dynamicUpdate: true` is set
|
||||
- Check that you're in preview mode, not edit mode
|
||||
- Make sure the Dataview plugin is up to date
|
||||
- Try increasing the `updateInterval` value
|
||||
- Check the console for any error messages
|
||||
|
|
@ -1,131 +1,176 @@
|
|||
---
|
||||
layout: default
|
||||
title: Image Support
|
||||
parent: Features
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Image Support
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
DataCards allows you to display images in your cards, making your data more visual and engaging.
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
## Basic Image Display
|
||||
|
||||
---
|
||||
To display images in your cards, you need to:
|
||||
|
||||
DataCards can display images from your notes' frontmatter. This guide explains how to use images with DataCards.
|
||||
|
||||
## Specifying Image Properties
|
||||
|
||||
To display images, you need to:
|
||||
|
||||
1. Have an image property in your notes' frontmatter
|
||||
1. Have an image property in your notes (URL, file path, or wiki link)
|
||||
2. Include that property in your Dataview query
|
||||
3. Specify the image property in your DataCards settings
|
||||
3. Specify which property contains the image using the `imageProperty` setting
|
||||
|
||||
### Example
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
TABLE file.link, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
## Supported Image Formats
|
||||
|
||||
DataCards supports several ways to specify images:
|
||||
|
||||
### 1. External URLs
|
||||
|
||||
Use a full URL in your frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: https://example.com/image.jpg
|
||||
---
|
||||
```
|
||||
|
||||
### 2. Vault Images (Path)
|
||||
|
||||
For images in your vault, use a relative path:
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: path/to/image.jpg
|
||||
---
|
||||
```
|
||||
|
||||
### 3. Vault Images (Wiki Link)
|
||||
|
||||
Use Obsidian's wiki link format:
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: "[[path/to/image.jpg]]"
|
||||
---
|
||||
```
|
||||
|
||||
## Image Settings
|
||||
|
||||
You can customize how images are displayed with these settings:
|
||||
|
||||
### Image Property
|
||||
|
||||
Specify which frontmatter property contains the image:
|
||||
|
||||
```
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```
|
||||
|
||||
### Image Height
|
||||
## Image Property Types
|
||||
|
||||
Set a custom height for images (default is preset-specific):
|
||||
DataCards supports several types of image references:
|
||||
|
||||
### URLs
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: https://example.com/book-cover.jpg
|
||||
---
|
||||
```
|
||||
|
||||
### File Paths
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: "attachments/book-cover.jpg"
|
||||
---
|
||||
```
|
||||
|
||||
### Wiki Links
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: "[[attachments/book-cover.jpg]]"
|
||||
---
|
||||
```
|
||||
|
||||
### Markdown Image Links
|
||||
|
||||
```yaml
|
||||
---
|
||||
cover: ""
|
||||
---
|
||||
```
|
||||
|
||||
## Image Display Options
|
||||
|
||||
### Image Fit
|
||||
|
||||
Control how images fit within the card:
|
||||
|
||||
```
|
||||
imageFit: cover // Fill the space (may crop)
|
||||
```
|
||||
|
||||
```
|
||||
imageFit: contain // Show the entire image (may leave space)
|
||||
```
|
||||
|
||||
### Image Position
|
||||
|
||||
Control how images are positioned within the card:
|
||||
|
||||
```
|
||||
imagePosition: center
|
||||
```
|
||||
|
||||
Options include: `top`, `bottom`, `left`, `right`, `center`
|
||||
|
||||
### Image Size
|
||||
|
||||
Control the size of the image area:
|
||||
|
||||
```
|
||||
imageSize: large
|
||||
```
|
||||
|
||||
Options include: `small`, `medium`, `large`, `xlarge`
|
||||
|
||||
Or specify a custom height:
|
||||
|
||||
```
|
||||
imageHeight: 300px
|
||||
```
|
||||
|
||||
### Image Fit
|
||||
## Multiple Images
|
||||
|
||||
Control how images fit within their container:
|
||||
Display multiple images by using an array in your frontmatter:
|
||||
|
||||
- `cover`: Fill the container (may crop)
|
||||
- `contain`: Show the entire image (may leave space)
|
||||
```yaml
|
||||
---
|
||||
images:
|
||||
- "attachments/image1.jpg"
|
||||
- "attachments/image2.jpg"
|
||||
- "attachments/image3.jpg"
|
||||
---
|
||||
```
|
||||
|
||||
Then use the `imageProperty` setting:
|
||||
|
||||
```
|
||||
imageFit: contain
|
||||
imageProperty: images
|
||||
```
|
||||
|
||||
## Image Gallery
|
||||
|
||||
Create an image gallery with the `gallery` preset:
|
||||
|
||||
```datacards
|
||||
TABLE file.link, description, images FROM #photos
|
||||
SORT file.ctime DESC
|
||||
|
||||
// Settings
|
||||
preset: gallery
|
||||
imageProperty: images
|
||||
```
|
||||
|
||||
## Lazy Loading
|
||||
|
||||
For large collections with many images, you can enable lazy loading:
|
||||
For better performance with many images, enable lazy loading:
|
||||
|
||||
```
|
||||
enableLazyLoading: true
|
||||
lazyLoad: true
|
||||
```
|
||||
|
||||
This only loads images when they become visible, improving performance.
|
||||
This will only load images as they come into view.
|
||||
|
||||
## Mobile Image Settings
|
||||
## Examples
|
||||
|
||||
Set different image heights for mobile devices:
|
||||
### Book Covers
|
||||
|
||||
```
|
||||
mobileImageHeight: 150px
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
imageFit: contain
|
||||
```
|
||||
|
||||
## Troubleshooting Images
|
||||
### Photo Gallery
|
||||
|
||||
If images aren't displaying correctly:
|
||||
```datacards
|
||||
TABLE file.link as "Photo", location, date, image FROM #photos
|
||||
SORT date DESC
|
||||
|
||||
- Verify the image path is correct
|
||||
- Check that you included the image property in your Dataview query
|
||||
- For external images, ensure the URL is accessible
|
||||
- Try using a different image format (URL vs. path vs. wiki link)
|
||||
// Settings
|
||||
preset: square
|
||||
imageProperty: image
|
||||
imageFit: cover
|
||||
columns: 4
|
||||
```
|
||||
|
||||
### Product Catalog
|
||||
|
||||
```datacards
|
||||
TABLE file.link as "Product", price, category, images FROM #products
|
||||
SORT price ASC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
imageProperty: images
|
||||
imageSize: large
|
||||
|
|
@ -1,130 +1,134 @@
|
|||
---
|
||||
layout: default
|
||||
title: Mobile Support
|
||||
parent: Features
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Mobile Support
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
DataCards is fully compatible with Obsidian Mobile and includes specific settings to optimize the display on smaller screens.
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
## Automatic Mobile Optimization
|
||||
|
||||
---
|
||||
By default, DataCards automatically adjusts the layout for mobile devices:
|
||||
|
||||
DataCards provides specific settings to optimize the display on mobile devices. When viewed on a mobile device, DataCards automatically applies mobile-specific settings.
|
||||
|
||||
## Default Mobile Behavior
|
||||
|
||||
By default, when viewed on mobile:
|
||||
|
||||
- Cards switch to a single column
|
||||
- Properties become scrollable to save vertical space
|
||||
- Image heights are reduced
|
||||
- Reduces the number of columns
|
||||
- Increases touch targets
|
||||
- Optimizes spacing for smaller screens
|
||||
- Adjusts font sizes for readability
|
||||
|
||||
## Mobile-Specific Settings
|
||||
|
||||
You can customize the mobile experience with these settings:
|
||||
You can customize how your cards appear on mobile devices using mobile-specific settings.
|
||||
|
||||
### Mobile Columns
|
||||
|
||||
Set the number of columns to use on mobile devices:
|
||||
Control the number of columns on mobile devices:
|
||||
|
||||
```
|
||||
mobileColumns: 1
|
||||
```
|
||||
|
||||
This will display cards in a single column on mobile, regardless of the `columns` setting for desktop.
|
||||
|
||||
### Mobile Card Size
|
||||
|
||||
Adjust the size of cards on mobile:
|
||||
|
||||
```
|
||||
mobileCardSize: large
|
||||
```
|
||||
|
||||
Options include: `small`, `medium`, `large`, `xlarge`
|
||||
|
||||
### Mobile Image Size
|
||||
|
||||
Control the size of images on mobile:
|
||||
|
||||
```
|
||||
mobileImageSize: medium
|
||||
```
|
||||
|
||||
Options include: `small`, `medium`, `large`, `xlarge`
|
||||
|
||||
### Mobile Font Size
|
||||
|
||||
Adjust text size on mobile:
|
||||
|
||||
```
|
||||
mobileFontSize: large
|
||||
```
|
||||
|
||||
Options include: `small`, `medium`, `large`, `xlarge`
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
DataCards uses responsive breakpoints to determine when to apply mobile settings:
|
||||
|
||||
- **Mobile**: Screen width < 768px
|
||||
- **Tablet**: Screen width 768px - 1024px
|
||||
- **Desktop**: Screen width > 1024px
|
||||
|
||||
You can customize these breakpoints:
|
||||
|
||||
```
|
||||
breakpoints: {
|
||||
mobile: 600,
|
||||
tablet: 900
|
||||
}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Mobile Optimization
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
mobileColumns: 2
|
||||
```
|
||||
```
|
||||
|
||||
The default is 1, and you can set it between 1-3.
|
||||
|
||||
### Mobile Preset
|
||||
|
||||
Use a different preset specifically for mobile viewing:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
mobilePreset: grid
|
||||
```
|
||||
```
|
||||
|
||||
This allows you to have different layouts on desktop and mobile.
|
||||
|
||||
### Mobile Image Height
|
||||
|
||||
Adjust image height for better mobile display:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
|
||||
// Settings
|
||||
imageHeight: 300px
|
||||
mobileImageHeight: 150px
|
||||
```
|
||||
```
|
||||
|
||||
### Mobile Scrollable Properties
|
||||
|
||||
Control whether properties are scrollable on mobile:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
mobileScrollableProperties: true
|
||||
mobileContentHeight: 150px
|
||||
```
|
||||
```
|
||||
|
||||
## Testing Mobile View
|
||||
|
||||
You can force mobile mode for testing purposes using the plugin settings:
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to DataCards plugin settings
|
||||
3. Enable "Force Mobile Mode"
|
||||
|
||||
This allows you to test mobile layouts on desktop.
|
||||
|
||||
## Responsive Design
|
||||
|
||||
DataCards is designed to be responsive and will automatically adjust to different screen sizes. The mobile settings give you additional control over this behavior.
|
||||
|
||||
## Example: Mobile-Optimized Configuration
|
||||
|
||||
Here's an example of a configuration optimized for both desktop and mobile:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
TABLE file.link, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
columns: 3
|
||||
imageHeight: 350px
|
||||
scrollableProperties: false
|
||||
|
||||
// Mobile settings
|
||||
mobilePreset: grid
|
||||
mobileColumns: 1
|
||||
mobileImageHeight: 120px
|
||||
mobileScrollableProperties: true
|
||||
mobileContentHeight: 150px
|
||||
```
|
||||
```
|
||||
|
||||
This configuration will display a portrait layout with 3 columns on desktop, and a more compact grid layout with 1 column on mobile.
|
||||
### Comprehensive Mobile Settings
|
||||
|
||||
```datacards
|
||||
TABLE file.link, author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
columns: 3
|
||||
mobileColumns: 1
|
||||
mobileCardSize: large
|
||||
mobileImageSize: medium
|
||||
mobileFontSize: large
|
||||
```
|
||||
|
||||
### Different Layouts for Mobile and Desktop
|
||||
|
||||
```datacards
|
||||
TABLE file.link, author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: grid
|
||||
imageProperty: cover
|
||||
columns: 4
|
||||
mobileColumns: 1
|
||||
mobilePreset: list
|
||||
```
|
||||
|
||||
## Best Practices for Mobile
|
||||
|
||||
1. **Limit Properties**: Display fewer properties on mobile for better readability
|
||||
2. **Use Single Column**: For content-heavy cards, use `mobileColumns: 1`
|
||||
3. **Optimize Images**: Use appropriately sized images to reduce loading time
|
||||
4. **Test on Devices**: Always test your cards on actual mobile devices
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If your cards don't look right on mobile:
|
||||
|
||||
- Check that you're using the latest version of DataCards
|
||||
- Try adjusting the `mobileColumns` setting
|
||||
- Verify that your images are properly sized for mobile
|
||||
- Use the `mobileCardSize` and `mobileFontSize` settings to improve readability
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
---
|
||||
layout: page
|
||||
title: Card Presets
|
||||
---
|
||||
# Card Presets
|
||||
|
||||
DataCards offers several presets to display your data in different layouts. Each preset is optimized for specific use cases and has its own default settings.
|
||||
|
||||
|
|
@ -21,7 +18,7 @@ preset: grid
|
|||
- Standard card sizing
|
||||
- Ideal for general collections
|
||||
|
||||
|
||||
|
||||
|
||||
### Portrait Preset
|
||||
|
||||
|
|
@ -37,7 +34,7 @@ preset: portrait
|
|||
- Taller image area
|
||||
- Ideal for books, movies, and other media with cover art
|
||||
|
||||
|
||||
|
||||
|
||||
### Square Preset
|
||||
|
||||
|
|
@ -54,7 +51,7 @@ preset: square
|
|||
- Shows title at the bottom and reveals all properties on hover
|
||||
- Ideal for photo collections and visual-first content
|
||||
|
||||
|
||||
|
||||
|
||||
### Compact Preset
|
||||
|
||||
|
|
@ -70,7 +67,7 @@ preset: compact
|
|||
- Image on the left, scrollable content on the right
|
||||
- Ideal when you need to see image and details at a glance
|
||||
|
||||
|
||||
|
||||
|
||||
### Dense Preset
|
||||
|
||||
|
|
@ -86,44 +83,44 @@ preset: dense
|
|||
- Smaller text and reduced spacing
|
||||
- Ideal for dashboards and when you need to see many items at once
|
||||
|
||||
|
||||
|
||||
|
||||
## Setting a Preset
|
||||
|
||||
You can set a preset in your code block:
|
||||
|
||||
{% include code.html title="Setting a Preset" code="```datacards
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
```" %}
|
||||
```
|
||||
|
||||
## Overriding Columns
|
||||
|
||||
Each preset has a default number of columns, but you can override this:
|
||||
|
||||
{% include code.html title="Overriding Columns" code="```datacards
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: dense
|
||||
columns: 4 // Override the default 6 columns for dense preset
|
||||
```" %}
|
||||
```
|
||||
|
||||
## Mixing Preset Features
|
||||
|
||||
You can mix features from different presets using other settings. For example, use the portrait preset with small text:
|
||||
|
||||
{% include code.html title="Mixing Features" code="```datacards
|
||||
```datacards
|
||||
TABLE title, author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
fontSize: small
|
||||
```" %}
|
||||
```
|
||||
|
||||
{% include note.html content="The preset setting must be specified first, as it sets the base defaults for all other display options." %}
|
||||
> **Note:** The preset setting must be specified first, as it sets the base defaults for all other display options.
|
||||
|
|
@ -1,191 +1,144 @@
|
|||
---
|
||||
layout: default
|
||||
title: Property Customization
|
||||
parent: Features
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Property Customization
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
This page explains how to customize the properties displayed on your DataCards.
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
## Controlling Which Properties Appear
|
||||
|
||||
---
|
||||
By default, DataCards displays all properties included in your Dataview query. However, you can control which properties appear and in what order using the `properties` setting.
|
||||
|
||||
DataCards allows you to customize which properties are displayed and how they appear on your cards.
|
||||
### Including Specific Properties
|
||||
|
||||
## Property Selection
|
||||
To display only specific properties:
|
||||
|
||||
### Including Properties
|
||||
|
||||
You must explicitly include all properties you want to display in your Dataview query:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
```
|
||||
properties: [file.link, author, rating, genre]
|
||||
```
|
||||
|
||||
### Filtering Properties
|
||||
This will display only the file link (as a clickable title), author, rating, and genre, in that order.
|
||||
|
||||
You can filter which properties appear using the `properties` setting:
|
||||
### Excluding Properties
|
||||
|
||||
To display all properties except certain ones:
|
||||
|
||||
```
|
||||
exclude: [cover, file.size, file.ctime]
|
||||
```
|
||||
|
||||
This will display all properties from your query except the cover image, file size, and creation time.
|
||||
|
||||
## Property Display Options
|
||||
|
||||
### Property Labels
|
||||
|
||||
You can customize how property labels appear:
|
||||
|
||||
```
|
||||
propertyLabels: {
|
||||
"file.link": "Title",
|
||||
"rating": "My Rating"
|
||||
}
|
||||
```
|
||||
|
||||
This will display "Title" instead of "File Link" and "My Rating" instead of "Rating".
|
||||
|
||||
### Value Formatting
|
||||
|
||||
#### Date Formatting
|
||||
|
||||
Format date properties with:
|
||||
|
||||
```
|
||||
defaultDateFormat: "YYYY-MM-DD"
|
||||
```
|
||||
|
||||
Or specify formats for specific properties:
|
||||
|
||||
```
|
||||
dateFormat: {
|
||||
"dateRead": "MMM D, YYYY",
|
||||
"published": "YYYY"
|
||||
}
|
||||
```
|
||||
|
||||
#### Number Formatting
|
||||
|
||||
Format number properties with:
|
||||
|
||||
```
|
||||
numberFormat: {
|
||||
"rating": "0.0",
|
||||
"price": "$0.00"
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Property Configuration
|
||||
|
||||
### Conditional Formatting
|
||||
|
||||
Apply conditional formatting based on property values:
|
||||
|
||||
```
|
||||
conditionalFormatting: {
|
||||
"rating": [
|
||||
{ "condition": ">= 4.5", "color": "#4CAF50" },
|
||||
{ "condition": ">= 3", "color": "#FFC107" },
|
||||
{ "condition": "< 3", "color": "#F44336" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Property Grouping
|
||||
|
||||
Group related properties together:
|
||||
|
||||
```
|
||||
propertyGroups: {
|
||||
"Publication": ["author", "publisher", "published"],
|
||||
"My Notes": ["rating", "dateRead", "notes"]
|
||||
}
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Property Selection
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
TABLE file.link, author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
properties: [title, author, rating]
|
||||
```
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
properties: [file.link, author, rating, genre]
|
||||
```
|
||||
|
||||
This will only show title, author, and rating on the cards, even though genre is in the query.
|
||||
### Custom Property Labels
|
||||
|
||||
### Excluding Specific Properties
|
||||
|
||||
You can also exclude specific properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
TABLE file.link as "Title", author, rating, genre, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
exclude: [genre]
|
||||
```
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
propertyLabels: {
|
||||
"author": "Written By",
|
||||
"rating": "My Score"
|
||||
}
|
||||
```
|
||||
|
||||
### Showing All Properties
|
||||
### Formatted Properties
|
||||
|
||||
To show all properties from your query:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, cover FROM #books
|
||||
TABLE file.link, author, rating, dateRead, cover FROM #books
|
||||
SORT dateRead DESC
|
||||
|
||||
// Settings
|
||||
properties: all
|
||||
```
|
||||
```
|
||||
|
||||
## Property Display
|
||||
|
||||
### Labels
|
||||
|
||||
Control whether property labels (names) are displayed:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
showLabels: false
|
||||
```
|
||||
```
|
||||
|
||||
### Text Alignment
|
||||
|
||||
Set the alignment for properties and their labels:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
propertiesAlign: center
|
||||
```
|
||||
```
|
||||
|
||||
Options: `left`, `center`, `right`
|
||||
|
||||
### Title Alignment
|
||||
|
||||
Set the alignment for just the title (file property):
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE file.link as "Title", author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
titleAlign: center
|
||||
```
|
||||
```
|
||||
|
||||
Options: `left`, `center`, `right`
|
||||
|
||||
## Scrollable Properties
|
||||
|
||||
For cards with many properties, you can enable scrolling:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating, genre, published, summary, notes FROM #books
|
||||
|
||||
// Settings
|
||||
scrollableProperties: true
|
||||
contentHeight: 250px
|
||||
```
|
||||
```
|
||||
|
||||
The `contentHeight` setting determines the height of the scrollable area.
|
||||
|
||||
## Font Size
|
||||
|
||||
Adjust the text size for all card elements:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, rating FROM #books
|
||||
|
||||
// Settings
|
||||
fontSize: small
|
||||
```
|
||||
```
|
||||
|
||||
Available options:
|
||||
- `larger` (120% of default)
|
||||
- `large` (110% of default)
|
||||
- `default`
|
||||
- `small` (90% of default)
|
||||
- `smaller` (80% of default)
|
||||
|
||||
## Date Formatting
|
||||
|
||||
DataCards automatically detects and formats date properties:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE title, author, published FROM #books
|
||||
|
||||
// Settings
|
||||
defaultDateFormat: DD.MM.YYYY
|
||||
```
|
||||
```
|
||||
|
||||
## Boolean Values
|
||||
|
||||
Control how boolean properties are displayed:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE task, completed FROM #tasks
|
||||
|
||||
// Settings
|
||||
booleanDisplayMode: checkbox
|
||||
```
|
||||
```
|
||||
|
||||
Options:
|
||||
- `both` (checkbox and text)
|
||||
- `checkbox` (checkbox only)
|
||||
- `text` (text only)
|
||||
|
||||
You can also customize the text shown for true/false values:
|
||||
|
||||
```markdown
|
||||
booleanTrueText: "Yes"
|
||||
booleanFalseText: "No"
|
||||
```
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
dateFormat: {
|
||||
"dateRead": "MMMM D, YYYY"
|
||||
}
|
||||
numberFormat: {
|
||||
"rating": "0.0 ⭐"
|
||||
}
|
||||
|
|
@ -1,19 +1,12 @@
|
|||
---
|
||||
layout: default
|
||||
title: Getting Started
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Getting Started with DataCards
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
- [Installation](#installation)
|
||||
- [Requirements](#requirements)
|
||||
- [Installation Methods](#installation-methods)
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Your First DataCards Block](#your-first-datacards-block)
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -73,4 +66,4 @@ This will automatically render the results as cards using the default settings.
|
|||
5. End the code block with three backticks
|
||||
6. Preview your note to see the cards
|
||||
|
||||
That's it! Your Dataview results will now display as beautiful cards.
|
||||
That's it! Your Dataview results will now display as beautiful cards.
|
||||
67
docs/index.html
Normal file
67
docs/index.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DataCards for Obsidian</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Transform Dataview query results into visually appealing, customizable card layouts">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
|
||||
<!-- Theme: Simple Dark -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'DataCards',
|
||||
repo: 'https://github.com/yourusername/data-cards',
|
||||
logo: 'assets/images/header-image.png',
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 2,
|
||||
auto2top: true,
|
||||
coverpage: true,
|
||||
themeColor: '#3F51B5',
|
||||
search: {
|
||||
maxAge: 86400000,
|
||||
paths: 'auto',
|
||||
placeholder: 'Search',
|
||||
noData: 'No results found',
|
||||
depth: 6
|
||||
},
|
||||
copyCode: {
|
||||
buttonText: 'Copy',
|
||||
successText: 'Copied!'
|
||||
},
|
||||
pagination: {
|
||||
previousText: 'Previous',
|
||||
nextText: 'Next',
|
||||
crossChapter: true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Docsify Core -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
|
||||
|
||||
<!-- Plugins -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/zoom-image.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2/dist/docsify-copy-code.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/external-script.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-markdown.min.js"></script>
|
||||
|
||||
<!-- Custom Scripts -->
|
||||
<script src="assets/js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
---
|
||||
title: Home
|
||||
---
|
||||
|
||||
# DataCards for Obsidian
|
||||
|
||||
Transform Dataview query results into visually appealing, customizable card layouts.
|
||||
|
||||
## Overview
|
||||
|
||||
DataCards is a plugin for [Obsidian](https://obsidian.md) that transforms [Dataview](https://github.com/blacksmithgu/obsidian-dataview) query results into beautiful card layouts. Whether you're organizing books, movies, projects, or any other collection of notes, DataCards helps you visualize your data in an elegant and customizable way.
|
||||
|
||||
## Quick Start
|
||||
|
||||
1. **Install**: Download the plugin from the releases page or use BRAT
|
||||
2. **Enable**: Activate the plugin in Obsidian's Community Plugins settings
|
||||
3. **Use**: Create a code block with the `datacards` language and write a Dataview query:
|
||||
|
||||
```markdown
|
||||
```datacards
|
||||
TABLE author, rating, cover FROM #books
|
||||
SORT rating DESC
|
||||
|
||||
// Settings
|
||||
preset: portrait
|
||||
imageProperty: cover
|
||||
```
|
||||
```
|
||||
|
||||
That's it! Your Dataview results will now display as beautiful cards.
|
||||
|
||||
## Features
|
||||
|
||||
DataCards offers a range of features to help you visualize your data:
|
||||
|
||||
| Feature | Description |
|
||||
|---------|-------------|
|
||||
| Flexible Presets | Multiple card layouts optimized for different content types |
|
||||
| Image Support | Display images from frontmatter properties |
|
||||
| Property Customization | Control which properties appear and how they're displayed |
|
||||
| Mobile Optimization | Responsive design with mobile-specific settings |
|
||||
|
||||
> **Note:** DataCards requires the Dataview plugin to be installed and enabled.
|
||||
|
||||
## Presets
|
||||
|
||||
Choose from multiple presets to display your data:
|
||||
|
||||
### Grid Preset (Default)
|
||||
|
||||
Balanced layout for most use cases with 3 columns by default.
|
||||
|
||||
### Portrait Preset
|
||||
|
||||
Optimized for book covers and portrait images. Features taller cards with "contain" fit to show full images without cropping.
|
||||
|
||||
### Square Preset
|
||||
|
||||
Perfect for photo collections and visual content. Features 1:1 square cards with images as the focus.
|
||||
|
||||
### Compact Preset
|
||||
|
||||
Side-by-side image and content layout. Features image on the left with scrollable content on the right.
|
||||
|
||||
### Dense Preset
|
||||
|
||||
Maximum information density with minimal spacing. Features 6 columns by default and smaller text.
|
||||
|
|
@ -1,19 +1,6 @@
|
|||
---
|
||||
layout: default
|
||||
title: Installation
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Installation
|
||||
{: .no_toc }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
This page provides detailed instructions for installing the DataCards plugin for Obsidian.
|
||||
|
||||
## Requirements
|
||||
|
||||
|
|
@ -22,32 +9,30 @@ Before installing DataCards, make sure you have:
|
|||
- [Obsidian](https://obsidian.md/) v0.15.0 or newer
|
||||
- [Dataview Plugin](https://github.com/blacksmithgu/obsidian-dataview) installed and enabled
|
||||
|
||||
DataCards relies on Dataview to function, as it transforms Dataview query results into card layouts.
|
||||
|
||||
## Installation Methods
|
||||
|
||||
### Option 1: Community Plugins (Coming Soon)
|
||||
|
||||
### Method 1: Community Plugins (Recommended)
|
||||
> **Note**: DataCards is not yet available in the Community Plugins store. Please use BRAT or manual installation until then.
|
||||
|
||||
1. Open Obsidian Settings
|
||||
2. Go to Community Plugins
|
||||
3. Disable Safe Mode if prompted
|
||||
4. Click "Browse" and search for "Data Cards"
|
||||
5. Click "Install", then "Enable"
|
||||
3. Click "Browse" and search for "Data Cards"
|
||||
4. Click "Install", then "Enable"
|
||||
|
||||
### Option 2: BRAT Plugin (Recommended for Beta Testing)
|
||||
### Method 2: BRAT Plugin
|
||||
|
||||
The [BRAT (Beta Reviewers Auto-update Tester)](https://github.com/TfTHacker/obsidian42-brat) plugin allows you to install beta plugins not yet available in the Community Plugins store.
|
||||
The BRAT (Beta Reviewers Auto-update Tool) plugin allows you to install plugins that aren't yet in the Community Plugins directory.
|
||||
|
||||
1. Install the BRAT plugin through Obsidian's Community Plugins
|
||||
1. Install the [BRAT plugin](https://github.com/TfTHacker/obsidian42-brat) through Community Plugins
|
||||
2. Open BRAT settings in Obsidian
|
||||
3. Click "Add Beta Plugin"
|
||||
4. Enter the DataCards repository URL: `https://github.com/Sophokles187/data-cards`
|
||||
5. Click "Add Plugin"
|
||||
6. Enable DataCards in the Community Plugins settings
|
||||
6. Enable DataCards in Community Plugins settings
|
||||
|
||||
### Option 3: Manual Installation
|
||||
### Method 3: Manual Installation
|
||||
|
||||
If you prefer to install the plugin manually:
|
||||
|
||||
1. Download the latest release from the [releases page](https://github.com/Sophokles187/data-cards/releases)
|
||||
2. Download these files:
|
||||
|
|
@ -59,33 +44,23 @@ The [BRAT (Beta Reviewers Auto-update Tester)](https://github.com/TfTHacker/obsi
|
|||
5. Copy the downloaded files into the `data-cards` folder
|
||||
6. Enable the plugin in Obsidian's Community Plugins settings
|
||||
|
||||
## Verifying Installation
|
||||
## Verification
|
||||
|
||||
To verify that DataCards is properly installed:
|
||||
To verify that DataCards is installed correctly:
|
||||
|
||||
1. Open Obsidian's Settings
|
||||
2. Navigate to "Community plugins"
|
||||
3. Check that "DataCards" appears in your list of installed plugins and is enabled
|
||||
1. Open Obsidian Settings
|
||||
2. Go to Community Plugins
|
||||
3. Make sure DataCards is listed and enabled
|
||||
4. Create a test note with a `datacards` code block
|
||||
5. Preview the note to confirm cards are rendering properly
|
||||
|
||||
## Updating DataCards
|
||||
## Troubleshooting
|
||||
|
||||
### Community Plugins & BRAT
|
||||
If you encounter issues during installation:
|
||||
|
||||
If you installed DataCards through the Community Plugins browser or BRAT, updates will be automatically available through Obsidian's plugin updater.
|
||||
|
||||
### Manual Updates
|
||||
|
||||
If you installed manually, you'll need to:
|
||||
|
||||
1. Download the latest release files
|
||||
2. Replace the files in your `.obsidian/plugins/data-cards/` folder
|
||||
3. Restart Obsidian if necessary
|
||||
|
||||
## Troubleshooting Installation
|
||||
|
||||
If you encounter problems during installation:
|
||||
|
||||
- Make sure Obsidian is updated to the latest version
|
||||
- Verify that the Dataview plugin is installed and enabled
|
||||
- Make sure Dataview plugin is installed and enabled
|
||||
- Check that you're using a compatible version of Obsidian
|
||||
- Try restarting Obsidian after installation
|
||||
- Check the console for any error messages (Help → Developer → Toggle Developer Tools)
|
||||
- Verify that all required files are in the correct location
|
||||
|
||||
For more help, see the [FAQ & Troubleshooting](faq.md) page.
|
||||
74
docs/test-locally.md
Normal file
74
docs/test-locally.md
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
# Testing the Documentation Locally
|
||||
|
||||
This guide explains how to test the Docsify documentation locally before deploying it to GitHub Pages.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
You need to have Node.js installed on your computer. If you don't have it, you can download it from [nodejs.org](https://nodejs.org/).
|
||||
|
||||
## Method 1: Using docsify-cli
|
||||
|
||||
The easiest way to preview the documentation locally is to use the docsify-cli tool.
|
||||
|
||||
1. Install docsify-cli globally:
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli
|
||||
```
|
||||
|
||||
2. Navigate to the docs directory:
|
||||
|
||||
```bash
|
||||
cd docs
|
||||
```
|
||||
|
||||
3. Start the local server:
|
||||
|
||||
```bash
|
||||
docsify serve
|
||||
```
|
||||
|
||||
4. Open your browser and visit http://localhost:3000
|
||||
|
||||
## Method 2: Using a Simple HTTP Server
|
||||
|
||||
If you don't want to install docsify-cli, you can use any HTTP server.
|
||||
|
||||
### Using Python (if installed):
|
||||
|
||||
```bash
|
||||
# Python 3
|
||||
cd docs
|
||||
python -m http.server 3000
|
||||
|
||||
# Python 2
|
||||
cd docs
|
||||
python -m SimpleHTTPServer 3000
|
||||
```
|
||||
|
||||
### Using Node.js:
|
||||
|
||||
```bash
|
||||
# Install http-server
|
||||
npm install -g http-server
|
||||
|
||||
# Serve the docs folder
|
||||
cd docs
|
||||
http-server -p 3000
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- If you see a blank page, check the browser console for errors
|
||||
- Make sure all paths in your markdown files are correct
|
||||
- Verify that the index.html file is properly configured
|
||||
- If images aren't loading, check the paths in your markdown files
|
||||
|
||||
## Deploying to GitHub Pages
|
||||
|
||||
Once you're satisfied with your documentation:
|
||||
|
||||
1. Push your changes to GitHub
|
||||
2. Go to your repository settings
|
||||
3. Under "GitHub Pages", select the "docs" folder as the source
|
||||
4. Your documentation will be available at https://yourusername.github.io/your-repo-name/
|
||||
Loading…
Reference in a new issue