Obsidian Dashboard

Prompt

You are an expert Obsidian consultant, student workflow designer, front-end developer, and plugin curator. I need a complete, self-contained guide to build a beautiful, modern **student dashboard** homepage in Obsidian. The dashboard must work with **any community theme** (theme-agnostic CSS) and must include two specific elements from my current setup exactly as provided—do not change them. **Retained Elements (do not modify, include verbatim):** 1. The ASCII art logo block (the entire <div> containing the "SORT" text art): ``` <div style="text-align: center; font-family: monospace; white-space: pre; line-height: 1.0; overflow: hidden; margin: 15px auto; user-select: none;"> ▄████████ ▄██████▄ ▄▄▄▄███▄▄▄▄ ▄████████ ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▀███████████ ███ █▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ████████▀ ▀██████▀ ▀█ ███ █▀ ███ █▀ </div> ``` 2. The search bar block (the exact ```search-bar ... ``` snippet): ``` ```search-bar sirch ``` (Keep the same syntax and content.) **New Dashboard Requirements (design from scratch — no reuse from my old dashboard):** **1. Student Dashboard Layout Concept** Describe a completely new layout designed for a student, with a multi-column grid or masonry-style arrangement. Widgets should include: - **Today’s Class Schedule** (time blocks or a simple table). - **Upcoming Deadlines & Assignments** (due dates, course names, progress). - **Exam Countdown** (dynamic countdown to next exam). - **Active Study Topics / Flashcards** (quick links to active study notes or flashcards). - **Quick Capture** (a prominent button or input area for fleeting notes). - **Daily Motivation / Study Quote** (with academic tone). - **Course Overview** (list of current courses with links to their home notes). - Optional: a graph or stat snippet showing study streaks or hours logged. The aesthetic should be clean, energizing, and focus-friendly—light colors with gentle accents, ample whitespace, and clear typography. No dark-only reliance; it must look good in both light and dark modes. **2. Required Plugins** List the exact Community Plugin names (as seen in Obsidian’s store) that are essential for this student dashboard. At minimum: - Dataview - Homepage - Calendar (or Full Calendar plugin) - Tasks - Banner (to place a motivating header image behind the logo, if you want) - Admonition (or Callout) - Quick Add (for fast capture) - Any other plugin that significantly enhances the student workflow (e.g., Periodic Notes, Day Planner, etc.). For each, give a one-sentence justification. **3. Theme-Agnostic CSS Snippets** Write all CSS to be **completely theme-independent**. Do NOT rely on any theme’s internal classes or variables. Instead: - Use generic Obsidian selectors (`.markdown-source-view`, `.cm-s-obsidian`, etc.) and define your own custom CSS classes (e.g., `.student-dashboard-container`, `.schedule-card`, `.deadline-card`). - Define a set of custom properties (CSS variables) at `:root` for dashboard colors: `--stu-card-bg`, `--stu-card-border`, `--stu-accent`, `--stu-text`, etc., using neutral/universal values that look good against any background. For example, use semi-transparent backgrounds (rgba(255,255,255,0.05)) and system-neutral colors. - Provide a separate block for dark mode adaptation using Obsidian’s standard `.theme-dark` body class, adjusting your custom properties as needed, but never assuming a specific theme’s variable. - Style all new dashboard widgets as nice cards with rounded corners, subtle shadows, and smooth hover transitions. - Style the search bar container (the one we keep) so it blends beautifully with the new design but does not break its original functionality. - The CSS snippets must be copy-paste ready and work immediately after enabling in Settings → Appearance. **4. Markdown Dashboard Template** Provide a complete dashboard markdown file (with YAML frontmatter for the Homepage plugin and the `cssclasses: [dashboard]` if needed) that includes: - The retained logo and search bar at the top, unchanged. - All new widget sections using Dataview queries and embeds: - Today’s schedule (using Dataview to pull from a “Schedule” folder or note). - Deadlines/assignments (Dataview query based on tags like `#assignment`). - Exam countdown (using DataviewJS or inline Dataview math). - Active study topics (list of notes with tag `#active-study`). - Quick capture button (using Quick Add plugin’s URI or an HTML button). - Motivational quote (static or dynamic). - Course overview (Dataview list from a "Courses" folder). - The template should be fully functional and require only the user to adjust folder names or tags to match their vault (provide clear placeholders and instructions for customization). **5. Student-Specific Plugin Configuration & Workflow Tips** In addition to the installation steps, include tips on how a student might set up: - Tags for assignments, exams, classes (e.g., `#assignment`, `#exam`, `#class/MATH101`). - Using Templates for lecture notes. - Using Quick Add to capture tasks and ideas instantly. - How to structure folders (e.g., `Courses/MATH101/Lectures`, `Assignments`, etc.) so the dashboard pulls data correctly. - Optional integration with a daily note for logging study hours. **6. Installation & Setup Steps** Provide a numbered, step-by-step guide from a fresh vault to a fully functional student dashboard, including enabling the CSS snippet, installing plugins, and pasting the dashboard markdown. **Output Format** Deliver the entire guide as a single, well-structured markdown document. Use proper headings, code blocks for CSS and markdown, and numbered steps. The final result should empower any student to have a beautiful, efficient, theme-proof dashboard by simply following the copy-paste instructions.