Skip to content

Commit a891190

Browse files
NathanWalkerNathanWalker
committed
feat: use framework tabs and alphabetize menu
1 parent 9c7d602 commit a891190

9 files changed

Lines changed: 342 additions & 124 deletions

File tree

‎.vitepress/config.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,23 +59,23 @@ export default defineConfig({
5959
{
6060
text: 'UI Components',
6161
items: [
62+
{ text: 'Blur', link: '/plugins/blur' },
6263
{ text: 'Camera Plus', link: '/plugins/camera-plus' },
63-
{ text: 'Checkbox', link: '/plugins/checkbox' },
6464
{ text: 'CardView', link: '/plugins/cardview' },
6565
{ text: 'Carousel', link: '/plugins/carousel' },
66-
{ text: 'Blur', link: '/plugins/blur' },
66+
{ text: 'Checkbox', link: '/plugins/checkbox' },
6767
{ text: 'Cloudinary', link: '/plugins/cloudinary' },
68-
{ text: 'Variable Blur View', link: '/plugins/variable-blur-view' },
69-
{ text: 'Loading Indicator', link: '/plugins/loading-indicator' },
70-
{ text: 'Shimmer', link: '/plugins/shimmer' },
68+
{ text: 'ExoPlayer', link: '/plugins/exoplayer' },
7169
{ text: 'Fancy Alert', link: '/plugins/fancyalert' },
7270
{ text: 'Filterable Listpicker', link: '/plugins/filterable-listpicker' },
73-
{ text: 'Input Mask', link: '/plugins/input-mask' },
74-
{ text: 'ExoPlayer', link: '/plugins/exoplayer' },
7571
{ text: 'Fluid Segmented Bar', link: '/plugins/fluid-segmented-bar' },
72+
{ text: 'Input Mask', link: '/plugins/input-mask' },
7673
{ text: 'Label Marquee', link: '/plugins/label-marquee' },
74+
{ text: 'Loading Indicator', link: '/plugins/loading-indicator' },
7775
{ text: 'Markdown View', link: '/plugins/markdown-view' },
7876
{ text: 'Rich Paste', link: '/plugins/rich-paste' },
77+
{ text: 'Shimmer', link: '/plugins/shimmer' },
78+
{ text: 'Variable Blur View', link: '/plugins/variable-blur-view' },
7979
],
8080
},
8181
{
@@ -95,9 +95,9 @@ export default defineConfig({
9595
{
9696
text: 'Analytics & Monitoring',
9797
items: [
98+
{ text: 'Appcues', link: '/plugins/appcues' },
9899
{ text: 'Aptabase', link: '/plugins/aptabase' },
99100
{ text: 'Dynatrace', link: '/plugins/dynatrace' },
100-
{ text: 'Appcues', link: '/plugins/appcues' },
101101
{ text: 'Smartlook', link: '/plugins/smartlook' },
102102
],
103103
},
@@ -143,41 +143,41 @@ export default defineConfig({
143143
{
144144
text: 'Getting Started',
145145
items: [
146-
{ text: 'Introduction', link: '/ncharts/' },
147146
{ text: 'Installation', link: '/ncharts/installation' },
147+
{ text: 'Introduction', link: '/ncharts/' },
148148
{ text: 'Quick Start', link: '/ncharts/quick-start' },
149149
],
150150
},
151151
{
152152
text: 'Chart Types',
153153
items: [
154-
{ text: 'Line Chart', link: '/ncharts/charts/line-chart' },
155154
{ text: 'Bar Chart', link: '/ncharts/charts/bar-chart' },
156-
{ text: 'Horizontal Bar', link: '/ncharts/charts/horizontal-bar-chart' },
157-
{ text: 'Pie Chart', link: '/ncharts/charts/pie-chart' },
158-
{ text: 'Scatter Chart', link: '/ncharts/charts/scatter-chart' },
159155
{ text: 'Bubble Chart', link: '/ncharts/charts/bubble-chart' },
160156
{ text: 'Candlestick Chart', link: '/ncharts/charts/candlestick-chart' },
161-
{ text: 'Radar Chart', link: '/ncharts/charts/radar-chart' },
162157
{ text: 'Combined Chart', link: '/ncharts/charts/combined-chart' },
158+
{ text: 'Horizontal Bar', link: '/ncharts/charts/horizontal-bar-chart' },
159+
{ text: 'Line Chart', link: '/ncharts/charts/line-chart' },
160+
{ text: 'Pie Chart', link: '/ncharts/charts/pie-chart' },
161+
{ text: 'Radar Chart', link: '/ncharts/charts/radar-chart' },
162+
{ text: 'Scatter Chart', link: '/ncharts/charts/scatter-chart' },
163163
],
164164
},
165165
{
166166
text: 'Configuration',
167167
items: [
168168
{ text: 'Animation', link: '/ncharts/config/animation' },
169-
{ text: 'Legend', link: '/ncharts/config/legend' },
170169
{ text: 'Axes', link: '/ncharts/config/axes' },
170+
{ text: 'Legend', link: '/ncharts/config/legend' },
171171
{ text: 'Markers', link: '/ncharts/config/markers' },
172172
{ text: 'Styling', link: '/ncharts/config/styling' },
173173
],
174174
},
175175
{
176176
text: 'API Reference',
177177
items: [
178-
{ text: 'Types', link: '/ncharts/api/types' },
179-
{ text: 'Methods', link: '/ncharts/api/methods' },
180178
{ text: 'Events', link: '/ncharts/api/events' },
179+
{ text: 'Methods', link: '/ncharts/api/methods' },
180+
{ text: 'Types', link: '/ncharts/api/types' },
181181
],
182182
},
183183
],

‎content/plugins/cloudinary.md‎

Lines changed: 69 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ init('your_cloud_name', 'your_api_key', 'your_api_secret');
3434
3535
## Usage
3636

37-
### NativeScript Core
37+
### Core
3838

3939
```xml
40-
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
41-
xmlns:cl="@nstudio/nativescript-cloudinary"
42-
navigatingTo="navigatingTo">
40+
<Page
41+
xmlns="http://schemas.nativescript.org/tns.xsd"
42+
xmlns:cl="@nstudio/nativescript-cloudinary"
43+
navigatingTo="navigatingTo">
4344
<GridLayout class="p-24">
4445
<cl:ImageCloudinary
4546
stretch="aspectFill"
@@ -50,27 +51,72 @@ init('your_cloud_name', 'your_api_key', 'your_api_secret');
5051
```
5152

5253
```typescript
53-
import { EventData, Page } from '@nativescript/core';
54-
import { ImageCloudinaryOptions } from '@nstudio/nativescript-cloudinary';
55-
56-
export function navigatingTo(args: EventData) {
57-
const page = args.object as Page;
58-
page.bindingContext = new DemoModel();
59-
}
60-
61-
class DemoModel {
62-
heroImage: ImageCloudinaryOptions = {
63-
src: 'cld-sample',
64-
width: 900,
65-
height: 900,
66-
crop: 'fill',
67-
gravity: 'face',
68-
format: 'auto',
69-
quality: 'auto',
70-
};
71-
}
54+
const heroImage: ImageCloudinaryOptions = {
55+
src: 'cld-sample',
56+
width: 900,
57+
height: 900,
58+
crop: 'fill',
59+
gravity: 'face',
60+
format: 'auto',
61+
quality: 'auto',
62+
};
63+
```
64+
65+
## Framework Registration
66+
67+
<FrameworkTabs>
68+
<template #angular>
69+
70+
```typescript
71+
import { registerElement } from '@nativescript/angular';
72+
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
73+
74+
registerElement('ImageCloudinary', () => ImageCloudinary);
75+
```
76+
77+
</template>
78+
<template #react>
79+
80+
```typescript
81+
import { registerElement } from 'react-nativescript';
82+
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
83+
84+
registerElement('imageCloudinary', () => ImageCloudinary);
85+
```
86+
87+
</template>
88+
<template #vue>
89+
90+
```typescript
91+
import { registerElement } from 'nativescript-vue';
92+
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
93+
94+
registerElement('ImageCloudinary', () => ImageCloudinary);
95+
```
96+
97+
</template>
98+
<template #svelte>
99+
100+
```typescript
101+
import { registerNativeViewElement } from '@nativescript-community/svelte-native/dom';
102+
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
103+
104+
registerNativeViewElement('imageCloudinary', () => ImageCloudinary);
105+
```
106+
107+
</template>
108+
<template #solid>
109+
110+
```typescript
111+
import { registerElement } from 'dominative';
112+
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
113+
114+
registerElement('imageCloudinary', ImageCloudinary);
72115
```
73116

117+
</template>
118+
</FrameworkTabs>
119+
74120
### Transformation Modes
75121

76122
`ImageCloudinaryOptions` supports three transformation styles.
@@ -112,35 +158,6 @@ const options: ImageCloudinaryOptions = {
112158

113159
Priority order: `rawTransformation` > `transformations` > top-level shorthand properties.
114160

115-
## Framework Registration
116-
117-
### Angular
118-
119-
```typescript
120-
import { registerElement } from '@nativescript/angular';
121-
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
122-
123-
registerElement('ImageCloudinary', () => ImageCloudinary);
124-
```
125-
126-
### Other Flavors
127-
128-
```typescript
129-
import { ImageCloudinary } from '@nstudio/nativescript-cloudinary';
130-
131-
// React
132-
registerElement('imageCloudinary', () => ImageCloudinary);
133-
134-
// Solid
135-
registerElement('imageCloudinary', ImageCloudinary);
136-
137-
// Svelte
138-
registerNativeViewElement('imageCloudinary', () => ImageCloudinary);
139-
140-
// Vue
141-
registerElement('ImageCloudinary', () => ImageCloudinary);
142-
```
143-
144161
## Programmatic URL Generation
145162

146163
Generate a Cloudinary URL without rendering the component:

‎content/plugins/label-marquee.md‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ npm install @nstudio/nativescript-label-marquee
2525
</Page>
2626
```
2727

28-
### Angular
28+
### Frameworks
29+
30+
<FrameworkTabs>
31+
<template #angular>
2932

3033
```typescript
3134
import { registerElement } from '@nativescript/angular';
@@ -42,24 +45,49 @@ registerElement('LabelMarquee', () => LabelMarquee);
4245
</LabelMarquee>
4346
```
4447

45-
### Other Flavors
48+
</template>
49+
<template #react>
4650

4751
```typescript
52+
import { registerElement } from 'react-nativescript';
4853
import { LabelMarquee } from '@nstudio/nativescript-label-marquee';
4954

50-
// Vue
51-
Vue.registerElement('LabelMarquee', () => LabelMarquee);
52-
53-
// React
5455
registerElement('labelMarquee', () => LabelMarquee);
56+
```
57+
58+
</template>
59+
<template #vue>
60+
61+
```typescript
62+
import { registerElement } from 'nativescript-vue';
63+
import { LabelMarquee } from '@nstudio/nativescript-label-marquee';
64+
65+
registerElement('LabelMarquee', () => LabelMarquee);
66+
```
67+
68+
</template>
69+
<template #svelte>
70+
71+
```typescript
72+
import { registerNativeViewElement } from '@nativescript-community/svelte-native/dom';
73+
import { LabelMarquee } from '@nstudio/nativescript-label-marquee';
5574

56-
// Svelte
5775
registerNativeViewElement('labelMarquee', () => LabelMarquee);
76+
```
77+
78+
</template>
79+
<template #solid>
80+
81+
```typescript
82+
import { registerElement } from 'dominative';
83+
import { LabelMarquee } from '@nstudio/nativescript-label-marquee';
5884

59-
// Solid
6085
registerElement('labelMarquee', LabelMarquee);
6186
```
6287

88+
</template>
89+
</FrameworkTabs>
90+
6391
## Properties
6492

6593
| Property | Type | Default | Description |

‎content/plugins/markdown-view.md‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ npm install @nstudio/nativescript-markdown-view
2323
</Page>
2424
```
2525

26-
### Angular
26+
### Frameworks
27+
28+
<FrameworkTabs>
29+
<template #angular>
2730

2831
```typescript
2932
import { registerElement } from '@nativescript/angular';
@@ -36,24 +39,49 @@ registerElement('MarkdownView', () => MarkdownView);
3639
<MarkdownView markdown="_This_ should be **bold**!"></MarkdownView>
3740
```
3841

39-
### Other Flavors
42+
</template>
43+
<template #react>
4044

4145
```typescript
46+
import { registerElement } from 'react-nativescript';
4247
import { MarkdownView } from '@nstudio/nativescript-markdown-view';
4348

44-
// Vue
45-
Vue.registerElement('MarkdownView', () => MarkdownView);
46-
47-
// React
4849
registerElement('markdownview', () => MarkdownView);
50+
```
51+
52+
</template>
53+
<template #vue>
54+
55+
```typescript
56+
import { registerElement } from 'nativescript-vue';
57+
import { MarkdownView } from '@nstudio/nativescript-markdown-view';
58+
59+
registerElement('MarkdownView', () => MarkdownView);
60+
```
61+
62+
</template>
63+
<template #svelte>
64+
65+
```typescript
66+
import { registerNativeViewElement } from '@nativescript-community/svelte-native/dom';
67+
import { MarkdownView } from '@nstudio/nativescript-markdown-view';
4968

50-
// Svelte
5169
registerNativeViewElement('markdownview', () => MarkdownView);
70+
```
71+
72+
</template>
73+
<template #solid>
74+
75+
```typescript
76+
import { registerElement } from 'dominative';
77+
import { MarkdownView } from '@nstudio/nativescript-markdown-view';
5278

53-
// Solid
5479
registerElement('markdownview', MarkdownView);
5580
```
5681

82+
</template>
83+
</FrameworkTabs>
84+
5785
## Properties
5886

5987
| Property | Type | Default | Description |

0 commit comments

Comments
 (0)