Skip to content

Commit 476d7a5

Browse files
colepeterscolepeters
authored
feat!: update vite config & monogram (#57)
* feat!: update vite config & monogram Updates the Explorer to use the current methodology for building and serving (via Sanity CLI) and updates the Vite config methodology accordingly (extending via defineCliConfig). Also updates the Sanity monogram to match the new brand ID. * chore: add script to update site title
1 parent bdd34e2 commit 476d7a5

File tree

13 files changed

+1816
-218
lines changed

13 files changed

+1816
-218
lines changed

‎apps/sdk-explorer/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ node_modules
1111
dist
1212
dist-ssr
1313
*.local
14+
.sanity
1415

1516
# Editor directories and files
1617
.vscode/*

‎apps/sdk-explorer/index.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎apps/sdk-explorer/package.json

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,14 @@
44
"private": true,
55
"type": "module",
66
"scripts": {
7-
"build": "tsc -b && vite build",
8-
"check-types": "tsc --noEmit",
9-
"dev": "vite",
10-
"lint": "eslint .",
11-
"preview": "vite preview"
7+
"build": "sanity build",
8+
"postbuild": "node scripts/update-title.mjs",
9+
"dev": "sanity dev"
1210
},
1311
"dependencies": {
1412
"@sanity/color": "^3.0.6",
1513
"@sanity/icons": "^3.7.0",
16-
"@sanity/logos": "^2.1.13",
14+
"@sanity/logos": "^2.2.0",
1715
"@sanity/sdk": "^1.0.0",
1816
"@sanity/sdk-react": "^1.0.0",
1917
"@sanity/types": "^3.72.1",
@@ -22,6 +20,7 @@
2220
"react": "^19.0.0",
2321
"react-dom": "^19.0.0",
2422
"react-router": "^7.5.3",
23+
"sanity": "^3.88.3",
2524
"styled-components": "^6.1.14",
2625
"tailwindcss": "^4.0.0"
2726
},

‎apps/sdk-explorer/sanity.cli.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {defineCliConfig} from 'sanity/cli'
2+
3+
export default defineCliConfig({
4+
app: {
5+
organizationId: 'oSyH1iET5',
6+
entry: './src/App.tsx',
7+
},
8+
//eslint-disable-next-line @typescript-eslint/no-explicit-any
9+
vite: async (viteConfig: any) => {
10+
const {default: tailwindcss} = await import('@tailwindcss/vite')
11+
return {
12+
...viteConfig,
13+
server: {
14+
...viteConfig.server,
15+
fs: {
16+
...viteConfig.server?.fs,
17+
strict: false,
18+
},
19+
},
20+
plugins: [...viteConfig.plugins, tailwindcss()],
21+
}
22+
},
23+
})

‎apps/sdk-explorer/scripts/update-title.mjs

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* eslint-disable no-console */
2+
import fs from 'fs'
3+
4+
const indexHtmlPath = 'dist/index.html'
5+
6+
function updateTitle() {
7+
console.log('Updating site title…')
8+
9+
try {
10+
if (!fs.existsSync(indexHtmlPath)) {
11+
console.error(`File not found: ${indexHtmlPath}`)
12+
return
13+
}
14+
15+
const titleRegex = /<title>(.*?)<\/title>/i
16+
17+
const baseHtml = fs.readFileSync(indexHtmlPath, 'utf8')
18+
const newHtml = baseHtml.replace(titleRegex, '<title>Sanity App SDK Explorer</title>')
19+
20+
fs.writeFileSync(indexHtmlPath, newHtml)
21+
22+
console.log('Updated site title')
23+
} catch (e) {
24+
console.error('Error updating site title:', e)
25+
}
26+
}
27+
28+
updateTitle()

‎apps/sdk-explorer/src/App.tsx

Lines changed: 42 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,53 @@
1-
import {hues} from '@sanity/color'
2-
import {SanityMonogram} from '@sanity/logos'
3-
import {Box, Card, Container, Flex, Inline, Text} from '@sanity/ui'
4-
import {type JSX} from 'react'
5-
import {BrowserRouter, Link, Route, Routes} from 'react-router'
1+
import './inter.css'
2+
3+
import {ResourceProvider} from '@sanity/sdk-react'
4+
import {Flex, Spinner, ThemeProvider} from '@sanity/ui'
5+
import {buildTheme, ThemeConfig} from '@sanity/ui/theme'
6+
import {type JSX, StrictMode, Suspense} from 'react'
67
import {createGlobalStyle} from 'styled-components'
78

8-
import ScrollOnPathChange from './components/ScollOnPathChange'
9-
import DocumentSearch from './examples/document-collections/DocumentSearch/DocumentSearch'
10-
import DocumentTable from './examples/document-collections/DocumentTable/DocumentTable'
11-
import PreviewGrid from './examples/document-collections/PreviewGrid/PreviewGrid'
12-
import PreviewList from './examples/document-collections/PreviewList/PreviewList'
13-
import MoviesByActor from './examples/groq/MoviesByActor/MoviesByActor'
14-
import Home from './Home'
9+
import Explorer from './Explorer'
10+
11+
const themeConfig: ThemeConfig = {
12+
media: [320, 600],
13+
}
14+
15+
const theme = buildTheme(themeConfig)
16+
17+
const sanityConfig = {
18+
projectId: 'v28v5k8m',
19+
dataset: 'production',
20+
}
1521

16-
const Body = createGlobalStyle`
22+
const GlobalStyle = createGlobalStyle`
1723
body {
18-
background-color: ${hues.gray['50'].hex};
24+
margin: 0;
1925
}
2026
`
2127

28+
function Loading() {
29+
return (
30+
<Flex align="center" justify="center" style={{inlineSize: '100dvw', blockSize: '100dvh'}}>
31+
<Spinner />
32+
</Flex>
33+
)
34+
}
35+
2236
export default function App(): JSX.Element {
2337
return (
24-
<BrowserRouter>
25-
<Body />
26-
<ScrollOnPathChange />
27-
<Card style={{position: 'relative'}} tone="transparent">
28-
<Card
29-
tone="transparent"
30-
shadow={1}
31-
marginBottom={5}
32-
style={{
33-
position: 'sticky',
34-
top: 0,
35-
zIndex: 3,
36-
backgroundColor: 'white',
37-
}}
38-
>
39-
<Box paddingX={4}>
40-
<Flex align="center" justify="space-between" style={{height: 52}}>
41-
<Text as="h1" size={2} weight="medium">
42-
<Link to="/" style={{color: 'inherit'}}>
43-
<Flex align="center" gap={3}>
44-
<SanityMonogram style={{margin: 0}} />
45-
SDK Explorer
46-
</Flex>
47-
</Link>
48-
</Text>
49-
<Inline space={4}>
50-
<Text weight="medium" size={1}>
51-
<a href="/">Home</a>
52-
</Text>
53-
<Text weight="medium" size={1}>
54-
<a href="https://sanity.io/docs/app-sdk">App SDK Docs</a>
55-
</Text>
56-
<Text weight="medium" size={1}>
57-
<a href="https://github.com/sanity-io/sdk">GitHub</a>
58-
</Text>
59-
</Inline>
60-
</Flex>
61-
</Box>
62-
</Card>
63-
<Container width={2} padding={4}>
64-
<Routes>
65-
<Route path="/" element={<Home />} />
66-
<Route path="/document-collections/document-search" element={<DocumentSearch />} />
67-
<Route path="/document-collections/document-table" element={<DocumentTable />} />
68-
<Route path="/document-collections/preview-list" element={<PreviewList />} />
69-
<Route path="/document-collections/preview-grid" element={<PreviewGrid />} />
70-
<Route path="/groq/movies-by-actor" element={<MoviesByActor />} />
71-
</Routes>
72-
</Container>
73-
</Card>
74-
</BrowserRouter>
38+
<ThemeProvider theme={theme}>
39+
<StrictMode>
40+
<GlobalStyle />
41+
<Suspense fallback={<Loading />}>
42+
<ResourceProvider
43+
projectId={sanityConfig.projectId}
44+
dataset={sanityConfig.dataset}
45+
fallback={<Loading />}
46+
>
47+
<Explorer />
48+
</ResourceProvider>
49+
</Suspense>
50+
</StrictMode>
51+
</ThemeProvider>
7552
)
7653
}

‎apps/sdk-explorer/src/Explorer.tsx

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import {hues} from '@sanity/color'
2+
import {SanityMonogram} from '@sanity/logos'
3+
import {Box, Card, Container, Flex, Inline, Text} from '@sanity/ui'
4+
import {type JSX} from 'react'
5+
import {BrowserRouter, Link, Route, Routes} from 'react-router'
6+
import {createGlobalStyle} from 'styled-components'
7+
8+
import ScrollOnPathChange from './components/ScollOnPathChange'
9+
import DocumentSearch from './examples/document-collections/DocumentSearch/DocumentSearch'
10+
import DocumentTable from './examples/document-collections/DocumentTable/DocumentTable'
11+
import PreviewGrid from './examples/document-collections/PreviewGrid/PreviewGrid'
12+
import PreviewList from './examples/document-collections/PreviewList/PreviewList'
13+
import MoviesByActor from './examples/groq/MoviesByActor/MoviesByActor'
14+
import Home from './Home'
15+
16+
const Body = createGlobalStyle`
17+
body {
18+
background-color: ${hues.gray['50'].hex};
19+
}
20+
`
21+
22+
export default function App(): JSX.Element {
23+
return (
24+
<BrowserRouter>
25+
<Body />
26+
<ScrollOnPathChange />
27+
<Card style={{position: 'relative'}} tone="transparent">
28+
<Card
29+
tone="transparent"
30+
shadow={1}
31+
marginBottom={5}
32+
style={{
33+
position: 'sticky',
34+
top: 0,
35+
zIndex: 3,
36+
backgroundColor: 'white',
37+
}}
38+
>
39+
<Box paddingX={4}>
40+
<Flex align="center" justify="space-between" style={{height: 52}}>
41+
<Text as="h1" size={2} weight="medium">
42+
<Link to="/" style={{color: 'inherit'}}>
43+
<Flex align="center" gap={3}>
44+
<SanityMonogram scheme="dark" style={{margin: 0}} />
45+
SDK Explorer
46+
</Flex>
47+
</Link>
48+
</Text>
49+
<Inline space={4}>
50+
<Text weight="medium" size={1}>
51+
<a href="/">Home</a>
52+
</Text>
53+
<Text weight="medium" size={1}>
54+
<a href="https://sanity.io/docs/app-sdk">App SDK Docs</a>
55+
</Text>
56+
<Text weight="medium" size={1}>
57+
<a href="https://github.com/sanity-io/sdk">GitHub</a>
58+
</Text>
59+
</Inline>
60+
</Flex>
61+
</Box>
62+
</Card>
63+
<Container width={2} padding={4}>
64+
<Routes>
65+
<Route path="/" element={<Home />} />
66+
<Route path="/document-collections/document-search" element={<DocumentSearch />} />
67+
<Route path="/document-collections/document-table" element={<DocumentTable />} />
68+
<Route path="/document-collections/preview-list" element={<PreviewList />} />
69+
<Route path="/document-collections/preview-grid" element={<PreviewGrid />} />
70+
<Route path="/groq/movies-by-actor" element={<MoviesByActor />} />
71+
</Routes>
72+
</Container>
73+
</Card>
74+
</BrowserRouter>
75+
)
76+
}

‎apps/sdk-explorer/src/main.tsx

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎apps/sdk-explorer/tsconfig.app.json

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)