Skip to content

Commit 22d0d38

Browse files
NathanWalkerNathanWalker
committed
feat(snacks): day night switch
1 parent 6fbeb2f commit 22d0d38

File tree

3 files changed

+114
-8849
lines changed

3 files changed

+114
-8849
lines changed

‎content/snacks/index.md

+113-51
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
4040
title: "Shared Elements",
4141
href: "https://docs.nativescript.org/guide/shared-element-transitions",
4242
},
43-
{ title: "Vue", href: "https://nativescript-vue.org" },
43+
{
44+
title: "Vue",
45+
href: "https://nativescript-vue.org",
46+
},
4447
],
4548
videoUrl: "https://youtube.com/embed/hHqlEbU8o2o?si=7SgSCaNuqtRB9-ej",
4649
videoTitle: "Spaceman using just Vue 3",
@@ -67,22 +70,84 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
6770
id: 4,
6871
title: "Reflective UI",
6972
href: "https://stackblitz.com/edit/nativescript-reflective-ui?file=src%2Fapp%2Fitem%2Fitems.component.ts",
70-
description: "Using iOS AVCaptureSession to create live reflective UI mask. Try with your phone in Dark Mode, it's neat!",
71-
categories: [{ title: "iOS AVCaptureSession", href: "https://developer.apple.com/documentation/avfoundation/avcapturesession?language=objc" }],
73+
description:
74+
"Using iOS AVCaptureSession to create live reflective UI mask. Try with your phone in Dark Mode, it's neat!",
75+
categories: [
76+
{
77+
title: "iOS AVCaptureSession",
78+
href: "https://developer.apple.com/documentation/avfoundation/avcapturesession?language=objc",
79+
},
80+
],
7281
videoUrl: "https://youtube.com/embed/rbF6mYfwnck",
7382
videoTitle: "NativeScript Reflective UI",
7483
},
7584
{
7685
id: 5,
86+
title: "Day Night Switch",
87+
hrefs: [
88+
{
89+
title: "Angular",
90+
href: "https://stackblitz.com/edit/nativescript-daynightswitch-angular?file=src%2Fapp%2Fexample.component.html",
91+
},
92+
{
93+
title: "React",
94+
href: "https://stackblitz.com/edit/nativescript-daynightswitch-react?file=src%2Fcomponents%2FHome.tsx",
95+
},
96+
{
97+
title: "Solid",
98+
href: "https://stackblitz.com/edit/nativescript-daynightswitch-solid?file=src%2Fcomponents%2Fhome.tsx",
99+
},
100+
{
101+
title: "Svelte",
102+
href: "https://stackblitz.com/edit/nativescript-daynightswitch-svelte?file=src%2Fcomponents%2FHome.svelte",
103+
},
104+
{
105+
title: "Vue",
106+
href: "https://stackblitz.com/edit/nativescript-daynightswitch-vue?file=src%2Fcomponents%2FHome.vue",
107+
},
108+
],
109+
description: "Custom NativeScript Day/Night Switch.",
110+
categories: [
111+
{
112+
title: "Angular",
113+
href: "https://angular.dev",
114+
},
115+
{
116+
title: "React",
117+
href: "https://react.dev",
118+
},
119+
{
120+
title: "Solid",
121+
href: "https://www.solidjs.com",
122+
},
123+
{
124+
title: "Svelte",
125+
href: "https://svelte.dev",
126+
},
127+
{
128+
title: "Vue",
129+
href: "https://vuejs.org",
130+
},
131+
],
132+
videoUrl: "https://youtube.com/embed/8kb7ObVOJIg?feature=share",
133+
videoTitle: "Day Night Switch",
134+
},
135+
{
136+
id: 6,
77137
title: "Tetris Game with Vue 3",
78138
href: "https://stackblitz.com/edit/ns-tetris?file=src%2Fcomponents%2FHome.vue",
79139
description: "Tetris Game with Vue 3.",
80-
categories: [{ title: "Vue", href: "https://nativescript-vue.org" }],
140+
categories: [
141+
{
142+
title: "Vue",
143+
href: "https://nativescript-vue.org",
144+
},
145+
],
81146
videoUrl: "https://youtube.com/embed/To_bycK6BGY",
82147
videoTitle: "A Tetris Game built with Vue 3",
83148
},
84149
{
85-
id: 6,
150+
id: 7,
86151
title: "iOS Recognize Text from an Image",
87152
href: "https://stackblitz.com/edit/nativescript-text-from-image?file=src%2Fapp%2Fhome%2Fhome.component.ts",
88153
description: "Recognizing text from an Image on iOS.",
@@ -100,7 +165,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
100165
videoTitle: "iOS Recognize Text from an Image",
101166
},
102167
{
103-
id: 7,
168+
id: 8,
104169
title: "iOS PDFKit",
105170
href: "https://stackblitz.com/edit/nativescript-pdfview-via-ios-pdfkit?file=src%2Fapp%2Fnative-pdfview%2Fnative-pdfview.ts",
106171
description: "Generating and previewing PDFs using iOS PDFKit.",
@@ -118,7 +183,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
118183
videoTitle: "iOS PDFKit",
119184
},
120185
{
121-
id: 8,
186+
id: 9,
122187
title: "PDF w/ WKWebView & AndroidPdfViewer",
123188
href: "https://stackblitz.com/edit/nativescript-pdfviewer?file=src%2Fapp%2Fnative-pdfview%2Findex.ios.ts",
124189
description: "Rendering PDF with WKWebView on iOS.",
@@ -138,7 +203,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
138203
],
139204
},
140205
{
141-
id: 9,
206+
id: 10,
142207
title: "Autogrow Textfield",
143208
href: "https://stackblitz.com/edit/nativescript-ng-textview-autogrow-vs-textfield?file=src%2Fapp%2Fitem%2Fitems.component.html",
144209
description: "Autogrowing Textfield as you type.",
@@ -147,11 +212,14 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
147212
title: "Angular",
148213
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
149214
},
150-
{ title: "TextView", href: "https://docs.nativescript.org/ui/text-view" },
215+
{
216+
title: "TextView",
217+
href: "https://docs.nativescript.org/ui/text-view",
218+
},
151219
],
152220
},
153221
{
154-
id: 10,
222+
id: 11,
155223
title: "Text to Speech",
156224
href: "https://stackblitz.com/edit/nativescript-text-to-speech?file=src%2Fapp%2Fspeech%2Findex.ios.ts",
157225
description: "Simple Text to Speech.",
@@ -167,7 +235,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
167235
],
168236
},
169237
{
170-
id: 11,
238+
id: 12,
171239
title: "Battery Level Check",
172240
href: "https://stackblitz.com/edit/nativescript-battery-level-check?file=app%2Fbattery%2Findex.ios.ts",
173241
description: "Getting the current battery level.",
@@ -183,7 +251,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
183251
],
184252
},
185253
{
186-
id: 12,
254+
id: 13,
187255
title: "Toggle Device Light",
188256
href: "https://stackblitz.com/edit/nativescript-torch?file=src%2Fapp%2Ftorch%2Findex.ios.ts",
189257
description: "Toggling the Device Light on and off.",
@@ -199,16 +267,19 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
199267
],
200268
},
201269
{
202-
id: 13,
270+
id: 14,
203271
title: "Using local image assets",
204272
href: "https://stackblitz.com/edit/nativescript-local-image-asset?file=package.json,src%2Fapp%2Fitem%2Fitems.component.html",
205273
description: "Using local image assets.",
206274
categories: [
207-
{ title: "Image", href: "https://docs.nativescript.org/ui/image" },
275+
{
276+
title: "Image",
277+
href: "https://docs.nativescript.org/ui/image",
278+
},
208279
],
209280
},
210281
{
211-
id: 14,
282+
id: 15,
212283
title: "Checkbox",
213284
href: "https://stackblitz.com/edit/nativescript-checkbox-example?file=src%2Fapp%2Fitem%2Fitems.component.html",
214285
description: "Using checkbox components.",
@@ -220,7 +291,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
220291
],
221292
},
222293
{
223-
id: 15,
294+
id: 16,
224295
title: "Dropdown Menus",
225296
href: "https://stackblitz.com/edit/nativescript-dropdown-menus?file=src%2Fapp%2Fmenu-button%2Findex.ios.ts",
226297
description: "Using dropdown menus.",
@@ -238,10 +309,11 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
238309
videoTitle: "Using dropdown menus with NativeScript",
239310
},
240311
{
241-
id: 16,
312+
id: 17,
242313
title: "Large Title Display on iOS",
243314
href: "https://stackblitz.com/edit/nativescript-ios-large-titles-angular?file=src%2Fapp%2Fitem%2Fitems.component.ts",
244-
description: "How to enable large title displays for iOS navigation with NativeScript using prefersLargeTitles property of UINavigationBar, accessible from every Frame.",
315+
description:
316+
"How to enable large title displays for iOS navigation with NativeScript using prefersLargeTitles property of UINavigationBar, accessible from every Frame.",
245317
categories: [
246318
{
247319
title: "iOS prefersLargeTitles",
@@ -252,10 +324,11 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
252324
videoTitle: "Enable large title displays for iOS Navigation",
253325
},
254326
{
255-
id: 17,
327+
id: 18,
256328
title: "Hardware device volume",
257329
href: "https://stackblitz.com/edit/nativescript-device-volume?file=src%2Futils%2Fvolume.ts",
258-
description: "How to get the current device volume using NativeScript on iOS and Android.",
330+
description:
331+
"How to get the current device volume using NativeScript on iOS and Android.",
259332
categories: [
260333
{
261334
title: "iOS outputVolume",
@@ -265,16 +338,20 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
265338
title: "Android getStreamVolume",
266339
href: "https://developer.android.com/reference/android/media/AudioManager#getStreamVolume(int)",
267340
},
268-
{ title: "Vue", href: "https://nativescript-vue.org" },
341+
{
342+
title: "Vue",
343+
href: "https://nativescript-vue.org",
344+
},
269345
],
270346
videoUrl: "https://youtube.com/embed/1DR_9AZrMe4",
271347
videoTitle: "Adjusting hardware device volume with NativeScript",
272348
},
273349
{
274-
id: 18,
350+
id: 19,
275351
title: "Top Bar Height",
276352
href: "https://stackblitz.com/edit/nativescript-topbar-height?file=src%2Fapp%2Futils%2Fdevice.ts",
277-
description: "How to check the top bar height with NativeScript on iOS and Android.",
353+
description:
354+
"How to check the top bar height with NativeScript on iOS and Android.",
278355
categories: [
279356
{
280357
title: "iOS statusBarManager",
@@ -288,16 +365,20 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
288365
title: "Android Resources",
289366
href: "https://developer.android.com/guide/topics/resources/providing-resources",
290367
},
291-
{ title: "Android bar height id", href: "https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/dimens_material.xml#39" },
368+
{
369+
title: "Android bar height id",
370+
href: "https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/dimens_material.xml#39",
371+
},
292372
],
293373
videoUrl: "https://youtube.com/embed/bXSyBTGJIlc",
294374
videoTitle: "Top Bar Height with NativeScript",
295375
},
296376
{
297-
id: 19,
377+
id: 20,
298378
title: "iOS Spotlight Search",
299379
href: "https://stackblitz.com/edit/nativescript-ios-spotlight-search?file=src%2Fapp%2Fitem%2Fitem.service.ts",
300-
description: "How to allow app content to be searchable using iOS Core Spotlight.",
380+
description:
381+
"How to allow app content to be searchable using iOS Core Spotlight.",
301382
categories: [
302383
{
303384
title: "iOS Core Spotlight",
@@ -308,7 +389,7 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
308389
videoTitle: "Use iOS Spotlight Search with NativeScript",
309390
},
310391
{
311-
id: 20,
392+
id: 21,
312393
title: "Improve UX with NativeScript TouchManager",
313394
href: "https://stackblitz.com/edit/nativescript-touchmanager?file=src%2Fapp%2Futils.ts",
314395
description: "Instantly improve UX with NativeScript's TouchManager.",
@@ -322,40 +403,21 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
322403
videoTitle: "Instantly improve UX with NativeScript's TouchManager",
323404
},
324405
{
325-
id: 21,
406+
id: 22,
326407
title: "Tab Navigation with iOS and Android",
327408
href: "https://stackblitz.com/edit/nativescript-tab-nav-ng?file=src%2Fapp%2Ffeatures%2Fhome%2Fcomponents%2Fhome.component.html",
328-
description: "Example of how to configure tab navigation with lots of options.",
409+
description:
410+
"Example of how to configure tab navigation with lots of options.",
329411
categories: [
330412
{
331413
title: "Angular",
332414
href: "https://angular.dev",
333415
},
334416
],
335417
videoUrl: "https://youtube.com/embed/-FPEdFE1XeM",
336-
videoTitle: "Example of how to configure tab navigation with lots of options.",
418+
videoTitle:
419+
"Example of how to configure tab navigation with lots of options.",
337420
},
338-
// Not ready yet but will discuss with Dylan to update
339-
// {
340-
// id: 15,
341-
// title: 'RxDB Angular Lokijs',
342-
// href: 'https://stackblitz.com/edit/nativescript-angular-rxdb-lokijs-demo-9ha1fc?file=src%2Fapp%2Fcomponents%2Fhero.component.ts',
343-
// description: 'Using RxDB Angular Lokijs.',
344-
// categories: [
345-
// {
346-
// title: 'Angular',
347-
// href: 'https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular'
348-
// },
349-
// {
350-
// title: 'RxDB',
351-
// href: 'https://rxdb.info/'
352-
// },
353-
// {
354-
// title: 'LokiJS',
355-
// href: 'https://github.com/techfort/LokiJS'
356-
// }
357-
// ],
358-
// },
359421
];
360422

361423
</script>

0 commit comments

Comments
 (0)