Skip to content

Commit 737b9d5

Browse files
gioboagioboa
authored
docs: fix blocks (#34)
1 parent fe37191 commit 737b9d5

24 files changed

+26
-220
lines changed

‎apps/docs/content/_blocks/Alert.md‎

Lines changed: 6 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,7 @@ Simple version of alert that has neutral grey color.
88

99
<Showcase showcase-name="Alert/AlertNeutral" >
1010

11-
::vue-only
12-
<<<../../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
13-
::
14-
::react-only
15-
<<<../../../preview/next/pages/showcases/Alert/AlertNeutral.tsx
16-
::
17-
::qwik-only
1811
<<<../../../website/src/routes/showcases/Alert/AlertNeutral/index.tsx
19-
::
2012

2113
</Showcase>
2214

@@ -25,31 +17,19 @@ Simple version of alert that has neutral grey color.
2517
Green color indicates that an action went successful.
2618

2719
<Showcase showcase-name="Alert/AlertPositive" >
28-
::vue-only
29-
<<<../../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
30-
::
31-
::react-only
32-
<<<../../../preview/next/pages/showcases/Alert/AlertPositive.tsx
33-
::
34-
::qwik-only
20+
3521
<<<../../../website/src/routes/showcases/Alert/AlertPositive/index.tsx
36-
::
22+
3723
</Showcase>
3824

3925
## Alert secondary
4026

4127
This type is informative just like neutral except that its palette is more noticeable.
4228

4329
<Showcase showcase-name="Alert/AlertSecondary" >
44-
::vue-only
45-
<<<../../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
46-
::
47-
::react-only
48-
<<<../../../preview/next/pages/showcases/Alert/AlertSecondary.tsx
49-
::
50-
::qwik-only
30+
5131
<<<../../../website/src/routes/showcases/Alert/AlertSecondary/index.tsx
52-
::
32+
5333
</Showcase>
5434

5535
## Alert warning
@@ -58,15 +38,8 @@ Alert can be more descriptive and its content can be splitted into title and des
5838

5939
<Showcase showcase-name="Alert/AlertWarning" >
6040

61-
::vue-only
62-
<<<../../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue
63-
::
64-
::react-only
65-
<<<../../../preview/next/pages/showcases/Alert/AlertWarning.tsx
66-
::
67-
::qwik-only
6841
<<<../../../website/src/routes/showcases/Alert/AlertWarning/index.tsx
69-
::
42+
7043
</Showcase>
7144

7245
## Alert error
@@ -75,13 +48,6 @@ This type is usually used for information displayed when an important problem oc
7548

7649
<Showcase showcase-name="Alert/AlertError" >
7750

78-
::vue-only
79-
<<<../../../preview/nuxt/pages/showcases/Alert/AlertError.vue
80-
::
81-
::react-only
82-
<<<../../../preview/next/pages/showcases/Alert/AlertError.tsx
83-
::
84-
::qwik-only
8551
<<<../../../website/src/routes/showcases/Alert/AlertError/index.tsx
86-
::
52+
8753
</Showcase>

‎apps/docs/content/_blocks/Banners.md‎

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,28 @@ Banners are components that deliver main image and content in various configurat
66

77
<Showcase showcase-name="Banners/DisplayHorizontal" style="min-height:800px">
88

9-
::vue-only
10-
<<<../../../preview/nuxt/pages/showcases/Banners/DisplayHorizontal.vue
11-
::
12-
::react-only
13-
<<<../../../preview/next/pages/showcases/Banners/DisplayHorizontal.tsx
14-
::
15-
::qwik-only
169
<<<../../../website/src/routes/showcases/Banners/DisplayHorizontal/index.tsx
17-
::
10+
1811
</Showcase>
1912

2013
## Vertical Display
2114

2215
Vertical display block with image and content below or above it.
2316

2417
<Showcase showcase-name="Banners/DisplayVertical" style="min-height: 800px;">
25-
::vue-only
26-
<<<../../../preview/nuxt/pages/showcases/Banners/DisplayVertical.vue
27-
::
28-
::react-only
29-
<<<../../../preview/next/pages/showcases/Banners/DisplayVertical.tsx
30-
::
31-
::qwik-only
18+
3219
<<<../../../website/src/routes/showcases/Banners/DisplayVertical/index.tsx
33-
::
20+
3421
</Showcase>
3522

3623
## Multiple vertical Displays
3724

3825
Four vertical displays in row on desktop.
3926

4027
<Showcase showcase-name="Banners/DisplayVerticalMultiple" style="min-height: 750px;">
41-
::vue-only
42-
<<<../../../preview/nuxt/pages/showcases/Banners/DisplayVerticalMultiple.vue
43-
::
44-
::react-only
45-
<<<../../../preview/next/pages/showcases/Banners/DisplayVerticalMultiple.tsx
46-
::
47-
::qwik-only
28+
4829
<<<../../../website/src/routes/showcases/Banners/DisplayVerticalMultiple/index.tsx
49-
::
30+
5031
</Showcase>
5132

5233
## Hero
@@ -55,13 +36,6 @@ Hero acts like a layout for your hero section. You can provide main image and an
5536

5637
<Showcase showcase-name="Banners/Hero" style="min-height:620px">
5738

58-
::vue-only
59-
<<<../../../preview/nuxt/pages/showcases/Banners/Hero.vue
60-
::
61-
::react-only
62-
<<<../../../preview/next/pages/showcases/Banners/Hero.tsx
63-
::
64-
::qwik-only
6539
<<<../../../website/src/routes/showcases/Banners/Hero/index.tsx
66-
::
40+
6741
</Showcase>

‎apps/docs/content/_blocks/Breadcrumbs.md‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,7 @@ A breadcrumb trail consists of a list of links to the parent pages of the curren
44

55
<Showcase showcase-name="Breadcrumbs/Breadcrumbs" style="min-height:200px">
66

7-
::vue-only
8-
<<<../../../preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue
9-
::
10-
::react-only
11-
<<<../../../preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx
12-
::
13-
::qwik-only
147
<<<../../../website/src/routes/showcases/Breadcrumbs/Breadcrumbs/index.tsx
15-
::
168

179
</Showcase>
1810

@@ -21,29 +13,17 @@ A breadcrumb trail consists of a list of links to the parent pages of the curren
2113
Breadcrumbs block with icons as a item separator.
2214

2315
<Showcase showcase-name="Breadcrumbs/BreadcrumbsSeparator" style="min-height: 300px;">
24-
::vue-only
25-
<<<../../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue
26-
::
27-
::react-only
28-
<<<../../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx
29-
::
30-
::qwik-only
16+
3117
<<<../../../website/src/routes/showcases/Breadcrumbs/BreadcrumbsSeparator/index.tsx
32-
::
18+
3319
</Showcase>
3420

3521
## Breadcrumbs with home icon
3622

3723
Breadcrumbs block with home icon as the first item.
3824

3925
<Showcase showcase-name="Breadcrumbs/BreadcrumbsWithIcon" style="min-height: 300px;">
40-
::vue-only
41-
<<<../../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue
42-
::
43-
::react-only
44-
<<<../../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx
45-
::
46-
::qwik-only
26+
4727
<<<../../../website/src/routes/showcases/Breadcrumbs/BreadcrumbsWithIcon/index.tsx
48-
::
28+
4929
</Showcase>

‎apps/docs/content/_blocks/Card.md‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,7 @@ This block contain empty `anchor` element, this specific manipulation adds possi
1212

1313
<Showcase showcase-name="Card/CardDefault" style="min-height: 600px">
1414

15-
::vue-only
16-
<<<../../../preview/nuxt/pages/showcases/Card/CardDefault.vue
17-
::
18-
::react-only
19-
<<<../../../preview/next/pages/showcases/Card/CardDefault.tsx
20-
::
21-
::qwik-only
2215
<<<../../../website/src/routes/showcases/Card/CardDefault/index.tsx
23-
::
2416

2517
</Showcase>
2618

@@ -30,15 +22,7 @@ The category card view with a circle shaped image, and category title, clickable
3022

3123
<Showcase showcase-name="Card/CategoryCard" style="min-height: 400px;">
3224

33-
::vue-only
34-
<<<../../../preview/nuxt/pages/showcases/Card/CategoryCard.vue
35-
::
36-
::react-only
37-
<<<../../../preview/next/pages/showcases/Card/CategoryCard.tsx
38-
::
39-
::qwik-only
4025
<<<../../../website/src/routes/showcases/Card/CategoryCard/index.tsx
41-
::
4226

4327
</Showcase>
4428

@@ -48,14 +32,6 @@ This type of card has only button to interact.
4832

4933
<Showcase showcase-name="Card/CardFeature" style="min-height: 600px">
5034

51-
::vue-only
52-
<<<../../../preview/nuxt/pages/showcases/Card/CardFeature.vue
53-
::
54-
::react-only
55-
<<<../../../preview/next/pages/showcases/Card/CardFeature.tsx
56-
::
57-
::qwik-only
5835
<<<../../../website/src/routes/showcases/Card/CardFeature/index.tsx
59-
::
6036

6137
</Showcase>

‎apps/docs/content/_blocks/Footer.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@ The Footer block is used as navigation. Usually it's at the bottom of a page and
66

77
<Showcase showcase-name="Footer/FooterBasic" style="min-height: 701px;" no-paddings>
88

9-
::vue-only
10-
<<<../../../preview/nuxt/pages/showcases/Footer/FooterBasic.vue
11-
::
12-
::react-only
13-
<<<../../../preview/next/pages/showcases/Footer/FooterBasic.tsx
14-
::
15-
::qwik-only
169
<<<../../../website/src/routes/showcases/Footer/FooterBasic/index.tsx
17-
::
1810

1911
</Showcase>

‎apps/docs/content/_blocks/NavbarBottom.md‎

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,67 +2,27 @@
22

33
NavbarBottom block is the navigation element used in mobile view.
44

5-
::vue-only
65
::tip You can make the navbar items links
7-
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)
8-
9-
```html
10-
<SfButton tag="a" href="#"> Will render as an anchor tag </SfButton>
11-
```
12-
13-
::
14-
::
15-
16-
::react-only
17-
::tip You can make the navbar items links
18-
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)
19-
20-
```html
21-
<SfButton as="a" href="#"> Will render as an anchor tag </SfButton>
22-
```
23-
24-
::
25-
::
26-
27-
::qwik-only
28-
::tip You can make the navbar items links
29-
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)
6+
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)
307

