style guide page & fix filter logic

Author: KianNH

src/components/ProductChangelog.astro

@@ -39,7 +39,7 @@ if ("product" in input) {
 			!e.data.hidden &&
 			e.data.products.some(({ id }) => id === input.product.id) &&
 			input.hideEntry !== e.id &&
-			input.scheduled === e.data.scheduled
+			input.scheduled == e.data.scheduled
 		);
 	};
 } else {
@@ -55,6 +55,8 @@ if ("product" in input) {
 }
 
 const changelogs = await getChangelogs({ filter });
+
+console.log(changelogs.length);
 ---
 
 <RSSButton href={rss} />

src/content/docs/style-guide/components/product-changelog.mdx

@@ -0,0 +1,51 @@
+---
+title: ProductChangelog
+styleGuide:
+  component: ProductChangelog
+---
+
+This component can be used to display entries from the [changelog](/changelog/) for a given product or product area.
+
+## Import
+
+```mdx
+import { ProductChangelog } from "~/components";
+```
+
+## Usage
+
+```mdx
+import { ProductChangelog } from "~/components";
+
+<ProductChangelog product="workers" />
+```
+
+## `<ProductChangelog>` Props
+
+The `product` and `area` props cannot be used at the same time.
+
+### `product`
+
+**type:** `string`
+
+The name of the product.
+
+### `area`
+
+**type:** `string`
+
+The name of the product area.
+
+### `hideEntry`
+
+**type:** `string`
+
+The name of a specific entry to hide.
+
+### `scheduled`
+
+**type:** `boolean`
+
+**default:** `false`
+
+Used to only show scheduled entries (i.e for WAF changelogs).

src/content/docs/style-guide/documentation-content-strategy/content-types/changelog.mdx

@@ -47,6 +47,8 @@ The combination of these files allows us to:
 
 Your Markdown file needs to have several special values to pull in the changelog information. These values are highlighted in the sample page.
 
+For more information about the `ProductChangelog` component, refer to the [style guide](/style-guide/components/product-changelog/).
+
 ```mdx title="/src/content/docs/dns/changelog.mdx"
 ---
 pcx_content_type: changelog
@@ -119,7 +121,6 @@ Each changelog entries has the following properties:
 - `preview_image` <Type text="string" /> <MetaInfo text="optional" />
   - Path to an image file
 - `products` <Type text="Array<String>" /> <MetaInfo text="(default: current location) optional" />
-
   - The products list is case-sensitive. Only use lowercase.
   - This should be an array of strings, each referring to the name of a file in the products collection without the file extension.
   - The folder that your entry is in, such as `src/content/changelog/workers/2025-02-13-new-product-feature.mdx`, is inferred as part of this property. If you do not want to associate the entry with additional products, you can omit it from the frontmatter entirely.