Skip to content

Lacuenta5345345/dabt

BranchesTags

Repository files navigation

Releases

Dabt: Gift Manuscript-Style Web Edition, PWA and SEO Ready

Manuscript UI Preview

Dabt is a gift-style internet edition crafted in a manuscript aesthetic. It blends modern web techniques with a careful editorial rhythm. The project targets a clean, accessible user experience while staying flexible for publishing and showcasing content as a compact, fast, offline-friendly web edition. This README lays out what the project is, how it works, and how to contribute. The core goal is to deliver a delightful reading experience that respects typography, performance, and structure.

This project uses a diverse set of technologies and topics. It covers AMP and HTML validation, BEM-based CSS tooling, static site generation, SEO, sitemap support, a small SQLite backend for simple content tasks, SSE for live updates, a PWA with offline support, and a modular approach powered by vanilla JavaScript. The combination makes it suitable for small editorial teams, hobby projects, and experimenters who want a manuscript-inspired presentation with modern web capabilities.

Overview

  • Name: Dabt
  • Theme: Gift edition in manuscript style
  • Core focus: Readability, structure, accessibility, and performance
  • Target audience: Small publishers, authors, editors, and hobbyists who want a calm, well-ordered web edition
  • Core capabilities: Static site generation, offline support, progressive enhancement, validated markup, clean typography, and a content pipeline that can scale from a few pages to a sizeable collection

Highlight reel

  • Manuscript rhythm: tuned typography and vertical rhythm for comfortable reading
  • Strong structure: BEM-inspired CSS organization with linting
  • Asset pipeline: lightweight, fast, and accessible assets
  • Validation suite: AMP and HTML validation baked in
  • SEO and discovery: sitemap support, meta data best practices, and structure for search engines
  • Performance: optimized load times, efficient fonts, lazy loading, and prefetching
  • Extensibility: plugin-friendly design with clean API boundaries
  • Internationalization-friendly: ready for multi-language content and editorial workflows
  • Reuse and sharing: easy to export and share content blocks as needed

Emojis sprinkled to reflect mood, focus, and workflow

  • 📚 Reading-friendly typography
  • ⚙️ Tooling for quality
  • 🚀 Fast delivery
  • 🧭 Clear navigation
  • 🧪 Validation-first
  • 🗺️ SEO-conscious
  • 🧱 BEM-structured CSS
  • 🧰 Modular architecture
  • 🗂️ Content-first organization
  • 🖋️ Manuscript-inspired design

Why this project exists Dabt emerges from a need to deliver a polished, gift-like online edition that looks like a manuscript while benefiting from modern web tooling. It is not a huge CMS. It is a compact, well-engineered platform that can host a personal zine, a small portfolio, or a curated collection of writings in a readable and accessible format. The manuscript styling is more than a theme; it is a guiding principle for typography, spacing, rhythm, and typographic hierarchy. The project aims to be pleasant to work with, easy to extend, and robust for publishing workflows.

Getting started quickly

  • Visit the Releases page for distribution assets and packaged builds.
  • Clone the repository and install dependencies locally.
  • Start a development server, browse the app, and iterate on content and styles.
  • Validate your pages and tune for performance and SEO.

Note about the Releases link

Table of contents

  • Overview
  • Features
  • Tech stack
  • Design principles
  • Getting started
  • Development workflow
  • Validation and quality
  • SEO, sitemap, and performance
  • PWA and offline capabilities
  • AMP and HTML validation
  • Content workflow and editorial
  • Data storage and content management (SQLite)
  • Accessibility and internationalization
  • Architecture and code structure
  • Typography and vertical rhythm
  • Styling and BEM linter
  • SSG and deployment
  • Testing strategy
  • Plugins and extendability
  • Documentation and tooling
  • Directory structure
  • Security considerations
  • Roadmap
  • FAQ
  • Contributing
  • License and authors

Features in depth Manuscript rhythm and typography

  • Vertical rhythm: The layout uses consistent spacing to produce a calm reading experience. Line heights, margins, and rhythm units are tuned to minimize visual noise.
  • Typography system: A small set of font scales, typographic toggles, and sensible defaults to ensure readability on both small screens and large displays.
  • Paper-like UI: Subtle textures, weighted typography, and gentle contrast that evoke a manuscript feel without sacrificing accessibility.

Content organization and navigation

  • Clear sections and subsections: Reading flow follows a predictable hierarchy so readers can scan quickly.
  • Breadcrumbs and indices: Readers know where they are and how to navigate back to chapters or sections.
  • Semantic HTML: Content uses proper headings, lists, and landmarks for assistive tech.

