docs: fix blocks (#34)

Author: gioboa

apps/docs/content/_blocks/Alert.md

@@ -8,15 +8,7 @@ Simple version of alert that has neutral grey color.
 
 <Showcase showcase-name="Alert/AlertNeutral" >
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Alert/AlertNeutral.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Alert/AlertNeutral/index.tsx
-::
 
 </Showcase>
 
@@ -25,31 +17,19 @@ Simple version of alert that has neutral grey color.
 Green color indicates that an action went successful.
 
 <Showcase showcase-name="Alert/AlertPositive" >
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Alert/AlertPositive.tsx
-::
-::qwik-only
+
 <<<../../../website/src/routes/showcases/Alert/AlertPositive/index.tsx
-::
+
 </Showcase>
 
 ## Alert secondary
 
 This type is informative just like neutral except that its palette is more noticeable.
 
 <Showcase showcase-name="Alert/AlertSecondary" >
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Alert/AlertSecondary.tsx
-::
-::qwik-only
+
 <<<../../../website/src/routes/showcases/Alert/AlertSecondary/index.tsx
-::
+
 </Showcase>
 
 ## Alert warning
@@ -58,15 +38,8 @@ Alert can be more descriptive and its content can be splitted into title and des
 
 <Showcase showcase-name="Alert/AlertWarning" >
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Alert/AlertWarning.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Alert/AlertWarning/index.tsx
-::
+
 </Showcase>
 
 ## Alert error
@@ -75,13 +48,6 @@ This type is usually used for information displayed when an important problem oc
 
 <Showcase showcase-name="Alert/AlertError" >
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Alert/AlertError.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Alert/AlertError.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Alert/AlertError/index.tsx
-::
+
 </Showcase>

apps/docs/content/_blocks/Banners.md

@@ -6,47 +6,28 @@ Banners are components that deliver main image and content in various configurat
 
 <Showcase showcase-name="Banners/DisplayHorizontal" style="min-height:800px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Banners/DisplayHorizontal.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Banners/DisplayHorizontal.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Banners/DisplayHorizontal/index.tsx
-::
+
 </Showcase>
 
 ## Vertical Display
 
 Vertical display block with image and content below or above it.
 
 <Showcase showcase-name="Banners/DisplayVertical" style="min-height: 800px;">
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Banners/DisplayVertical.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Banners/DisplayVertical.tsx
-::
-::qwik-only
+
 <<<../../../website/src/routes/showcases/Banners/DisplayVertical/index.tsx
-::
+
 </Showcase>
 
 ## Multiple vertical Displays
 
 Four vertical displays in row on desktop.
 
 <Showcase showcase-name="Banners/DisplayVerticalMultiple" style="min-height: 750px;">
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Banners/DisplayVerticalMultiple.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Banners/DisplayVerticalMultiple.tsx
-::
-::qwik-only
+
 <<<../../../website/src/routes/showcases/Banners/DisplayVerticalMultiple/index.tsx
-::
+
 </Showcase>
 
 ## Hero
@@ -55,13 +36,6 @@ Hero acts like a layout for your hero section. You can provide main image and an
 
 <Showcase showcase-name="Banners/Hero" style="min-height:620px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Banners/Hero.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Banners/Hero.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Banners/Hero/index.tsx
-::
+
 </Showcase>

apps/docs/content/_blocks/Breadcrumbs.md

@@ -4,15 +4,7 @@ A breadcrumb trail consists of a list of links to the parent pages of the curren
 
 <Showcase showcase-name="Breadcrumbs/Breadcrumbs" style="min-height:200px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Breadcrumbs/Breadcrumbs/index.tsx
-::
 
 </Showcase>
 
@@ -21,29 +13,17 @@ A breadcrumb trail consists of a list of links to the parent pages of the curren
 Breadcrumbs block with icons as a item separator.
 
 <Showcase showcase-name="Breadcrumbs/BreadcrumbsSeparator" style="min-height: 300px;">
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx
-::
-::qwik-only
+
 <<<../../../website/src/routes/showcases/Breadcrumbs/BreadcrumbsSeparator/index.tsx
-::
+
 </Showcase>
 
 ## Breadcrumbs with home icon
 
 Breadcrumbs block with home icon as the first item.
 
 <Showcase showcase-name="Breadcrumbs/BreadcrumbsWithIcon" style="min-height: 300px;">
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx
-::
-::qwik-only
+
 <<<../../../website/src/routes/showcases/Breadcrumbs/BreadcrumbsWithIcon/index.tsx
-::
+
 </Showcase>

apps/docs/content/_blocks/Card.md

@@ -12,15 +12,7 @@ This block contain empty `anchor` element, this specific manipulation adds possi
 
 <Showcase showcase-name="Card/CardDefault" style="min-height: 600px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Card/CardDefault.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Card/CardDefault.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Card/CardDefault/index.tsx
-::
 
 </Showcase>
 
@@ -30,15 +22,7 @@ The category card view with a circle shaped image, and category title, clickable
 
 <Showcase showcase-name="Card/CategoryCard" style="min-height: 400px;">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Card/CategoryCard.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Card/CategoryCard.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Card/CategoryCard/index.tsx
-::
 
 </Showcase>
 
@@ -48,14 +32,6 @@ This type of card has only button to interact.
 
 <Showcase showcase-name="Card/CardFeature" style="min-height: 600px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Card/CardFeature.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Card/CardFeature.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Card/CardFeature/index.tsx
-::
 
 </Showcase>

apps/docs/content/_blocks/Footer.md

@@ -6,14 +6,6 @@ The Footer block is used as navigation. Usually it's at the bottom of a page and
 
 <Showcase showcase-name="Footer/FooterBasic" style="min-height: 701px;" no-paddings>
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/Footer/FooterBasic.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/Footer/FooterBasic.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/Footer/FooterBasic/index.tsx
-::
 
 </Showcase>

apps/docs/content/_blocks/NavbarBottom.md

@@ -2,67 +2,27 @@
 
 NavbarBottom block is the navigation element used in mobile view.
 
-::vue-only
 ::tip You can make the navbar items links
-Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `tag` prop to make it an `a`, `NuxtLink`, or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button)
-
-```html
-<SfButton tag="a" href="#"> Will render as an anchor tag </SfButton>
-```
-
-::
-::
-
-::react-only
-::tip You can make the navbar items links
-Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `as` prop to make it an `a`, `NuxtLink`, , or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button)
-
-```html
-<SfButton as="a" href="#"> Will render as an anchor tag </SfButton>
-```
-
-::
-::
-
-::qwik-only
-::tip You can make the navbar items links
-Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `as` prop to make it an `a`, `NuxtLink`, , or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button)
+Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `as` prop to make it an `a`, `Link`, , or any other element/component. [Learn more about this usage in the component documentation.](../components/button#button-as-a-link)
 
 ```html
 <SfButton as="a" href="#"> Will render as an anchor tag </SfButton>
 ```
 
-::
 ::
 
 ## NavbarBottom with white background
 
 <Showcase showcase-name="NavbarBottom/NavbarBottom" no-paddings style="min-height:200px">
 
-::react-only
-<<<../../../preview/next/pages/showcases/NavbarBottom/NavbarBottom.tsx
-::
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottom.vue
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/NavbarBottom/NavbarBottom/index.tsx
-::
 
 </Showcase>
 
 ## NavbarBottom with filled background
 
 <Showcase showcase-name="NavbarBottom/NavbarBottomFilled" no-paddings style="min-height:200px">
 
-::react-only
-<<<../../../preview/next/pages/showcases/NavbarBottom/NavbarBottomFilled.tsx
-::
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottomFilled.vue
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/NavbarBottom/NavbarBottomFilled/index.tsx
-::
 
 </Showcase>