Skip to content

Commit 4b84386

Browse files
jonphippsclaude
jonphipps
and
claude
committed
feat: add tabbed overview page and CompactButton component to scaffold template
- Update docs/index.mdx to match ISBD's tabbed structure with Element Sets, Value Vocabularies, and Documentation tabs - Add CompactButton component with module CSS for consistent button styling - Replace simple placeholder content with comprehensive template structure - Include all template placeholders for dynamic site generation - Remove .gitkeep from components since we now have actual components The scaffold template now provides a rich overview page structure that matches the current ISBD site pattern while remaining generic for any standard. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent ff9c6e6 commit 4b84386

File tree

4 files changed

+177
-18
lines changed

4 files changed

+177
-18
lines changed

‎scripts/scaffold-template/docs/index.mdx‎

Lines changed: 150 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,157 @@
11
---
2-
id: index
3-
title: __TITLE__
4-
slug: /
2+
sidebar_position: 1
3+
title: {{TITLE}} Overview
4+
sidebar_label: Overview
5+
description: {{TITLE}} Documentation Contents Overview
56
hide_table_of_contents: true
67
---
78

8-
import { QuickStart, DownloadPanel } from '@ifla/theme';
9+
import CompactButton from '../src/components/CompactButton';
10+
import Tabs from '@theme/Tabs';
11+
import TabItem from '@theme/TabItem';
912

10-
# __TITLE__
13+
# {{TITLE}} Contents Overview
1114

12-
<QuickStart
13-
standard="__CODE__"
14-
introductionPath="/intro/"
15-
elementsPath="/elements/"
16-
examplesPath="/examples/"
17-
/>
15+
This page introduces the {{TITLE}} Element Sets and Value Vocabularies.
1816

