feat: ✨ add support to filter report by tags

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
 github: WasiqB
-# patreon: # Replace with a single Patreon username
+patreon: wasiqbhamla
 # open_collective: # Replace with a single Open Collective username
 # ko_fi: # Replace with a single Ko-fi username
 # tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

CHANGELOG.md

@@ -7,8 +7,6 @@
 
 ## 4.0.0 (2026-06-04)
 
-## 4.0.0-beta.0 (2026-06-02)
-
 #### :boom: Breaking Change
 * [#512](https://github.com/WasiqB/multiple-cucumber-html-reporter/pull/512) feat!: :sparkles: redesigning report UI ([@WasiqB](https://github.com/WasiqB))
 * [#503](https://github.com/WasiqB/multiple-cucumber-html-reporter/pull/503) feat: :sparkles: migrated cjs code to typescript esm ([@WasiqB](https://github.com/WasiqB))

README.md

@@ -15,8 +15,6 @@
 
 ---
 
-![Multiple Cucumber HTML Reporter Hero](https://k9v00w0cps.ufs.sh/f/RyRlUroX9tIHggv6ZktUDRdg6Q2jyeOKb3sVunz0vik8ZlLo)
-
 ## 🌟 Why this reporter?
 
 **Multiple Cucumber HTML Reporter** is a robust reporting module that transforms standard Cucumber JSON output into stunning, feature-rich HTML reports. Unlike generic reporters, it is designed for scale and clarity.
@@ -43,10 +41,11 @@ pnpm add multiple-cucumber-html-reporter --save-dev
 ### 2. Generate Report
 Add this to your test teardown or a separate reporting script:
 
-```javascript
-const report = require("multiple-cucumber-html-reporter");
+```typescript
+// generate-report.ts
+import { generate } from 'multiple-cucumber-html-reporter';
 
-report.generate({
+generate({
   jsonDir: "./path-to-your-json-output/",
   reportPath: "./path-where-the-report-needs-to-be/",
   metadata: {
@@ -86,11 +85,11 @@ Looking for advanced configurations, framework integrations (WebdriverIO, Cypres
 
 ### Feature List Page
 
-![Feature List Page](https://k9v00w0cps.ufs.sh/f/RyRlUroX9tIHBmX5z0Dl65wyMSJIi1uf9NR8mDb2hxsUvg0q)
+![Feature List Page](./docs/public/images/feature-list-page.jpeg)
 
 ### Feature Details Page
 
-![Feature Details Page](https://k9v00w0cps.ufs.sh/f/RyRlUroX9tIHrRZ0l6Vnro8S9IAVk0MmygGfwCKQLeR7sEhZ)
+![Feature Details Page](./docs/public/images/feature-detail-page.jpeg)
 
 ---
 
@@ -114,6 +113,14 @@ Contributions are what make the open source community such an amazing place to l
 
 If you find this project useful, please consider [sponsoring the maintainer](https://github.com/sponsors/WasiqB). Your support helps keep the project maintained and improved!
 
+## 💗 Repo Activity
+
+![Multiple Cucumber HTML Reporter Repo activity](https://repobeats.axiom.co/api/embed/b0964ed36e8c350255ca9b3f357459af82d712a4.svg "Repobeats analytics image")
+
+## ⭐ Star History
+
+[![Star History Chart](https://api.star-history.com/chart?repos=WasiqB/multiple-cucumber-html-reporter&type=timeline&legend=bottom-right)](https://www.star-history.com/?repos=WasiqB%2Fmultiple-cucumber-html-reporter&type=timeline&legend=bottom-right)
+
 ## ⚖️ License
 
 Distributed under the MIT License. See `LICENSE` for more information.

biome.json

@@ -7,13 +7,7 @@
   },
   "files": {
     "includes": [
-      "**/*.ts",
-      "**/*.{ts,tsx,json,jsonc,mjs}",
-      "**/*.json",
-      "**/*.js",
-      "!!**/dist",
-      "!!**/node_modules",
-      "!!**/.run",
+      "**/*.{ts,js,tsx,json,jsonc,mjs}",
       "!!docs/src/components/ui",
       "!!reporter/src/templates",
       "!!reporter/src/test/unit/data/**/*.json"

docs/content/docs/frameworks/webdriverio.mdx

@@ -68,9 +68,9 @@ export const config: WebdriverIO.Config = {
 Check out all the supported options for the reporter [here](https://webdriver.io/docs/wdio-cucumberjs-json-reporter#options).
 </Callout>
 
-#### Create Reports Folder [step]
+#### Delete Reports Folder [step]
 
-In the `onPrepare` hook, we create the reports folder if it doesn't exist.
+In the `onPrepare` hook, we delete the reports folder if it exists. This helps in generating a fresh report every time the tests are run.
 
 This can be done as shown in the below example:
 
@@ -269,9 +269,9 @@ export const config: WebdriverIO.Config = {
 };
 ```
 
-#### Create Reports Folder [step]
+#### Delete Reports Folder [step]
 
-In the `onPrepare` hook, we create the reports folder if it doesn't exist.
+In the `onPrepare` hook, we delete the reports folder if it exists. This helps in generating a fresh report every time the tests are run.
 
 This can be done as shown in the below example:
 

docs/content/docs/index.mdx

@@ -40,11 +40,11 @@ This sample reports is the old UI report. It will be updated with the new UI soo
 
 ### Features List Page
 
-![Features Overview](https://k9v00w0cps.ufs.sh/f/RyRlUroX9tIHBmX5z0Dl65wyMSJIi1uf9NR8mDb2hxsUvg0q)
+![Features Overview](/images/feature-list-page.jpeg)
 
 ### Feature Details Page
 
-![Feature Details](https://k9v00w0cps.ufs.sh/f/RyRlUroX9tIHrRZ0l6Vnro8S9IAVk0MmygGfwCKQLeR7sEhZ)
+![Feature Details](/images/feature-detail-page.jpeg)
 
 ### Why choose this reporter?
 

docs/source.config.ts

@@ -1,4 +1,4 @@
-import { remarkSteps } from 'fumadocs-core/mdx-plugins';
+import { remarkImage, remarkSteps } from 'fumadocs-core/mdx-plugins';
 import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';
 import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
 import lastModified from 'fumadocs-mdx/plugins/last-modified';
@@ -21,6 +21,6 @@ export const docs = defineDocs({
 export default defineConfig({
   plugins: [lastModified()],
   mdxOptions: {
-    remarkPlugins: [remarkSteps],
+    remarkPlugins: [remarkSteps, remarkImage],
   },
 });

docs/src/app/(home)/features/page.tsx

@@ -9,8 +9,9 @@ import { buttonVariants } from '@/components/ui/button';
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import featuresDataJson from '@/data/features.json';
+import imagesDataJson from '@/data/image-links.json';
 import statsDataJson from '@/data/stats.json';
-import type { FeaturesData, ProjectStats } from '@/data/types';
+import type { FeaturesData, ImageLinks, ProjectStats } from '@/data/types';
 import { cn } from '@/lib/cn';
 
 const iconMap: Record<string, React.ReactNode> = {
@@ -22,6 +23,7 @@ const iconMap: Record<string, React.ReactNode> = {
 
 export default function FeaturesPage() {
   const { hero, accordion, cta } = featuresDataJson as FeaturesData;
+  const images = imagesDataJson as ImageLinks;
   const { stats } = statsDataJson as ProjectStats;
 
   return (
@@ -74,26 +76,24 @@ export default function FeaturesPage() {
               </div>
             </motion.div>
 
-            {hero.image && (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.8, delay: 0.2 }}
-                className='relative'
-              >
-                <div className='absolute -inset-4 bg-sky-500/10 blur-3xl rounded-full opacity-50' />
-                <div className='relative rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-2xl overflow-hidden aspect-4/3'>
-                  <Image
-                    src={hero.image}
-                    alt='Analytics Dashboard'
-                    width={2070}
-                    height={1552}
-                    className='object-cover w-full h-full filter brightness-90 contrast-125'
-                  />
-                  <div className='absolute inset-0 bg-linear-to-tr from-emerald-900/40 to-transparent' />
-                </div>
-              </motion.div>
-            )}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className='relative'
+            >
+              <div className='absolute -inset-4 bg-sky-500/10 blur-3xl rounded-full opacity-50' />
+              <div className='relative rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-2xl overflow-hidden aspect-4/3'>
+                <Image
+                  src={images[hero.image]}
+                  alt='Analytics Dashboard'
+                  width={2070}
+                  height={1552}
+                  className='object-cover w-full h-full filter brightness-90 contrast-125'
+                />
+                <div className='absolute inset-0 bg-linear-to-tr from-emerald-900/40 to-transparent' />
+              </div>
+            </motion.div>
           </div>
         </section>
       )}
@@ -186,7 +186,7 @@ export default function FeaturesPage() {
                                     className='relative rounded-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden shadow-xl aspect-video cursor-zoom-in group/img'
                                   >
                                     <Image
-                                      src={img}
+                                      src={images[img]}
                                       alt={`${item.title} - ${imgIdx + 1}`}
                                       fill
                                       className='object-cover transition-transform duration-500 group-hover/img:scale-105'
@@ -201,7 +201,7 @@ export default function FeaturesPage() {
                                 <DialogContent className='max-w-[95vw] sm:max-w-[95vw] h-[90vh] p-0 border-none bg-black/40 backdrop-blur-sm shadow-none focus:outline-none flex items-center justify-center'>
                                   <div className='relative w-full h-full p-4 md:p-12'>
                                     <Image
-                                      src={img}
+                                      src={images[img]}
                                       alt={item.title}
                                       fill
                                       className='object-contain transition-all duration-300'

docs/src/app/(home)/how-it-works/page.tsx

@@ -8,7 +8,8 @@ import Image from 'next/image';
 import { FaGithub, FaGitlab, FaJenkins } from 'react-icons/fa6';
 import { Terminal } from '@/components/ui/terminal';
 import howItWorksDataJson from '@/data/how-it-works.json';
-import type { HowItWorksData } from '@/data/types';
+import imageDataJson from '@/data/image-links.json';
+import type { HowItWorksData, ImageLinks } from '@/data/types';
 import { cn } from '@/lib/cn';
 
 const iconMap: Record<string, React.ReactNode> = {
@@ -31,6 +32,7 @@ const platformIconMap: Record<string, React.ReactNode> = {
 
 export default function HowItWorksPage() {
   const { hero, steps, analysis, cicd } = howItWorksDataJson as HowItWorksData;
+  const image = (imageDataJson as ImageLinks)[analysis.image];
 
   return (
     <main className='flex flex-col gap-24 pb-20 overflow-x-hidden m-10'>
@@ -163,22 +165,20 @@ export default function HowItWorksPage() {
               </div>
             )}
 
-            {analysis.image && (
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                className='relative rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-2 shadow-2xl overflow-hidden'
-              >
-                <Image
-                  src={analysis.image}
-                  alt='Cucumber Report Dashboard'
-                  width={1200}
-                  height={600}
-                  className='rounded-xl object-cover w-full h-auto opacity-90'
-                />
-              </motion.div>
-            )}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className='relative rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-2 shadow-2xl overflow-hidden'
+            >
+              <Image
+                src={image}
+                alt='Cucumber Report Dashboard'
+                width={1200}
+                height={600}
+                className='rounded-xl object-cover w-full h-auto opacity-90'
+              />
+            </motion.div>
           </section>
         )}
 

docs/src/app/(home)/page.tsx

@@ -8,8 +8,9 @@ import Link from 'next/link';
 import { FaGithub } from 'react-icons/fa6';
 import { buttonVariants } from '@/components/ui/button';
 import homeDataJson from '@/data/home.json';
+import imagesDataJson from '@/data/image-links.json';
 import statsDataJson from '@/data/stats.json';
-import type { HomeData, ProjectStats } from '@/data/types';
+import type { HomeData, ImageLinks, ProjectStats } from '@/data/types';
 import { cn } from '@/lib/cn';
 
 const iconMap: Record<string, React.ReactNode> = {
@@ -28,6 +29,7 @@ const iconMap: Record<string, React.ReactNode> = {
 export default function HomePage() {
   const { hero, features, setup, community, trustedBy } = homeDataJson as HomeData;
   const { stats } = statsDataJson as ProjectStats;
+  const heroImage = (imagesDataJson as ImageLinks)[hero.image];
 
   return (
     <main className='flex flex-col gap-24 pb-20 overflow-x-hidden m-10'>
@@ -94,27 +96,24 @@ export default function HomePage() {
                 )}
               </div>
             </motion.div>
-
-            {hero.image && (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.8, delay: 0.2 }}
-                className='relative'
-              >
-                <div className='absolute -inset-4 bg-emerald-500/20 blur-3xl rounded-full opacity-50' />
-                <div className='relative rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-950/50 backdrop-blur-sm overflow-hidden shadow-2xl p-1'>
-                  <Image
-                    src={hero.image}
-                    alt='Cucumber Report Dashboard'
-                    width={800}
-                    height={500}
-                    className='rounded-xl object-contain w-full h-auto'
-                    priority
-                  />
-                </div>
-              </motion.div>
-            )}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className='relative'
+            >
+              <div className='absolute -inset-4 bg-emerald-500/20 blur-3xl rounded-full opacity-50' />
+              <div className='relative rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-950/50 backdrop-blur-sm overflow-hidden shadow-2xl p-1'>
+                <Image
+                  src={heroImage}
+                  alt='Cucumber Report Dashboard'
+                  width={800}
+                  height={500}
+                  className='rounded-xl object-contain w-full h-auto'
+                  priority
+                />
+              </div>
+            </motion.div>
           </div>
         </section>
       )}