Validation and quality assurance

  • HTML validation: A built-in check ensures markup adheres to modern HTML standards.
  • AMP validation: If AMP pages are present, they pass AMP validation to keep compliant pages fast and shareable.
  • Linting: CSS and JavaScript follow consistent patterns enforced by tooling that checks naming, structure, and best practices.

SEO and discovery

  • Meta data: Page titles, descriptions, and canonical URLs are handled to maximize search relevance.
  • Sitemap: A generated sitemap helps search engines discover content quickly.
  • Accessible content: Alt text, landmark semantics, and keyboard navigation improve discovery and reach.

Performance

  • Efficient assets: Images and fonts are optimized to reduce load times.
  • Lazy loading: Non-critical assets load on demand to speed up initial render.
  • Caching strategy: Service workers manage offline support and resources reuse.

PWA and offline capabilities

  • Add to home screen: The app can be installed on devices to provide a native-like feel.
  • Offline reading: Content remains accessible with cached assets.
  • Background sync: Updates appear as content changes are published.
  • Service worker hygiene: The script minimizes work and avoids unnecessary network calls when offline.

AMP and HTML validation

  • AMP pages (where applicable) are validated to ensure fast, standards-compliant rendering.
  • Regular HTML validation runs help catch markup issues early in development.

Content workflow and editorial

  • Editorial-friendly: The content model supports chapters, sections, and metadata for each piece.
  • Versioning: Simple content versioning to track changes and preserve editor history.
  • Import/export: Content can be imported from common formats and exported for archiving.

Data storage and content management (SQLite)

  • Lightweight storage: SQLite is used for simple content tracking, indexing, or small editorial data.
  • Local-first approach: Content can be stored locally for offline use or low-latency retrieval.

Accessibility and internationalization

  • ARIA best practices: All interactive components adhere to accessibility guidelines.
  • Keyboard navigation: The interface supports full keyboard operation.
  • i18n readiness: Built with internationalization in mind.

Architecture and code structure

  • Modular design: The codebase emphasizes separation of concerns and stable API boundaries.
  • BEM-based CSS: Class naming promotes readability and maintainability.
  • Vanilla JavaScript: Small, dependency-light components that are easy to reason about.

Typography and vertical rhythm

  • Consistent spacing: Vertical rhythm ensures lines of text align nicely.
  • Readability first: Font sizes and margins support long-form reading.

Styling and tooling

  • BEM and bem-linter: CSS follows BEM conventions with linting to enforce consistency.
  • Theme tokens: Colors, typography scales, and spacing tokens provide a coherent design system.

Static site generation (SSG) and deployment

  • SSG approach: Content is rendered as static pages for fast delivery.
  • Deployment-ready: The repository includes scripts and configurations for cloud hosting and static hosting.

Testing strategy

  • Unit tests with Jest: Core logic and components tested to prevent regressions.
  • Integration tests: End-to-end checks for common user flows.
  • Accessibility tests: Basic checks ensure UI remains accessible as it evolves.

Plugins and extendability

  • Plugin-friendly: The architecture supports optional modules without impacting the core.
  • Easy extension: New features can be added via clear extension points.

Documentation and tooling

  • JSDoc: Inline and external documentation helps developers understand the codebase.
  • Developer guides: Step-by-step instructions for setting up, running, and contributing.

Directory structure

  • src/ — Source code for the app and components
  • public/ — Static assets and build-time resources
  • scripts/ — Helpers for development, builds, and tooling
  • tests/ — Test suites and utilities
  • docs/ — Documentation and design notes
  • assets/ — Images, fonts, and other media
  • configs/ — Build and lint configurations
  • locales/ — Language files for i18n

Getting started Prerequisites

Install and run

  • Install dependencies
    • npm install
    • yarn install
  • Run in development mode
    • npm run dev
    • yarn dev
  • Build for production
    • npm run build
    • yarn build
  • Run tests
    • npm test
    • yarn test

Quick-start example

Development workflow

  • Branching model
    • Use feature branches for new pages or features
    • Keep commits small and focused
    • Write meaningful commit messages
  • Code review
    • Ask for peer review on sizable changes
    • Validate that changes align with design and accessibility goals
  • Issue tracking
    • Open issues for bugs, enhancements, and editorial requests
    • Link issues to commits where possible for traceability
  • Documentation
    • Update docs/ with changes to usage, API, or editorial workflows
    • Keep examples and tutorials current
  • Localization
    • Prepare locales in locales/ and surface language toggles in the UI
    • Ensure right-to-left (RTL) support if needed

