forked from
standard.site/standard.site
Standard.site landing page built in Next.js
Remove AnimateIn wrappers from section components
+34
-63
+17
-32
app/components/sections/DefinitionsSection.tsx
+17
-32
app/components/sections/DefinitionsSection.tsx
···
1
1
'use client'
2
2
3
-
import { TabbedLexiconViewer } from '../TabbedLexiconViewer'
4
-
import { AnimateIn } from '../AnimateIn'
5
-
import { getAllSchemas, getLexicon, parseLexiconFields, } from '../../lib/lexicon'
6
3
import { BlocksIcon } from 'lucide-react'
7
-
8
-
// Define which lexicons to show as tabs
9
-
const LEXICON_TABS = [
10
-
'site.standard.publication',
11
-
'site.standard.document',
12
-
]
4
+
import { TabbedLexiconViewer } from '@/app/components'
5
+
import { getAllSchemas, getLexicon, parseLexiconFields, } from '@/app/lib/lexicon'
6
+
import { LEXICON_TABS } from '@/app/data/content'
13
7
14
8
export function DefinitionsSection() {
15
9
const allSchemas = getAllSchemas()
···
17
11
// Build tab configs from the defined NSIDs
18
12
const tabs = LEXICON_TABS.map((nsid) => {
19
13
const schema = getLexicon(nsid)
20
-
if ( !schema) return null
21
-
return {
14
+
return schema ? {
22
15
nsid,
23
16
schema,
24
17
fields: parseLexiconFields(schema),
25
-
}
18
+
} : null
26
19
}).filter((tab) => tab !== null)
27
20
28
21
if (tabs.length === 0) {
29
22
return (
30
23
<section id="definitions" className="flex flex-col gap-8">
31
-
<AnimateIn
32
-
as="h2"
33
-
className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content"
34
-
>
24
+
<h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
35
25
Definitions
36
-
</AnimateIn>
37
-
<AnimateIn as="p" delay={ 0.1 } className="text-xl leading-snug tracking-tight text-muted">
26
+
</h2>
27
+
<p className="text-xl leading-snug tracking-tight text-muted">
38
28
Failed to load lexicon definitions. Please try again later.
39
-
</AnimateIn>
29
+
</p>
40
30
</section>
41
31
)
42
32
}
43
33
44
34
return (
45
35
<section id="definitions" className="flex flex-col gap-8">
46
-
<AnimateIn
47
-
as="h2"
48
-
className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content"
49
-
>
36
+
<h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
50
37
Definitions
51
-
</AnimateIn>
38
+
</h2>
52
39
53
-
<AnimateIn as="p" delay={ 0.1 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
40
+
<p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
54
41
We currently define two main lexicons that cover the core building
55
42
blocks of long-form platforms: where content lives, and what it
56
43
contains.
57
-
</AnimateIn>
44
+
</p>
58
45
59
-
<AnimateIn delay={ 0.2 }>
60
-
<TabbedLexiconViewer tabs={ tabs } allSchemas={ allSchemas } />
61
-
</AnimateIn>
46
+
<TabbedLexiconViewer tabs={ tabs } allSchemas={ allSchemas } />
62
47
63
-
{/* Modularity callout */ }
64
-
<AnimateIn delay={ 0.3 } className="flex gap-4 rounded-2xl border border-border bg-base-200 p-4">
48
+
{/* Modularity callout */}
49
+
<div className="flex gap-4 rounded-2xl border border-border bg-base-200 p-4">
65
50
<div className="pt-1">
66
51
<BlocksIcon className="size-4 text-base-content" />
67
52
</div>
···
70
55
Each lexicon is independent. Use them together for full support, or implement only
71
56
what your platform requires.
72
57
</p>
73
-
</AnimateIn>
58
+
</div>
74
59
</section>
75
60
)
76
61
}
+8
-12
app/components/sections/QuestionsSection.tsx
+8
-12
app/components/sections/QuestionsSection.tsx
···
1
1
'use client'
2
2
3
-
import { FAQ_ITEMS } from '../../data/content'
4
-
import { AnimateIn } from '../AnimateIn'
5
-
import { Accordion } from '../Accordion'
3
+
import { FAQ_ITEMS } from '@/app/data/content'
4
+
import { Accordion } from '@/app/components'
6
5
7
6
export function QuestionsSection() {
8
7
return (
9
8
<section id="questions" className="flex flex-col gap-8">
10
-
<AnimateIn
11
-
as="h2"
12
-
className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content"
13
-
>
9
+
<h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
14
10
Questions
15
-
</AnimateIn>
11
+
</h2>
16
12
17
-
<AnimateIn as="p" delay={ 0.1 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
13
+
<p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
18
14
Common questions about Standard.site, its governance, and
19
15
implementation. If something is missing ask us on Bluesky.
20
-
</AnimateIn>
16
+
</p>
21
17
22
-
<AnimateIn delay={ 0.15 } className="flex flex-col gap-1 rounded-2xl border border-border bg-base-200 p-1 overflow-hidden">
18
+
<div className="flex flex-col gap-1 rounded-2xl border border-border bg-base-200 p-1 overflow-hidden">
23
19
<Accordion items={ FAQ_ITEMS } />
24
-
</AnimateIn>
20
+
</div>
25
21
</section>
26
22
)
27
23
}
+9
-19
app/components/sections/VerificationSection.tsx
+9
-19
app/components/sections/VerificationSection.tsx
···
1
1
'use client'
2
2
3
-
import { AnimateIn } from '../AnimateIn'
4
-
import { LinkIcon, FileTextIcon } from 'lucide-react'
3
+
import { FileTextIcon, LinkIcon } from 'lucide-react'
5
4
6
5
export function VerificationSection() {
7
6
return (
8
7
<section id="verification" className="flex flex-col gap-8">
9
-
<AnimateIn
10
-
as="h2"
11
-
className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content"
12
-
>
8
+
<h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
13
9
Verification
14
-
</AnimateIn>
10
+
</h2>
15
11
16
-
<AnimateIn as="p" delay={ 0.1 } className="text-base sm:text-xl leading-snug tracking-tight text-muted">
12
+
<p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
17
13
<span className="font-medium text-base-content">Standard.site</span>{ ' ' }
18
14
records point to domain names and webpages. We need a way for those to point
19
15
back to the record. This is done through a .well-known route for publications
20
16
and HTML link tags for documents.
21
-
</AnimateIn>
17
+
</p>
22
18
23
19
<div className="flex flex-col gap-4">
24
20
{/* Publication */}
25
-
<AnimateIn
26
-
delay={ 0.2 }
27
-
className="flex flex-col gap-4 rounded-2xl border border-border bg-base-200 p-4"
28
-
>
21
+
<div className="flex flex-col gap-4 rounded-2xl border border-border bg-base-200 p-4">
29
22
<div className="flex items-center gap-3">
30
23
<LinkIcon className="size-4 text-base-content" />
31
24
<h3 className="font-display font-semibold text-xl leading-tight tracking-tight text-base-content">
···
64
57
</pre>
65
58
</div>
66
59
</div>
67
-
</AnimateIn>
60
+
</div>
68
61
69
62
{/* Document */}
70
-
<AnimateIn
71
-
delay={ 0.3 }
72
-
className="flex flex-col gap-4 rounded-2xl border border-border bg-base-200 p-4"
73
-
>
63
+
<div className="flex flex-col gap-4 rounded-2xl border border-border bg-base-200 p-4">
74
64
<div className="flex items-center gap-3">
75
65
<FileTextIcon className="size-4 text-base-content" />
76
66
<h3 className="font-display font-semibold text-xl leading-tight tracking-tight text-base-content">
···
92
82
</code>
93
83
</pre>
94
84
</div>
95
-
</AnimateIn>
85
+
</div>
96
86
</div>
97
87
</section>
98
88
)