Blognote

Минималистичная блог-платформа с локальным хранением данных через FileSystem Access API.

Особенности

• FileSystem Access API - работа с локальными JSON файлами
• Минималистичный дизайн - чистый интерфейс без лишних элементов
• Темная/светлая тема - переключение одной кнопкой
• Без сервера - все данные хранятся локально

Структура

Страницы

1. blognote_feed.html - Главная страница с лентой постов (стартовая)
2. blognote_profile.html - Профиль пользователя
3. blognote_post.html - Просмотр отдельного поста
4. blognote_author.html - Страница автора со всеми его постами

Архитектура

• blognote-fs.js - FileSystem Access API обертка
• blognote-common.css - Общие стили и CSS переменные
• blognote-*.css - Стили для каждой страницы
• blognote-*.js - Логика для каждой страницы

Использование

Первый запуск

1. Откройте blognote_feed.html в браузере
2. Нажмите на иконку папки в шапке
3. Выберите папку с JSON файлами (например, example-data) или создайте новую пустую папку
4. Если папка пустая, создайте первого пользователя через редактор

Создание пользователя

1. Перейдите в редактор (кнопка "Создать пост" на главной)
2. Нажмите на круглую иконку пользователя справа
3. Нажмите "Создать пользователя"
4. Заполните форму и сохраните

Создание поста

1. На главной странице нажмите "Создать пост"
2. Заполните заголовок и содержание
3. Выберите автора из меню (круглая иконка справа)
4. Добавьте теги через запятую (опционально)
5. Нажмите "Опубликовать"

Редактирование поста

1. Откройте пост
2. Нажмите кнопку "Редактировать"
3. Внесите изменения и сохраните

Навигация

• Логотип Blognote - возврат на главную
• Иконка папки - выбор/смена папки с данными
• Иконка луны - переключение темной/светлой темы
• Круглая иконка - меню пользователей

Формат данных

users.json

[
  {
    "id": "user1",
    "name": "Имя пользователя",
    "email": "email@example.com",
    "bio": "Биография",
    "joinDate": "2024-01-15",
    "website": "https://example.com"
  }
]

posts.json

[
  {
    "id": "post1",
    "authorId": "user1",
    "title": "Заголовок поста",
    "content": "Содержимое поста с поддержкой **markdown**",
    "excerpt": "Краткое описание",
    "date": "2024-12-01",
    "tags": ["tag1", "tag2"],
    "views": 0,
    "likes": 0
  }
]

Дизайн

• Цветовая схема: Зеленый акцент (#2ecc71) на черно-белом фоне
• Типографика: Системные шрифты для быстрой загрузки
• Отступы: Минимальные, но достаточные для комфортного чтения
• Анимации: Плавные переходы без излишеств

Совместимость

Требуется браузер с поддержкой FileSystem Access API:

• Chrome 86+
• Edge 86+
• Opera 72+

Blognote - младший брат Youvi для текста

https://github.com/yuvisite/Youvi