Skip to content

Commit 1248ca8

Browse files
NathanWalkerrigor789
NathanWalker
and
rigor789
authored
feat: snacks list of {N} preview stackblitz treats (#139)
Co-authored-by: Igor Randjelovic <rigor789@gmail.com>
1 parent 957c878 commit 1248ca8

File tree

3 files changed

+241
-1
lines changed

3 files changed

+241
-1
lines changed

‎.vitepress/nav.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ export default [
2828
icon: 'DevicePhoneMobileIcon',
2929
target: '_blank',
3030
},
31+
{
32+
text: 'Snacks',
33+
link: '/snacks/',
34+
activeMatch: '^/snacks',
35+
icon: 'CakeIcon',
36+
},
3137
{
3238
text: 'Plugins',
3339
link: '/plugins/',

‎content/snacks/index.md

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
---
2+
title: Snacks
3+
description: Discover the power and flexibility of NativeScript through our curated selection of 'Snacks' - bite-sized projects designed to inspire and educate.
4+
contributors: false
5+
prev: false
6+
next: false
7+
---
8+
9+
Each Snack reveals NativeScript's power, from UI tricks to framework integrations, get a peek at what's possible.
10+
11+
## Explore Snacks
12+
13+
<script lang="ts" setup>
14+
const snacks = [
15+
{
16+
id: 1,
17+
title: "Spaceman using just TypeScript",
18+
href: "https://stackblitz.com/edit/nativescript-spaceman-transition-example?file=app%2Fspace-view.xml",
19+
description: "Shared Element Transitions using TypeScript.",
20+
categories: [
21+
{
22+
title: "Shared Elements",
23+
href: "https://docs.nativescript.org/guide/shared-element-transitions",
24+
},
25+
{
26+
title: "TypeScript",
27+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript",
28+
},
29+
],
30+
videoUrl: "https://youtube.com/embed/hHqlEbU8o2o?si=7SgSCaNuqtRB9-ej",
31+
videoTitle: "Spaceman using just TypeScript",
32+
},
33+
{
34+
id: 2,
35+
title: "Spaceman using just Vue 3",
36+
href: "https://stackblitz.com/edit/nativescript-vue3-spaceman-transition-example?file=app%2Fcomponents%2FSpaceView.vue",
37+
description: "Shared Element Transitions using Vue 3.",
38+
categories: [
39+
{
40+
title: "Shared Elements",
41+
href: "https://docs.nativescript.org/guide/shared-element-transitions",
42+
},
43+
{ title: "Vue", href: "https://nativescript-vue.org" },
44+
],
45+
videoUrl: "https://youtube.com/embed/hHqlEbU8o2o?si=7SgSCaNuqtRB9-ej",
46+
videoTitle: "Spaceman using just Vue 3",
47+
},
48+
{
49+
id: 3,
50+
title: "Music Player UI",
51+
href: "https://stackblitz.com/edit/nativescript-music-player-transition-example?file=app%2Fmain-view.xml",
52+
description: "Music Player UI with Shared Element Transitions.",
53+
categories: [
54+
{
55+
title: "Shared Elements",
56+
href: "https://docs.nativescript.org/guide/shared-element-transitions",
57+
},
58+
{
59+
title: "TypeScript",
60+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript",
61+
},
62+
],
63+
videoUrl: "https://youtube.com/embed/KatL9m7E2XI?feature=share",
64+
videoTitle: "Music Player UI",
65+
},
66+
{
67+
id: 4,
68+
title: "Tetris Game with Vue 3",
69+
href: "https://stackblitz.com/edit/ns-tetris?file=src%2Fcomponents%2FHome.vue",
70+
description: "Tetris Game with Vue 3.",
71+
categories: [{ title: "Vue", href: "https://nativescript-vue.org" }],
72+
videoUrl: "https://youtube.com/embed/To_bycK6BGY",
73+
videoTitle: "A Tetris Game built with Vue 3",
74+
},
75+
{
76+
id: 5,
77+
title: "iOS Recognize Text from an Image",
78+
href: "https://stackblitz.com/edit/nativescript-text-from-image?file=src%2Fapp%2Fhome%2Fhome.component.ts",
79+
description: "Recognizing text from an Image on iOS.",
80+
categories: [
81+
{
82+
title: "Angular",
83+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
84+
},
85+
{
86+
title: "iOS Vision Framework",
87+
href: "https://developer.apple.com/documentation/vision?language=objc",
88+
},
89+
],
90+
videoUrl: "https://youtube.com/embed/cCqqXezvfWs",
91+
videoTitle: "iOS Recognize Text from an Image",
92+
},
93+
{
94+
id: 6,
95+
title: "iOS PDFKit",
96+
href: "https://stackblitz.com/edit/nativescript-pdfview-via-ios-pdfkit?file=src%2Fapp%2Fnative-pdfview%2Fnative-pdfview.ts",
97+
description: "Generating and previewing PDFs using iOS PDFKit.",
98+
categories: [
99+
{
100+
title: "Angular",
101+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
102+
},
103+
{
104+
title: "iOS PDFKit",
105+
href: "https://developer.apple.com/documentation/pdfkit?language=objc",
106+
},
107+
],
108+
videoUrl: "https://youtube.com/embed/ucmAXFaFbY0",
109+
videoTitle: "iOS PDFKit",
110+
},
111+
{
112+
id: 7,
113+
title: "iOS PDF with WKWebView",
114+
href: "https://stackblitz.com/edit/nativescript-angular-pdf-with-wkwebview",
115+
description: "Rendering PDF with WKWebView on iOS.",
116+
categories: [
117+
{
118+
title: "Angular",
119+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
120+
},
121+
{
122+
title: "iOS WKWebView",
123+
href: "https://developer.apple.com/documentation/webkit/wkwebview",
124+
},
125+
],
126+
},
127+
{
128+
id: 8,
129+
title: "Autogrow Textfield",
130+
href: "https://stackblitz.com/edit/nativescript-ng-textview-autogrow-vs-textfield?file=src%2Fapp%2Fitem%2Fitems.component.html",
131+
description: "Autogrowing Textfield as you type.",
132+
categories: [
133+
{
134+
title: "Angular",
135+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
136+
},
137+
{ title: "TextView", href: "https://docs.nativescript.org/ui/text-view" },
138+
],
139+
},
140+
{
141+
id: 9,
142+
title: "Text to Speech",
143+
href: "https://stackblitz.com/edit/nativescript-text-to-speech?file=src%2Fapp%2Fspeech%2Findex.ios.ts",
144+
description: "Simple Text to Speech.",
145+
categories: [
146+
{
147+
title: "Android TextToSpeech",
148+
href: "https://developer.android.com/reference/android/speech/tts/TextToSpeech",
149+
},
150+
{
151+
title: "iOS AVSpeechUtterance",
152+
href: "https://developer.apple.com/documentation/avfaudio/avspeechutterance?language=objc",
153+
},
154+
],
155+
},
156+
{
157+
id: 10,
158+
title: "Battery Level Check",
159+
href: "https://stackblitz.com/edit/nativescript-battery-level-check?file=app%2Fbattery%2Findex.ios.ts",
160+
description: "Getting the current battery level.",
161+
categories: [
162+
{
163+
title: "Android Battery Monitoring",
164+
href: "https://developer.android.com/training/monitoring-device-state/battery-monitoring",
165+
},
166+
{
167+
title: "iOS UIDevice",
168+
href: "https://developer.apple.com/documentation/uikit/uidevice?language=objc",
169+
},
170+
],
171+
},
172+
{
173+
id: 11,
174+
title: "Toggle Device Light",
175+
href: "https://stackblitz.com/edit/nativescript-torch?file=src%2Fapp%2Ftorch%2Findex.ios.ts",
176+
description: "Toggling the Device Light on and off.",
177+
categories: [
178+
{
179+
title: "Android CameraManager",
180+
href: "https://developer.android.com/reference/android/hardware/camera2/CameraManager",
181+
},
182+
{
183+
title: "iOS AVCaptureDevice",
184+
href: "https://developer.apple.com/documentation/avfoundation/avcapturedevice?language=objc",
185+
},
186+
],
187+
},
188+
{
189+
id: 12,
190+
title: "Using local image assets",
191+
href: "https://stackblitz.com/edit/nativescript-local-image-asset?file=package.json,src%2Fapp%2Fitem%2Fitems.component.html",
192+
description: "Using local image assets.",
193+
categories: [
194+
{ title: "Image", href: "https://docs.nativescript.org/ui/image" },
195+
],
196+
},
197+
{
198+
id: 13,
199+
title: "Checkbox Example",
200+
href: "https://stackblitz.com/edit/nativescript-checkbox-example?file=src%2Fapp%2Fitem%2Fitems.component.html",
201+
description: "Using checkbox components.",
202+
categories: [
203+
{
204+
title: "CheckBox",
205+
href: "https://github.com/nstudio/nativescript-plugins/blob/main/packages/nativescript-checkbox/README.md",
206+
},
207+
],
208+
},
209+
// Not ready yet but will discuss with Dylan to update
210+
// {
211+
// id: 14,
212+
// title: 'RxDB Angular Lokijs',
213+
// href: 'https://stackblitz.com/edit/nativescript-angular-rxdb-lokijs-demo-9ha1fc?file=src%2Fapp%2Fcomponents%2Fhero.component.ts',
214+
// description: 'Using RxDB Angular Lokijs.',
215+
// categories: [
216+
// {
217+
// title: 'Angular',
218+
// href: 'https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular'
219+
// },
220+
// {
221+
// title: 'RxDB',
222+
// href: 'https://rxdb.info/'
223+
// },
224+
// {
225+
// title: 'LokiJS',
226+
// href: 'https://github.com/techfort/LokiJS'
227+
// }
228+
// ],
229+
// },
230+
];
231+
232+
</script>
233+
234+
<SnackList :snacks="snacks" />

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"update-theme": "node ./.vitepress/update-theme.mjs"
1717
},
1818
"devDependencies": {
19-
"@nativescript/vitepress-theme": "https://docs.nativescript.org/__/vitepress-theme.tgz?1712688593246",
19+
"@nativescript/vitepress-theme": "https://docs.nativescript.org/__/vitepress-theme.tgz?1712748667234",
2020
"@types/node": "18.11.9",
2121
"npm-run-all": "^4.1.5",
2222
"prettier": "^2.7.1",

0 commit comments

Comments
 (0)