Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1248ca8

Browse files
NathanWalkerrigor789
andauthored
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)

AltStyle によって変換されたページ (->オリジナル) /