From 44a6c9889e5ee5156e6d6bdb28e4670c15d1f3f5 Mon Sep 17 00:00:00 2001
From: mrholek
Date: Sun, 13 Jul 2025 17:38:36 +0200
Subject: [PATCH] docs: update schema markup
---
packages/docs/src/components/Seo.tsx | 139 ++++++++++++++++++----
packages/docs/src/templates/MdxLayout.tsx | 3 +-
2 files changed, 121 insertions(+), 21 deletions(-)
diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx
index 26cd82d0..cbb99f62 100644
--- a/packages/docs/src/components/Seo.tsx
+++ b/packages/docs/src/components/Seo.tsx
@@ -8,9 +8,10 @@ interface SEOProps {
name?: string
image?: string
article?: string
+ pro?: boolean
}
-const SEO = ({ title, description, name, image, article }: SEOProps) => {
+const SEO = ({ title, description, name, image, article, pro }: SEOProps) => {
const { pathname } = useLocation()
const { site } = useStaticQuery(query)
@@ -35,6 +36,122 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
+ const humanize = (text: string): string => {
+ return text
+ .split('-')
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(' ')
+ }
+
+ const breadcrumbList = (startIndex = 1) => {
+ return seo.url
+ .replace('docs//', 'docs/')
+ .replace(siteUrl, '')
+ .split('/')
+ .filter(Boolean)
+ .map((item, index) => ({
+ '@type': 'ListItem',
+ position: index + startIndex,
+ name: humanize(item),
+ item: `${siteUrl}${item}`,
+ }))
+ }
+
+ const getDynamicDescription = (pathname: string, name?: string): string => {
+ if (pathname.includes('/components/') && pathname.includes('api')) {
+ return `Complete guide to CoreUI React ${name} API documentation. Learn how to use the CoreUI React ${name} component, its properties, methods, and events.`
+ }
+
+ if (pathname.includes('/components/') && pathname.includes('bootstrap')) {
+ return `Complete guide to CoreUI React ${name} usage with Bootstrap 5. Learn how to use the CoreUI React ${name} component with Bootstrap 5, including its properties, methods, and events.`
+ }
+
+ if (pathname.includes('/components/') && pathname.includes('styling')) {
+ return `Complete guide to CoreUI React ${name} component styling. Learn how to customize the CoreUI React ${name} component styles, themes, and appearance.`
+ }
+
+ if (pathname.includes('/components/')) {
+ return `Complete guide to CoreUI React ${name} components and implementation. Learn how to use the CoreUI React ${name} component in your React.js application.`
+ }
+
+ if (pathname.includes('/customize/')) {
+ return `Complete guide to CoreUI React customization and theming. Learn how to customize CoreUI React components, styles, and themes to fit your project's needs.`
+ }
+
+ if (pathname.includes('/forms/')) {
+ return `Complete guide to CoreUI React ${name} components and implementation.`
+ }
+
+ if (pathname.includes('/layouts/')) {
+ return `Complete guide to CoreUI React ${name} implementation.`
+ }
+
+ if (pathname.includes('/templates/')) {
+ return 'Complete guide to CoreUI React Templates. Learn how to download, install, customize, and use CoreUI React templates.'
+ }
+
+ if (pathname.includes('/migration/')) {
+ return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.'
+ }
+
+ return 'Complete guide to CoreUI for React.js components and implementation.'
+ }
+
+ const schema = [
+ {
+ '@context': 'https://schema.org',
+ '@type': 'BreadcrumbList',
+ itemListElement: [
+ {
+ '@type': 'ListItem',
+ position: 1,
+ name: 'CoreUI',
+ item: 'https://coreui.io',
+ },
+ {
+ '@type': 'ListItem',
+ position: 2,
+ name: 'React',
+ item: 'https://coreui.io/react/',
+ },
+ {
+ '@type': 'ListItem',
+ position: 3,
+ name: 'Documentation',
+ item: siteUrl,
+ },
+ ...breadcrumbList(4),
+ ],
+ },
+ {
+ '@context': 'https://schema.org',
+ '@type': 'TechArticle',
+ headline: `${seo.title} documentation`,
+ description: getDynamicDescription(seo.url, name,),
+ author: {
+ '@type': 'Organization',
+ name: 'CoreUI Team',
+ sameAs: 'https://github.com/coreui/',
+ },
+ publisher: {
+ '@type': 'Organization',
+ name: 'CoreUI',
+ logo: {
+ '@type': 'ImageObject',
+ url: 'https://coreui.io/images/brand/coreui-logo.svg',
+ },
+ },
+ datePublished: '2021-01-13',
+ dateModified: new Date().toISOString().split('T')[0],
+ mainEntityOfPage: {
+ '@type': 'WebPage',
+ '@id': seo.url.replace('docs//', 'docs/'),
+ },
+ version: pro ? '5.17.1' : '5.7.1',
+ proficiencyLevel: 'Beginner',
+ },
+ ]
+
return (
<>
{formattedTitle}
@@ -50,25 +167,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
{seo.title && }
{seo.description && }
{seo.image && }
- {seo.name && (
-
- )}
+ {seo.name && }
)
}
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index 00aa6f11..4fddc174 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -98,11 +98,12 @@ export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
const title = frontmatter?.title || ''
const description = frontmatter?.description || ''
const name = frontmatter?.name || ''
+ const pro = frontmatter?.pro_component || false
return (
<>
-
+
)
}
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy