Skip to content

Commit 5079caf

Browse files
mythzmythz
committed
Update old react spa post
1 parent 02bf481 commit 5079caf

File tree

2 files changed

+0
-141
lines changed

2 files changed

+0
-141
lines changed

MyApp/_posts/2024-03-06_net8-react-spa-template.md renamed to MyApp/_posts/2025-12-01_net8-react-spa-template.md

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,6 @@ HMR (Hot Module Reload), TypeScript support with TSX enabling development of con
5353
Whilst a great starting point, it's still only a basic template configured with a bare-bones React Vite App that's modified
5454
to show an example of calling a Minimal API.
5555

56-
### Built-in API Integration
57-
58-
Although the approach used isn't very scalable, with a proxy rule needed for every user-defined API route:
59-
60-
```ts
61-
export default defineConfig({
62-
//...
63-
server: {
64-
proxy: {
65-
'^/weatherforecast': {
66-
target,
67-
secure: false
68-
}
69-
},
70-
}
71-
})
72-
```
73-
7456
And the need for hand maintained Types to describe the shape of the API responses with [Stringly Typed](https://wiki.c2.com/?StringlyTyped)
7557
fetch API calls referencing **string** routes:
7658

‎MyApp/wwwroot/css/app.css‎

Lines changed: 0 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -673,9 +673,6 @@
673673
.m-1305 {
674674
margin: calc(var(--spacing) * 1305);
675675
}
676-
.-mx-1 {
677-
margin-inline: calc(var(--spacing) * -1);
678-
}
679676
.-mx-1\.5 {
680677
margin-inline: calc(var(--spacing) * -1.5);
681678
}
@@ -697,9 +694,6 @@
697694
.mx-auto {
698695
margin-inline: auto;
699696
}
700-
.-my-1 {
701-
margin-block: calc(var(--spacing) * -1);
702-
}
703697
.-my-1\.5 {
704698
margin-block: calc(var(--spacing) * -1.5);
705699
}
@@ -826,9 +820,6 @@
826820
.mt-24 {
827821
margin-top: calc(var(--spacing) * 24);
828822
}
829-
.mt-32 {
830-
margin-top: calc(var(--spacing) * 32);
831-
}
832823
.mt-60 {
833824
margin-top: calc(var(--spacing) * 60);
834825
}
@@ -844,9 +835,6 @@
844835
.-mr-24 {
845836
margin-right: calc(var(--spacing) * -24);
846837
}
847-
.-mr-32 {
848-
margin-right: calc(var(--spacing) * -32);
849-
}
850838
.-mr-32\! {
851839
margin-right: calc(var(--spacing) * -32) !important;
852840
}
@@ -931,9 +919,6 @@
931919
.mb-\[env\(safe-area-inset-bottom\)\] {
932920
margin-bottom: env(safe-area-inset-bottom);
933921
}
934-
.-ml-0 {
935-
margin-left: calc(var(--spacing) * -0);
936-
}
937922
.-ml-0\.5 {
938923
margin-left: calc(var(--spacing) * -0.5);
939924
}
@@ -955,9 +940,6 @@
955940
.-ml-px {
956941
margin-left: -1px;
957942
}
958-
.ml-0 {
959-
margin-left: calc(var(--spacing) * 0);
960-
}
961943
.ml-0\.5 {
962944
margin-left: calc(var(--spacing) * 0.5);
963945
}
@@ -1050,15 +1032,9 @@
10501032
width: calc(var(--spacing) * 5);
10511033
height: calc(var(--spacing) * 5);
10521034
}
1053-
.h-0 {
1054-
height: calc(var(--spacing) * 0);
1055-
}
10561035
.h-0\.5 {
10571036
height: calc(var(--spacing) * 0.5);
10581037
}
1059-
.h-1 {
1060-
height: calc(var(--spacing) * 1);
1061-
}
10621038
.h-1\.5 {
10631039
height: calc(var(--spacing) * 1.5);
10641040
}
@@ -1209,9 +1185,6 @@
12091185
.w-0 {
12101186
width: calc(var(--spacing) * 0);
12111187
}
1212-
.w-1 {
1213-
width: calc(var(--spacing) * 1);
1214-
}
12151188
.w-1\/2 {
12161189
width: calc(1/2 * 100%);
12171190
}
@@ -1509,10 +1482,6 @@
15091482
--tw-translate-x: calc(var(--spacing) * 0);
15101483
translate: var(--tw-translate-x) var(--tw-translate-y);
15111484
}
1512-
.translate-x-1 {
1513-
--tw-translate-x: calc(var(--spacing) * 1);
1514-
translate: var(--tw-translate-x) var(--tw-translate-y);
1515-
}
15161485
.translate-x-1\/4 {
15171486
--tw-translate-x: calc(1/4 * 100%);
15181487
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1533,18 +1502,10 @@
15331502
--tw-translate-x: 100%;
15341503
translate: var(--tw-translate-x) var(--tw-translate-y);
15351504
}
1536-
.-translate-y-1 {
1537-
--tw-translate-y: calc(var(--spacing) * -1);
1538-
translate: var(--tw-translate-x) var(--tw-translate-y);
1539-
}
15401505
.-translate-y-1\/2 {
15411506
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
15421507
translate: var(--tw-translate-x) var(--tw-translate-y);
15431508
}
1544-
.-translate-y-3 {
1545-
--tw-translate-y: calc(var(--spacing) * -3);
1546-
translate: var(--tw-translate-x) var(--tw-translate-y);
1547-
}
15481509
.-translate-y-3\/4 {
15491510
--tw-translate-y: calc(calc(3/4 * 100%) * -1);
15501511
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1553,10 +1514,6 @@
15531514
--tw-translate-y: calc(var(--spacing) * 0);
15541515
translate: var(--tw-translate-x) var(--tw-translate-y);
15551516
}
1556-
.translate-y-1 {
1557-
--tw-translate-y: calc(var(--spacing) * 1);
1558-
translate: var(--tw-translate-x) var(--tw-translate-y);
1559-
}
15601517
.translate-y-1\/3 {
15611518
--tw-translate-y: calc(1/3 * 100%);
15621519
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1683,9 +1640,6 @@
16831640
.justify-start {
16841641
justify-content: flex-start;
16851642
}
1686-
.gap-0 {
1687-
gap: calc(var(--spacing) * 0);
1688-
}
16891643
.gap-0\.5 {
16901644
gap: calc(var(--spacing) * 0.5);
16911645
}
@@ -2053,9 +2007,6 @@
20532007
.border-blue-600 {
20542008
border-color: var(--color-blue-600);
20552009
}
2056-
.border-cyan-500 {
2057-
border-color: var(--color-cyan-500);
2058-
}
20592010
.border-cyan-500\/20 {
20602011
border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
20612012
@supports (color: color-mix(in lab, red, red)) {
@@ -2123,9 +2074,6 @@
21232074
.border-slate-700 {
21242075
border-color: var(--color-slate-700);
21252076
}
2126-
.border-slate-800 {
2127-
border-color: var(--color-slate-800);
2128-
}
21292077
.border-slate-800\/50 {
21302078
border-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);
21312079
@supports (color: color-mix(in lab, red, red)) {
@@ -2137,9 +2085,6 @@
21372085
.border-transparent {
21382086
border-color: transparent;
21392087
}
2140-
.border-white {
2141-
border-color: var(--color-white);
2142-
}
21432088
.border-white\/5 {
21442089
border-color: color-mix(in srgb, #fff 5%, transparent);
21452090
@supports (color: color-mix(in lab, red, red)) {
@@ -2249,9 +2194,6 @@
22492194
}
22502195
}
22512196
}
2252-
.bg-blue-950 {
2253-
background-color: var(--color-blue-950);
2254-
}
22552197
.bg-blue-950\/50 {
22562198
background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 50%, transparent);
22572199
@supports (color: color-mix(in lab, red, red)) {
@@ -2277,9 +2219,6 @@
22772219
.bg-cyan-600 {
22782220
background-color: var(--color-cyan-600);
22792221
}
2280-
.bg-cyan-950 {
2281-
background-color: var(--color-cyan-950);
2282-
}
22832222
.bg-cyan-950\/30 {
22842223
background-color: color-mix(in srgb, oklch(30.2% 0.056 229.695) 30%, transparent);
22852224
@supports (color: color-mix(in lab, red, red)) {
@@ -2475,9 +2414,6 @@
24752414
.bg-slate-200 {
24762415
background-color: var(--color-slate-200);
24772416
}
2478-
.bg-slate-400 {
2479-
background-color: var(--color-slate-400);
2480-
}
24812417
.bg-slate-400\/10 {
24822418
background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
24832419
@supports (color: color-mix(in lab, red, red)) {
@@ -2627,10 +2563,6 @@
26272563
--tw-gradient-from: #80caff;
26282564
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26292565
}
2630-
.from-black {
2631-
--tw-gradient-from: var(--color-black);
2632-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2633-
}
26342566
.from-black\/70 {
26352567
--tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
26362568
@supports (color: color-mix(in lab, red, red)) {
@@ -2668,10 +2600,6 @@
26682600
--tw-gradient-from: var(--color-sky-400);
26692601
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26702602
}
2671-
.from-slate-200 {
2672-
--tw-gradient-from: var(--color-slate-200);
2673-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2674-
}
26752603
.from-slate-200\/0 {
26762604
--tw-gradient-from: color-mix(in srgb, oklch(92.9% 0.013 255.508) 0%, transparent);
26772605
@supports (color: color-mix(in lab, red, red)) {
@@ -2685,10 +2613,6 @@
26852613
--tw-gradient-from: var(--color-slate-900);
26862614
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
26872615
}
2688-
.from-teal-100 {
2689-
--tw-gradient-from: var(--color-teal-100);
2690-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2691-
}
26922616
.from-teal-100\/60 {
26932617
--tw-gradient-from: color-mix(in srgb, oklch(95.3% 0.051 180.801) 60%, transparent);
26942618
@supports (color: color-mix(in lab, red, red)) {
@@ -2706,11 +2630,6 @@
27062630
--tw-gradient-from: var(--color-white);
27072631
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
27082632
}
2709-
.via-black {
2710-
--tw-gradient-via: var(--color-black);
2711-
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
2712-
--tw-gradient-stops: var(--tw-gradient-via-stops);
2713-
}
27142633
.via-black\/20 {
27152634
--tw-gradient-via: color-mix(in srgb, #000 20%, transparent);
27162635
@supports (color: color-mix(in lab, red, red)) {
@@ -2744,10 +2663,6 @@
27442663
--tw-gradient-to: #64d2a3;
27452664
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
27462665
}
2747-
.to-blue-100 {
2748-
--tw-gradient-to: var(--color-blue-100);
2749-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2750-
}
27512666
.to-blue-100\/60 {
27522667
--tw-gradient-to: color-mix(in srgb, oklch(93.2% 0.032 255.585) 60%, transparent);
27532668
@supports (color: color-mix(in lab, red, red)) {
@@ -2789,10 +2704,6 @@
27892704
--tw-gradient-to: var(--color-purple-600);
27902705
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
27912706
}
2792-
.to-slate-200 {
2793-
--tw-gradient-to: var(--color-slate-200);
2794-
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2795-
}
27962707
.to-slate-200\/0 {
27972708
--tw-gradient-to: color-mix(in srgb, oklch(92.9% 0.013 255.508) 0%, transparent);
27982709
@supports (color: color-mix(in lab, red, red)) {
@@ -2836,9 +2747,6 @@
28362747
.fill-gray-600 {
28372748
fill: var(--color-gray-600);
28382749
}
2839-
.fill-gray-800 {
2840-
fill: var(--color-gray-800);
2841-
}
28422750
.fill-gray-800\/20 {
28432751
fill: color-mix(in srgb, oklch(27.8% 0.033 256.848) 20%, transparent);
28442752
@supports (color: color-mix(in lab, red, red)) {
@@ -2889,9 +2797,6 @@
28892797
.stroke-slate-700 {
28902798
stroke: var(--color-slate-700);
28912799
}
2892-
.stroke-white {
2893-
stroke: var(--color-white);
2894-
}
28952800
.stroke-white\/10 {
28962801
stroke: color-mix(in srgb, #fff 10%, transparent);
28972802
@supports (color: color-mix(in lab, red, red)) {
@@ -2984,9 +2889,6 @@
29842889
.px-12 {
29852890
padding-inline: calc(var(--spacing) * 12);
29862891
}
2987-
.py-0 {
2988-
padding-block: calc(var(--spacing) * 0);
2989-
}
29902892
.py-0\.5 {
29912893
padding-block: calc(var(--spacing) * 0.5);
29922894
}
@@ -3038,9 +2940,6 @@
30382940
.py-32 {
30392941
padding-block: calc(var(--spacing) * 32);
30402942
}
3041-
.pt-0 {
3042-
padding-top: calc(var(--spacing) * 0);
3043-
}
30442943
.pt-0\.5 {
30452944
padding-top: calc(var(--spacing) * 0.5);
30462945
}
@@ -3350,9 +3249,6 @@
33503249
.text-balance {
33513250
text-wrap: balance;
33523251
}
3353-
.text-wrap {
3354-
text-wrap: wrap;
3355-
}
33563252
.break-words {
33573253
overflow-wrap: break-word;
33583254
}
@@ -3420,9 +3316,6 @@
34203316
.text-cyan-400 {
34213317
color: var(--color-cyan-400);
34223318
}
3423-
.text-cyan-500 {
3424-
color: var(--color-cyan-500);
3425-
}
34263319
.text-cyan-500\/5 {
34273320
color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 5%, transparent);
34283321
@supports (color: color-mix(in lab, red, red)) {
@@ -3770,9 +3663,6 @@
37703663
}
37713664
}
37723665
}
3773-
.ring-cyan-500 {
3774-
--tw-ring-color: var(--color-cyan-500);
3775-
}
37763666
.ring-cyan-500\/30 {
37773667
--tw-ring-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 30%, transparent);
37783668
@supports (color: color-mix(in lab, red, red)) {
@@ -3787,9 +3677,6 @@
37873677
.ring-gray-300 {
37883678
--tw-ring-color: var(--color-gray-300);
37893679
}
3790-
.ring-gray-900 {
3791-
--tw-ring-color: var(--color-gray-900);
3792-
}
37933680
.ring-gray-900\/10 {
37943681
--tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 10%, transparent);
37953682
@supports (color: color-mix(in lab, red, red)) {
@@ -3812,9 +3699,6 @@
38123699
}
38133700
}
38143701
}
3815-
.ring-slate-900 {
3816-
--tw-ring-color: var(--color-slate-900);
3817-
}
38183702
.ring-slate-900\/5 {
38193703
--tw-ring-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 5%, transparent);
38203704
@supports (color: color-mix(in lab, red, red)) {
@@ -3831,9 +3715,6 @@
38313715
}
38323716
}
38333717
}
3834-
.ring-white {
3835-
--tw-ring-color: var(--color-white);
3836-
}
38373718
.ring-white\/5 {
38383719
--tw-ring-color: color-mix(in srgb, #fff 5%, transparent);
38393720
@supports (color: color-mix(in lab, red, red)) {
@@ -3911,10 +3792,6 @@
39113792
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
39123793
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
39133794
}
3914-
.backdrop-filter {
3915-
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3916-
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3917-
}
39183795
.transition {
39193796
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
39203797
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

0 commit comments

Comments
 (0)