brennan/awesome-static-tools
brennan/awesome-static-tools
1
0
Fork 0
mirror of https://github.com/brennanbrown/awesome-static-tools.git synced 2025-12-21 14:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity
A curated collection of the best JavaScript libraries, CSS tricks, and interactive features for building beautiful, performant personal websites and blogs with 11ty (or any JAMstack framework). https://awesome-static-tools.netlify.app
15 commits 1 branch 0 tags 117 KiB
Find a file
Exact
Brennan Kenneth Brown 12dd728c8d feat(home): inline reading utilities for correct init; restore dark toggle in navbar; remove dark-mode demo
2025-11-06 00:48:35 -11:00
.github chore: remove old demo pages; add tufte page; update layout and homepage 2025-11-06 00:37:34 -11:00
assets feat(home): single-page JAMstack showcase (PhotoSwipe, Cusdis, tooltips, search, etc.) and SEO 2025-11-05 23:49:36 -11:00
docs feat(demos,docs): add individual demos and docs for new resources 2025-11-05 23:34:05 -11:00
scripts feat(ui): site-wide styles, header navigation, and favicon (🎈) with PNG fallbacks 2025-11-05 23:33:53 -11:00
src feat(home): inline reading utilities for correct init; restore dark toggle in navbar; remove dark-mode demo 2025-11-06 00:48:35 -11:00
.eleventy.js build(11ty): add Eleventy config, Netlify settings, and gitignore 2025-11-05 23:33:38 -11:00
.gitignore build(11ty): add Eleventy config, Netlify settings, and gitignore 2025-11-05 23:33:38 -11:00
CONTRIBUTING.md docs: update README (Deploy to Netlify), Quickstart, Structure, and Contributing 2025-11-05 23:34:18 -11:00
LICENSE Initial commit 2025-11-05 20:39:28 -11:00
netlify.toml build(11ty): add Eleventy config, Netlify settings, and gitignore 2025-11-05 23:33:38 -11:00
package-lock.json build(11ty): add Eleventy config, Netlify settings, and gitignore 2025-11-05 23:33:38 -11:00
package.json build(11ty): add Eleventy config, Netlify settings, and gitignore 2025-11-05 23:33:38 -11:00
QUICKSTART.md docs: update README (Deploy to Netlify), Quickstart, Structure, and Contributing 2025-11-05 23:34:18 -11:00
README.md docs: update README (Deploy to Netlify), Quickstart, Structure, and Contributing 2025-11-05 23:34:18 -11:00
STRUCTURE.md docs: update README (Deploy to Netlify), Quickstart, Structure, and Contributing 2025-11-05 23:34:18 -11:00

README.md

🎨 Awesome Static Tools

A curated collection of the best JavaScript libraries, CSS tricks, and interactive features for building beautiful, performant personal websites and blogs with 11ty (or any JAMstack framework).

MIT License PRs Welcome Made with Love

🚀 Deploy to Netlify

Deploy to Netlify

This will clone the repo to your account, set build to npm run build and publish _site/.

📖 Table of Contents

✨ Features

This repository collects the best-in-class JavaScript libraries and CSS techniques specifically curated for:

  • 📝 Personal blogs & writing sites
  • 🎓 Documentation sites
  • 📰 Digital publications
  • 🌐 Static sites (JAMstack)
  • 🔌 11ty (Eleventy) projects (with specific integration guides!)

All libraries are:

  • ✅ Lightweight & performant
  • ✅ Mobile-friendly & accessible
  • ✅ Framework-agnostic (works with vanilla JS)
  • ✅ Well-documented with examples
  • ✅ Actively maintained

🚀 Quick Start

  1. Browse the categories below to find features you want
  2. Read the docs/ for detailed implementation guides
  3. Run the Eleventy site locally to explore working demos: 
    npm install
