From 729d5109512217ff64fb55d302b6a81d78fab511 Mon Sep 17 00:00:00 2001 From: Christian Bager Bach Houmann Date: Mon, 20 Apr 2026 22:35:33 +0200 Subject: [PATCH 1/2] feat(docs): redesign landing page with Obsidian-native aesthetic MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the emoji-heavy, centered-everything landing page with a warm, typographic design tuned for the Obsidian community: - Inline SVG icons (Lucide-style) in place of emoji for features, examples, and step numbers - Purple-blue accent (#7C6EF2) replacing flat primary blue across the docs - Warm cream/slate canvas scoped to the landing page via the .landing class - Left-aligned feature and example sections with eyebrow kickers; centered hero with ⌘P keyboard chip - Single consistent card treatment (14px radius, 1px hairline, no shadows) - Rewritten copy throughout — concrete over generic - Responsive breakpoints at 640/768/1024; reduced-motion respected - React 19 JSX namespace fix --- docs/src/css/custom.css | 215 +++++--------- docs/src/pages/index.module.css | 477 ++++++++++++++++++++++++++++++-- docs/src/pages/index.tsx | 467 ++++++++++++++++++++----------- 3 files changed, 823 insertions(+), 336 deletions(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 76aff855..6841bbd5 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,186 +1,105 @@ /** * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. + * bundles Infima by default. */ -/* You can override the default Infima variables here. */ +@import url('https://rsms.me/inter/inter.css'); + :root { - /* Sophisticated blue-based color scheme */ - --ifm-color-primary: #3b82f6; - --ifm-color-primary-dark: #2563eb; - --ifm-color-primary-darker: #1d4ed8; - --ifm-color-primary-darkest: #1e40af; - --ifm-color-primary-light: #60a5fa; - --ifm-color-primary-lighter: #93bbfd; - --ifm-color-primary-lightest: #dbeafe; + /* Obsidian-ish purple-blue accent */ + --ifm-color-primary: #7c6ef2; + --ifm-color-primary-dark: #6b5cef; + --ifm-color-primary-darker: #5a4aec; + --ifm-color-primary-darkest: #4a38e9; + --ifm-color-primary-light: #8d80f5; + --ifm-color-primary-lighter: #a195f7; + --ifm-color-primary-lightest: #e6e3fd; + --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05); - - /* Custom properties for QuickAdd */ - --qa-accent: #3b82f6; - --qa-success: #10b981; - --qa-info: #0ea5e9; - - /* Typography */ - --ifm-font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --ifm-heading-font-family: var(--ifm-font-family-base); - --ifm-font-family-monospace: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; -} - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #60a5fa; - --ifm-color-primary-dark: #3b82f6; - --ifm-color-primary-darker: #2563eb; - --ifm-color-primary-darkest: #1d4ed8; - --ifm-color-primary-light: #93bbfd; - --ifm-color-primary-lighter: #bfdbfe; - --ifm-color-primary-lightest: #dbeafe; - --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05); - - /* Custom properties for QuickAdd dark mode */ - --qa-accent: #60a5fa; - --qa-success: #34d399; - --qa-info: #38bdf8; - - /* Better dark mode backgrounds */ - --ifm-background-color: #0f172a; - --ifm-background-surface-color: #1e293b; -} - -/* Custom styles for enhanced homepage */ -.feature-card { - padding: 2rem; - margin: 1rem 0; - border-radius: 8px; - background: var(--ifm-card-background-color); - border: 1px solid var(--ifm-color-emphasis-200); - transition: all 0.2s ease; - height: 100%; -} - -.feature-card:hover { - transform: translateY(-2px); - border-color: var(--ifm-color-emphasis-300); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); -} - -[data-theme='dark'] .feature-card { - border-color: var(--ifm-color-emphasis-200); -} - -[data-theme='dark'] .feature-card:hover { - box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05); -} - -/* Fix spacing for feature grid */ -.col { - padding: 0.75rem !important; -} - -.row { - margin-left: -0.75rem !important; - margin-right: -0.75rem !important; -} - -.hero-button { - font-size: 1.05rem; - padding: 0.75rem 2rem; - margin: 0.5rem; - border-radius: 6px; - transition: all 0.2s ease; - font-weight: 500; -} - -.hero-button:hover { - transform: translateY(-1px); - text-decoration: none; -} - -.hero-button--primary { - background: var(--ifm-color-primary); - color: white; - border: none; -} - -.hero-button--primary:hover { - background: var(--ifm-color-primary-dark); - color: white; -} - -.button--outline { - border: 2px solid var(--ifm-color-primary); - color: var(--ifm-color-primary); - background: var(--ifm-background-color); -} - -.button--outline:hover { - background: var(--ifm-color-primary); - color: white; - border-color: var(--ifm-color-primary); + /* Landing-page tokens (scoped via .landing class to avoid affecting docs chrome) */ + --qa-canvas: #f7f5f0; + --qa-canvas-raised: #ffffff; + --qa-ink: #18181b; + --qa-ink-muted: #52525b; + --qa-ink-subtle: #71717a; + --qa-line: rgba(24, 24, 27, 0.08); + --qa-line-strong: rgba(24, 24, 27, 0.14); + --qa-accent: #7c6ef2; + --qa-accent-soft: rgba(124, 110, 242, 0.1); + + --ifm-font-family-base: 'InterVariable', 'Inter', system-ui, -apple-system, + 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --ifm-heading-font-family: var(--ifm-font-family-base); + --ifm-font-family-monospace: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, + 'Liberation Mono', 'Courier New', monospace; } -.section-dark { - background-color: var(--ifm-background-surface-color); - border-top: 1px solid var(--ifm-color-emphasis-200); - border-bottom: 1px solid var(--ifm-color-emphasis-200); +@supports (font-variation-settings: normal) { + :root { + --ifm-font-family-base: 'InterVariable', system-ui, -apple-system, + 'Segoe UI', Roboto, sans-serif; + } } -.code-example { - background-color: var(--ifm-pre-background); - border-radius: 8px; - padding: 1rem; - margin: 1rem 0; - font-family: var(--ifm-font-family-monospace); - overflow-x: auto; -} +[data-theme='dark'] { + --ifm-color-primary: #a195f7; + --ifm-color-primary-dark: #8d80f5; + --ifm-color-primary-darker: #7c6ef2; + --ifm-color-primary-darkest: #6b5cef; + --ifm-color-primary-light: #b5abf9; + --ifm-color-primary-lighter: #c9c1fb; + --ifm-color-primary-lightest: #e6e3fd; + --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05); -/* Improve navbar appearance */ -.navbar { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -} + --qa-canvas: #17181c; + --qa-canvas-raised: #1f2126; + --qa-ink: #f4f4f5; + --qa-ink-muted: #a1a1aa; + --qa-ink-subtle: #71717a; + --qa-line: rgba(244, 244, 245, 0.08); + --qa-line-strong: rgba(244, 244, 245, 0.14); + --qa-accent: #a195f7; + --qa-accent-soft: rgba(161, 149, 247, 0.14); -[data-theme='dark'] .navbar { - box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); + --ifm-background-color: #0f1013; + --ifm-background-surface-color: #17181c; } -/* Better code blocks */ +/* Better code blocks across the whole site */ pre { - border-radius: 8px; + border-radius: 10px; } -/* Improved documentation sidebar */ +/* Docs sidebar polish */ .menu__link { border-radius: 6px; - transition: all 0.2s ease; + transition: background-color 0.15s ease, color 0.15s ease; } .menu__link:hover { - background-color: var(--ifm-color-emphasis-200); + background-color: var(--ifm-color-emphasis-100); text-decoration: none; } .menu__link--active { - background-color: var(--ifm-color-emphasis-200); - color: var(--ifm-font-color-base); + background-color: var(--qa-accent-soft); + color: var(--ifm-color-primary); font-weight: 600; } -/* Feature icons styling */ -.feature-icon { - width: 60px; - height: 60px; - margin-bottom: 1rem; - color: var(--ifm-color-primary); +.navbar { + border-bottom: 1px solid var(--ifm-color-emphasis-200); + box-shadow: none; } /* GitHub icon in navbar */ .header-github-link::before { content: ''; - width: 24px; - height: 24px; + width: 22px; + height: 22px; display: flex; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } @@ -190,5 +109,5 @@ pre { } .header-github-link:hover { - opacity: 0.6; + opacity: 0.7; } diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index 319eb2fc..d3b9dce5 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -1,47 +1,478 @@ /** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. + * QuickAdd docs landing page. + * Scoped under .landing so styles don't leak into /docs pages. */ -.heroBanner { - padding: 6rem 0; +.landing { + background: var(--qa-canvas); + color: var(--qa-ink); + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; + letter-spacing: -0.003em; +} + +.container { + max-width: 1120px; + margin: 0 auto; + padding-inline: 1.5rem; +} + +@media (min-width: 768px) { + .container { + padding-inline: 2rem; + } +} + +/* ────────────────────────────────────────────────────────── + Hero + ────────────────────────────────────────────────────────── */ + +.hero { + padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6.5rem); text-align: center; position: relative; overflow: hidden; - background: var(--ifm-background-color); - border-bottom: 1px solid var(--ifm-toc-border-color); } -@media screen and (max-width: 996px) { - .heroBanner { - padding: 3rem 1rem; - } +.hero::before { + content: ''; + position: absolute; + inset: -40% 0 auto 0; + height: 70%; + background: radial-gradient( + ellipse 60% 50% at 50% 0%, + var(--qa-accent-soft), + transparent 70% + ); + pointer-events: none; + z-index: 0; +} + +.hero > * { + position: relative; + z-index: 1; +} + +.eyebrow { + font-size: 0.8125rem; + font-weight: 600; + color: var(--qa-accent); + letter-spacing: 0.02em; + margin: 0 0 1.25rem; +} + +.heroTitle { + font-size: clamp(2.5rem, 5.5vw + 0.5rem, 4rem); + line-height: 1.05; + font-weight: 600; + letter-spacing: -0.028em; + color: var(--qa-ink); + max-width: 22ch; + margin: 0 auto 1.25rem; + text-wrap: balance; +} + +.heroSubtitle { + font-size: clamp(1.125rem, 1vw + 0.875rem, 1.3125rem); + line-height: 1.55; + color: var(--qa-ink-muted); + max-width: 52ch; + margin: 0 auto; + text-wrap: pretty; } -.buttons { +.heroActions { display: flex; align-items: center; justify-content: center; - gap: 1rem; - margin-top: 2rem; + gap: 0.75rem; + margin-top: 2.25rem; flex-wrap: wrap; } -.hero__title { - font-size: 3rem; - margin-bottom: 1rem; - font-weight: 700; +.heroChip { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 2.5rem; + padding: 0.5rem 0.875rem; + background: var(--qa-canvas-raised); + border: 1px solid var(--qa-line); + border-radius: 999px; + font-size: 0.8125rem; + color: var(--qa-ink-muted); } -@media screen and (max-width: 996px) { - .hero__title { - font-size: 2.25rem; - } +.kbd { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 1.5rem; + height: 1.5rem; + padding: 0 0.375rem; + background: var(--qa-canvas); + border: 1px solid var(--qa-line-strong); + border-bottom-width: 2px; + border-radius: 5px; + font-family: var(--ifm-font-family-monospace); + font-size: 0.75rem; + font-weight: 600; + color: var(--qa-ink); + line-height: 1; +} + +.chipArrow { + color: var(--qa-ink-subtle); +} + +.chipLabel { + font-weight: 500; + color: var(--qa-ink); } +/* ────────────────────────────────────────────────────────── + Buttons + ────────────────────────────────────────────────────────── */ + +.buttonPrimary, +.buttonPrimary:hover, +.buttonPrimary:visited { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.25rem; + background: var(--qa-accent); + color: #fff; + font-weight: 600; + font-size: 0.9375rem; + border-radius: 10px; + border: none; + text-decoration: none; + transition: transform 0.15s ease, background-color 0.15s ease, + box-shadow 0.15s ease; + box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.18); +} + +.buttonPrimary:hover { + background: var(--ifm-color-primary-dark); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(124, 110, 242, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.22); +} + +.buttonSecondary, +.buttonSecondary:hover, +.buttonSecondary:visited { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.75rem 1.125rem; + background: transparent; + color: var(--qa-ink); + font-weight: 500; + font-size: 0.9375rem; + border-radius: 10px; + text-decoration: none; + transition: background-color 0.15s ease, color 0.15s ease; +} + +.buttonSecondary:hover { + background: var(--qa-line); + color: var(--qa-ink); +} + +/* ────────────────────────────────────────────────────────── + Generic section + ────────────────────────────────────────────────────────── */ + +.section { + padding-block: clamp(4rem, 8vw, 6rem); + border-top: 1px solid var(--qa-line); +} + +.sectionHead { + display: flex; + flex-direction: column; + gap: 0.875rem; + margin-bottom: 3rem; + max-width: 780px; +} + +.sectionHead .eyebrow { + margin: 0; +} + +.sectionTitle { + font-size: clamp(1.75rem, 2.25vw + 0.5rem, 2.5rem); + line-height: 1.15; + font-weight: 600; + letter-spacing: -0.022em; + color: var(--qa-ink); + max-width: 28ch; + margin: 0; + text-wrap: balance; +} + +.sectionSubtitle { + font-size: 1.125rem; + line-height: 1.55; + color: var(--qa-ink-muted); + max-width: 56ch; + margin: 0; + text-wrap: pretty; +} + +/* ────────────────────────────────────────────────────────── + Features + ────────────────────────────────────────────────────────── */ + .features { + display: grid; + grid-template-columns: 1fr; + gap: 0.5rem; + margin: 0; + padding: 0; +} + +@media (min-width: 640px) { + .features { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 1024px) { + .features { + grid-template-columns: repeat(3, 1fr); + } +} + +.feature { display: flex; + flex-direction: column; + gap: 0.625rem; + padding: 1.75rem; + background: var(--qa-canvas-raised); + border: 1px solid var(--qa-line); + border-radius: 14px; + transition: border-color 0.2s ease, transform 0.2s ease; +} + +.feature:hover { + border-color: var(--qa-line-strong); + transform: translateY(-2px); +} + +.featureIcon { + display: inline-flex; align-items: center; - padding: 4rem 0; - width: 100%; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + margin-bottom: 0.75rem; + background: var(--qa-accent-soft); + color: var(--qa-accent); + border-radius: 9px; +} + +.featureIcon svg { + width: 1.125rem; + height: 1.125rem; +} + +.featureTitle { + font-size: 1.0625rem; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--qa-ink); + margin: 0; +} + +.featureDesc { + font-size: 0.9375rem; + line-height: 1.55; + color: var(--qa-ink-muted); + margin: 0; + text-wrap: pretty; +} + +/* ────────────────────────────────────────────────────────── + Examples + ────────────────────────────────────────────────────────── */ + +.examples { + display: grid; + grid-template-columns: 1fr; + gap: 0.5rem; +} + +@media (min-width: 768px) { + .examples { + grid-template-columns: repeat(2, 1fr); + } +} + +.example { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 1.75rem; + background: var(--qa-canvas-raised); + border: 1px solid var(--qa-line); + border-radius: 14px; + transition: border-color 0.2s ease, transform 0.2s ease; +} + +.example:hover { + border-color: var(--qa-line-strong); + transform: translateY(-2px); +} + +.exampleIcon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.25rem; + height: 2.25rem; + background: var(--qa-accent-soft); + color: var(--qa-accent); + border-radius: 9px; +} + +.exampleIcon svg { + width: 1.125rem; + height: 1.125rem; +} + +.exampleTitle { + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--qa-ink); + margin: 0.5rem 0 0; +} + +.exampleDesc { + font-size: 0.9375rem; + line-height: 1.55; + color: var(--qa-ink-muted); + margin: 0; + flex: 1; + text-wrap: pretty; +} + +.exampleLink, +.exampleLink:hover, +.exampleLink:visited { + display: inline-flex; + align-items: center; + gap: 0.25rem; + margin-top: 0.375rem; + color: var(--qa-accent); + font-weight: 500; + font-size: 0.9375rem; + text-decoration: none; +} + +.exampleLink:hover { + text-decoration: underline; + text-underline-offset: 3px; +} + +/* ────────────────────────────────────────────────────────── + Quick start + ────────────────────────────────────────────────────────── */ + +.quickStart { + padding-block: clamp(4rem, 8vw, 6rem); + border-top: 1px solid var(--qa-line); + text-align: center; +} + +.quickStart .sectionHead { + margin-inline: auto; + align-items: center; + text-align: center; +} + +.quickStart .sectionTitle { + margin-inline: auto; +} + +.steps { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; + margin-top: 0.5rem; +} + +@media (min-width: 768px) { + .steps { + grid-template-columns: repeat(3, 1fr); + gap: 2.5rem; + } +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + padding-inline: 0.5rem; +} + +.stepNumber { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + background: var(--qa-canvas-raised); + border: 1px solid var(--qa-line-strong); + border-radius: 999px; + font-family: var(--ifm-font-family-monospace); + font-feature-settings: 'tnum'; + font-variant-numeric: tabular-nums; + font-size: 0.9375rem; + font-weight: 600; + color: var(--qa-accent); +} + +.stepTitle { + font-size: 1.125rem; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--qa-ink); + margin: 0.25rem 0 0; +} + +.stepDesc { + font-size: 0.9375rem; + line-height: 1.55; + color: var(--qa-ink-muted); + max-width: 32ch; + margin: 0; + text-wrap: pretty; +} + +.quickStartCta { + margin-top: 3rem; + display: flex; + justify-content: center; +} + +/* ────────────────────────────────────────────────────────── + Reduced motion + ────────────────────────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .feature, + .example, + .buttonPrimary { + transition: none; + } + .feature:hover, + .example:hover, + .buttonPrimary:hover { + transform: none; + } } diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 4f922adb..77074408 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; @@ -7,208 +6,340 @@ import Heading from '@theme/Heading'; import styles from './index.module.css'; -type FeatureItem = { +// ────────────────────────────────────────────────────────── +// Icons (Lucide-style, 24×24, currentColor stroke) +// ────────────────────────────────────────────────────────── + +type IconProps = React.SVGProps; + +const Svg = ({children, ...props}: React.PropsWithChildren) => ( + +); + +const ZapIcon = () => ( + + + +); + +const FileTextIcon = () => ( + + + + + + + +); + +const WorkflowIcon = () => ( + + + + + +); + +const SparklesIcon = () => ( + + + + + + + +); + +const FolderTreeIcon = () => ( + + + + + + +); + +const RocketIcon = () => ( + + + + + + +); + +const BookIcon = () => ( + + + + +); + +const PenIcon = () => ( + + + + +); + +const FilmIcon = () => ( + + + + + + + + + + +); + +const ListChecksIcon = () => ( + + + + + + + +); + +// ────────────────────────────────────────────────────────── +// Content +// ────────────────────────────────────────────────────────── + +type Feature = { title: string; - icon: string; - description: JSX.Element; + icon: React.JSX.Element; + description: string; }; -const FeatureList: FeatureItem[] = [ +const features: Feature[] = [ { - title: 'Lightning Fast Capture', - icon: '⚡', - description: ( - <> - Capture thoughts, ideas, and information instantly. No more context switching - - just hit your hotkey and start typing. - - ), + title: 'Lightning-fast capture', + icon: , + description: + 'Hit one hotkey and drop content into any note. No file picker, no friction — just type and it lands where you want.', }, { - title: 'Powerful Templates', - icon: '📄', - description: ( - <> - Create complex templates with variables, dates, and dynamic content. - Works seamlessly with Obsidian templates and Templater. - - ), + title: 'Powerful templates', + icon: , + description: + 'Compose notes with dynamic variables, dates, and inline prompts. Plays well with Obsidian Templates and Templater.', }, { - title: 'Automation with Macros', - icon: '🤖', - description: ( - <> - Build powerful automation workflows with JavaScript. Chain commands, - integrate with APIs, and supercharge your vault management. - - ), + title: 'Macro automations', + icon: , + description: + 'Chain choices and user scripts into one-key workflows. Scrape metadata, update a log, open a file — all in sequence.', }, { - title: 'AI Integration', - icon: '🧠', - description: ( - <> - Connect to OpenAI, Anthropic, and other AI providers. Generate content, - summarize notes, and enhance your knowledge management. - - ), + title: 'Built-in AI', + icon: , + description: + 'Talk to OpenAI, Anthropic, or a local model. Summarize, expand, and rewrite notes without leaving Obsidian.', }, { - title: 'Flexible Organization', - icon: '📁', - description: ( - <> - Organize your choices into folders with Multi-Choice. Create custom - workflows that match your unique note-taking style. - - ), + title: 'Organize with Multis', + icon: , + description: + 'Group related choices into nested folders. Build your own menu for your own workflows.', }, { - title: 'Active Development', - icon: '🚀', - description: ( - <> - Regular updates, active community, and continuous improvements. - Your feedback shapes the future of QuickAdd. - - ), + title: 'Actively maintained', + icon: , + description: + 'Regular updates shaped by real community feedback. Battle-tested in thousands of vaults.', }, ]; -function Feature({title, icon, description}: FeatureItem) { - return ( -
-
-
{icon}
- {title} -

{description}

-
-
- ); -} +type Example = { + title: string; + icon: React.JSX.Element; + description: string; + href: string; +}; -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); +const examples: Example[] = [ + { + title: 'Book database', + icon: , + description: + 'Fetch metadata from APIs and generate rich book notes. Track ratings, quotes, and reading progress with one command.', + href: '/docs/Examples/Macro_BookFinder', + }, + { + title: 'Daily journaling', + icon: , + description: + 'Capture entries with timestamps, weather, and mood. Never miss a day with guided prompts.', + href: '/docs/Examples/Capture_AddJournalEntry', + }, + { + title: 'Media tracker', + icon: , + description: + 'Log movies and shows with auto-fetched metadata. Curate watchlists and reviews without friction.', + href: '/docs/Examples/Macro_MovieAndSeriesScript', + }, + { + title: 'Task management', + icon: , + description: + 'Send tasks to Todoist, populate Kanban boards, and run projects. Make Obsidian your productivity hub.', + href: '/docs/Examples/Capture_AddTaskToKanbanBoard', + }, +]; + +const steps = [ + { + title: 'Install', + description: + "Find QuickAdd in Obsidian's Community Plugins browser and enable it.", + }, + { + title: 'Create a choice', + description: + 'Open settings and add a Template, Capture, or Macro — or combine them into a Multi.', + }, + { + title: 'Hit your hotkey', + description: + 'Trigger QuickAdd with ⌘/Ctrl-P and pick your choice. That\u2019s it.', + }, +]; + +// ────────────────────────────────────────────────────────── +// Sections +// ────────────────────────────────────────────────────────── + +function Hero(): React.JSX.Element { return ( -
-
- - QuickAdd for Obsidian +
+
+
For Obsidian
+ + Supercharge Obsidian with one hotkey. -

