mirror of https://github.com/usememos/memos.git
chore(web): remove redundant and minimal README files
Removed 3 markdown files that provided no useful documentation: - web/README.md: Single line "The frontend of Memos" (redundant) - web/src/components/kit/README.md: Single line "Base components" (minimal) - web/MARKDOWN_STYLE_GUIDE.md: Outdated styling guide (no longer applicable) Kept comprehensive documentation files: - web/src/components/MasonryView/README.md (implementation details) - web/src/themes/COLOR_GUIDE.md (design system guide) - web/src/components/ConfirmDialog/README.md (component API docs) - web/src/store/README.md (architecture patterns) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Johnny
parent
fa3e0fc7f9
commit
6fc0ef7cc2
|
|
@ -1,153 +0,0 @@
|
|||
# Markdown Styling Guide
|
||||
|
||||
This document describes the compact markdown styling approach used in this codebase.
|
||||
|
||||
## Design Principles
|
||||
|
||||
Our markdown rendering uses compact spacing optimized for memos and notes:
|
||||
|
||||
### 1. **Scoped Styles**
|
||||
All markdown styles are scoped to `.markdown-content` to avoid global pollution:
|
||||
```css
|
||||
.markdown-content p { /* scoped */ }
|
||||
```
|
||||
|
||||
### 2. **Compact Block Spacing**
|
||||
All block elements use **8px (0.5rem)** bottom margin:
|
||||
- Paragraphs
|
||||
- Lists (ul, ol)
|
||||
- Code blocks (pre)
|
||||
- Blockquotes
|
||||
- Tables
|
||||
- Horizontal rules
|
||||
|
||||
This is more compact than GitHub's standard (16px) but maintains readability for memo-style content.
|
||||
|
||||
### 3. **First/Last Child Normalization**
|
||||
```css
|
||||
.markdown-content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-content > :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
This prevents double margins at container boundaries.
|
||||
|
||||
### 4. **Nested Element Spacing**
|
||||
Nested elements (lists within lists, paragraphs within lists) use **minimal spacing** (2px/0.125rem):
|
||||
```css
|
||||
.markdown-content li > ul {
|
||||
margin-top: 0.125rem;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
```
|
||||
|
||||
### 5. **Heading Separation**
|
||||
Headings have moderate top margins (12px/0.75rem) to create visual sections:
|
||||
```css
|
||||
.markdown-content h1,
|
||||
.markdown-content h2 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
```
|
||||
|
||||
### 6. **No White-Space Preservation**
|
||||
We do NOT use `white-space: pre-line`. Spacing is controlled entirely by CSS margins, matching how GitHub/ChatGPT/Claude work.
|
||||
|
||||
## Component Architecture
|
||||
|
||||
We use a **hybrid approach**:
|
||||
|
||||
### CSS-Based (for standard elements)
|
||||
```tsx
|
||||
<div className="markdown-content">
|
||||
<ReactMarkdown>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
```
|
||||
|
||||
Standard elements (p, ul, ol, h1-h6, etc.) are styled via CSS.
|
||||
|
||||
### Component-Based (for custom elements)
|
||||
```tsx
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
input: TaskListItem, // Custom task list checkboxes
|
||||
span: Tag, // Custom #tag rendering
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
```
|
||||
|
||||
Custom elements use React components for interactivity.
|
||||
|
||||
## Comparison with Industry Standards
|
||||
|
||||
| Feature | GitHub | ChatGPT | Claude | Memos (ours) |
|
||||
|---------|--------|---------|--------|--------------|
|
||||
| Block margin | 16px | 16px | 16px | 8px (compact) ⚡ |
|
||||
| Scoped styles | `.markdown-body` | `.prose` | Custom | `.markdown-content` ✅ |
|
||||
| First/last normalization | ✅ | ✅ | ✅ | ✅ |
|
||||
| Heading underlines (h1/h2) | ✅ | ❌ | ❌ | ✅ |
|
||||
| Custom components | Few | Many | Many | Some ✅ |
|
||||
| Line height | 1.6 | 1.6 | 1.6 | 1.5 (compact) ⚡ |
|
||||
| List padding | 2em | 2em | 2em | 1.5em (compact) ⚡ |
|
||||
| Code block padding | 16px | 16px | 16px | 8-12px (compact) ⚡ |
|
||||
|
||||
**Note:** Our compact spacing is optimized for memo/note-taking apps where screen real estate is important.
|
||||
|
||||
## Examples
|
||||
|
||||
### Input
|
||||
```markdown
|
||||
1312
|
||||
|
||||
* 123123
|
||||
```
|
||||
|
||||
### Rendering
|
||||
- Paragraph "1312" with `margin-bottom: 0.5rem` (8px)
|
||||
- List with `margin-top: 0` (normalized)
|
||||
- Result: Single 8px gap between paragraph and list ✅
|
||||
|
||||
### Before (with `white-space: pre-line`)
|
||||
```
|
||||
1312
|
||||
[blank line from preserved \n\n]
|
||||
[16px margin]
|
||||
* 123123
|
||||
```
|
||||
Result: Double spacing ❌
|
||||
|
||||
### After (compact spacing, no white-space preservation)
|
||||
```
|
||||
1312
|
||||
[8px margin only]
|
||||
* 123123
|
||||
```
|
||||
Result: Clean, compact single spacing ✅
|
||||
|
||||
## Testing
|
||||
|
||||
To verify correct rendering:
|
||||
|
||||
1. **Text followed by list**: `"text\n\n* item"` → single 8px gap
|
||||
2. **List followed by text**: `"* item\n\ntext"` → single 8px gap
|
||||
3. **Nested lists**: Should have minimal spacing (2px)
|
||||
4. **Headings**: Should have 12px top margin (except first child)
|
||||
5. **Blockquotes**: Should handle nested content properly
|
||||
6. **Code blocks**: Should have 8-12px padding (compact)
|
||||
7. **Tables**: Should have compact cell padding (4px vertical, 8px horizontal)
|
||||
|
||||
## References
|
||||
|
||||
- [CommonMark Spec](https://spec.commonmark.org/)
|
||||
- [GitHub Flavored Markdown Spec](https://github.github.com/gfm/)
|
||||
- [GitHub Markdown CSS](https://github.com/sindresorhus/github-markdown-css)
|
||||
- [Tailwind Typography](https://tailwindcss.com/docs/typography-plugin)
|
||||
|
|
@ -1 +0,0 @@
|
|||
# The frontend of Memos
|
||||
|
|
@ -1 +0,0 @@
|
|||
# Base components in memos
|
||||
Loading…
Reference in New Issue