npm run serve
# Open http://localhost:8080/
  4. Visit demo routes like /, /demo/, and /demos/* (listed below)

Installation Methods

Most libraries can be installed via:

NPM/Yarn:

npm install library-name
# or
yarn add library-name

CDN (for quick prototyping):

<script src="https://unpkg.com/library-name"></script>

Direct Download: Visit the library's GitHub repository and download the latest release.

📚 Categories

✍️ Text Highlighting & Annotations

Rough Notation

Hand-drawn style annotations with a sketchy, human feel.

import { annotate } from 'rough-notation';
const element = document.querySelector('#myElement');
const annotation = annotate(element, { type: 'highlight', color: 'yellow' });
annotation.show();

Mark.js

Programmatic text highlighting and search term marking.

📝 Footnotes & Sidenotes

Littlefoot.js

Converts footnotes to interactive popovers (no jQuery required!).

Tufte CSS

Beautiful sidenote styling inspired by Edward Tufte's work.

🎯 Interactive Elements

Tippy.js

Highly customizable tooltips, popovers, and dropdowns.

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

tippy('#myButton', {
  content: 'I'm a tooltip!',
  theme: 'light',
  animation: 'scale'
});

ez-tip (Alternative to Tippy.js)

A zero-dependency tooltip helper that relies on CSS custom properties for styling.

PhotoSwipe (Gallery/Lightbox)

Zero-dependency, touch-friendly image gallery for mobile and desktop.

Eleventy Image (Build-Time Optimization)

Official Eleventy plugin for responsive, next-gen images (WebP/AVIF) at build time.

🎬 Scroll Effects

AOS (Animate On Scroll)

Animate elements as you scroll.

<div data-aos="fade-up" data-aos-duration="1000">
  Content that fades up!
</div>

Reading Progress Bar

Visual indicator of reading progress.

Sal.js (Scroll Animation Library)

Performance-focused, tiny (<3kb) scroll animation library in vanilla JS. Great minimal alternative to AOS for simple reveals.

Scroll-Out

Zero-dependency utility that exposes scroll position/direction as CSS variables for CSS-driven effects.

🔤 Typography

Typetura

Fluid, responsive typography with keyframe-based scaling.

Lettering.js

Fine-grained control over typography by wrapping letters/words/lines in spans.

Reading Time Estimator

Display estimated reading time.

  • npm packages:
    • reading-time (most popular)
    • reading-time-estimator (i18n support)
    • @iamtraction/read-time
  • DIY: Simple Tutorial
import readingTime from 'reading-time';
const stats = readingTime(text);
// Output: { text: '1 min read', minutes: 1, time: 60000, words: 200 }

🖼️ Images & Media

medium-zoom

Medium-style image zoom effect.

import mediumZoom from 'medium-zoom';
mediumZoom('[data-zoomable]', {
  margin: 24,
  background: '#000',
  scrollOffset: 0
});

💻 Code & Diagrams

Prism.js

Elegant syntax highlighting for code blocks.

Mermaid.js

Diagrams and flowcharts from text.

graph TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Do Something]
    B -->|No| D[Do Something Else]

📖 Reading Experience

Pure CSS Techniques

Custom Highlight Colors

::selection {
  background-color: var(--highlight-color, yellow);
  color: var(--highlight-text-color, black);
}

Drop Caps

p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 0.8;
  margin: 0.1em 0.1em 0 0;
}

Better Text Wrapping (Modern CSS)

h1 {
  text-wrap: balance; /* Balance line lengths in headings */
}

p {
  text-wrap: pretty; /* Avoid orphans in paragraphs */
}

Reading Progress Indicators

Multiple implementations available:

🌐 Social & Sharing

Web Share API

Native sharing using the browser's built-in capabilities.

if (navigator.share) {
  await navigator.share({
    title: 'Article Title',
    text: 'Check out this article!',
    url: window.location.href
  });
}

web-social-share

Web component for social sharing (fallback for unsupported browsers).

🌙 Dark Mode

Implementation Guides

Best Practice: CSS + localStorage

// Detect system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Get saved preference or use system
const theme = localStorage.getItem('theme') || (prefersDark ? 'dark' : 'light');

// Apply theme
document.documentElement.setAttribute('data-theme', theme);

