From 00564970aceac8a5ebf9ae1b4bbe4d03e2ae6fe8 Mon Sep 17 00:00:00 2001
From: Marius <136248525+Sophokles187@users.noreply.github.com>
Date: Fri, 28 Mar 2025 01:39:11 +0100
Subject: [PATCH] updated-docs
---
.gitignore | 8 +-
docs/.nojekyll | 0
docs/_config.yml | 47 ++-
docs/_includes/card.html | 6 +
docs/_includes/code.html | 6 +
docs/_includes/note.html | 3 +
docs/_includes/sidebar.html | 79 +++++
docs/_layouts/default.html | 49 +++
docs/_layouts/page.html | 7 +
docs/assets/css/custom.css | 419 +++++++++++++++++++++++++
docs/assets/css/style.css | 611 ++++++++++++++++++++++++++++++++++++
docs/assets/js/script.js | 103 ++++++
docs/favicon.ico | 1 +
docs/features/presets.md | 35 +--
docs/index.md | 79 ++++-
15 files changed, 1394 insertions(+), 59 deletions(-)
create mode 100644 docs/.nojekyll
create mode 100644 docs/_includes/card.html
create mode 100644 docs/_includes/code.html
create mode 100644 docs/_includes/note.html
create mode 100644 docs/_includes/sidebar.html
create mode 100644 docs/_layouts/default.html
create mode 100644 docs/_layouts/page.html
create mode 100644 docs/assets/css/custom.css
create mode 100644 docs/assets/css/style.css
create mode 100644 docs/assets/js/script.js
create mode 100644 docs/favicon.ico
diff --git a/.gitignore b/.gitignore
index b6ad326..1948e2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -134,4 +134,10 @@ data.json
dataview-docs
test-cases.md
obsidian-meta-bind-docs
-docs-obsidian
\ No newline at end of file
+docs-obsidian
+
+# Documentation internal files - not visible on GitHub
+docs/preview-instructions.md
+docs/README.md
+docs/Gemfile
+docs/Gemfile.lock
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/_config.yml b/docs/_config.yml
index 4f65286..f613d6c 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -1,24 +1,37 @@
-remote_theme: just-the-docs/just-the-docs
+# Site settings
title: DataCards Documentation
description: Official documentation for the DataCards plugin for Obsidian
-url: https://github.com/Sophokles187/data-cards
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "https://sophokles187.github.io" # the base hostname & protocol for your site
-# Theme settings
-color_scheme: dark
-search_enabled: true
-heading_anchors: true
+# Build settings
+markdown: kramdown
+highlighter: rouge
-# Aux links for the upper right navigation
-aux_links:
- "DataCards on GitHub":
- - "https://github.com/Sophokles187/data-cards"
+# Exclude from processing
+exclude:
+ - Gemfile
+ - Gemfile.lock
+ - node_modules
+ - preview-instructions.md
+ - README.md
-# Footer content
-footer_content: "Copyright © 2025 Sophokles187. Licensed under the GPL-3.0 License ."
+# Plugins
+plugins:
+ - jekyll-seo-tag
-# Back to top link
-back_to_top: true
-back_to_top_text: "Back to top"
+# Include these files that are automatically excluded
+include:
+ - .nojekyll
-# Makes Aux links open in a new tab
-aux_links_new_tab: true
+# Custom variables
+version: "1.0"
+
+# Defaults
+defaults:
+ -
+ scope:
+ path: ""
+ type: "pages"
+ values:
+ layout: "page"
diff --git a/docs/_includes/card.html b/docs/_includes/card.html
new file mode 100644
index 0000000..f37a9f8
--- /dev/null
+++ b/docs/_includes/card.html
@@ -0,0 +1,6 @@
+
+ {% if include.title %}
+
{{ include.title }}
+ {% endif %}
+ {{ include.content | markdownify }}
+
diff --git a/docs/_includes/code.html b/docs/_includes/code.html
new file mode 100644
index 0000000..4816ebb
--- /dev/null
+++ b/docs/_includes/code.html
@@ -0,0 +1,6 @@
+
diff --git a/docs/_includes/note.html b/docs/_includes/note.html
new file mode 100644
index 0000000..eb40337
--- /dev/null
+++ b/docs/_includes/note.html
@@ -0,0 +1,3 @@
+
+ {{ include.content | markdownify }}
+
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
new file mode 100644
index 0000000..4b0a01d
--- /dev/null
+++ b/docs/_includes/sidebar.html
@@ -0,0 +1,79 @@
+
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
new file mode 100644
index 0000000..ff2f331
--- /dev/null
+++ b/docs/_layouts/default.html
@@ -0,0 +1,49 @@
+
+
+
+ {% if page.title %}{{ page.title }} - {% endif %}DataCards Documentation
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% include sidebar.html %}
+
+
+ {{ content }}
+
+
{{ page.title }}
+
+{{ content }}
diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
new file mode 100644
index 0000000..3e22332
--- /dev/null
+++ b/docs/assets/css/custom.css
@@ -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);
+ }
+}
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
new file mode 100644
index 0000000..5d6572d
--- /dev/null
+++ b/docs/assets/css/style.css
@@ -0,0 +1,611 @@
+/*
+ * DataCards Documentation
+ * Modern Apple-inspired design system
+ */
+
+/* Base Styles */
+:root {
+ /* Light mode colors */
+ --primary-color: #0071e3;
+ --primary-color-hover: #0051a2;
+ --text-color: #1d1d1f;
+ --text-secondary: #86868b;
+ --text-on-primary: #ffffff;
+ --bg-color: #ffffff;
+ --bg-secondary: #f5f5f7;
+ --border-color: #d2d2d7;
+ --nav-highlight: rgba(0, 113, 227, 0.05);
+ --code-bg: #f2f2f2;
+ --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+ --card-shadow-hover: 0 6px 25px rgba(0, 0, 0, 0.12);
+
+ /* Gradient background */
+ --gradient-start: #ffffff;
+ --gradient-end: #f5f5f7;
+
+ /* Other variables */
+ --sidebar-width: 250px;
+ --content-max-width: 800px;
+ --border-radius: 12px;
+ --transition-speed: 0.2s;
+}
+
+/* Dark mode colors */
+.dark-theme {
+ --primary-color: #0a84ff;
+ --primary-color-hover: #409cff;
+ --text-color: #f5f5f7;
+ --text-secondary: #a1a1a6;
+ --text-on-primary: #ffffff;
+ --bg-color: #121212;
+ --bg-secondary: #1c1c1e;
+ --border-color: #38383a;
+ --nav-highlight: rgba(10, 132, 255, 0.15);
+ --code-bg: #2a2a2c;
+ --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+ --card-shadow-hover: 0 6px 25px rgba(0, 0, 0, 0.35);
+
+ /* Dark mode gradient */
+ --gradient-start: #121212;
+ --gradient-end: #1a1a1a;
+}
+
+/* Typography */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ color: var(--text-color);
+ background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+ background-attachment: fixed;
+ margin: 0;
+ padding: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ transition: color var(--transition-speed) ease, background-color var(--transition-speed) ease;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 600;
+ line-height: 1.2;
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+ letter-spacing: -0.015em;
+ color: var(--text-color);
+ transition: color var(--transition-speed) ease;
+}
+
+h1 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ letter-spacing: -0.03em;
+}
+
+h2 {
+ font-size: 1.75rem;
+ border-bottom: 1px solid var(--border-color);
+ padding-bottom: 0.5rem;
+ margin-top: 2rem;
+ transition: border-color var(--transition-speed) ease;
+}
+
+h3 {
+ font-size: 1.3rem;
+ margin-top: 1.8rem;
+}
+
+p {
+ margin-top: 0.5rem;
+ margin-bottom: 1.25rem;
+ font-size: 1rem;
+ line-height: 1.6;
+ color: var(--text-color);
+ transition: color var(--transition-speed) ease;
+}
+
+a {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: color var(--transition-speed) ease;
+}
+
+a:hover {
+ color: var(--primary-color-hover);
+ text-decoration: underline;
+}
+
+code {
+ font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.9em;
+ background-color: var(--code-bg);
+ padding: 0.2em 0.4em;
+ border-radius: 4px;
+ color: var(--text-color);
+ transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+}
+
+pre {
+ background-color: var(--code-bg);
+ padding: 1rem;
+ border-radius: 8px;
+ overflow-x: auto;
+ line-height: 1.4;
+ transition: background-color var(--transition-speed) ease;
+}
+
+pre code {
+ background-color: transparent;
+ padding: 0;
+}
+
+/* Layout */
+.container {
+ display: flex;
+ min-height: 100vh;
+}
+
+.sidebar {
+ width: var(--sidebar-width);
+ background-color: var(--bg-secondary);
+ border-right: 1px solid var(--border-color);
+ padding: 2rem 0;
+ position: fixed;
+ height: 100vh;
+ overflow-y: auto;
+ z-index: 10;
+ transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+
+.sidebar-header {
+ padding: 0 1.5rem 1.5rem;
+ margin-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+ transition: border-color var(--transition-speed) ease;
+}
+
+.logo-container {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.logo {
+ height: 40px;
+ width: 40px;
+ background-color: var(--primary-color);
+ border-radius: 10px;
+ margin-right: 0.75rem;
+ transition: background-color var(--transition-speed) ease;
+}
+
+.site-title {
+ font-size: 1.3rem;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+ color: var(--text-color);
+ transition: color var(--transition-speed) ease;
+}
+
+.version {
+ display: inline-block;
+ font-size: 0.8rem;
+ padding: 0.2rem 0.5rem;
+ background-color: var(--bg-color);
+ border-radius: 12px;
+ color: var(--text-secondary);
+ margin-top: 0.25rem;
+ transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+}
+
+.main-content {
+ flex: 1;
+ margin-left: var(--sidebar-width);
+ padding: 2rem 3rem;
+ max-width: var(--content-max-width);
+ transition: background-color var(--transition-speed) ease;
+}
+
+/* Navigation */
+.nav-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.nav-item {
+ margin: 0;
+}
+
+.nav-link {
+ display: block;
+ padding: 0.5rem 1.5rem;
+ color: var(--text-color);
+ text-decoration: none;
+ border-left: 3px solid transparent;
+ transition: all var(--transition-speed) ease;
+}
+
+.nav-link:hover {
+ background-color: var(--nav-highlight);
+ border-left-color: var(--primary-color);
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.nav-link.active {
+ background-color: var(--nav-highlight);
+ border-left-color: var(--primary-color);
+ color: var(--primary-color);
+ font-weight: 500;
+}
+
+.nav-section {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--border-color);
+ transition: border-color var(--transition-speed) ease;
+}
+
+.nav-section-title {
+ padding: 0 1.5rem;
+ margin-bottom: 0.5rem;
+ font-size: 0.85rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ letter-spacing: 0.05em;
+ transition: color var(--transition-speed) ease;
+}
+
+/* Components */
+.button {
+ display: inline-block;
+ padding: 0.5rem 1.25rem;
+ background-color: var(--primary-color);
+ color: var(--text-on-primary);
+ border-radius: 8px;
+ font-weight: 500;
+ text-align: center;
+ transition: all var(--transition-speed) ease;
+ border: none;
+ cursor: pointer;
+}
+
+.button:hover {
+ background-color: var(--primary-color-hover);
+ text-decoration: none;
+ transform: translateY(-1px);
+ color: var(--text-on-primary);
+}
+
+.card {
+ background-color: var(--bg-color);
+ border-radius: var(--border-radius);
+ box-shadow: var(--card-shadow);
+ padding: 1.5rem;
+ margin: 1.5rem 0;
+ transition: transform var(--transition-speed) ease,
+ box-shadow var(--transition-speed) ease,
+ background-color var(--transition-speed) ease;
+}
+
+.card:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--card-shadow-hover);
+}
+
+.note {
+ background-color: var(--nav-highlight);
+ border-left: 4px solid var(--primary-color);
+ border-radius: 0 8px 8px 0;
+ padding: 1rem 1.5rem;
+ margin: 1.5rem 0;
+ transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+
+.note p:last-child {
+ margin-bottom: 0;
+}
+
+.badge {
+ display: inline-block;
+ padding: 0.25em 0.5em;
+ font-size: 0.75em;
+ font-weight: 500;
+ background-color: var(--primary-color);
+ color: var(--text-on-primary);
+ border-radius: 12px;
+ vertical-align: middle;
+ margin-left: 0.5em;
+ transition: background-color var(--transition-speed) ease;
+}
+
+.table-wrapper {
+ overflow-x: auto;
+ margin: 1.5rem 0;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ box-shadow: var(--card-shadow);
+ border-radius: 8px;
+ overflow: hidden;
+ transition: box-shadow var(--transition-speed) ease;
+}
+
+th, td {
+ padding: 0.75rem 1rem;
+ text-align: left;
+ border-bottom: 1px solid var(--border-color);
+ transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
+}
+
+th {
+ background-color: var(--bg-secondary);
+ font-weight: 500;
+ color: var(--text-color);
+ transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+}
+
+td {
+ color: var(--text-color);
+ transition: color var(--transition-speed) ease;
+}
+
+tr:last-child td {
+ border-bottom: none;
+}
+
+tr:hover {
+ background-color: var(--nav-highlight);
+}
+
+/* Dark mode toggle */
+.theme-toggle {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 100;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background-color: var(--bg-color);
+ box-shadow: var(--card-shadow);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
+ border: none;
+}
+
+.theme-toggle:hover {
+ box-shadow: var(--card-shadow-hover);
+}
+
+.theme-toggle svg {
+ width: 24px;
+ height: 24px;
+ fill: none;
+ stroke: var(--text-color);
+ stroke-width: 2;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ transition: stroke var(--transition-speed) ease, transform var(--transition-speed) ease;
+}
+
+.theme-toggle:hover svg {
+ transform: scale(1.1);
+}
+
+/* Mobile menu toggle */
+.mobile-menu-toggle {
+ display: none;
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 20;
+ width: 40px;
+ height: 40px;
+ border-radius: 8px;
+ background-color: var(--bg-color);
+ box-shadow: var(--card-shadow);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
+ border: none;
+}
+
+.mobile-menu-toggle span {
+ display: block;
+ width: 20px;
+ height: 2px;
+ background-color: var(--text-color);
+ position: relative;
+ transition: background-color var(--transition-speed) ease;
+}
+
+.mobile-menu-toggle span:before,
+.mobile-menu-toggle span:after {
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 2px;
+ background-color: var(--text-color);
+ transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
+}
+
+.mobile-menu-toggle span:before {
+ top: -6px;
+}
+
+.mobile-menu-toggle span:after {
+ bottom: -6px;
+}
+
+.mobile-menu-open .mobile-menu-toggle span {
+ background-color: transparent;
+}
+
+.mobile-menu-open .mobile-menu-toggle span:before {
+ transform: rotate(45deg);
+ top: 0;
+}
+
+.mobile-menu-open .mobile-menu-toggle span:after {
+ transform: rotate(-45deg);
+ bottom: 0;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+ .container {
+ flex-direction: column;
+ }
+
+ .sidebar {
+ width: 100%;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: -100%;
+ z-index: 15;
+ transition: left var(--transition-speed) ease, background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+ box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
+ }
+
+ .mobile-menu-open .sidebar {
+ left: 0;
+ }
+
+ .mobile-menu-toggle {
+ display: flex;
+ }
+
+ .main-content {
+ margin-left: 0;
+ padding: 1.5rem;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .logo-container {
+ justify-content: center;
+ padding-top: 1rem;
+ }
+
+ .nav-link {
+ padding: 0.75rem 1.5rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ h2 {
+ font-size: 1.5rem;
+ }
+
+ .theme-toggle {
+ bottom: 70px;
+ }
+}
+
+/* Additional styles for code blocks */
+.code-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background-color: var(--bg-secondary);
+ padding: 0.5rem 1rem;
+ border-bottom: 1px solid var(--border-color);
+ border-radius: 8px 8px 0 0;
+ font-family: var(--mono-font-family);
+ font-size: 0.9em;
+ color: var(--text-secondary);
+ transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, color var(--transition-speed) ease;
+}
+
+.code-container {
+ margin: 1.5rem 0;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: var(--card-shadow);
+ transition: box-shadow var(--transition-speed) ease;
+}
+
+.code-container pre {
+ margin: 0;
+ border-radius: 0 0 8px 8px;
+}
+
+/* Skip to content link for accessibility */
+.skip-to-content {
+ position: absolute;
+ left: -9999px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+}
+
+.skip-to-content:focus {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: auto;
+ height: auto;
+ padding: 10px;
+ background-color: var(--primary-color);
+ color: var(--text-on-primary);
+ z-index: 100;
+ text-decoration: none;
+}
+
+/* Improve focus styles for accessibility */
+a:focus, button:focus, .nav-link:focus {
+ outline: 2px solid var(--primary-color);
+ outline-offset: 2px;
+}
+
+/* Animation for page load */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.main-content {
+ animation: fadeIn 0.3s ease-out;
+}
+
+/* Jekyll-specific modifications */
+.page-content {
+ padding: 0;
+}
+
+.wrapper {
+ max-width: 100%;
+ padding: 0;
+}
+
+/* Jekyll syntax highlighting compatibility */
+.highlight {
+ background-color: var(--code-bg);
+ border-radius: 8px;
+}
+
+.highlight pre,
+.highlight code {
+ background-color: transparent;
+}
+
+/* Other Jekyll-specific overrides */
+.site-nav {
+ display: none;
+}
+
+.site-header,
+.site-footer {
+ display: none;
+}
diff --git a/docs/assets/js/script.js b/docs/assets/js/script.js
new file mode 100644
index 0000000..c36ead2
--- /dev/null
+++ b/docs/assets/js/script.js
@@ -0,0 +1,103 @@
+/**
+ * DataCards Documentation
+ * Main JavaScript functionality
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+ const body = document.body;
+ const themeToggle = document.querySelector('.theme-toggle');
+ const moonIcon = document.querySelector('.moon-icon');
+ const sunIcon = document.querySelector('.sun-icon');
+ const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+
+ // Check for saved theme preference or use device preference
+ const savedTheme = localStorage.getItem('theme');
+ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+ // Apply theme based on preference
+ if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+ enableDarkMode();
+ }
+
+ // Toggle theme when button is clicked
+ if (themeToggle) {
+ themeToggle.addEventListener('click', function() {
+ if (body.classList.contains('dark-theme')) {
+ disableDarkMode();
+ } else {
+ enableDarkMode();
+ }
+ });
+ }
+
+ // Toggle mobile menu
+ if (mobileMenuToggle) {
+ mobileMenuToggle.addEventListener('click', function() {
+ body.classList.toggle('mobile-menu-open');
+ });
+ }
+
+ // Close mobile menu when clicking on a nav link
+ const navLinks = document.querySelectorAll('.nav-link');
+ navLinks.forEach(link => {
+ link.addEventListener('click', function() {
+ body.classList.remove('mobile-menu-open');
+ });
+ });
+
+ // Close mobile menu when clicking outside
+ document.addEventListener('click', function(event) {
+ const sidebar = document.querySelector('.sidebar');
+ const isClickInside = sidebar && (sidebar.contains(event.target) || (mobileMenuToggle && mobileMenuToggle.contains(event.target)));
+
+ if (!isClickInside && body.classList.contains('mobile-menu-open')) {
+ body.classList.remove('mobile-menu-open');
+ }
+ });
+
+ // Mark current page as active in navigation
+ markActiveNavItem();
+
+ // Functions to enable/disable dark mode
+ function enableDarkMode() {
+ body.classList.add('dark-theme');
+ if (moonIcon) moonIcon.style.display = 'none';
+ if (sunIcon) sunIcon.style.display = 'block';
+ try {
+ localStorage.setItem('theme', 'dark');
+ } catch (e) {
+ console.warn('LocalStorage not available:', e);
+ }
+ }
+
+ function disableDarkMode() {
+ body.classList.remove('dark-theme');
+ if (moonIcon) moonIcon.style.display = 'block';
+ if (sunIcon) sunIcon.style.display = 'none';
+ try {
+ localStorage.setItem('theme', 'light');
+ } catch (e) {
+ console.warn('LocalStorage not available:', e);
+ }
+ }
+
+ // Mark the current page in navigation
+ function markActiveNavItem() {
+ const currentPath = window.location.pathname;
+
+ // Handle root path
+ if (currentPath === '/' || currentPath.endsWith('/index.html')) {
+ const homeLinks = document.querySelectorAll('.nav-link[href="/"], .nav-link[href="index.html"], .nav-link[href="./"]');
+ homeLinks.forEach(link => link.classList.add('active'));
+ return;
+ }
+
+ // Handle other pages
+ navLinks.forEach(link => {
+ const href = link.getAttribute('href');
+ if (href && (currentPath.endsWith(href) || currentPath.includes(href))) {
+ link.classList.add('active');
+ }
+ });
+ }
+});
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000..95b8740
--- /dev/null
+++ b/docs/favicon.ico
@@ -0,0 +1 @@
+
diff --git a/docs/features/presets.md b/docs/features/presets.md
index 7fed0a6..3b0c170 100644
--- a/docs/features/presets.md
+++ b/docs/features/presets.md
@@ -1,19 +1,6 @@
---
-layout: default
+layout: page
title: Card Presets
-parent: Features
-nav_order: 1
----
-
-# Card Presets
-{: .no_toc }
-
-## Table of contents
-{: .no_toc .text-delta }
-
-1. TOC
-{:toc}
-
---
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.
@@ -105,42 +92,38 @@ preset: dense
You can set a preset in your code block:
-```markdown
-```datacards
+{% 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:
-```markdown
-```datacards
+{% 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:
-```markdown
-```datacards
+{% 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." %}
diff --git a/docs/index.md b/docs/index.md
index 886648f..4c06b9e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,32 +1,81 @@
---
layout: default
title: Home
-nav_order: 1
-permalink: /
---
# DataCards for Obsidian
-{: .fs-9 }
Transform Dataview query results into visually appealing, customizable card layouts.
-{: .fs-6 .fw-300 }
-[Get Started](./getting-started.html){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
-[View on GitHub](https://github.com/Sophokles187/data-cards){: .btn .fs-5 .mb-4 .mb-md-0 }
-
----
+Get Started
## 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
-- **Custom Code Block**: Use `datacards` code blocks with Dataview query syntax
-- **Flexible Presets**: Multiple card preset options optimized for different use cases
-- **Property Customization**: Select which properties to display and how they appear
-- **Image Support**: Display images from frontmatter properties with customizable dimensions
-- **Global Settings**: Default configuration with per-block overrides
-- **Mobile Optimization**: Dedicated mobile settings for better display on small screens
+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
+
+
+
+
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.