Validation and quality HTML validation

  • A defined set of rules checks markup for correctness, conformance to HTML standards, and structural integrity.
  • The validation phase catches non-semantic tags, invalid nesting, and missing alt text on images.

AMP validation

  • If AMP pages exist, they must pass AMP validity checks.
  • AMP improves performance on mobile and supports fast rendering.

CSS quality

  • BEM-linter enforces naming conventions and code structure.
  • CSS is modular and split by components to improve maintainability.

JavaScript quality

  • Jest tests verify behavior of critical functions and components.
  • The code uses vanilla JS with careful module boundaries.

SEO, sitemap, and performance

PWA and offline capabilities

  • Service workers handle caching and offline access for core assets.
  • The app can be added to the home screen on compatible devices.
  • Push and background tasks can be integrated as needed with progressive enhancement.

AMP and HTML validation (detailed)

  • AMP pages are generated where possible for performance-critical paths.
  • HTML validation ensures pages comply with HTML specs.

Content workflow and editorial (expanded)

  • Editorial metadata
    • Title, author, date, tags, and description are stored with content items.
    • A consistent schema helps editors understand the content context.
  • Content blocks
    • Chapters, sections, and block-level elements provide flexible composition.
    • Reuse content blocks to assemble pages without duplication.
  • Import/export
    • Editors can import content in common formats and export for archiving.

Data storage and content management (SQLite) (expanded)

  • Lightweight approach
    • SQLite provides a small, reliable store for metadata and content indexing.
  • Local-first design
    • The app can operate offline with a local store and later sync content if needed.
  • Simple queries
    • A minimal query layer supports common editorial tasks: finding, filtering, and sorting articles.

Accessibility and internationalization

  • ARIA roles and labels
    • All interactive controls receive accessible labels and roles.
  • Keyboard focus management
    • Focus order follows a logical flow to support keyboard users.
  • Internationalization
    • Text resources are abstracted to locales to ease translation.
    • Language selectors and right-to-left support can be added with minimal changes.

Architecture and code structure (expanded)

  • Core modules
    • Content model: Defines chapters, sections, and metadata.
    • Rendering: A lightweight renderer builds pages from content blocks.
    • Routing: A simple router maps URLs to pages.
  • Tooling and CI
    • Linting, testing, and building run through simple npm scripts.
    • CI pipelines can run on push or PR to ensure quality gates.

Typography and vertical rhythm (more detail)

  • Rhythm rules
    • Baseline grid concept with precise line heights, margins, and padding.
    • Consistent typographic scale ensures a calm reading experience.
  • Font pairing
    • Serif-tallback for headings, sans-serif for body text to reproduce manuscript feel.
    • Fallbacks chosen for broad browser compatibility.

Typography tokens and design system

  • Color tokens
    • A restrained palette supports readability and editorial tone.
  • Spacing tokens
    • Consistent increments ensure predictable spacing across components.
  • Component tokens
    • Buttons, links, and form controls use shared tokens to unify style.

Styling and tooling (more)

  • CSS organization
    • Styles live with components or feature pages for clarity.
  • Preprocessors
    • SCSS or CSS variables are used to maintain a compact and scalable stylesheet.
  • Theming
    • Light and dark themes are supported with minimal changes to markup.

SSG and deployment

  • Static-first approach
    • Content is pre-rendered into static pages for fast delivery and reliability.
  • Deployment strategies
    • Deploy to static hosting providers, CDNs, or edge networks.
    • Cache-control headers and proper fingerprinting help ensure performance.

Testing strategy (expanded)

  • Unit tests
    • Small, isolated tests cover pure functions and utilities.
  • Component tests
    • UI components tested with DOM-based tests to verify rendering.
  • Integration tests
    • Validate that content flows across pages as editors expect.
  • Accessibility tests
    • Run a11y checks to catch common issues.

Plugins and extendability (expanded)

  • Modular features
    • Add features via optional modules without breaking baseline behavior.
  • API boundaries
    • Public API surfaces have clear contracts to minimize coupling.

Documentation and tooling (expanded)

  • Developer docs
    • A dedicated docs/ folder contains setup steps, architecture diagrams, and API references.
  • Code comments
    • Inline documentation helps new contributors understand decisions.
  • JSDoc
    • Functions carry JSDoc annotations for clarity and tooling support.

Roadmap (high level)

  • SMP: Improve integration with ssg tooling and serverless deployment
  • Localization expansion: Add i18n dashboards and translation workflows
  • Enhanced editorial tools: In-editor quick add, content templates, and versioning
  • Accessibility polish: Fine-tune focus traps and keyboard navigation for complex UIs
  • Performance refinements: Explore font subsetting and image optimization strategies
  • Ecosystem plugins: Build optional plugins for analytics, search, and content import

