@tanstack/create 0.62.1 → 0.62.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/frameworks/react/project/base/package.json +4 -7
  3. package/dist/frameworks/react/project/base/src/components/Header.tsx.ejs +0 -7
  4. package/dist/frameworks/react/project/base/src/routes/about.tsx.ejs +3 -8
  5. package/dist/frameworks/react/project/base/src/routes/index.tsx.ejs +7 -7
  6. package/dist/frameworks/react/project/base/src/styles.css.ejs +0 -18
  7. package/dist/frameworks/react/project/base/tsconfig.json.ejs +0 -1
  8. package/dist/frameworks/react/project/base/vite.config.ts.ejs +0 -2
  9. package/dist/frameworks/solid/project/base/package.json +3 -2
  10. package/dist/frameworks/solid/project/base/src/components/Header.tsx.ejs +51 -138
  11. package/dist/frameworks/solid/project/base/src/routes/__root.tsx.ejs +2 -5
  12. package/dist/frameworks/solid/project/base/src/routes/about.tsx.ejs +22 -0
  13. package/dist/frameworks/solid/project/base/src/routes/index.tsx.ejs +59 -94
  14. package/dist/frameworks/solid/project/base/src/styles.css.ejs +187 -7
  15. package/dist/frameworks/solid/project/base/vite.config.ts.ejs +1 -2
  16. package/dist/package-json.js +23 -1
  17. package/dist/types/package-json.d.ts +1 -5
  18. package/package.json +1 -1
  19. package/src/frameworks/react/project/base/package.json +4 -7
  20. package/src/frameworks/react/project/base/src/components/Header.tsx.ejs +0 -7
  21. package/src/frameworks/react/project/base/src/routes/about.tsx.ejs +3 -8
  22. package/src/frameworks/react/project/base/src/routes/index.tsx.ejs +7 -7
  23. package/src/frameworks/react/project/base/src/styles.css.ejs +0 -18
  24. package/src/frameworks/react/project/base/tsconfig.json.ejs +0 -1
  25. package/src/frameworks/react/project/base/vite.config.ts.ejs +0 -2
  26. package/src/frameworks/solid/project/base/package.json +3 -2
  27. package/src/frameworks/solid/project/base/src/components/Header.tsx.ejs +51 -138
  28. package/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs +2 -5
  29. package/src/frameworks/solid/project/base/src/routes/about.tsx.ejs +22 -0
  30. package/src/frameworks/solid/project/base/src/routes/index.tsx.ejs +59 -94
  31. package/src/frameworks/solid/project/base/src/styles.css.ejs +187 -7
  32. package/src/frameworks/solid/project/base/vite.config.ts.ejs +1 -2
  33. package/src/package-json.ts +32 -1
  34. package/tests/package-json.test.ts +32 -0
  35. package/dist/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs +0 -54
  36. package/dist/frameworks/react/project/base/content/blog/first-post.md.ejs +0 -47
  37. package/dist/frameworks/react/project/base/content/blog/fourth-post.md.ejs +0 -42
  38. package/dist/frameworks/react/project/base/content/blog/second-post.mdx.ejs +0 -46
  39. package/dist/frameworks/react/project/base/content/blog/third-post.md.ejs +0 -49
  40. package/dist/frameworks/react/project/base/content-collections.ts.ejs +0 -37
  41. package/dist/frameworks/react/project/base/public/images/lagoon-1.svg +0 -13
  42. package/dist/frameworks/react/project/base/public/images/lagoon-2.svg +0 -12
  43. package/dist/frameworks/react/project/base/public/images/lagoon-3.svg +0 -12
  44. package/dist/frameworks/react/project/base/public/images/lagoon-4.svg +0 -12
  45. package/dist/frameworks/react/project/base/public/images/lagoon-5.svg +0 -12
  46. package/dist/frameworks/react/project/base/public/images/lagoon-about.svg +0 -14
  47. package/dist/frameworks/react/project/base/public/tanstack-circle-logo.png +0 -0
  48. package/dist/frameworks/react/project/base/public/tanstack-word-logo-white.svg +0 -1
  49. package/dist/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs +0 -16
  50. package/dist/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs +0 -23
  51. package/dist/frameworks/react/project/base/src/lib/site.ts.ejs +0 -4
  52. package/dist/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs +0 -71
  53. package/dist/frameworks/react/project/base/src/routes/blog.index.tsx.ejs +0 -93
  54. package/dist/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs +0 -35
  55. package/src/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs +0 -54
  56. package/src/frameworks/react/project/base/content/blog/first-post.md.ejs +0 -47
  57. package/src/frameworks/react/project/base/content/blog/fourth-post.md.ejs +0 -42
  58. package/src/frameworks/react/project/base/content/blog/second-post.mdx.ejs +0 -46
  59. package/src/frameworks/react/project/base/content/blog/third-post.md.ejs +0 -49
  60. package/src/frameworks/react/project/base/content-collections.ts.ejs +0 -37
  61. package/src/frameworks/react/project/base/public/images/lagoon-1.svg +0 -13
  62. package/src/frameworks/react/project/base/public/images/lagoon-2.svg +0 -12
  63. package/src/frameworks/react/project/base/public/images/lagoon-3.svg +0 -12
  64. package/src/frameworks/react/project/base/public/images/lagoon-4.svg +0 -12
  65. package/src/frameworks/react/project/base/public/images/lagoon-5.svg +0 -12
  66. package/src/frameworks/react/project/base/public/images/lagoon-about.svg +0 -14
  67. package/src/frameworks/react/project/base/public/tanstack-circle-logo.png +0 -0
  68. package/src/frameworks/react/project/base/public/tanstack-word-logo-white.svg +0 -1
  69. package/src/frameworks/react/project/base/src/components/MdxCallout.tsx.ejs +0 -16
  70. package/src/frameworks/react/project/base/src/components/MdxMetrics.tsx.ejs +0 -23
  71. package/src/frameworks/react/project/base/src/lib/site.ts.ejs +0 -4
  72. package/src/frameworks/react/project/base/src/routes/blog.$slug.tsx.ejs +0 -71
  73. package/src/frameworks/react/project/base/src/routes/blog.index.tsx.ejs +0 -93
  74. package/src/frameworks/react/project/base/src/routes/rss[.]xml.ts.ejs +0 -35
@@ -1,46 +0,0 @@
1
- ---
2
- title: 'Paper Lantern Cache'
3
- description: 'How to shape navigation and page structure.'
4
- pubDate: 'Jul 15 2024'
5
- heroImage: '/images/lagoon-4.svg'
6
- ---
7
-
8
- Use file-based routes in `src/routes` to grow the app.
9
-
10
- Keep shared UI in `src/components` and tune visual tokens in `src/styles.css`.
11
-
12
- ## Route design tips
13
-
14
- Treat routes like product domains, not technical buckets.
15
-
16
- - `routes/settings.*` for account surfaces
17
- - `routes/billing.*` for payment and plan logic
18
- - `routes/api.*` for server handlers that belong to the same domain
19
-
20
- When route trees map to business intent, onboarding gets faster and refactors
21
- hurt less.
22
-
23
- ```tsx
24
- // src/routes/billing.index.tsx
25
- export const Route = createFileRoute('/billing/')({
26
- component: BillingPage,
27
- })
28
- ```
29
-
30
- <MdxMetrics
31
- items={[
32
- { label: 'Route setup', value: '~10 min' },
33
- { label: 'Type safety', value: 'end-to-end' },
34
- { label: 'Refactor risk', value: 'lowered' },
35
- ]}
36
- />
37
-
38
- ### Collaboration pattern
39
-
40
- Use this lightweight ownership split:
41
-
42
- 1. Product owns route naming and URL intent
43
- 2. Design owns shared layout primitives and tokens
44
- 3. Engineering owns loaders, actions, and caching
45
-
46
- This pattern keeps URL design, data loading, and UI composition in one place.
@@ -1,49 +0,0 @@
1
- ---
2
- title: 'Midnight Compass Build'
3
- description: 'Where to customize theme and typography.'
4
- pubDate: 'Jul 22 2024'
5
- heroImage: '/images/lagoon-2.svg'
6
- ---
7
-
8
- Update CSS variables in `src/styles.css` to fit your brand.
9
-
10
- Then adjust header and footer links to match your product.
11
-
12
- ## Theme alignment checklist
13
-
14
- Before adding one-off colors, audit these variables:
15
-
16
- - `--sea-ink` and `--sea-ink-soft` for readable body copy
17
- - `--surface` and `--surface-strong` for cards and shells
18
- - `--lagoon` / `--lagoon-deep` for links and active UI affordances
19
-
20
- If those are correct, most components will look coherent with zero extra work.
21
-
22
- ### Accessibility reminder
23
-
24
- Check contrast on at least three surfaces:
25
-
26
- 1. page background
27
- 2. primary card
28
- 3. muted card
29
-
30
- You can be highly branded and still hit comfortable readability.
31
-
32
- ## Typography defaults that travel well
33
-
34
- Use a high-contrast display face for headlines and a workhorse sans for body
35
- copy. Then lock in a spacing scale that keeps article rhythm consistent:
36
-
37
- - headings: `mt-10 mb-3`
38
- - paragraphs: `mb-5`
39
- - lists: `mb-6`
40
-
41
- With those defaults set, long-form pages stay readable across both themes.
42
-
43
- ### Practical review loop
44
-
45
- When you tweak tokens, review these pages in order:
46
-
47
- 1. Blog detail page (most typography states)
48
- 2. Blog index page (cards + metadata)
49
- 3. Home page (hero and CTA emphasis)
@@ -1,37 +0,0 @@
1
- import { defineCollection, defineConfig } from '@content-collections/core'
2
- import { compileMarkdown } from '@content-collections/markdown'
3
- import { compileMDX } from '@content-collections/mdx'
4
- import remarkGfm from 'remark-gfm'
5
- import { z } from 'zod'
6
-
7
- const blog = defineCollection({
8
- name: 'blog',
9
- directory: 'content/blog',
10
- include: '**/*.{md,mdx}',
11
- schema: z.object({
12
- title: z.string(),
13
- description: z.string(),
14
- pubDate: z.string(),
15
- content: z.string(),
16
- heroImage: z.string().optional(),
17
- }),
18
- transform: async (document, context) => {
19
- const isMdx = document._meta.filePath.endsWith('.mdx')
20
-
21
- return {
22
- ...document,
23
- slug: document._meta.path,
24
- pubDate: new Date(document.pubDate).toISOString(),
25
- html: isMdx ? null : await compileMarkdown(context, document),
26
- mdx: isMdx
27
- ? await compileMDX(context, document, {
28
- remarkPlugins: [remarkGfm],
29
- })
30
- : null,
31
- }
32
- },
33
- })
34
-
35
- export default defineConfig({
36
- collections: [blog],
37
- })
@@ -1,13 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 1">
2
- <defs>
3
- <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
4
- <stop offset="0%" stop-color="#9be2dc"/>
5
- <stop offset="55%" stop-color="#65c2c4"/>
6
- <stop offset="100%" stop-color="#356f7b"/>
7
- </linearGradient>
8
- </defs>
9
- <rect width="1200" height="630" fill="url(#bg)"/>
10
- <circle cx="980" cy="90" r="120" fill="#fff" fill-opacity="0.32"/>
11
- <path d="M0 500c160-70 280-70 420 0s260 70 420 0 240-70 360 0v130H0z" fill="#d8f4ec" fill-opacity="0.82"/>
12
- <path d="M0 550c160-70 280-70 420 0s260 70 420 0 240-70 360 0v80H0z" fill="#2f6a4a" fill-opacity="0.18"/>
13
- </svg>
@@ -1,12 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 2">
2
- <defs>
3
- <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
4
- <stop offset="0%" stop-color="#b1ebe4"/>
5
- <stop offset="50%" stop-color="#73c7b3"/>
6
- <stop offset="100%" stop-color="#2f6a4a"/>
7
- </linearGradient>
8
- </defs>
9
- <rect width="1200" height="630" fill="url(#bg)"/>
10
- <path d="M0 485c180-96 360-96 540 0s360 96 660 0v145H0z" fill="#f1fbf8" fill-opacity="0.72"/>
11
- <circle cx="180" cy="140" r="90" fill="#fff" fill-opacity="0.26"/>
12
- </svg>
@@ -1,12 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 3">
2
- <defs>
3
- <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
4
- <stop offset="0%" stop-color="#8fdcd0"/>
5
- <stop offset="60%" stop-color="#4ea7ad"/>
6
- <stop offset="100%" stop-color="#1f4f5c"/>
7
- </linearGradient>
8
- </defs>
9
- <rect width="1200" height="630" fill="url(#bg)"/>
10
- <path d="M0 520c160-70 320-70 480 0s320 70 720 0v110H0z" fill="#dff6ee" fill-opacity="0.8"/>
11
- <path d="M0 560c160-70 320-70 480 0s320 70 720 0v70H0z" fill="#173a40" fill-opacity="0.16"/>
12
- </svg>
@@ -1,12 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 4">
2
- <defs>
3
- <linearGradient id="bg" x1="0" x2="1" y1="1" y2="0">
4
- <stop offset="0%" stop-color="#81d8c9"/>
5
- <stop offset="52%" stop-color="#53a9c8"/>
6
- <stop offset="100%" stop-color="#2f6a7b"/>
7
- </linearGradient>
8
- </defs>
9
- <rect width="1200" height="630" fill="url(#bg)"/>
10
- <circle cx="1040" cy="140" r="96" fill="#fff" fill-opacity="0.24"/>
11
- <path d="M0 500c180-85 350-85 520 0s350 85 680 0v130H0z" fill="#effaf6" fill-opacity="0.74"/>
12
- </svg>
@@ -1,12 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 5">
2
- <defs>
3
- <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
4
- <stop offset="0%" stop-color="#9cded4"/>
5
- <stop offset="48%" stop-color="#6fb9cf"/>
6
- <stop offset="100%" stop-color="#24566b"/>
7
- </linearGradient>
8
- </defs>
9
- <rect width="1200" height="630" fill="url(#bg)"/>
10
- <path d="M0 505c160-65 320-65 480 0s320 65 720 0v125H0z" fill="#edf9f4" fill-opacity="0.76"/>
11
- <circle cx="260" cy="120" r="102" fill="#fff" fill-opacity="0.2"/>
12
- </svg>
@@ -1,14 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon about illustration">
2
- <defs>
3
- <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
4
- <stop offset="0%" stop-color="#bceee3"/>
5
- <stop offset="54%" stop-color="#8cc5be"/>
6
- <stop offset="100%" stop-color="#3b7b78"/>
7
- </linearGradient>
8
- </defs>
9
- <rect width="1200" height="630" fill="url(#bg)"/>
10
- <rect x="160" y="130" width="880" height="370" rx="34" fill="#fff" fill-opacity="0.28"/>
11
- <path d="M220 424h760" stroke="#fff" stroke-opacity="0.6" stroke-width="10" stroke-linecap="round"/>
12
- <path d="M220 468h600" stroke="#fff" stroke-opacity="0.46" stroke-width="10" stroke-linecap="round"/>
13
- <circle cx="980" cy="190" r="72" fill="#fff" fill-opacity="0.22"/>
14
- </svg>
@@ -1 +0,0 @@
1
- <svg height="660" viewBox="0 0 3178 660" width="3178" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(.9778)"><g transform="translate(740.0222 38)"><path d="m101.695801 467h101.445312v-264.858398h90.917969v-80.390625h-283.28125v80.390625h90.917969z"/><path d="m241.544434 467h106.708984l68.666992-262.944336h33.017578v-82.304687h-95.703125zm70.820312-68.666992h211.025391l-21.054688-71.538086h-168.916015zm175.136719 68.666992h106.708984l-112.690429-345.249023h-62.685547v82.304687z"/><path d="m600.313965 467h101.445312v-179.443359h41.391602l-66.274414-38.759766 149.536133 218.203125h83.500976v-345.249023h-101.445312v176.572265h-41.391602l66.513672 38.759766-148.818359-215.332031h-84.458008z"/><path d="m1072.01318 473.220703c31.74154 0 58.85743-4.74528 81.34766-14.23584s39.67692-22.96875 51.56006-40.43457 17.82471-38.081869 17.82471-61.848145v-.239257c0-18.66211-3.94776-34.572754-11.84327-47.731934-7.8955-13.15918-19.89827-23.965658-36.0083-32.419434-16.11002-8.453776-36.52669-14.913737-61.25-19.379882l-34.69238-6.220703c-17.22656-3.190105-29.74772-6.898601-37.56348-11.125489-7.81575-4.226888-11.72363-10.248209-11.72363-18.063965v-.239257c0-5.263672 1.59505-10.008952 4.78516-14.23584 3.1901-4.226888 7.93538-7.576498 14.23584-10.048828 6.30045-2.472331 14.07633-3.708497 23.32763-3.708497 9.25131 0 17.5057 1.276042 24.76319 3.828126 7.25748 2.552083 13.07942 6.101074 17.46582 10.646972 4.38639 4.545899 6.8986 10.008952 7.53662 16.38916l.23926 2.392578h93.31054l-.23925-5.263671c-.95704-21.533204-7.01823-40.235189-18.1836-56.105957-11.16536-15.870769-27.27539-28.112793-48.33008-36.726075-21.05468-8.613281-46.97428-12.919922-77.75879-12.919922-27.27539 0-51.59993 4.625651-72.973628 13.876954-21.373698 9.251302-38.161621 22.330729-50.36377 39.238281-12.202148 16.907552-18.303222 36.925456-18.303222 60.053711v.239258c0 26.796875 9.131673 48.728841 27.395019 65.795898s44.541831 28.631185 78.835451 34.692383l34.69238 6.220703c19.14063 3.509115 32.61882 7.33724 40.43457 11.484375 7.81576 4.147135 11.72363 10.288086 11.72363 18.422852v.239257c0 5.742188-1.99381 10.846354-5.98144 15.3125s-9.61019 7.975261-16.86768 10.527344c-7.25748 2.552083-15.99039 3.828125-26.19873 3.828125-9.57031 0-18.3431-1.315918-26.31836-3.947754s-14.59472-6.260579-19.8584-10.88623c-5.26367-4.625651-8.61328-10.048828-10.04882-16.269532l-.47852-2.15332h-93.310546l.239258 4.545899c1.276042 22.649739 8.015137 41.909993 20.217285 57.780761 12.202149 15.870769 29.189453 27.953288 50.961914 36.247559 21.772459 8.294271 47.572429 12.441406 77.399899 12.441406z"/><path d="m1303.73682 467h101.44531v-264.858398h90.91797v-80.390625h-283.28125v80.390625h90.91797z"/><path d="m1443.58545 467h106.70898l68.667-262.944336h33.01757v-82.304687h-95.70312zm70.82031-68.666992h211.02539l-21.05469-71.538086h-168.91601zm175.13672 68.666992h106.70898l-112.69042-345.249023h-62.68555v82.304687z"/><path d="m1941.12451 473.220703c31.74154 0 59.65495-6.300456 83.74024-18.901367 24.08528-12.600912 42.94677-29.667969 56.58447-51.201172 13.63769-21.533203 20.45654-45.777995 20.45654-72.734375v-2.631836h-97.13867l-.23926 2.631836c-1.11653 12.122396-4.46614 22.689616-10.04883 31.70166-5.58268 9.012044-12.91992 15.990397-22.01171 20.935059-9.0918 4.944661-19.45964 7.416992-31.10352 7.416992-13.87695 0-25.9196-3.748372-36.12793-11.245117s-18.06396-18.462728-23.56689-32.897949c-5.50293-14.435222-8.2544-31.861166-8.2544-52.277832v-.239258c0-20.257162 2.75147-37.483724 8.2544-51.679688 5.50293-14.195963 13.31868-25.042317 23.44726-32.539062s22.13135-11.245117 36.0083-11.245117c12.60091 0 23.40739 2.591959 32.41944 7.775878 9.01204 5.18392 16.11002 12.281902 21.29394 21.293946s8.2544 19.260254 9.21143 30.744629l.23925 2.871093h97.13868v-2.15332c0-27.115885-6.69922-51.480306-20.09766-73.093262-13.39844-21.612955-32.10042-38.719889-56.10596-51.3208-24.00553-12.600912-52.03857-18.901368-84.09912-18.901368-35.09114 0-65.43701 6.978353-91.0376 20.935059-25.60058 13.956706-45.33935 34.213867-59.2163 60.771484-13.87696 26.557618-20.81543 58.817546-20.81543 96.779786v.239257c0 37.96224 6.8986 70.262045 20.6958 96.899414 13.7972 26.63737 33.49609 46.974284 59.09668 61.010743 25.60058 14.036458 56.0262 21.054687 91.27685 21.054687z"/><path d="m2214.23975 379.670898 75.36621-101.445312h26.0791l116.04004-156.474609h-106.46973l-106.70898 146.425781h-4.30664zm-99.05274 87.329102h101.44531v-345.249023h-101.44531zm203.84766 0h117.9541l-140.20508-226.577148-74.16992 64.121093z"/></g><path d="m305.114318.62443771c8.717817-1.14462121 17.926803-.36545135 26.712694-.36545135 32.548987 0 64.505987 5.05339923 95.64868 14.63098274 39.74418 12.2236582 76.762804 31.7666864 109.435876 57.477568 40.046637 31.5132839 73.228974 72.8472109 94.520714 119.2362609 39.836383 86.790386 39.544267 191.973146-1.268422 278.398081-26.388695 55.880442-68.724007 102.650458-119.964986 136.75724-41.808813 27.828603-90.706831 44.862601-140.45707 50.89341-63.325458 7.677926-131.784923-3.541603-188.712259-32.729444-106.868873-54.795293-179.52309291-165.076271-180.9604082-285.932068-.27660564-23.300971.08616998-46.74071 4.69884909-69.814998 7.51316071-37.57857 20.61272131-73.903917 40.28618971-106.877282 21.2814003-35.670293 48.7704861-67.1473767 81.6882804-92.5255597 38.602429-29.7610135 83.467691-51.1674988 130.978372-62.05777669 11.473831-2.62966514 22.9946-4.0869914 34.57273-5.4964306l3.658171-.44480576c3.050084-.37153079 6.104217-.74794222 9.162589-1.14972654zm-110.555861 549.44131429c-14.716752 1.577863-30.238964 4.25635-42.869928 12.522173 2.84343.683658 6.102369.004954 9.068638 0 7.124652-.011559 14.317732-.279903 21.434964.032202 17.817402.781913 36.381729 3.63214 53.58741 8.350042 22.029372 6.040631 41.432961 17.928687 62.656049 25.945156 22.389644 8.456554 44.67706 11.084675 68.427 11.084675 11.96813 0 23.845573-.035504 35.450133-3.302696-6.056202-3.225083-14.72582-2.619864-21.434964-3.963236-14.556814-2.915455-28.868774-6.474936-42.869928-11.470264-10.304996-3.676672-20.230803-8.214291-30.11097-12.848661l-6.348531-2.985046c-9.1705-4.309263-18.363277-8.560752-27.845391-12.142608-24.932161-9.418465-52.560181-14.071964-79.144482-11.221737zm22.259385-62.614168c-29.163917 0-58.660076 5.137344-84.915434 18.369597-6.361238 3.206092-12.407546 7.02566-18.137277 11.258891-1.746125 1.290529-4.841829 2.948483-5.487351 5.191839-.654591 2.275558 1.685942 4.182039 3.014086 5.637703 6.562396-3.497556 12.797498-7.199878 19.78612-9.855246 45.19892-17.169893 99.992458-13.570779 145.098218 2.172348 22.494346 7.851335 43.219483 19.592421 65.129314 28.800338 24.503461 10.297807 49.53043 16.975034 75.846795 20.399104 31.04195 4.037546 66.433549.7654 94.808495-13.242161 9.970556-4.921843 23.814245-12.422267 28.030337-23.320339-5.207047.454947-9.892236 2.685918-14.83959 4.224149-7.866632 2.445646-15.827248 4.51974-23.908229 6.138887-27.388113 5.486604-56.512458 6.619429-84.091013 1.639788-25.991939-4.693152-50.142596-14.119246-74.179513-24.03502l-3.068058-1.268177c-2.045137-.846788-4.089983-1.695816-6.135603-2.544467l-3.069142-1.272366c-12.279956-5.085721-24.606928-10.110797-37.210937-14.51024-24.485325-8.546552-50.726667-13.784628-76.671218-13.784628zm51.114145-447.9909432c-34.959602 7.7225298-66.276908 22.7605319-96.457338 41.7180089-17.521434 11.0054099-34.281927 22.2799893-49.465301 36.4444283-22.5792616 21.065423-39.8360564 46.668751-54.8866988 73.411509-15.507372 27.55357-25.4498976 59.665686-30.2554517 90.824149-4.7140432 30.568106-5.4906485 62.70747-.0906864 93.301172 6.7503648 38.248526 19.5989769 74.140579 39.8896436 107.337631 6.8187918-3.184625 11.659796-10.445603 17.3128555-15.336896 11.4149428-9.875888 23.3995608-19.029311 36.2745548-26.928535 4.765981-2.923712 9.662222-5.194315 14.83959-7.275014 1.953055-.785216 5.14604-1.502727 6.06527-3.647828 1.460876-3.406732-1.240754-9.335897-1.704904-12.865654-1.324845-10.095517-2.124534-20.362774-1.874735-30.549941.725492-29.668947 6.269727-59.751557 16.825623-87.521453 7.954845-20.924233 20.10682-39.922168 34.502872-56.971512 4.884699-5.785498 10.077731-11.170545 15.437296-16.512656 3.167428-3.157378 7.098271-5.858983 9.068639-9.908915-10.336599.006606-20.674847 2.987289-30.503603 6.013385-21.174447 6.519522-41.801477 16.19312-59.358362 29.841512-8.008432 6.226409-13.873368 14.387371-21.44733 20.939921-2.32322 2.010516-6.484901 4.704691-9.695199 3.187928-4.8500728-2.29042-4.1014979-11.835213-4.6571581-16.222019-2.1369011-16.873476 4.2548401-38.216325 12.3778671-52.843142 13.039878-23.479694 37.150915-43.528712 65.467327-42.82854 12.228647.302197 22.934587 4.551115 34.625711 7.324555-2.964621-4.211764-6.939158-7.28162-10.717482-10.733763-9.257431-8.459031-19.382979-16.184864-30.503603-22.028985-4.474136-2.350694-9.291232-3.77911-14.015169-5.506421-2.375159-.867783-5.36616-2.062533-6.259834-4.702213-1.654614-4.888817 7.148561-9.416813 10.381943-11.478522 12.499882-7.969406 27.826705-14.525258 42.869928-14.894334 23.509209-.577147 46.479246 12.467678 56.162903 34.665926 3.404469 7.803171 4.411273 16.054969 5.079109 24.382907l.121749 1.56229.174325 2.345587c.01913.260708.038244.521433.057403.782164l.11601 1.56437.120128 1.563971c7.38352-6.019164 12.576553-14.876995 19.78612-21.323859 16.861073-15.07846 39.936636-21.7722 61.831627-14.984333 19.786945 6.133107 36.984382 19.788105 47.105807 37.959541 2.648042 4.754231 10.035685 16.373942 4.698379 21.109183-4.177345 3.707277-9.475079.818243-13.880788-.719162-3.33605-1.16376-6.782939-1.90214-10.241828-2.585698l-1.887262-.369639c-.629089-.122886-1.257979-.246187-1.886079-.372129-11.980496-2.401886-25.91652-2.152533-37.923398-.041284-7.762754 1.364839-15.349083 4.127545-23.083807 5.271929v1.651348c21.149714.175043 41.608563 12.240618 52.043268 30.549941 4.323267 7.585468 6.482428 16.267431 8.138691 24.770223 2.047864 10.50918.608423 21.958802-2.263037 32.201289-.962925 3.433979-2.710699 9.255807-6.817143 10.046802-2.902789.558982-5.36781-2.330878-7.024898-4.279468-4.343878-5.10762-8.475879-9.96341-13.573278-14.374161-12.895604-11.157333-26.530715-21.449361-40.396663-31.373138-7.362086-5.269452-15.425755-12.12007-23.908229-15.340199 2.385052 5.745041 4.721463 11.086326 5.532694 17.339156 2.385876 18.392716-5.314223 35.704625-16.87179 49.540445-3.526876 4.222498-7.29943 8.475545-11.744712 11.755948-1.843407 1.360711-4.156734 3.137561-6.595373 2.752797-7.645687-1.207961-8.555849-12.73272-9.728176-18.637115-3.970415-19.998652-2.375984-39.861068 3.132802-59.448534-4.901187 2.485279-8.443727 7.923994-11.521293 12.385111-6.770975 9.816439-12.645804 20.199291-16.858599 31.375615-16.777806 44.519521-16.616219 96.664142 5.118834 139.523233 2.427098 4.786433 6.110614 4.144058 10.894733 4.144058.720854 0 1.44257-.004515 2.164851-.010924l2.168232-.022283c4.338648-.045438 8.686803-.064635 12.979772.508795 2.227588.297243 5.320818.032202 7.084256 1.673642 2.111344 1.966755.986008 5.338808.4996 7.758859-1.358647 6.765574-1.812904 12.914369-1.812904 19.816178 9.02412-1.398692 11.525415-15.866153 14.724172-23.118874 3.624982-8.216283 7.313444-16.440823 10.667192-24.770223 1.648843-4.093692 3.854171-8.671229 3.275427-13.210785-.649644-5.10184-4.335633-10.510831-6.904531-14.862134-4.86244-8.234447-10.389363-16.70834-13.969002-25.595896-2.861567-7.104926-.197036-15.983399 7.871579-18.521521 4.450228-1.400344 9.198073 1.345848 12.094266 4.562675 6.07269 6.74328 9.992815 16.777697 14.401823 24.692609l34.394873 61.925556c2.920926 5.243856 5.848447 10.481933 8.836976 15.687808 1.165732 2.031158 2.352075 5.167068 4.740424 6.0332 2.127008.77118 5.033095-.325315 7.148561-.748886 5.492297-1.099798 10.97635-2.287117 16.488434-3.28288 6.605266-1.193099 16.673928-.969342 21.434964-6.129805-6.963066-2.205375-15.011895-2.074919-22.259386-1.577863-4.352947.298894-9.178287 1.856116-13.178381-.686135-5.953149-3.783239-9.910373-12.522173-13.552668-18.377854-8.980425-14.439388-17.441465-29.095929-26.041008-43.760726l-1.376261-2.335014-2.765943-4.665258c-1.380597-2.334387-2.750786-4.67476-4.079753-7.036188-1.02723-1.826391-2.549937-4.233231-1.078344-6.24705 1.545791-2.114476 4.91472-2.239146 7.956473-2.243117l.603351.000261c1.195428.001526 2.315572.002427 3.222811-.11692 12.27399-1.615019 24.718635-2.952611 37.098976-2.952611-.963749-3.352237-3.719791-7.141255-2.838484-10.73046 1.972017-8.030506 13.526287-10.543033 18.899867-4.780653 3.60767 3.868283 5.704174 9.192229 8.051303 13.859765 3.097352 6.162006 6.624228 12.118418 9.940876 18.16483 5.805578 10.585967 12.146205 20.881297 18.116667 31.375615.49237.865561.999687 1.726685 1.512269 2.587098l.771613 1.290552c2.577138 4.303168 5.164895 8.635123 6.553094 13.461506-20.735854-.9487-36.30176-25.018751-45.343193-41.283704-.721369 2.604176.450959 4.928448 1.388326 7.431066 1.948109 5.197619 4.276275 10.147535 7.20627 14.862134 4.184765 6.732546 8.982075 13.665732 15.313633 18.553722 11.236043 8.673707 26.05255 8.721596 39.572241 7.794364 8.669619-.595311 19.50252-4.542034 28.030338-1.864372 8.513803 2.673532 11.940924 12.063098 6.884745 19.276187-3.787393 5.403211-8.842747 7.443452-15.128962 8.257566 4.445282 9.53571 10.268996 18.385285 14.490036 28.072919 1.758491 4.035895 3.59118 10.22102 7.8048 12.350433 2.805507 1.416857 6.824562.09743 9.85761.034678-3.043765-8.053625-8.742992-14.887729-11.541904-23.118874 8.533589.390544 16.786875 4.843404 24.732651 7.685374 15.630376 5.590144 31.063836 11.701854 46.475333 17.86913l7.112077 2.848685c6.338978 2.538947 12.71588 5.052299 18.961699 7.812528 2.285297 1.009799 5.449427 3.370401 7.975455 1.917215 2.061054-1.186494 3.394144-4.015253 4.665403-5.931643 3.55573-5.361927 6.775921-10.928622 9.965609-16.513481 12.774414-22.36586 22.143967-46.872692 28.402976-71.833646 20.645168-82.323009 2.934117-173.156241-46.677107-241.922507-19.061454-26.420745-43.033164-49.262193-69.46165-68.1783861-66.13923-47.336721-152.911262-66.294198-232.486917-48.7172481zm135.205158 410.5292842c-17.532977 4.570931-35.601827 8.714164-53.58741 11.040088 2.365265 8.052799 8.145286 15.885969 12.376218 23.118874 1.635653 2.796558 3.3859 6.541816 6.618457 7.755557 3.651364 1.370619 8.063669-.853747 11.508927-1.975838-1.595256-4.364513-4.279573-8.292245-6.476657-12.385112-.905215-1.687677-2.305907-3.685809-1.559805-5.68972 1.410585-3.786541 7.266452-3.563609 10.509727-4.221671 8.54678-1.733916 17.004522-3.898008 25.557073-5.611281 3.150939-.631641 7.538512-2.342438 10.705115-1.285575 2.371037.791232 3.800147 2.744743 5.152304 4.781948l.606196.918752c.80912 1.222827 1.637246 2.41754 2.671212 3.351165 3.457625 3.121874 8.628398 3.60159 13.017619 4.453686-2.678546-6.027421-7.130424-11.301001-9.984571-17.339156-1.659561-3.511592-3.023155-8.677834-6.656381-10.707341-5.005064-2.795733-15.341663 2.461334-20.458024 3.795624zm-110.472507-40.151706c-.825246 10.467897-4.036369 18.984725-9.068639 28.072919 5.76683.729896 11.649079.989984 17.312856 2.39363 4.244947 1.051908 8.156828 3.058296 12.366325 4.211763-2.250671-6.157877-6.426367-11.651913-9.661398-17.339156-3.266358-5.740912-6.189758-12.717032-10.949144-17.339156z"/></g></svg>
@@ -1,16 +0,0 @@
1
- import type { ReactNode } from 'react'
2
-
3
- export function MdxCallout({
4
- title,
5
- children,
6
- }: {
7
- title: string
8
- children: ReactNode
9
- }) {
10
- return (
11
- <aside className="not-prose my-6 rounded-xl border border-[var(--line)] bg-[var(--chip-bg)] p-4">
12
- <p className="island-kicker mb-2">{title}</p>
13
- <div className="text-sm leading-7 text-[var(--sea-ink-soft)]">{children}</div>
14
- </aside>
15
- )
16
- }
@@ -1,23 +0,0 @@
1
- export function MdxMetrics({
2
- items,
3
- }: {
4
- items: Array<{ label: string; value: string }>
5
- }) {
6
- return (
7
- <div className="not-prose my-6 grid gap-3 sm:grid-cols-3">
8
- {items.map((item) => (
9
- <div
10
- key={item.label}
11
- className="rounded-xl border border-[var(--line)] bg-[var(--chip-bg)] px-4 py-3"
12
- >
13
- <p className="m-0 text-xs uppercase tracking-[0.12em] text-[var(--sea-ink-soft)]">
14
- {item.label}
15
- </p>
16
- <p className="m-0 mt-1 text-lg font-semibold text-[var(--sea-ink)]">
17
- {item.value}
18
- </p>
19
- </div>
20
- ))}
21
- </div>
22
- )
23
- }
@@ -1,4 +0,0 @@
1
- export const SITE_TITLE = 'TanStack Start'
2
- export const SITE_DESCRIPTION =
3
- 'A tropical, breathable app starter with full-document SSR, server functions, streaming, and type-safe routing.'
4
- export const SITE_URL = 'https://example.com'
@@ -1,71 +0,0 @@
1
- import { createFileRoute, notFound } from '@tanstack/react-router'
2
- import { MDXContent } from '@content-collections/mdx/react'
3
- import { allBlogs } from 'content-collections'
4
- import { SITE_URL } from '#/lib/site'
5
- import { MdxCallout } from '#/components/MdxCallout'
6
- import { MdxMetrics } from '#/components/MdxMetrics'
7
-
8
- export const Route = createFileRoute('/blog/$slug')({
9
- loader: ({ params }) => {
10
- const post = Array.from(
11
- new Map(
12
- [...allBlogs]
13
- .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
14
- .map((entry) => [entry.slug, entry]),
15
- ).values(),
16
- ).find((entry) => entry.slug === params.slug)
17
- if (!post) throw notFound()
18
- return post
19
- },
20
- head: ({ loaderData, params }) => {
21
- const title = loaderData?.title ?? 'Post'
22
- const description = loaderData?.description ?? ''
23
- const image = loaderData?.heroImage ?? '/images/lagoon-1.svg'
24
- return {
25
- links: [{ rel: 'canonical', href: `${SITE_URL}/blog/${params.slug}` }],
26
- meta: [
27
- { title },
28
- { name: 'description', content: description },
29
- {
30
- property: 'og:image',
31
- content: image.startsWith('http') ? image : `${SITE_URL}${image}`,
32
- },
33
- ],
34
- }
35
- },
36
- component: BlogPost,
37
- })
38
-
39
- function BlogPost() {
40
- const post = Route.useLoaderData()
41
-
42
- return (
43
- <main className="page-wrap px-4 pb-12 pt-16">
44
- <article className="island-shell rounded-2xl p-6 sm:p-8">
45
- {post.heroImage ? (
46
- <img
47
- src={post.heroImage}
48
- alt=""
49
- className="mb-6 h-64 w-full rounded-2xl object-cover"
50
- />
51
- ) : null}
52
- <p className="island-kicker mb-2">Post</p>
53
- <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
54
- {post.title}
55
- </h1>
56
- <p className="mb-6 text-sm text-[var(--sea-ink-soft)]">
57
- {new Date(post.pubDate).toLocaleDateString()}
58
- </p>
59
- <div
60
- className="prose prose-slate prose-headings:text-[var(--sea-ink)] prose-p:text-[var(--sea-ink-soft)] prose-li:text-[var(--sea-ink-soft)] prose-ul:text-[var(--sea-ink-soft)] prose-ol:text-[var(--sea-ink-soft)] prose-strong:text-[var(--sea-ink)] prose-a:text-[var(--lagoon-deep)] max-w-none"
61
- >
62
- {post.mdx ? (
63
- <MDXContent code={post.mdx} components={{ MdxCallout, MdxMetrics }} />
64
- ) : (
65
- <div dangerouslySetInnerHTML={{ __html: post.html ?? '' }} />
66
- )}
67
- </div>
68
- </article>
69
- </main>
70
- )
71
- }
@@ -1,93 +0,0 @@
1
- import { Link, createFileRoute } from '@tanstack/react-router'
2
- import { allBlogs } from 'content-collections'
3
- import { SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from '#/lib/site'
4
-
5
- const canonical = `${SITE_URL}/blog`
6
- const pageTitle = `Blog | ${SITE_TITLE}`
7
-
8
- export const Route = createFileRoute('/blog/')({
9
- head: () => ({
10
- links: [{ rel: 'canonical', href: canonical }],
11
- meta: [
12
- { title: pageTitle },
13
- { name: 'description', content: SITE_DESCRIPTION },
14
- { property: 'og:image', content: `${SITE_URL}/images/lagoon-1.svg` },
15
- ],
16
- }),
17
- component: BlogIndex,
18
- })
19
-
20
- function BlogIndex() {
21
- const postsByDate = Array.from(
22
- new Map(
23
- [...allBlogs]
24
- .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
25
- .map((post) => [post.slug, post]),
26
- ).values(),
27
- )
28
-
29
- const featured = postsByDate[0]
30
- const posts = postsByDate.slice(1)
31
- return (
32
- <main className="page-wrap px-4 pb-8 pt-14">
33
- <section className="mb-4">
34
- <p className="island-kicker mb-2">Latest Dispatches</p>
35
- <h1 className="display-title m-0 text-4xl font-bold tracking-tight text-[var(--sea-ink)] sm:text-5xl">
36
- Blog
37
- </h1>
38
- </section>
39
-
40
- <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
41
- <article className="island-shell rise-in rounded-2xl p-5 sm:p-6 lg:col-span-2">
42
- {featured.heroImage ? (
43
- <img
44
- src={featured.heroImage}
45
- alt=""
46
- className="mb-4 h-44 w-full rounded-xl object-cover xl:h-60"
47
- />
48
- ) : null}
49
- <h2 className="m-0 text-2xl font-semibold text-[var(--sea-ink)]">
50
- <Link
51
- to="/blog/$slug"
52
- params={{ slug: featured.slug }}
53
- className="no-underline"
54
- >
55
- {featured.title}
56
- </Link>
57
- </h2>
58
- <p className="mb-2 mt-3 text-base text-[var(--sea-ink-soft)]">
59
- {featured.description}
60
- </p>
61
- <p className="m-0 text-xs text-[var(--sea-ink-soft)]">
62
- {new Date(featured.pubDate).toLocaleDateString()}
63
- </p>
64
- </article>
65
-
66
- {posts.map((post, index) => (
67
- <article
68
- key={post.slug}
69
- className="island-shell rise-in rounded-2xl p-5 sm:last:col-span-2 lg:last:col-span-1"
70
- style={{ animationDelay: `${index * 80 + 120}ms` }}
71
- >
72
- {post.heroImage ? (
73
- <img
74
- src={post.heroImage}
75
- alt=""
76
- className="mb-4 h-44 w-full rounded-xl object-cover"
77
- />
78
- ) : null}
79
- <h2 className="m-0 text-2xl font-semibold text-[var(--sea-ink)]">
80
- <Link to="/blog/$slug" params={{ slug: post.slug }} className="no-underline">
81
- {post.title}
82
- </Link>
83
- </h2>
84
- <p className="mb-2 mt-2 text-sm text-[var(--sea-ink-soft)]">{post.description}</p>
85
- <p className="m-0 text-xs text-[var(--sea-ink-soft)]">
86
- {new Date(post.pubDate).toLocaleDateString()}
87
- </p>
88
- </article>
89
- ))}
90
- </section>
91
- </main>
92
- )
93
- }
@@ -1,35 +0,0 @@
1
- <% if (routerOnly) { ignoreFile() } %>
2
- import { createFileRoute } from '@tanstack/react-router'
3
- import { allBlogs } from 'content-collections'
4
- import { SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from '#/lib/site'
5
-
6
- export const Route = createFileRoute('/rss.xml')({
7
- server: {
8
- handlers: {
9
- GET: () => {
10
- const posts = Array.from(
11
- new Map(
12
- [...allBlogs]
13
- .sort((a, b) => new Date(b.pubDate).valueOf() - new Date(a.pubDate).valueOf())
14
- .map((post) => [post.slug, post]),
15
- ).values(),
16
- )
17
-
18
- const items = posts
19
- .map((post) => {
20
- const url = `${SITE_URL}/blog/${post.slug}`
21
- return `<item><title><![CDATA[${post.title}]]></title><description><![CDATA[${post.description}]]></description><link>${url}</link><guid>${url}</guid><pubDate>${new Date(post.pubDate).toUTCString()}</pubDate></item>`
22
- })
23
- .join('')
24
-
25
- const xml = `<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><title><![CDATA[${SITE_TITLE}]]></title><description><![CDATA[${SITE_DESCRIPTION}]]></description><link>${SITE_URL}</link>${items}</channel></rss>`
26
-
27
- return new Response(xml, {
28
- headers: {
29
- 'Content-Type': 'application/rss+xml; charset=utf-8',
30
- },
31
- })
32
- },
33
- },
34
- },
35
- })
@@ -1,54 +0,0 @@
1
- ---
2
- title: 'Velvet Runtime Notes'
3
- description: 'Use color tokens to keep light and dark themes aligned.'
4
- pubDate: 'Aug 05 2024'
5
- heroImage: '/images/lagoon-5.svg'
6
- ---
7
-
8
- Semantic tokens keep your UI stable while the brand evolves.
9
-
10
- Instead of hard-coding one-off colors in components, shape a small set of
11
- variables and map all surfaces to those variables.
12
-
13
- ## Why this matters
14
-
15
- - You can restyle the app in minutes instead of days
16
- - Light and dark themes stay behaviorally consistent
17
- - Add-on pages inherit your visual identity by default
18
-
19
- <MdxCallout title="MDX Component Demo">
20
- This callout is rendered from JSX inside an MDX post. It is useful for
21
- release notes, warnings, and migration tips where you want stronger visual
22
- emphasis than plain markdown blocks.
23
- </MdxCallout>
24
-
25
- <MdxMetrics
26
- items={[
27
- { label: 'Token count', value: '12 core vars' },
28
- { label: 'Theme modes', value: 'light + dark + auto' },
29
- { label: 'Restyle time', value: '< 30 min' },
30
- ]}
31
- />
32
-
33
- ### Token-to-component mapping
34
-
35
- | Token | Typical usage |
36
- | --- | --- |
37
- | `--surface` | Card backgrounds |
38
- | `--line` | Borders and separators |
39
- | `--lagoon-deep` | Links and active nav |
40
-
41
- Keep the mapping documented and your team will make fewer ad-hoc styling calls.
42
-
43
- ### Example: deriving UI from semantic tokens
44
-
45
- ```tsx
46
- const button = {
47
- color: 'var(--sea-ink)',
48
- background: 'var(--surface)',
49
- borderColor: 'var(--line)',
50
- }
51
- ```
52
-
53
- MDX is useful here because you can interleave narrative, tables, code blocks,
54
- and custom JSX components in one authoring surface.
@@ -1,47 +0,0 @@
1
- ---
2
- title: 'Neon Mango Protocol'
3
- description: 'A quick walkthrough of the starter foundations.'
4
- pubDate: 'Jul 08 2024'
5
- heroImage: '/images/lagoon-3.svg'
6
- ---
7
-
8
- This starter ships with routes, SSR, and a calm visual system out of the box.
9
-
10
- Start by editing route files, then layer in add-ons as needed.
11
-
12
- ## What you get on day one
13
-
14
- - Full-document SSR using TanStack Start
15
- - Type-safe file routing with generated route types
16
- - A reusable design token system for light and dark themes
17
-
18
- The goal is simple: let teams ship product pages and APIs without spending the
19
- first week wiring framework internals.
20
-
21
- ### Suggested order of operations
22
-
23
- 1. Make the home route feel like your product
24
- 2. Add one feature route and one API route
25
- 3. Introduce add-ons only after your core UX is clear
26
-
27
- > Keep the first commit boring. Reliable defaults beat clever setup code.
28
-
29
- ## Baseline delivery checklist
30
-
31
- Before introducing custom infra, confirm these are green:
32
-
33
- - `pnpm dev` starts cleanly
34
- - one server route returns typed data
35
- - one API route validates input/output
36
- - one integration test exercises a full page render
37
-
38
- When these are in place, you can iterate quickly without losing confidence.
39
-
40
- ### Example request flow
41
-
42
- 1. Client navigation enters route loader
43
- 2. Loader calls server function
44
- 3. Server function reads data source and returns typed payload
45
- 4. Route component renders immediately with stable shape
46
-
47
- That flow is simple, predictable, and easy to debug.
@@ -1,42 +0,0 @@
1
- ---
2
- title: 'Static Tide Almanac'
3
- description: 'Dial in layout polish and image rhythm across cards.'
4
- pubDate: 'Jul 29 2024'
5
- heroImage: '/images/lagoon-1.svg'
6
- ---
7
-
8
- As your app grows, visual rhythm matters as much as feature scope.
9
-
10
- Use larger feature cards to call attention to primary content, then support with
11
- smaller cards for secondary updates.
12
-
13
- ## Practical layout pattern
14
-
15
- Use one featured card followed by standard cards in a responsive grid:
16
-
17
- - `lg:col-span-2` for the featured story
18
- - regular span for supporting posts
19
- - consistent card media height below `lg`
20
-
21
- That gives you hierarchy without reinventing every breakpoint.
22
-
23
- ### A quick spacing rule
24
-
25
- Pair spacing in steps of 4 (`p-4`, `p-8`, `gap-4`, `gap-8`) and only break that
26
- rule for hero sections.
27
-
28
- ## Card hierarchy recipe
29
-
30
- For content-heavy indexes, this sequence works well:
31
-
32
- 1. One featured card with expanded width
33
- 2. Three to six standard cards for breadth
34
- 3. Optional utility card for onboarding links
35
-
36
- Keep title sizes mostly consistent and let width + image treatment carry
37
- hierarchy. That avoids jarring jumps as breakpoints shift.
38
-
39
- ### Avoiding layout drift
40
-
41
- If cards start to look uneven, check image heights first, then paragraph length.
42
- Consistency there usually fixes 80% of visual noise.