cdn.duyet.net

Modern, high-performance CDN hosting JavaScript libraries, utilities, and CSS for blog projects.

✨ Features

🚀 Modern Build System - Vite-powered with automatic minification and compression
📦 Optimized Delivery - Source maps, Gzip, and Brotli compression
🔒 Secure - HTTPS, security headers, automated vulnerability scanning
🎯 Versioned API - Stable URLs with /v1/ and /v2/ endpoints
⚡ Performance - Aggressive caching, lazy loading, smooth scrolling
🛠️ Developer Friendly - TypeScript support, comprehensive documentation
✅ Quality Assured - ESLint, Prettier, automated testing, CI/CD
♿ Accessible - Respects reduced motion preferences, ARIA labels

📚 Available Libraries

Utilities (v2)

Smooth Scroll

Provides buttery-smooth scrolling behavior with pulse algorithm.

<script src="https://cdn.duyet.net/v2/js/smooth-scroll.min.js"></script>

Features:

✅ Respects prefers-reduced-motion
✅ Cross-browser support (Chrome, Firefox, Safari, Edge)
✅ Keyboard and mouse wheel support
✅ Configurable animation timing and easing

Configuration:

// Optional: Configure before script loads
window.smoothScrollOptions = {
  frameRate: 300,
  animationTime: 1000,
  stepSize: 85,
  pulseAlgorithm: true,
  keyboardSupport: true,
  respectReducedMotion: true
};

// Or configure after loading
SmoothScroll.configure({
  animationTime: 800
});

Lazy Load

Modern image lazy loading with IntersectionObserver.

<script src="https://cdn.duyet.net/v2/js/lazyload.min.js"></script>

<!-- In your HTML -->
<img class="lazy"
     data-src="image.jpg"
     data-srcset="image-400w.jpg 400w, image-800w.jpg 800w"
     alt="Description">

Features:

✅ IntersectionObserver with scroll fallback
✅ Responsive images (srcset) support
✅ Loading states and error handling
✅ Configurable threshold and root margin

API:

// Refresh for dynamically added images
LazyLoad.refresh();

// Load all images immediately
LazyLoad.loadAll();

// Configure
LazyLoad.configure({
  selector: 'img.lazy',
  rootMargin: '50px',
  threshold: 0.01
});

Displays Blogger/Blogspot recent posts without document.write().

<div id="recent-posts-widget"></div>
<script src="https://cdn.duyet.net/v2/js/recent-posts.min.js"></script>
<script src="YOUR_BLOG_URL/feeds/posts/default?alt=json-in-script&callback=showRecentPosts"></script>

Configuration:

window.recentPostsConfig = {
  numposts: 5,
  showpostdate: true,
  showpostsummary: true,
  numchars: 100,
  containerId: 'recent-posts-widget'
};

Legacy Libraries (v1)

React DnD 2.1.4

<script src="https://cdn.duyet.net/react-dnd/dist/ReactDnD.min.js"></script>

React Tags 3.0.1

<script src="https://cdn.duyet.net/react-tags/dist/ReactTags.min.js"></script>

Draft.js

<script src="https://cdn.duyet.net/Draft/Draft.js"></script>

Google Code Prettify

<script src="https://cdn.duyet.net/code-prettify/loader/run_prettify.js"></script>
<link rel="stylesheet" href="https://cdn.duyet.net/prettify_skin.css">

🚀 Quick Start

Using via CDN

Simply include the scripts in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog</title>
</head>
<body>
  <!-- Your content -->
  <img class="lazy" data-src="image.jpg" alt="Lazy loaded">

  <!-- Include CDN scripts -->
  <script src="https://cdn.duyet.net/v2/js/smooth-scroll.min.js"></script>
  <script src="https://cdn.duyet.net/v2/js/lazyload.min.js"></script>
</body>
</html>

Self-Hosting

Clone the repository:

git clone https://github.com/duyet/cdn.duyet.net.git
cd cdn.duyet.net

Install dependencies:
```
npm install
```
Build for production:
```
npm run build
```
Serve the dist/ directory with your web server.

🛠️ Development

Prerequisites

Node.js >= 18.0.0
npm >= 9.0.0

Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Run tests with UI
npm run test:ui

# Run linting
npm run lint

# Format code
npm run format

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

cdn.duyet.net/
├── src/                    # Modern source files
│   ├── smooth-scroll.js    # Smooth scrolling library
│   ├── lazyload.js        # Image lazy loading
│   └── recent-posts.js    # Blog widget
├── v1/                    # Version 1 API (stable)
│   ├── js/
│   └── css/
├── v2/                    # Version 2 API (current)
│   ├── js/
│   └── css/
├── code-prettify/         # Google Code Prettify
├── Draft/                 # Draft.js editor
├── react-dnd/            # React DnD library
├── react-tags/           # React Tags input
├── .github/              # GitHub Actions workflows
├── vite.config.js        # Vite configuration
├── package.json          # Dependencies & scripts
├── _headers              # Cache & security headers
└── README.md             # This file

📊 Performance

Gzip Compression: Enabled for all assets
Brotli Compression: Enabled for modern browsers
Cache Headers: Aggressive caching with immutable flag
Source Maps: Available for debugging
Minification: Terser optimization

🔒 Security

✅ HTTPS only
✅ Security headers (CSP, X-Frame-Options, etc.)
✅ Automated dependency scanning (Dependabot)
✅ Regular security audits (npm audit, Snyk)
✅ No inline scripts or eval()

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Credits

Smooth Scroll: Original by Balazs Galambosi, Pulse Algorithm by Michael Herf
Code Prettify: Google
Draft.js: Facebook
React DnD: Dan Abramov
React Tags: Various contributors

📮 Contact

Website: duyet.net
GitHub: @duyet

📈 Changelog

See CHANGELOG.md for version history and updates.

Made with ❤️ by Duyet

This site is open source. Improve this page.