diff --git a/docs/_includes/sidebar.html b/docs backup/_includes/sidebar.html
similarity index 100%
rename from docs/_includes/sidebar.html
rename to docs backup/_includes/sidebar.html
diff --git a/docs backup/_layouts/default.html b/docs backup/_layouts/default.html
new file mode 100644
index 0000000..ff2f331
--- /dev/null
+++ b/docs backup/_layouts/default.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+ {% if page.title %}{{ page.title }} - {% endif %}DataCards Documentation
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+ {% include sidebar.html %}
+
+
+ {{ content }}
+
+
+
+
+
+
diff --git a/docs/_layouts/page.html b/docs backup/_layouts/page.html
similarity index 100%
rename from docs/_layouts/page.html
rename to docs backup/_layouts/page.html
diff --git a/docs backup/assets/css/custom.css b/docs backup/assets/css/custom.css
new file mode 100644
index 0000000..3e22332
--- /dev/null
+++ b/docs backup/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 backup/assets/css/style.css
similarity index 100%
rename from docs/assets/css/style.css
rename to docs backup/assets/css/style.css
diff --git a/docs/assets/js/script.js b/docs backup/assets/js/script.js
similarity index 100%
rename from docs/assets/js/script.js
rename to docs backup/assets/js/script.js
diff --git a/docs backup/examples/books.md b/docs backup/examples/books.md
new file mode 100644
index 0000000..0863da2
--- /dev/null
+++ b/docs backup/examples/books.md
@@ -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]
+\`\`\``);
+```
+```
diff --git a/docs/examples/index.md b/docs backup/examples/index.md
similarity index 100%
rename from docs/examples/index.md
rename to docs backup/examples/index.md
diff --git a/docs backup/examples/movies.md b/docs backup/examples/movies.md
new file mode 100644
index 0000000..796faf4
--- /dev/null
+++ b/docs backup/examples/movies.md
@@ -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
+\`\`\``);
+```
+```
diff --git a/docs backup/examples/photos.md b/docs backup/examples/photos.md
new file mode 100644
index 0000000..69427ab
--- /dev/null
+++ b/docs backup/examples/photos.md
@@ -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
+```
+```
diff --git a/docs backup/examples/tasks.md b/docs backup/examples/tasks.md
new file mode 100644
index 0000000..e0afd21
--- /dev/null
+++ b/docs backup/examples/tasks.md
@@ -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"
+```
+```
diff --git a/docs/_tabs/faq.md b/docs backup/faq.md
similarity index 85%
rename from docs/_tabs/faq.md
rename to docs backup/faq.md
index e6f4c3f..6580b92 100644
--- a/docs/_tabs/faq.md
+++ b/docs backup/faq.md
@@ -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
diff --git a/docs/favicon.ico b/docs backup/favicon.ico
similarity index 100%
rename from docs/favicon.ico
rename to docs backup/favicon.ico
diff --git a/docs backup/features/advanced-options.md b/docs backup/features/advanced-options.md
new file mode 100644
index 0000000..3780839
--- /dev/null
+++ b/docs backup/features/advanced-options.md
@@ -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).
diff --git a/docs backup/features/dynamic-updates.md b/docs backup/features/dynamic-updates.md
new file mode 100644
index 0000000..d0d39db
--- /dev/null
+++ b/docs backup/features/dynamic-updates.md
@@ -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.
diff --git a/docs backup/features/images.md b/docs backup/features/images.md
new file mode 100644
index 0000000..2f0ba2d
--- /dev/null
+++ b/docs backup/features/images.md
@@ -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)
diff --git a/docs/features/index.md b/docs backup/features/index.md
similarity index 100%
rename from docs/features/index.md
rename to docs backup/features/index.md
diff --git a/docs backup/features/mobile.md b/docs backup/features/mobile.md
new file mode 100644
index 0000000..cc9df2c
--- /dev/null
+++ b/docs backup/features/mobile.md
@@ -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.
diff --git a/docs backup/features/presets.md b/docs backup/features/presets.md
new file mode 100644
index 0000000..3b0c170
--- /dev/null
+++ b/docs backup/features/presets.md
@@ -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." %}
diff --git a/docs backup/features/properties.md b/docs backup/features/properties.md
new file mode 100644
index 0000000..d3cd226
--- /dev/null
+++ b/docs backup/features/properties.md
@@ -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"
+```
diff --git a/docs backup/getting-started.md b/docs backup/getting-started.md
new file mode 100644
index 0000000..1813650
--- /dev/null
+++ b/docs backup/getting-started.md
@@ -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.
diff --git a/docs backup/index.md b/docs backup/index.md
new file mode 100644
index 0000000..4c06b9e
--- /dev/null
+++ b/docs backup/index.md
@@ -0,0 +1,81 @@
+---
+layout: default
+title: Home
+---
+
+# DataCards for Obsidian
+
+Transform Dataview query results into visually appealing, customizable card layouts.
+
+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
+
+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
+
+
+
+
+
+{% 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 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.
diff --git a/docs/_tabs/installation.md b/docs backup/installation.md
similarity index 61%
rename from docs/_tabs/installation.md
rename to docs backup/installation.md
index 4d9c638..0baf86b 100644
--- a/docs/_tabs/installation.md
+++ b/docs backup/installation.md
@@ -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)
diff --git a/docs backup/preview-instructions.md b/docs backup/preview-instructions.md
new file mode 100644
index 0000000..ca2b535
--- /dev/null
+++ b/docs backup/preview-instructions.md
@@ -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
diff --git a/docs/test.md b/docs backup/test.md
similarity index 100%
rename from docs/test.md
rename to docs backup/test.md
diff --git a/docs/Gemfile b/docs/Gemfile
deleted file mode 100644
index edfbe9e..0000000
--- a/docs/Gemfile
+++ /dev/null
@@ -1,5 +0,0 @@
-source "https://rubygems.org"
-
-gem "github-pages", group: :jekyll_plugins
-gem "jekyll-remote-theme"
-gem "webrick", "~> 1.8"
diff --git a/docs/_config.yml b/docs/_config.yml
deleted file mode 100644
index 2304c59..0000000
--- a/docs/_config.yml
+++ /dev/null
@@ -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
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
new file mode 100644
index 0000000..d34ad96
--- /dev/null
+++ b/docs/_coverpage.md
@@ -0,0 +1,17 @@
+
+
+
+
+# DataCards for Obsidian
+
+> 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)
+
+
+
\ No newline at end of file
diff --git a/docs/_includes/card.html b/docs/_includes/card.html
deleted file mode 100644
index 0ecb0c5..0000000
--- a/docs/_includes/card.html
+++ /dev/null
@@ -1,6 +0,0 @@
-