A modern tech blog aggregating JavaScript community content.
A tech blog based on WarsawJS branding that collects links, titles, and descriptions with previews to blogposts from the JavaScript community. Built with clean HTML, CSS, and JavaScript with no framework dependencies.
- Clean Design - Modern HTML/CSS/JavaScript implementation
- WarsawJS Branding - Consistent color scheme
- Responsive Layout - Optimized for all device sizes
- Content Aggregation - Easy integration with content sources
- Author Filtering - Filter posts by specific authors
- Search Functionality - Find content across all posts
- SEO Optimized - Open Graph tags and structured data
- Performance Focused - Fast loading and rendering
- A modern web browser
- Node.js >=12.0.0 (optional, for serving the files)
- Clone the repository
git clone https://github.com/yourusername/warsawjs-blog.git
cd warsawjs-blog- Choose your preferred method:
- Quick Start: Open the
index.htmlfile in your browser - Development Setup: Install dependencies and serve with a static server
- Quick Start: Open the
npm install
npm startThe blog is set up to display mock data, but it can be easily connected to Medium's RSS feed by uncommenting and updating the fetchMediumPosts() function in script.js.
You can use services like RSS2JSON to convert Medium's RSS feed to JSON format that can be easily consumed by the blog.
styles.css- Contains all styling informationscript.js- Contains the logic for displaying posts and search functionalityindex.html- Main HTML structure
The blog includes Open Graph (OG) and Twitter card metadata for rich social media sharing:
- Desktop OG Image:
public/images/og-image-desktop.jpeg(1200×630px) - Mobile OG Image:
public/images/og-mobile.jpeg(600×315px)
Example OG tags included:
<meta
property="og:image"
content="https://blog.warsawjs.com/public/images/og-image-desktop.jpeg"
/>
<meta property="og:image:alt" content="WarsawJS Blog banner" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />This project uses several tools to maintain code quality:
Prettier is used for consistent code formatting. You can run Prettier manually with:
npm run formatConfiguration is in .prettierrc file.
ESLint is used for code linting. You can check your code with:
npm run lintOr automatically fix issues:
npm run lint:fixConfiguration is in .eslintrc.json file.
This project uses Husky to run pre-commit hooks that automatically format and lint your code before each commit.
The pre-commit hook runs lint-staged, which ensures that:
- JavaScript files are checked with ESLint and formatted with Prettier
- HTML, CSS, JSON, and MD files are formatted with Prettier
Please see CONTRIBUTING.md for guidelines on contributing to this project.
This project is licensed under the ISC License.