Directory structure (deep dive)

Usage examples and patterns

  • Content blocks
    • Each page is assembled from blocks that can be reused across pages.
    • Editors can create new blocks and compose pages via a simple UI.
  • Metadata
    • Each page has title, description, date, author, and tags to improve discoverability.
  • Page rendering
    • Rendering logic is responsible for generating semantic HTML and a clean, readable structure.
  • Asset handling
    • Images are optimized and responsive. Fonts are optimized for performance.

Security considerations

  • Input sanitization
    • All user-provided content is sanitized to prevent injection attacks.
  • Dependency hygiene
    • Dependencies are scanned for known vulnerabilities and kept up to date.
  • Content isolation
    • Content rendering uses safe templates to avoid code execution in content blocks.

Releases and distribution

  • The Releases page hosts compiled assets and release notes.
  • For access to assets, visit the Releases hub at the link provided above.
  • Stay up to date by following the Releases feed and changelog notes.

FAQ

  • What is Dabt best used for?
    • A compact, manuscript-inspired web edition suitable for small publications, personal zines, and editorial showcases.
  • How does it handle offline usage?
    • It uses a service worker to cache core assets and content so readers can access pages offline.
  • Can I customize the look?
    • Yes, the design system uses tokens and a modular structure to support theming and customization.

Contributing

  • How to contribute
    • Fork the repository and create a feature branch from main.
    • Implement in small, focused commits.
    • Write tests and update documentation as needed.
    • Open a pull request with a clear description of changes.
  • Code style
    • Follow the existing style guidelines for JavaScript, CSS, and markup.
    • Use semantic HTML and accessible markup.
  • Documentation
    • Update docs/ with any API, editor workflow, or deployment changes.
    • Provide examples to help new contributors understand the feature.
  • Testing
    • Ensure tests pass locally before submitting a PR.
    • Add tests for new features and for regression cases.

Documentation and tutorial sections

  • Editor guide
    • How to write content, structure chapters, and attach metadata
    • How to import/export content
  • Developer guide
    • How to run the dev server, build, and test
    • How to extend features with plugins
  • Design guide
    • Typography, spacing, and color tokens
    • Accessibility considerations
  • Internationalization
    • How to add languages and provide translations
    • How to manage locale data and locale-specific resources

License

  • The project uses a permissive license suitable for open-source sharing.
  • See LICENSE for details.

Authors and contributors

  • Core maintainers and contributors
  • Acknowledgments for editors, designers, and testers who helped shape the project

Downloads and asset usage

Additional notes and best practices

  • Editorial discipline
    • Keep a consistent voice and structure across pages.
    • Use metadata to describe each piece and its place in the collection.
  • Performance hygiene
    • Minimize blocking work on the critical path.
    • Preload and prefetch assets that readers will likely need next.
  • Accessibility as default
    • Ensure color contrast meets guidelines.
    • Provide visible focus styles and descriptive link text.

Community and support

  • If you want help or have ideas, open an issue on GitHub.
  • For direct discussions, join the project discussions channel if available.

Maintenance and housekeeping

  • Regularly review dependencies for security updates.
  • Audit content for accessibility and performance before major releases.
  • Back up content and assets as part of the editorial workflow.

Release notes (template)

  • v1.x.x
    • Initial manuscript-style edition with core features
    • AMP and HTML validation basics
    • Basic SEO and sitemap integration
    • PWA with offline caching
  • v1.x.y
    • Improvements to typography and vertical rhythm
    • BEM-linter integration for CSS
    • SQLite-backed content metadata store
  • v2.x.x
    • Expanded editorial tools
    • Localization support
    • Enhanced image optimization
  • v3.x.x
    • SSE for live updates
    • Advanced sitemap features
    • More robust build and test pipeline

Closing notes

  • Dabt is designed to be calm, structured, and editor-friendly.
  • The manuscript-inspired aesthetic serves as a deliberate design constraint that helps readers focus on content.
  • The project remains open to improvements and new editors who want a clean, readable web edition with modern tooling.

Releases and distribution (reiterated)

End of README content.

About

Заказ на подарочное интернет-издание в стиле рукописи. Изоморфное JavaScript-приложение (MPA) с AMP, Turbo-страницы, sitemap.xml, PWA, автообновлением зависимостей и автодеплоем; Biome и Jest для проверки кода 🐙

Topics

jsdoc jest bem amp sqlite seo vanilla-js vertical-rhythm html-validation dabs weed ssg yandex-turbo github-config flipper-plugin bem-linter flipperzero flipper-zero-firmware

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages