docs: add links to other frameworks

mrholek · mrholek · commit df9eb5f4c49d · 2022-10-25T13:40:33.000+02:00
diff --git a/packages/docs/content/4.4/components/accordion.mdx b/packages/docs/content/4.4/components/accordion.mdx
@@ -4,6 +4,8 @@ name: Accordion
 description: Build vertically collapsing accordions in combination with our React Accordion component.
 menu: Components
 route: /components/accordion
+other_frameworks: accordion
+pro_component: false
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/alert.mdx b/packages/docs/content/4.4/components/alert.mdx
@@ -4,6 +4,7 @@ name: Alert
 description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
 menu: Components
 route: /components/alert
+other_frameworks: alert
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/avatar.mdx b/packages/docs/content/4.4/components/avatar.mdx
@@ -2,9 +2,9 @@
 title: React Avatar Component
 name: Avatar
 description: React avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
-
 menu: Components
 route: /components/avatar
+other_frameworks: avatar
 ---
 
 import { CAvatar } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/badge.mdx b/packages/docs/content/4.4/components/badge.mdx
@@ -2,9 +2,9 @@
 title: React Badge Component
 name: Badge
 description: React badge component is small count and labeling component.
-
 menu: Components
 route: /components/badge
+other_frameworks: badge
 ---
 
 import { CBadge, CButton } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/breadcrumb.mdx b/packages/docs/content/4.4/components/breadcrumb.mdx
@@ -2,9 +2,9 @@
 title: React Breadcrumb Component
 name: Breadcrumb
 description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
-
 menu: Components
 route: /components/breadcrumb
+other_frameworks: breadcrumb
 ---
 
 import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/button-group.mdx b/packages/docs/content/4.4/components/button-group.mdx
@@ -4,6 +4,7 @@ name: Button group
 description: React button group component allows to group a series of buttons and power them with JavaScript.
 menu: Components
 route: /components/button-group
+other_frameworks: button-group
 ---
 
 import {
diff --git a/packages/docs/content/4.4/components/button.mdx b/packages/docs/content/4.4/components/button.mdx
@@ -4,6 +4,7 @@ name: Buttons
 description: React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize.
 menu: Components
 route: /components/buttons
+other_frameworks: button
 ---
 
 import { CButton, CCallout } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/callout.mdx b/packages/docs/content/4.4/components/callout.mdx
@@ -4,6 +4,7 @@ name: Callout
 description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
 menu: Components
 route: /components/callout
+other_frameworks: callout
 ---
 
 import { CCallout } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/card.mdx b/packages/docs/content/4.4/components/card.mdx
@@ -4,6 +4,7 @@ name: Card
 description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options.
 menu: Components
 route: /components/card
+other_frameworks: card
 ---
 
 import {
diff --git a/packages/docs/content/4.4/components/carousel.mdx b/packages/docs/content/4.4/components/carousel.mdx
@@ -4,6 +4,7 @@ name: Carousel
 description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.
 menu: Components
 route: /components/carousel
+other_frameworks: carousel
 ---
 
 import {
diff --git a/packages/docs/content/4.4/components/close-button.mdx b/packages/docs/content/4.4/components/close-button.mdx
@@ -4,6 +4,7 @@ name: Close Button
 description: A generic close button component for dismissing content like modals and alerts.
 menu: Components
 route: /components/close-button
+other_frameworks: close-button
 ---
 
 import { CCloseButton } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/collapse.mdx b/packages/docs/content/4.4/components/collapse.mdx
@@ -4,6 +4,7 @@ name: Collapse
 description: React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
 menu: Components
 route: /components/collapse
+other_frameworks: collapse
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/dropdown.mdx b/packages/docs/content/4.4/components/dropdown.mdx
@@ -4,6 +4,7 @@ name: Dropdown
 description: React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements.
 menu: Components
 route: /components/dropdown
+other_frameworks: dropdown
 ---
 
 import {
diff --git a/packages/docs/content/4.4/components/footer.mdx b/packages/docs/content/4.4/components/footer.mdx
@@ -4,6 +4,7 @@ name: Footer
 description: React footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources.
 menu: Components
 route: /components/footer
+other_frameworks: footer
 ---
 
 import { CFooter, CLink } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/header.mdx b/packages/docs/content/4.4/components/header.mdx
@@ -2,9 +2,9 @@
 title: React Header Component
 name: Header
 description: Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.
-
 menu: Components
 route: /components/header
+other_frameworks: header
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/image.mdx b/packages/docs/content/4.4/components/image.mdx
@@ -4,6 +4,7 @@ name: Image
 description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
 menu: Components
 route: /components/image
+other_frameworks: image
 ---
 
 import { CImage } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/list-group.mdx b/packages/docs/content/4.4/components/list-group.mdx
@@ -4,6 +4,7 @@ name: List group
 description: React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website.
 menu: Components
 route: /components/list-group
+other_frameworks: list-group
 ---
 
 import {
diff --git a/packages/docs/content/4.4/components/modal.mdx b/packages/docs/content/4.4/components/modal.mdx
@@ -4,6 +4,7 @@ name: Modal
 description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial.
 menu: Components
 route: /components/modal
+other_frameworks: modal
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/navbar.mdx b/packages/docs/content/4.4/components/navbar.mdx
@@ -2,9 +2,9 @@
 title: React Navbar Component
 name: Navbar
 description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more.
-
 menu: Components
 route: /components/navbar
+other_frameworks: navbar
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/navs-tabs.mdx b/packages/docs/content/4.4/components/navs-tabs.mdx
@@ -4,6 +4,7 @@ name: Navs & Tabs
 description: Documentation and examples for how to use CoreUI's included React navigation components.
 menu: Components
 route: /components/navs-tabs
+other_frameworks: navs-tabs
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/offcanvas.mdx b/packages/docs/content/4.4/components/offcanvas.mdx
@@ -4,6 +4,7 @@ name: Offcanvas
 description: React alert component allows build hidden sidebars into your project for navigation, shopping carts.
 menu: Components
 route: /components/offcanvas
+other_frameworks: offcanvas
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/pagination.mdx b/packages/docs/content/4.4/components/pagination.mdx
@@ -2,9 +2,9 @@
 title: React Pagination Component
 name: Pagination
 description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
-
 menu: Components
 route: /components/pagination
+other_frameworks: pagination
 ---
 
 import { CPagination, CPaginationItem } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/placeholder.mdx b/packages/docs/content/4.4/components/placeholder.mdx
@@ -4,6 +4,7 @@ name: Placeholder
 description: Use loading react placeholders for your components or pages to indicate something may still be loading. 
 menu: Components
 route: /components/placeholder
+other_frameworks: placeholder
 ---
 
 import { useState } from 'react'
diff --git a/packages/docs/content/4.4/components/popover.mdx b/packages/docs/content/4.4/components/popover.mdx
@@ -2,9 +2,9 @@
 title: React Popover Component
 name: Popover
 description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site.
-
 menu: Components
 route: /components/popover
+other_frameworks: popover
 ---
 
 import { CPopover, CButton } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/progress.mdx b/packages/docs/content/4.4/components/progress.mdx
@@ -2,9 +2,9 @@
 title: React Progress Component
 name: Progress
 description: Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels.
-
 menu: Components
 route: /components/progress
+other_frameworks: progress
 ---
 
 import { CProgress, CProgressBar, CButton } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/sidebar.mdx b/packages/docs/content/4.4/components/sidebar.mdx
@@ -4,6 +4,7 @@ name: Sidebar
 description:
 menu: Components
 route: /components/sidebar
+other_frameworks: sidebar
 ---
 
 import CIcon from '@coreui/icons-react'
diff --git a/packages/docs/content/4.4/components/spinner.mdx b/packages/docs/content/4.4/components/spinner.mdx
@@ -4,6 +4,7 @@ name: Spinner
 description: Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript.
 menu: Components
 route: /components/spinner
+other_frameworks: spinner
 ---
 
 import { CSpinner, CButton } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/components/table.mdx b/packages/docs/content/4.4/components/table.mdx
@@ -4,6 +4,7 @@ name: Table
 description: Documentation and examples for opt-in styling of tables.
 menu: Components
 route: /components/table
+other_frameworks: table
 ---
 
 import {
diff --git a/packages/docs/content/4.4/components/toast.mdx b/packages/docs/content/4.4/components/toast.mdx
@@ -4,6 +4,7 @@ name: Toast
 description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
 menu: Components
 route: /components/toast
+other_frameworks: toast
 ---
 
 import { useState, useRef } from 'react'
diff --git a/packages/docs/content/4.4/components/tooltip.mdx b/packages/docs/content/4.4/components/tooltip.mdx
@@ -2,9 +2,9 @@
 title: React Tooltip Component
 name: Tooltip
 description: Documentation and examples for adding React Tooltips.
-
 menu: Components
 route: /components/tooltip
+other_frameworks: tooltip
 ---
 
 import { CTooltip, CButton, CLink } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/forms/checkbox.mdx b/packages/docs/content/4.4/forms/checkbox.mdx
@@ -4,6 +4,7 @@ name: Checkbox
 description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
 menu: Forms
 route: /forms/checkbox
+other_frameworks: checkbox
 ---
 
 import { useEffect, useRef } from 'react'
diff --git a/packages/docs/content/4.4/forms/floating-labels.mdx b/packages/docs/content/4.4/forms/floating-labels.mdx
@@ -4,6 +4,7 @@ name: Floating labels
 description: React floating label component. Create beautifully simple form labels that float over your input fields.
 menu: Forms
 route: /forms/floating-labels
+other_frameworks: floating-labels
 ---
 
 import {
diff --git a/packages/docs/content/4.4/forms/input-group.mdx b/packages/docs/content/4.4/forms/input-group.mdx
@@ -4,6 +4,7 @@ name: Input group
 description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
 menu: Forms
 route: /forms/input-group
+other_frameworks: input-group
 ---
 
 import {
diff --git a/packages/docs/content/4.4/forms/input.mdx b/packages/docs/content/4.4/forms/input.mdx
@@ -4,6 +4,7 @@ name: Form control
 description: React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
 menu: Forms
 route: /forms/input
+other_frameworks: input
 ---
 
 import {
diff --git a/packages/docs/content/4.4/forms/radio.mdx b/packages/docs/content/4.4/forms/radio.mdx
@@ -4,6 +4,7 @@ name: Radio
 description: Create consistent cross-browser and cross-device radios with our React radio component.
 menu: Forms
 route: /forms/radio
+other_frameworks: radio
 ---
 
 import { useEffect, useRef } from 'react'
diff --git a/packages/docs/content/4.4/forms/range.mdx b/packages/docs/content/4.4/forms/range.mdx
@@ -4,6 +4,7 @@ name: Range
 description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization.
 menu: Forms
 route: /forms/range
+other_frameworks: range
 ---
 
 import { CForm, CFormLabel, CFormRange } from '@coreui/react/src/index'
diff --git a/packages/docs/content/4.4/forms/select.mdx b/packages/docs/content/4.4/forms/select.mdx
@@ -4,6 +4,7 @@ name: Select
 description: React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
 menu: Forms
 route: /forms/select
+other_frameworks: select
 ---
 
 import {
diff --git a/packages/docs/content/4.4/forms/switch.mdx b/packages/docs/content/4.4/forms/switch.mdx
@@ -4,6 +4,7 @@ name: Switch
 description: Create consistent cross-browser and cross-device switch component.
 menu: Forms
 route: /forms/checks-radios
+other_frameworks: switch
 ---
 
 import { useEffect, useRef } from 'react'
diff --git a/packages/docs/content/4.4/forms/textarea.mdx b/packages/docs/content/4.4/forms/textarea.mdx
@@ -4,6 +4,7 @@ name: Form control
 description: React textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
 menu: Forms
 route: /forms/textarea
+other_frameworks: textarea
 ---
 
 import {
diff --git a/packages/docs/src/components/Footer.tsx b/packages/docs/src/components/Footer.tsx
@@ -26,7 +26,7 @@ const Footer: FC = () => {
         </ul>
         <p className="mb-0">CoreUI for React is Open Source UI Components Library for React.js.</p>
         <p className="mb-0">
-          Currently v{pkg.version}. Code licensed{' '}
+          Currently v{pkg.version}. CoreUI code licensed{' '}
           <a
             href="https://github.com/coreui/coreui/blob/main/LICENSE"
             target="_blank"
@@ -38,7 +38,7 @@ const Footer: FC = () => {
           <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noreferrer">
             CC BY 3.0
           </a>
-          .
+          .<strong> CoreUI PRO requires a commercial license.</strong>
         </p>
       </CContainer>
     </CFooter>
diff --git a/packages/docs/src/components/Header.tsx b/packages/docs/src/components/Header.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 
 import CIcon from '@coreui/icons-react'
-import { cibGithub, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
+import { cibGithub, cibOpenCollective, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
 import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react'
 
 import { AppContext } from './../AppContext'
@@ -27,19 +27,22 @@ const Header: FC = () => {
               <CNavItem href="https://twitter.com/core_ui">
                 <CIcon icon={cibTwitter} size="xl" />
               </CNavItem>
+              <CNavItem href="https://opencollective.com/coreui">
+                <CIcon icon={cibOpenCollective} size="xl" />
+              </CNavItem>
             </CHeaderNav>
             <CButton
               className="d-lg-inline-block my-2 my-md-0 ms-md-3"
               color="primary"
-              href="https://coreui.io/react/#compare"
+              href="/getting-started/introduction/"
               variant="outline"
             >
               <CIcon icon={cilCloudDownload} /> Download
             </CButton>
             <CButton
               className="d-lg-inline-block my-2 my-md-0 ms-md-3"
               color="primary"
-              href="https://coreui.io/pro/react/"
+              href="https://coreui.io/pricing/?framework=react&docs=coreui-header-button"
             >
               Get CoreUI PRO
             </CButton>
diff --git a/packages/docs/src/templates/Docs.tsx b/packages/docs/src/templates/Docs.tsx
diff --git a/packages/docs/src/templates/other_frameworks.json b/packages/docs/src/templates/other_frameworks.json