318
```html
329
<SfButton as="a" href="#"> Will render as an anchor tag </SfButton>
3310
```
3411

35-
::
3612
::
3713

3814
## NavbarBottom with white background
3915

4016
<Showcase showcase-name="NavbarBottom/NavbarBottom" no-paddings style="min-height:200px">
4117

42-
::react-only
43-
<<<../../../preview/next/pages/showcases/NavbarBottom/NavbarBottom.tsx
44-
::
45-
::vue-only
46-
<<<../../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottom.vue
47-
::
48-
::qwik-only
4918
<<<../../../website/src/routes/showcases/NavbarBottom/NavbarBottom/index.tsx
50-
::
5119

5220
</Showcase>
5321

5422
## NavbarBottom with filled background
5523

5624
<Showcase showcase-name="NavbarBottom/NavbarBottomFilled" no-paddings style="min-height:200px">
5725

58-
::react-only
59-
<<<../../../preview/next/pages/showcases/NavbarBottom/NavbarBottomFilled.tsx
60-
::
61-
::vue-only
62-
<<<../../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottomFilled.vue
63-
::
64-
::qwik-only
6526
<<<../../../website/src/routes/showcases/NavbarBottom/NavbarBottomFilled/index.tsx
66-
::
6727

6828
</Showcase>

0 commit comments

Comments
 (0)