- {siteConfig.tagline} +

+ Templates, captures, macros, and AI — bound to a single command. + QuickAdd turns repetitive note-taking tasks into keystrokes.

-
- - Get Started → +
+ + Read the docs - Install Plugin + Install from Obsidian →
+
); } -function HomepageFeatures(): JSX.Element { +function Features(): React.JSX.Element { return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} +
+
+
+
Features
+ + Four composable choices. Endless workflows. + +

+ Templates, Captures, Macros, and Multis combine into whatever + automation your vault needs — with AI on tap. +

+
+ {features.map((f) => ( +
+ {f.icon} +
{f.title}
+
{f.description}
+
+ ))} +
); } -function ExampleSection(): JSX.Element { +function Examples(): React.JSX.Element { return ( -
-
- - What Can You Build? - -
-
-
-

📚 Book Database

-

Automatically create book notes with metadata fetched from APIs. Add ratings, quotes, and reading progress with a single command.

- Learn how → -
-
-
-
-

📝 Daily Journaling

-

Capture journal entries with timestamps, mood tracking, and weather data. Never miss a day with automated prompts.

- Learn how → -
-
+
+
+
+
Examples
+ + What can you build? + +

+ A few things people actually ship with QuickAdd. Every example ships + with a walkthrough. +

-
-
-
-

🎬 Media Tracker

-

Track movies and TV shows with automatic metadata. Create watchlists, reviews, and recommendations.

- Learn how → -
-
-
-
-

✅ Task Management

-

Integrate with Todoist, create Kanban boards, and manage projects. Turn Obsidian into your productivity hub.

- Learn how → -
-
+
+ {examples.map((e) => ( +
+ {e.icon} +

{e.title}

+

{e.description}

+ + Learn how → + +
+ ))}
); } -function QuickStartSection(): JSX.Element { +function QuickStart(): React.JSX.Element { return ( -
-
- - Quick Start - -
-
-
-
1️⃣
-

Install QuickAdd

-

Find QuickAdd in Obsidian's Community Plugins browser and enable it.

-
-
-
-
-
2️⃣
-

Create Your First Choice

-

Open settings and create a Template, Capture, or Macro choice.

-
-
-
-
-
3️⃣
-

Start Automating

-

Trigger QuickAdd with Cmd/Ctrl+P and select your choice. That's it!

-
-
+
+
+
+
Get started
+ + Up and running in three steps. +
-
- - Read the Documentation +
    + {steps.map((s, i) => ( +
  1. + +

    {s.title}

    +

    {s.description}

    +
    2. + ))} +
+
+ + Read the documentation
@@ -216,18 +347,24 @@ function QuickStartSection(): JSX.Element { ); } -export default function Home(): JSX.Element { +// ────────────────────────────────────────────────────────── +// Page +// ────────────────────────────────────────────────────────── + +export default function Home(): React.JSX.Element { const {siteConfig} = useDocusaurusContext(); return ( - -
- - - -
+ title="QuickAdd — Supercharge your Obsidian workflow" + description={`${siteConfig.tagline} Templates, captures, macros, and AI, bound to one hotkey.`}> +
+ +
+ + + +
+
); -} \ No newline at end of file +} From 5811a6b6266b18d3a2b17ff86efdbfbc8bdb3321 Mon Sep 17 00:00:00 2001 From: Christian Bager Bach Houmann Date: Mon, 20 Apr 2026 22:46:38 +0200 Subject: [PATCH 2/2] fix(docs): address review feedback on landing redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Reset
    padding and list-style on .steps so native list numbering and left padding don't offset the quick-start grid - Introduce dedicated --qa-cta-bg/-fg tokens so primary button text clears AA (~5.68:1, was ~3.9:1 with white on #7c6ef2); darken light-mode text accent to #5a4aec to pass AA for eyebrow and example links - Add aria-label to each "Learn how →" example link so assistive tech can distinguish otherwise-identical link text --- docs/src/css/custom.css | 11 ++++++++++- docs/src/pages/index.module.css | 12 +++++++----- docs/src/pages/index.tsx | 5 ++++- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 6841bbd5..4ac74a13 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -26,8 +26,13 @@ --qa-ink-subtle: #71717a; --qa-line: rgba(24, 24, 27, 0.08); --qa-line-strong: rgba(24, 24, 27, 0.14); - --qa-accent: #7c6ef2; + /* Text/icon accent — darker shade for AA contrast on cream canvas (~5.4:1) */ + --qa-accent: #5a4aec; --qa-accent-soft: rgba(124, 110, 242, 0.1); + /* Dedicated CTA tokens — white on #5a4aec passes AA at 5.68:1 */ + --qa-cta-bg: #5a4aec; + --qa-cta-bg-hover: #4a38e9; + --qa-cta-fg: #ffffff; --ifm-font-family-base: 'InterVariable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, @@ -60,6 +65,10 @@ --qa-ink-muted: #a1a1aa; --qa-ink-subtle: #71717a; --qa-line: rgba(244, 244, 245, 0.08); + /* Button: keep #5a4aec so white text still passes AA; lighter on hover */ + --qa-cta-bg: #5a4aec; + --qa-cta-bg-hover: #6b5cef; + --qa-cta-fg: #ffffff; --qa-line-strong: rgba(244, 244, 245, 0.14); --qa-accent: #a195f7; --qa-accent-soft: rgba(161, 149, 247, 0.14); diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index d3b9dce5..80a50e84 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -140,8 +140,8 @@ align-items: center; justify-content: center; padding: 0.75rem 1.25rem; - background: var(--qa-accent); - color: #fff; + background: var(--qa-cta-bg); + color: var(--qa-cta-fg); font-weight: 600; font-size: 0.9375rem; border-radius: 10px; @@ -154,9 +154,9 @@ } .buttonPrimary:hover { - background: var(--ifm-color-primary-dark); + background: var(--qa-cta-bg-hover); transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(124, 110, 242, 0.28), + box-shadow: 0 4px 12px rgba(90, 74, 236, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); } @@ -402,7 +402,9 @@ display: grid; grid-template-columns: 1fr; gap: 2rem; - margin-top: 0.5rem; + margin: 0.5rem 0 0; + padding: 0; + list-style: none; } @media (min-width: 768px) { diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 77074408..33ecc0f7 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -305,7 +305,10 @@ function Examples(): React.JSX.Element { {e.icon}

    {e.title}

    {e.description}

    - + Learn how →