19-
<DownloadPanel
20-
standard="__CODE__"
21-
pdfUrl="#"
22-
ttlUrl="/rdf/ttl/__LOWERCASE_CODE__.ttl"
23-
jsonLdUrl="/rdf/jsonld/__LOWERCASE_CODE__.jsonld"
24-
xmlUrl="/rdf/xml/__LOWERCASE_CODE__.xml"
25-
/>
17+
<Tabs groupId="{{SITE_KEY}}-overview">
18+
<TabItem value="elements" label="Element Sets" default>
19+
<div style={{ marginTop: '20px' }}>
20+
21+
{/* {{TITLE}} Element Sets */}
22+
<div style={{ marginBottom: '30px' }}>
23+
<h3>{{TITLE}} Element Sets</h3>
24+
25+
<div style={{ background: '#f0f8f0', border: '2px solid #c8e6c9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
26+
<h4>{{TITLE}} Elements</h4>
27+
<span style={{ background: '#4a8f5b', color: 'white', fontSize: '10px', fontWeight: 'bold', padding: '2px 8px', borderRadius: '12px', float: 'right' }}>Core elements</span>
28+
<p style={{ color: '#666', marginBottom: '15px' }}>
29+
The {{TITLE}} element set provides a comprehensive framework for describing resources
30+
according to international standards. These elements form the foundation for consistent
31+
and interoperable bibliographic description.
32+
</p>
33+
<CompactButton href="/docs/elements">
34+
→ Browse elements
35+
</CompactButton>
36+
</div>
37+
38+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
39+
<h4>{{TITLE}} Elements (unconstrained)</h4>
40+
<p style={{ color: '#666', marginBottom: '15px' }}>
41+
The unconstrained version of {{TITLE}} elements provides greater flexibility in application.
42+
This version has the same local URI part, label, and definition as each element in the
43+
constrained version, but no domain or range restrictions are declared.
44+
</p>
45+
<CompactButton href="/docs/elements/unconstrained">
46+
→ View unconstrained elements
47+
</CompactButton>
48+
</div>
49+
</div>
50+
51+
</div>
52+
</TabItem>
53+
54+
<TabItem value="vocabularies" label="Value Vocabularies">
55+
<div style={{ marginTop: '20px' }}>
56+
<p style={{ color: '#666', marginBottom: '15px' }}>
57+
The {{TITLE}} value vocabularies provide controlled terminologies for consistent description.
58+
Each concept has a Uniform Resource Identifier (URI) for use in Semantic Web data triples,
59+
enabling interoperability and linked data applications.
60+
</p>
61+
62+
{/* Vocabulary Grid */}
63+
<div style={{ display: 'grid', gap: '15px' }}>
64+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px' }}>
65+
<h5>Primary Vocabulary</h5>
66+
<p style={{ color: '#666', fontSize: '0.9rem', marginBottom: '10px' }}>
67+
The main controlled vocabulary for {{TITLE}}, providing standardized terms
68+
for consistent resource description.
69+
</p>
70+
<CompactButton href="/docs/terms">
71+
→ View vocabulary
72+
</CompactButton>
73+
</div>
74+
75+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px' }}>
76+
<h5>Supporting Vocabularies</h5>
77+
<p style={{ color: '#666', fontSize: '0.9rem', marginBottom: '10px' }}>
78+
Additional vocabularies that support specific aspects of {{TITLE}} implementation
79+
and provide specialized terminology.
80+
</p>
81+
<CompactButton href="/docs/terms">
82+
→ Browse vocabularies
83+
</CompactButton>
84+
</div>
85+
86+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px' }}>
87+
<h5>Extension Vocabularies</h5>
88+
<p style={{ color: '#666', fontSize: '0.9rem', marginBottom: '10px' }}>
89+
Vocabularies that extend {{TITLE}} for specific communities or use cases,
90+
while maintaining compatibility with the core standard.
91+
</p>
92+
<CompactButton href="/docs/terms">
93+
→ Explore extensions
94+
</CompactButton>
95+
</div>
96+
</div>
97+
</div>
98+
</TabItem>
99+
100+
<TabItem value="documentation" label="Documentation">
101+
<div style={{ marginTop: '20px' }}>
102+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
103+
<h3>Introduction</h3>
104+
<p style={{ color: '#666', marginBottom: '15px' }}>
105+
Overview of {{TITLE}} principles, scope, and application guidelines
106+
</p>
107+
<CompactButton href="/docs/introduction">
108+
→ View introduction
109+
</CompactButton>
110+
</div>
111+
112+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
113+
<h3>Assessment Guidelines</h3>
114+
<p style={{ color: '#666', marginBottom: '15px' }}>
115+
Criteria and methods for evaluating implementations of {{TITLE}}
116+
</p>
117+
<CompactButton href="/docs/assessment">
118+
→ View assessment
119+
</CompactButton>
120+
</div>
121+
122+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
123+
<h3>Examples & Use Cases</h3>
124+
<p style={{ color: '#666', marginBottom: '15px' }}>
125+
Practical examples of {{TITLE}} application across different resource types
126+
</p>
127+
<CompactButton href="/docs/examples">
128+
→ Browse examples
129+
</CompactButton>
130+
</div>
131+
132+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
133+
<h3>Glossary</h3>
134+
<p style={{ color: '#666', marginBottom: '15px' }}>
135+
Definitions of key terms and concepts used throughout {{TITLE}}
136+
</p>
137+
<CompactButton href="/docs/glossary">
138+
→ View glossary
139+
</CompactButton>
140+
</div>
141+
142+
<div style={{ background: '#f4f4f4', border: '1px solid #e1e5e9', borderRadius: '6px', padding: '20px', marginBottom: '20px' }}>
143+
<h3>About {{TITLE}}</h3>
144+
<p style={{ color: '#666', marginBottom: '15px' }}>
145+
History, development, and maintenance of the {{TITLE}} standard
146+
</p>
147+
<CompactButton href="/docs/about">
148+
→ Learn more
149+
</CompactButton>
150+
</div>
151+
</div>
152+
</TabItem>
153+
</Tabs>
154+
155+
<div style={{ marginTop: '40px', paddingTop: '20px', borderTop: '1px solid #e1e5e9', textAlign: 'center', color: '#999', fontSize: '0.9rem' }}>
156+
<p><em>Last updated: {{LAST_UPDATED}}</em></p>
157+
</div>

‎scripts/scaffold-template/src/components/.gitkeep‎

Whitespace-only changes.

‎scripts/scaffold-template/src/components/CompactButton.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.compactButton {
2+
padding: 6px 16px !important;
3+
font-size: 0.875rem !important;
4+
line-height: 1.2 !important;
5+
min-height: auto !important;
6+
}
7+
8+
/* Remove paragraph margin from this button */
9+
.compactButton > p {
10+
margin-bottom: 0 !important;
11+
}

‎scripts/scaffold-template/src/components/CompactButton.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { InLink } from '@ifla/theme';
3+
import styles from './CompactButton.module.css';
4+
5+
interface CompactButtonProps {
6+
href: string;
7+
children: React.ReactNode;
8+
}
9+
10+
export default function CompactButton({ href, children }: CompactButtonProps) {
11+
return (
12+
<InLink href={href} className={`button button--primary button--sm ${styles.compactButton}`}>
13+
<span>{children}</span>
14+
</InLink>
15+
);
16+
}

0 commit comments

Comments
 (0)