πŸ“ Memo Feature Guide

πŸ“ Memo Feature Guide

A beautiful memo management system for your Jekyll website with support for images and files.

✨ Features

  • βœ… Add memos with title, content, category, and priority
  • πŸ–ΌοΈ Upload and attach images
  • πŸ“Ž Attach files with size display
  • 🏷️ Categorize memos (General, Todo, Idea, Note)
  • ⭐ Set priorities (Normal, Important, Urgent)
  • πŸ” Search and filter memos
  • βœ“ Mark memos as completed
  • πŸ—‘οΈ Delete unwanted memos
  • πŸ’Ύ Auto-save to browser localStorage
  • πŸ“± Responsive design

🎨 Design

  • Color Scheme: Light purple gradient (#e0c3fc to #d4a5f9)
  • Modern UI: Card-based layout with smooth animations
  • Mobile-Friendly: Adapts to different screen sizes

πŸ“– Usage

On Website

  1. Visit /memos page
  2. Fill in the form:
    • Title: Optional memo title
    • Content: Main content (supports multiple lines)
    • Category: Choose from 4 categories
    • Priority: Set importance level
    • Attachments: Add images or files
  3. Click β€œAdd Memo”
  4. Your memo will appear instantly below

Command Line (for permanent storage)

# Interactive mode
./add_memo.sh

# Direct mode
ruby add_memo.rb "content" "title" "category" "priority"

Example:

ruby add_memo.rb "Fix database bug" "Bug Fix" "todo" "urgent"

Then commit to Git:

git add _data/memos.yml
git commit -m "Add new memo"
git push

πŸ—‚οΈ Files Structure

β”œβ”€β”€ memos.md              # Memo page
β”œβ”€β”€ _layouts/
β”‚   └── memo.html         # Memo layout template
β”œβ”€β”€ _data/
β”‚   └── memos.yml         # Memo data storage
β”œβ”€β”€ add_memo.sh           # Shell script for adding memos
└── add_memo.rb           # Ruby script for memo management

πŸ“Š Data Storage

  • Client-side: Browser localStorage (instant, temporary)
  • Server-side: _data/memos.yml file (permanent, synced via Git)

🎯 Categories

  • πŸ“‹ General: General notes
  • βœ… Todo: Tasks to complete
  • πŸ’‘ Idea: Creative ideas
  • πŸ“– Note: Important notes

⭐ Priorities

  • πŸ“Œ Normal: Regular priority
  • ⭐ Important: High priority
  • πŸ”₯ Urgent: Critical priority

πŸ”§ Customization

Edit _layouts/memo.html to customize:

  • Colors in CSS :root variables
  • Form fields and categories
  • Display layout
  • Attachment handling

πŸ’‘ Tips

  1. Images: Stored as base64 in localStorage
  2. Files: Limited by browser localStorage size (~5-10MB)
  3. Search: Searches in both title and content
  4. Filters: Click category buttons to filter
  5. Completion: Click βœ“ to mark as complete

πŸš€ Local Development

# Start Jekyll server
bundle exec jekyll serve

# Visit memos page
open http://localhost:4000/memos

Enjoy taking memos! πŸ“βœ¨