Resources:

🔧 11ty Integration

Special guides for integrating these features with Eleventy (11ty):

Shortcodes

Create custom shortcodes for easy markdown integration:

// .eleventy.js
eleventyConfig.addShortcode("highlight", function(text, color) {
  return `<mark style="background: ${color}">${text}</mark>`;
});

Filters

Add reading time as a filter:

const readingTime = require('reading-time');

eleventyConfig.addFilter("readingTime", (content) => {
  const stats = readingTime(content);
  return stats.text;
});

Markdown-it Plugins

Enhance markdown processing:

  • Syntax Highlighting: markdown-it-prism or @11ty/eleventy-plugin-syntaxhighlight
  • Footnotes: markdown-it-footnote
  • Anchors: markdown-it-anchor

📚 Full 11ty Integration Guide: View Here

⚡ Performance Tips

General Best Practices

  1. Load scripts asynchronously:

    <script src="library.js" defer></script>
<!-- or -->
<script src="library.js" async></script>

  2. Use CDNs for caching:

    • unpkg.com
    • cdnjs.com
    • jsdelivr.net

  3. Lazy load non-critical features:

    • Prefer native lazy loading for images/iframes: 
      <img src="image.jpg" loading="lazy" alt="A lazy loaded image">
<iframe src="video.html" loading="lazy" title="Video"></iframe>
    • For feature-based lazy loading, use the IntersectionObserver API.

  4. Bundle and minify:

    • Use build tools (webpack, rollup, vite)
    • Tree-shake unused code
    • Generate source maps for debugging

  5. Optimize CSS:

    • Use CSS custom properties for themes
    • Minimize reflows with will-change
    • Use content-visibility for off-screen content

Library-Specific

  • Prism.js: Only load languages you need
  • Mermaid: Load only when diagrams are present
  • AOS: Disable on slow connections
  • Tippy.js: Use singleton for multiple tooltips

🔗 Additional Resources

Curated links for deeper dives and alternatives.

Text Highlighting & Annotations

Footnotes & Sidenotes

Scroll Animations

Images & Media

Code & Diagrams

Dark Mode

11ty Ecosystem

Performance & Modern CSS

🌐 Browser Support

Most libraries support:

  • ✅ Chrome/Edge (latest 2 versions)
  • ✅ Firefox (latest 2 versions)
  • ✅ Safari (latest 2 versions)
  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)

⚠️ IE11 Note: Most modern libraries do not support IE11. Use transpilation tools if needed.

📝 Examples

This repo uses Eleventy (11ty) for DRY, reusable demos.

  1. Install and run locally:

    npm install
npm run serve
# Open http://localhost:8080/

  2. Available routes:

  • / – Examples index
  • /demo/ – Combined demo (AOS, medium-zoom, dark mode)
  • /demos/rough-notation/
  • /demos/markjs/
  • /demos/littlefoot/
  • /demos/tufte-css/
  • /demos/tippyjs/
  • /demos/aos/
  • /demos/reading-progress/
  • /demos/reading-time/
  • /demos/medium-zoom/
  • /demos/prismjs/
  • /demos/mermaid/
  • /demos/web-share/
  • /demos/dark-mode/

🤝 Contributing

Contributions are welcome! Here's how you can help:

  1. 🐛 Report bugs - Open an issue
  2. 💡 Suggest features - Open a discussion
  3. 📖 Improve docs - Submit a PR
  4. 🎨 Add examples - Share your implementations
  5. ⭐ Star this repo - Show your support!

Please read CONTRIBUTING.md for details.

📜 License

This repository is licensed under the MIT License.

Individual libraries have their own licenses - please check their respective repositories.

🙏 Acknowledgments

Special thanks to all the library authors and maintainers who created these amazing tools!

❤️ Support This Project

Ko-fi Patreon GitHub Sponsors

Every contribution—no matter the size—makes a meaningful difference. Thank you for believing in a more accessible, equitable web. 🍓

📮 Stay Connected

Made with ❤️ for the JAMstack community

Back to Top ↑