Repository navigation
feat(ui): blog layout, prose styles, ThemeSwitch refactor, two-column alignment - #110
Conversation
- Blog post and listing pages: two-column grid layout with sticky sidebar, ArticleSidebar TOC + links sections, font-mono headings - Legal pages: same two-column grid with extracted headings for TOC - Prose: replace @tailwindcss/typography with custom @layer components block using shadcn tokens; add Lexical-specific styles (checklist, nested lists, ordered-list depth cycling, sub/sup) - ThemeToggle renamed to ThemeSwitch; FooterThemeSwitcher replaced by FooterThemeSwitch; Storybook story updated - TwoColumnContentBlock: add verticalAlignment select field (Top/Center/End) wired into Columns renderer via items-start/center/end - next.config.ts: turbopackServerFastRefresh disabled - Remove @tailwindcss/typography package
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| const isEditable = useLexicalEditable() | ||
| const { value } = useField({ path: 'verticalAlignment' }) | ||
|
|
||
| console.log(formSchema, value) |
There was a problem hiding this comment.
WARNING: Debug console.log(formSchema, value) left in the admin editor component. It logs on every render of the block in the Payload admin and should be removed before merge.
| console.log(formSchema, value) | |
| const { value } = useField({ path: 'verticalAlignment' }) |
| import { useBlockComponentContext } from '@payloadcms/richtext-lexical/client' | ||
| import { useLexicalEditable } from '@payloadcms/richtext-lexical/lexical/react/useLexicalEditable' | ||
| import { RenderFields } from '@payloadcms/ui' | ||
| import { RenderFields, useDocumentForm, useField, useForm } from '@payloadcms/ui' |
There was a problem hiding this comment.
WARNING: Unused imports useDocumentForm and useForm are imported from @payloadcms/ui but never used in this component (only RenderFields and useField are referenced). Remove them to avoid lint noise.
| import { RenderFields, useDocumentForm, useField, useForm } from '@payloadcms/ui' | |
| import { RenderFields, useField } from '@payloadcms/ui' |
| <Banner variant="warning"> | ||
| <div className="flex flex-col gap-3 flex-1 min-w-0"> | ||
| <Banner variant="warning" vAlignIcon> | ||
| <div className="flex flex-row gap-4 space-between justif flex-1 min-w-0"> |
There was a problem hiding this comment.
WARNING: Malformed className string: 'flex flex-row gap-4 space-between justif flex-1 min-w-0' contains two broken tokens (space-between and justif) that are not valid Tailwind utilities. The original intent was a flex row with the content spaced out. Fix to a valid class string.
| <div className="flex flex-row gap-4 space-between justif flex-1 min-w-0"> | |
| <div className="flex flex-row items-center justify-between gap-4 flex-1 min-w-0"> |
| {startCase(jobName)}: detected as stale job | ||
| </span> | ||
| <span className="text-xs font-mono opacity-60 leading-none"> | ||
| <span className="text-md font-mono opacity-60 leading-none"> |
There was a problem hiding this comment.
WARNING: text-md is not a default Tailwind font-size token (the utility is text-base); it compiles to no utility and the text size falls back to inherited. Use text-base or a custom token.
| <span className="text-md font-mono opacity-60 leading-none"> | |
| <span className="text-base font-mono opacity-60 leading-none"> |
| </span> | ||
| </div> | ||
| <div className="flex gap-2"> | ||
| <div className="flex gap-4"> |
There was a problem hiding this comment.
WARNING: The two action buttons no longer pass size="xs" (removed in this PR) but the surrounding gap was only increased to gap-4. Combined with the default size="default" (min-h-10) the buttons are now noticeably larger than the compact layout the banner previously had. Confirm this is the intended visual change, or restore size="xs".
Code Review SummaryStatus: 5 Issues Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
Files Reviewed (28 files)
Fix these issues in Kilo Cloud Reviewed by free · Input: 1.4M · Output: 30K · Cached: 1.1M |
# [1.13.0](v1.12.3...v1.13.0) (2026-10-09) ### Features * **ui:** blog layout, prose styles, ThemeSwitch refactor, two-column alignment ([#110](#110)) ([ff11d33](ff11d33))
|
🎉 This PR is included in version 1.13.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This branch was successfully deployed
1 participant
Summary
ArticleSidebar) showing TOC and a links section; legal pages get the same two-column treatment with extracted headings@tailwindcss/typography(and removed the package) with a custom@layer componentsblock using shadcn design tokens; extended with Lexical-specific styles — checklists (checkbox + strikethrough on checked items), nested list items, ordered-list depth cycling (decimal → lower-alpha → lower-roman → …), and sub/sup sizingThemeTogglerenamed toThemeSwitchthroughout;FooterThemeSwitcherreplaced byFooterThemeSwitch; Storybook story updatedverticalAlignmentselect field (Top / Center / End) wired into theColumnsrenderer viaitems-start/center/end; ranbun run generateto update typesturbopackServerFastRefresh: falseTest plan
/privacy,/imprint) renders with sidebar TOC