@x-wave/blog 2.4.0 → 2.4.2

package/README.md

@@ -233,8 +233,14 @@ Optional YAML at the top of your MDX file:
 ```mdx
 ---
 title: Getting Started
+description: Learn the basics in 5 minutes
 author: Jane Doe
 date: 2026-02-23
+keywords:
+  - getting started
+  - tutorial
+  - basics
+ogImage: getting-started.png
 hasAdvanced: true
 tags:
   - tutorial
@@ -253,6 +259,7 @@ Regular content here.
 | `author` | `string` | Author name. Displayed below the page title with a user icon. |
 | `date` | `string` | Publication or update date. Displayed below the page title with "Last edited" label and calendar icon (i18n supported). |
 | `keywords` | `string[] \| string` | Optional array of keywords or comma-separated string for SEO. Inserted into the page `<meta name="keywords">` tag. |
+| `ogImage` | `string` | Optional dedicated Open Graph image filename for the article. Used in the page `<meta property="og:image">` tag for social media sharing. If not provided, falls back to site-level og image if available. |
 | `hasAdvanced` | `boolean` | Enables Simple/Advanced mode toggle. Requires a `-advanced.mdx` variant. |
 | `tags` | `string[]` | Array of tag strings for categorizing content. Tags are automatically indexed by the framework when you pass `mdxFiles` to BlogProvider. Tags are clickable and show search results. |
 
@@ -269,6 +276,100 @@ src/docs/
 
 Set `hasAdvanced: true` in the simple version's frontmatter, and the framework automatically shows a toggle.
 
+### Supported Markdown
+
+The blog system supports standard Markdown and extended syntax via GitHub Flavored Markdown (GFM). Here's what you can use:
+
+#### Headings
+
+```mdx
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+#### Text Styling
+
+```mdx
+**bold text**
+*italic text*
+***bold and italic***
+~~strikethrough~~
+```
+
+#### Lists
+
+**Unordered lists:**
+```mdx
+- Item 1
+- Item 2
+  - Nested item
+```
+
+**Ordered lists:**
+```mdx
+1. First item
+2. Second item
+   1. Nested item
+```
+
+#### Links
+
+```mdx
+[External link](https://example.com)
+[Internal link](./getting-started)
+```
+
+Internal links using relative paths (starting with `./`) will automatically be configured with the correct language prefix and base path.
+
+#### Code
+
+**Inline code:**
+```mdx
+Use the `createBlogUtils()` function to setup your blog.
+```
+
+**Code blocks:**
+````mdx
+```
+const blog = createBlogUtils(mdxFiles)
+```
+````
+
+Code blocks accept generic fenced code without language specifiers.
+
+#### Blockquotes
+
+```mdx
+> This is a blockquote.
+> 
+> It can span multiple lines.
+```
+
+#### Tables
+
+```mdx
+| Column 1 | Column 2 | Column 3 |
+|----------|----------|----------|
+| Cell 1   | Cell 2   | Cell 3   |
+| Cell 4   | Cell 5   | Cell 6   |
+```
+
+#### Images
+
+```mdx
+![Alt text](./image.png)
+```
+
+Images support automatic dark mode variants. If a dark variant exists at `image-dark.png`, it will automatically be used when the dark theme is active.
+
+---
+
+> **Note**: Additional markdown features may be added in the future. Check back for updates.
+
 ## API reference
 
 ### Components
@@ -384,6 +485,26 @@ Available CSS variables include:
 
 All CSS variables are scoped to `.xw-blog-root` for isolation and to prevent conflicts with your application styles.
 
+### Link color overrides (light/dark)
+
+Link color is controlled through CSS variables in the consuming app.
+
+- `--xw-link-light`: used in light theme
+- `--xw-link-dark`: used in dark theme
+
+Set them on `.xw-blog-root` (or a parent scope) to override defaults:
+
+```css
+/* In your app.css */
+.xw-blog-root {
+  --xw-link-light: oklch(0.62 0.16 252);
+  --xw-link-dark: oklch(0.78 0.12 252);
+}
+```
+
+If either variable is not set, the framework falls back to its built-in value from `packages/styles/main.scss`.
+This override is intentionally CSS-based and is not passed through `BlogProvider`.
+
 ### Config options
 
 **BlogConfig** properties:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-wave/blog",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "type": "module",
   "exports": {
     ".": {

package/styles/index.css

@@ -161,7 +161,8 @@
   --xw-border: oklch(0.922 0 0);
   --xw-input: oklch(0.922 0 0);
   --xw-ring: oklch(0.708 0 0);
-  --xw-link: rgb(211, 48, 121);
+  /* Consumers can override link colors with --xw-link-light / --xw-link-dark. */
+  --xw-link: var(--xw-link-light, oklch(0.6 0 0));
   --xw-chart-1: oklch(0.646 0.222 41.116);
   --xw-chart-2: oklch(0.6 0.118 184.704);
   --xw-chart-3: oklch(0.398 0.07 227.392);
@@ -199,7 +200,7 @@
   --xw-border: oklch(1 0 0 / 10%);
   --xw-input: oklch(1 0 0 / 15%);
   --xw-ring: oklch(0.556 0 0);
-  --xw-link: rgb(211, 48, 121);
+  --xw-link: var(--xw-link-dark, oklch(0.738 0 0));
   --xw-chart-1: oklch(0.488 0.243 264.376);
   --xw-chart-2: oklch(0.696 0.17 162.48);
   --xw-chart-3: oklch(0.769 0.188 70.08);