@x-wave/blog 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -84
- package/consts/index.ts +0 -10
- package/index.js +1099 -1810
- package/package.json +2 -4
package/README.md
CHANGED
|
@@ -56,20 +56,6 @@ src/
|
|
|
56
56
|
├── welcome.mdx
|
|
57
57
|
├── glossary.mdx
|
|
58
58
|
└── faq.mdx
|
|
59
|
-
public/
|
|
60
|
-
└── og/
|
|
61
|
-
├── en/ # Language-specific OG images
|
|
62
|
-
│ ├── welcome-preview.png
|
|
63
|
-
│ ├── glossary-preview.png
|
|
64
|
-
│ └── faq-preview.png
|
|
65
|
-
├── es/
|
|
66
|
-
│ ├── welcome-preview.png
|
|
67
|
-
│ ├── glossary-preview.png
|
|
68
|
-
│ └── faq-preview.png
|
|
69
|
-
└── zh/
|
|
70
|
-
├── welcome-preview.png
|
|
71
|
-
├── glossary-preview.png
|
|
72
|
-
└── faq-preview.png
|
|
73
59
|
```
|
|
74
60
|
|
|
75
61
|
### 2. Set up i18n and styles
|
|
@@ -268,7 +254,6 @@ Regular content here.
|
|
|
268
254
|
| `author` | `string` | Author name. Displayed below the page title with a user icon. |
|
|
269
255
|
| `date` | `string` | Publication or update date. Displayed below the page title with "Last edited" label and calendar icon (i18n supported). |
|
|
270
256
|
| `keywords` | `string[] \| string` | Optional array of keywords or comma-separated string for SEO. Inserted into the page `<meta name="keywords">` tag. |
|
|
271
|
-
| `ogImage` | `string` | Optional Open Graph image filename (just the filename, not the full path). Images should be stored in `public/og/<language>/` folder. Used for social media sharing previews. |
|
|
272
257
|
| `hasAdvanced` | `boolean` | Enables Simple/Advanced mode toggle. Requires a `-advanced.mdx` variant. |
|
|
273
258
|
| `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. |
|
|
274
259
|
|
|
@@ -463,75 +448,6 @@ keywords: [getting started, tutorial, basics]
|
|
|
463
448
|
---
|
|
464
449
|
```
|
|
465
450
|
|
|
466
|
-
### SEO and metadata
|
|
467
|
-
|
|
468
|
-
The framework automatically handles SEO metadata using React Helmet. Page `<title>`, `<meta description>`, `<meta keywords>`, and Open Graph tags are set based on article frontmatter and site configuration.
|
|
469
|
-
|
|
470
|
-
**Article pages:**
|
|
471
|
-
- **Title**: `"{article title} | {site title}"` (if title exists in frontmatter)
|
|
472
|
-
- **Description**: Uses article `description` from frontmatter, falls back to site-level `description` from config
|
|
473
|
-
- **Keywords**: Uses article `keywords` from frontmatter (converts array to comma-separated string)
|
|
474
|
-
- **Open Graph Image**: Uses article `ogImage` filename (image path is auto-constructed from language folder)
|
|
475
|
-
|
|
476
|
-
**Open Graph tags (for social media sharing):**
|
|
477
|
-
When an article includes an `ogImage`, the framework automatically generates:
|
|
478
|
-
- `og:image` - The full image URL for social media preview
|
|
479
|
-
- `og:title` - The article title
|
|
480
|
-
- `twitter:card` - Set to `summary_large_image` for Twitter/X preview
|
|
481
|
-
- `twitter:image` - The image URL for Twitter/X sharing
|
|
482
|
-
|
|
483
|
-
**Home page:**
|
|
484
|
-
- **Title**: Site title from config
|
|
485
|
-
- **Description**: Uses site-level `description` from config
|
|
486
|
-
|
|
487
|
-
Image folder structure for serving OG images:
|
|
488
|
-
|
|
489
|
-
```
|
|
490
|
-
public/og/
|
|
491
|
-
├── en/
|
|
492
|
-
│ ├── getting-started.png # Served as /og/en/getting-started.png
|
|
493
|
-
│ └── tutorial.png # Served as /og/en/tutorial.png
|
|
494
|
-
├── es/
|
|
495
|
-
│ └── getting-started.png # Served as /og/es/getting-started.png
|
|
496
|
-
└── zh/
|
|
497
|
-
└── getting-started.png # Served as /og/zh/getting-started.png
|
|
498
|
-
```
|
|
499
|
-
|
|
500
|
-
Example setup:
|
|
501
|
-
|
|
502
|
-
```tsx
|
|
503
|
-
// app.tsx
|
|
504
|
-
<BlogProvider
|
|
505
|
-
config={{
|
|
506
|
-
title: 'My Documentation',
|
|
507
|
-
description: 'Complete guide to our platform', // Fallback description
|
|
508
|
-
supportedLanguages: ['en', 'es'],
|
|
509
|
-
navigationData: NAVIGATION_DATA,
|
|
510
|
-
}}
|
|
511
|
-
blog={blog}
|
|
512
|
-
>
|
|
513
|
-
```
|
|
514
|
-
|
|
515
|
-
Then in your MDX frontmatter:
|
|
516
|
-
|
|
517
|
-
```mdx
|
|
518
|
-
---
|
|
519
|
-
title: Getting Started
|
|
520
|
-
author: Jane Doe
|
|
521
|
-
date: 2026-02-23
|
|
522
|
-
description: Step-by-step guide to getting started in 5 minutes
|
|
523
|
-
keywords: [getting started, setup, tutorial, beginners]
|
|
524
|
-
ogImage: getting-started.png // Image at /og/en/getting-started.png (or /og/es/, /og/zh/)
|
|
525
|
-
---
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
When users share this article on social media:
|
|
529
|
-
- Facebook will show the title, description, and the OG image
|
|
530
|
-
- Twitter/X will show a large image preview with the article title
|
|
531
|
-
- LinkedIn and other platforms will use the OG metadata for rich previews
|
|
532
|
-
|
|
533
|
-
This ensures proper SEO for search engines and rich sharing previews on social media, with full support for multi-language content.
|
|
534
|
-
|
|
535
451
|
### Custom headers
|
|
536
452
|
|
|
537
453
|
If you need a custom header instead of the built-in one, simply omit the `header` config and use the provided hooks:
|
package/consts/index.ts
CHANGED
|
@@ -6,14 +6,4 @@ export const GITHUB_REPO_URL = 'https://github.com/polkadot-cloud'
|
|
|
6
6
|
|
|
7
7
|
export const STAKING_DASHBOARD_URL = 'https://staking.polkadot.cloud'
|
|
8
8
|
|
|
9
|
-
export const DEFAULT_META_TITLE =
|
|
10
|
-
'Polkadot Cloud Staking | Polkadot Staking (DOT)'
|
|
11
|
-
|
|
12
|
-
export const DEFAULT_META_DESCRIPTION =
|
|
13
|
-
'Polkadot Cloud Staking is the easiest way to stake DOT, check validator stats, manage your nominations and join nomination pools. Stake on Polkadot (DOT).'
|
|
14
|
-
|
|
15
|
-
export const DEFAULT_SITE_URL = 'https://docs.staking.polkadot.cloud'
|
|
16
|
-
|
|
17
|
-
export const DEFAULT_OG_IMAGE = `${DEFAULT_SITE_URL}/img/og-image.png`
|
|
18
|
-
|
|
19
9
|
export { NAVIGATION_DATA } from './navigation'
|