This repository is a TypeScript monorepo of 40+ markdown-it plugins, published as individual @mdit/plugin-* npm packages plus the @mdit/helper utility package. It is a developer-facing library ecosystem, not an application: each plugin extends markdown-it with additional Markdown syntax and rendering behavior, including alerts, containers, tabs, footnotes, task lists, definition lists, abbreviations, emoji, math (KaTeX and MathJax with full and slim variants), diagrams (PlantUML/UML), image controls (size, lazyload, mark), advanced links, attribute syntax, icons, layout directives (flex/grid/columns), file include/snippet (Node-only, file-system based), and text semantics (sub, sup, mark, ins, ruby, spoiler). The plugins are consumed primarily by static-site generators such as VuePress/VitePress and by any Node or browser pipeline that renders Markdown via markdown-it.
This repository is a personal portfolio website built with Next.js 14, React, and TypeScript. It features a blog section with MDX-powered articles sourced via Contentlayer, a projects showcase, and a responsive UI built with Chakra UI. The application uses static site generation (SSG) for optimal performance and includes client-side search functionality for articles and projects. Key architectural elements include the Next.js app router, file-based routing, and a modular component structure separating layouts, UI components, and data utilities. The site implements modern web development practices such as dark/light theme support, image optimization with blur placeholders, analytics integration (Vercel and Google Analytics), and error monitoring via Highlight. Content is sourced from MDX files in the data/articles directory and static JSON files for projects and publications. The build process leverages Next.js's incremental static regeneration (ISR) capabilities through Contentlayer, ensuring content updates without full rebuilds. Notable reusable components include a custom BlurImage component that enhances perceived performance by showing a blurred placeholder during image loading, and a Callout component for styling informational, warning, and error messages in MDX content. Both components are decoupled from specific business logic and demonstrate solid encapsulation patterns suitable for extraction into other projects.
The Kross Hugo theme is a static site generator template designed for creating personal portfolio websites. It provides a complete set of HTML templates, SCSS stylesheets, and JavaScript functionality that transforms Markdown content into responsive, interactive websites using the Hugo static site generator. The theme follows Hugo's conventional directory structure with layouts for templating, assets for styling and scripts, and archetypes for content templates. It integrates modern web technologies including Bootstrap 5 (via Hugo module), Swiper for touch-enabled sliders, Shuffle for filtering and masonry layouts, and custom JavaScript for UI enhancements like sticky navigation, parallax effects, and attribute-driven styling. The theme emphasizes performance with built-in optimization for Google Page Speed scores. While much of the code is theme-specific, the implementation contains several reusable patterns that demonstrate thoughtful frontend development. Notably, the mouseParallax function in assets/js/script.js provides a self-contained implementation of mouse-followed parallax effects that could be extracted and reused in other projects with minimal modification. The theme also showcases good practices in SCSS architecture with modular styling, responsive typography scaling, and reusable mixin patterns. The project shows evidence of ongoing maintenance with compatibility for recent Hugo versions and configuration for modern deployment platforms like Netlify and Vercel. It addresses common requirements for personal websites including contact forms, social media integration, client showcases, and testimonial sliders, making it a practical solution for developers seeking to quickly deploy professional portfolio sites.