From 44a6c9889e5ee5156e6d6bdb28e4670c15d1f3f5 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 13 Jul 2025 17:38:36 +0200 Subject: [PATCH 1/3] 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 ( <> - + ) } From fd20117f2642f255ae2dc09399c0177fb2aa4153 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 14 Jul 2025 16:30:15 +0200 Subject: [PATCH 2/3] chore: remove spaces --- packages/docs/src/components/Seo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx index cbb99f62..2af0c1a2 100644 --- a/packages/docs/src/components/Seo.tsx +++ b/packages/docs/src/components/Seo.tsx @@ -94,7 +94,7 @@ const SEO = ({ title, description, name, image, article, pro }: SEOProps) => { 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.' + return 'Complete guide to CoreUI for React.js components and implementation.' } const schema = [ @@ -127,7 +127,7 @@ const SEO = ({ title, description, name, image, article, pro }: SEOProps) => { '@context': 'https://schema.org', '@type': 'TechArticle', headline: `${seo.title} documentation`, - description: getDynamicDescription(seo.url, name,), + description: getDynamicDescription(seo.url, name), author: { '@type': 'Organization', name: 'CoreUI Team', From 80a58fcce390c7be865a1de9fa28494fe9781788 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 9 Aug 2025 14:44:26 +0200 Subject: [PATCH 3/3] docs: update the list of available components --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 96d149a2..34eede89 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [React Accordion](https://coreui.io/react/docs/components/accordion/) - [React Alert](https://coreui.io/react/docs/components/alert/) +- [React Autocomplete](https://coreui.io/react/docs/forms/autocomplete/) **PRO** - [React Avatar](https://coreui.io/react/docs/components/avatar/) - [React Badge](https://coreui.io/react/docs/components/badge/) - [React Breadcrumb](https://coreui.io/react/docs/components/breadcrumb/) @@ -134,7 +135,8 @@ import "bootstrap/dist/css/bootstrap.min.css"; - [React Progress](https://coreui.io/react/docs/components/progress/) - [React Radio](https://coreui.io/react/docs/forms/radio/) - [React Range](https://coreui.io/react/docs/forms/range/) -- [React Rating](https://coreui.io/react/docs/forms/rating/) +- [React Range Slider](https://coreui.io/react/docs/forms/range-slider/) **PRO** +- [React Rating](https://coreui.io/react/docs/forms/rating/) **PRO** - [React Select](https://coreui.io/react/docs/forms/select/) - [React Sidebar](https://coreui.io/react/docs/components/sidebar/) - [React Smart Pagination](https://coreui.io/react/docs/components/smart-pagination/) **PRO**