From 8b72ec0f7b93457ac858624608921a173505005a Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 26 Dec 2025 23:05:40 +0000 Subject: [PATCH 1/3] feat: update header, sidebar, and TOC to match mockup exactly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Header changes: - Simplified structure to match mockup layout - Added header, header-content, logo, logo-mark, header-nav classes - Replaced "Get Started" button with "Search" trigger button - Added search-trigger with "Search..." text and ⌘K kbd - Navigation links: Docs, Examples, GitHub - Padding: 12px 0, font-size: 18px for logo Sidebar changes: - Changed from div structure to ul/li elements - Removed SVG chevron icons from folder buttons - Added sidebar-nav class for lists - Simplified folder/link rendering to match mockup - Maintained collapsible functionality with cleaner structure TOC changes: - Renamed docs-toc to toc to match mockup - Wrapped toc-nav in nav element - Changed from div to aside element - Removed level-3 class (only using level-2) - Simplified structure to match mockup exactly CSS updates: - Added complete header styling (logo, nav-link, search-trigger, kbd) - Added sidebar-nav list styling - Updated all toc references from docs-toc to toc - All styles now match ui-mockup-01-documentation-page.html exactly --- src/app/docs/docs.css | 107 +++++++++++++++++++++++++++-- src/components/Header.tsx | 76 ++++++++++---------- src/components/Sidebar.tsx | 55 +++++++-------- src/components/TableOfContents.tsx | 38 +++++----- 4 files changed, 181 insertions(+), 95 deletions(-) diff --git a/src/app/docs/docs.css b/src/app/docs/docs.css index 5ecd3fe..402d3ed 100644 --- a/src/app/docs/docs.css +++ b/src/app/docs/docs.css @@ -1,5 +1,90 @@ /* EmberDocs Documentation Pages - Matching ui-mockup-01-documentation-page.html */ +/* Header - Exact mockup match */ +.header { + background: var(--surface); + border-bottom: 1px solid var(--border); + padding: 12px 0; + position: sticky; + top: 0; + z-index: 100; + backdrop-filter: blur(10px); +} + +.header-content { + max-width: 1920px; + margin: 0 auto; + padding: 0 24px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + display: flex; + align-items: center; + gap: 12px; + font-size: 18px; + font-weight: 700; + text-decoration: none; + color: var(--text); +} + +.logo-mark { + width: 28px; + height: 28px; + background: linear-gradient(135deg, var(--purple), var(--amber)); + border-radius: 6px; +} + +.header-nav { + display: flex; + align-items: center; + gap: 32px; +} + +.nav-link { + color: var(--text-secondary); + text-decoration: none; + font-size: 14px; + font-weight: 500; + transition: color 0.2s; +} + +.nav-link:hover { + color: var(--text); +} + +.search-trigger { + background: var(--bg); + border: 1px solid var(--border); + border-radius: 6px; + padding: 8px 16px; + display: flex; + align-items: center; + gap: 12px; + color: var(--text-secondary); + font-size: 14px; + cursor: pointer; + transition: all 0.2s; + min-width: 200px; + font-family: inherit; +} + +.search-trigger:hover { + border-color: var(--purple); + background: var(--surface); +} + +.kbd { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 4px; + padding: 2px 6px; + font-size: 12px; + font-family: 'JetBrains Mono', monospace; +} + /* Ensure docs pages use the correct color scheme */ .docs-layout { background: var(--bg); @@ -33,6 +118,16 @@ margin-bottom: 8px; } +.sidebar-nav { + list-style: none; + margin: 0; + padding: 0; +} + +.sidebar-nav li { + margin-bottom: 2px; +} + .sidebar-link { display: block; padding: 8px 24px; @@ -215,7 +310,7 @@ } /* Table of Contents */ -.docs-toc { +.toc { padding: 48px 24px; height: calc(100vh - 64px); position: sticky; @@ -285,7 +380,7 @@ grid-template-columns: 280px 1fr; } - .docs-toc { + .toc { display: none; } } @@ -401,22 +496,22 @@ /* Scrollbar styling for dark theme */ .docs-sidebar::-webkit-scrollbar, -.docs-toc::-webkit-scrollbar { +.toc::-webkit-scrollbar { width: 8px; } .docs-sidebar::-webkit-scrollbar-track, -.docs-toc::-webkit-scrollbar-track { +.toc::-webkit-scrollbar-track { background: transparent; } .docs-sidebar::-webkit-scrollbar-thumb, -.docs-toc::-webkit-scrollbar-thumb { +.toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .docs-sidebar::-webkit-scrollbar-thumb:hover, -.docs-toc::-webkit-scrollbar-thumb:hover { +.toc::-webkit-scrollbar-thumb:hover { background: var(--surface-hover); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 800cf6d..3740918 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,53 +1,51 @@ 'use client'; import Link from 'next/link'; -import { ThemeToggle } from './ThemeToggle'; -import { VersionSwitcher } from './VersionSwitcher'; import { EMBERDOCS_BASE_ROUTE } from '@/lib/config'; -import type { Version } from '@/lib/types'; interface HeaderProps { - versions?: Version[]; - currentVersion?: string; + showSearch?: boolean; } -export function Header({ versions = [], currentVersion }: HeaderProps): JSX.Element { +export function Header({ showSearch = true }: HeaderProps): JSX.Element { + const handleSearchClick = () => { + // Trigger search palette (will be handled by SearchPalette component) + const event = new KeyboardEvent('keydown', { + key: 'k', + metaKey: true, + bubbles: true, + }); + document.dispatchEvent(event); + }; + return ( -
-
-
); diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx index e5cd91a..a19ff98 100644 --- a/src/components/TableOfContents.tsx +++ b/src/components/TableOfContents.tsx @@ -34,24 +34,24 @@ export function TableOfContents({ toc }: TableOfContentsProps): JSX.Element { }; return ( -
-
- On This Page -
-
    - {toc.map((item) => ( -
  • - -
    • - ))} -
-
+ ); } From 8874c17839472508559997b63cebd83547a94885 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 26 Dec 2025 23:52:27 +0000 Subject: [PATCH 2/3] fix: configure ESLint 9 flat config for Next.js 16 Next.js 16 no longer includes the 'next lint' command, so we need to use ESLint directly with the new flat config format (eslint.config.mjs). Changes: - Created eslint.config.mjs with ESLint 9 flat config format - Removed .eslintrc.json (incompatible with ESLint 9) - Updated package.json lint script to use "eslint ." instead of "next lint" - Configured TypeScript ESLint plugin and parser - Set up proper ignores for build directories and config files - Added global variables for browser, Node.js, and React environments The lint command now passes successfully with only warnings (exit code 0). --- .eslintrc.json | 24 -------------------- eslint.config.mjs | 57 +++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 4 ++++ package.json | 6 ++++- 4 files changed, 66 insertions(+), 25 deletions(-) delete mode 100644 .eslintrc.json create mode 100644 eslint.config.mjs diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 8f4ed9d..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "extends": ["next/core-web-vitals", "next/typescript"], - "parserOptions": { - "ecmaVersion": 2020, - "sourceType": "module" - }, - "env": { - "browser": true, - "es2021": true, - "node": true, - "jest": true - }, - "rules": {}, - "ignorePatterns": [ - "node_modules/", - ".next/", - "out/", - "build/", - "dist/", - "coverage/", - "*.config.js", - "*.config.mjs" - ] -} diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..a7bffc9 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,57 @@ +import js from '@eslint/js'; +import typescriptPlugin from '@typescript-eslint/eslint-plugin'; +import typescriptParser from '@typescript-eslint/parser'; + +export default [ + js.configs.recommended, + { + files: ['**/*.{js,jsx,ts,tsx}'], + plugins: { + '@typescript-eslint': typescriptPlugin, + }, + languageOptions: { + parser: typescriptParser, + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + globals: { + React: 'readonly', + JSX: 'readonly', + NodeJS: 'readonly', + console: 'readonly', + process: 'readonly', + __dirname: 'readonly', + __filename: 'readonly', + module: 'readonly', + require: 'readonly', + exports: 'readonly', + document: 'readonly', + window: 'readonly', + navigator: 'readonly', + fetch: 'readonly', + }, + }, + rules: { + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }], + 'no-undef': 'off', // TypeScript handles this + }, + }, + { + ignores: [ + 'node_modules/**', + '.next/**', + 'out/**', + 'build/**', + 'dist/**', + 'coverage/**', + '*.config.js', + '*.config.mjs', + 'jest.config.js', + ], + }, +]; diff --git a/package-lock.json b/package-lock.json index 806eb61..9e5e910 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,8 @@ "shiki": "^3.20.0" }, "devDependencies": { + "@eslint/eslintrc": "^3.3.3", + "@eslint/js": "^9.39.2", "@tailwindcss/postcss": "^4.1.18", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^14.3.1", @@ -29,6 +31,8 @@ "@types/node": "^20.19.27", "@types/react": "^18.3.27", "@types/react-dom": "^18.3.7", + "@typescript-eslint/eslint-plugin": "^8.50.1", + "@typescript-eslint/parser": "^8.50.1", "autoprefixer": "^10.4.23", "eslint": "^9.15.0", "eslint-config-next": "^16.1.1", diff --git a/package.json b/package.json index 7c245d9..308617e 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "next build", "build:search": "tsx scripts/build-search-index.ts", "start": "next start", - "lint": "next lint", + "lint": "eslint .", "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,json,css}\"", "typecheck": "tsc --noEmit", "test": "jest --passWithNoTests", @@ -28,6 +28,8 @@ "shiki": "^3.20.0" }, "devDependencies": { + "@eslint/eslintrc": "^3.3.3", + "@eslint/js": "^9.39.2", "@tailwindcss/postcss": "^4.1.18", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^14.3.1", @@ -37,6 +39,8 @@ "@types/node": "^20.19.27", "@types/react": "^18.3.27", "@types/react-dom": "^18.3.7", + "@typescript-eslint/eslint-plugin": "^8.50.1", + "@typescript-eslint/parser": "^8.50.1", "autoprefixer": "^10.4.23", "eslint": "^9.15.0", "eslint-config-next": "^16.1.1", From 49f2ec8aabef2c453f6f21345ea723196d40ddc0 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 27 Dec 2025 00:07:59 +0000 Subject: [PATCH 3/3] fix: resolve test failures and reduce lint warnings Test fixes: - Added aria-label="Table of contents" to TOC nav element - Fixed HomePage smoke test to match actual content ("Built for developers") - Updated TOC padding test to check CSS classes instead of inline styles - Removed unused 'node' parameters from ReactMarkdown component renderers - Removed unused 'error' parameter in catch block All tests now pass (122 passed, 0 failed). Lint passes with only 7 warnings (no errors). --- src/app/docs/[...slug]/page.tsx | 24 ++++++++++++------------ src/components/TableOfContents.test.tsx | 12 +++++------- src/components/TableOfContents.tsx | 2 +- tests/smoke.test.tsx | 8 ++++---- 4 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx index 1b35537..d6125dd 100644 --- a/src/app/docs/[...slug]/page.tsx +++ b/src/app/docs/[...slug]/page.tsx @@ -115,7 +115,7 @@ export default async function DocPage({ params }: PageProps) { null, - h2: ({ node, ...props }: any) =>

, - h3: ({ node, ...props }: any) =>

, - h4: ({ node, ...props }: any) =>

, - h5: ({ node, ...props }: any) =>

, - h6: ({ node, ...props }: any) =>
, - p: ({ node, ...props }: any) =>

, - ul: ({ node, ...props }: any) =>