Skip to content

Commit e506408

Browse files
tyrelchamberstyrelchambers
authored
Adds DocsV3Layout skeleton (#102)
1 parent 983a0fc commit e506408

File tree

3 files changed

+256
-4
lines changed

3 files changed

+256
-4
lines changed

‎src/layouts/DocsV3Layout/DocsV3Layout.astro‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
import StickyHeader from "~/components/StickyHeader/StickyHeader"
3+
import BaseLayout from "../BaseLayout.astro"
4+
import { MarkdownHeading } from "astro"
5+
import { BaseFrontmatter } from "~/content.config"
6+
import * as CONFIG from "~/config"
7+
import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro"
8+
import PageContent from "~/components/PageContent/PageContent.astro"
9+
10+
interface Props {
11+
frontmatter: BaseFrontmatter
12+
headings?: MarkdownHeading[]
13+
}
14+
const { frontmatter, headings } = Astro.props
15+
16+
const titleHeading: MarkdownHeading = {
17+
text: frontmatter.title,
18+
slug: "overview",
19+
depth: 1,
20+
}
21+
22+
const filteredHeadings = headings?.filter((h) => h.depth < 5)
23+
const initialHeadings = [titleHeading].concat(filteredHeadings ?? [])
24+
25+
const formattedContentTitle = `${frontmatter.title} | ${CONFIG.SITE.title}`
26+
27+
const currentPage = new URL(Astro.request.url).pathname
28+
29+
const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWallet
30+
---
31+
32+
<BaseLayout title={formattedContentTitle} metadata={frontmatter.metadata} pageTitle={frontmatter.title}>
33+
<StickyHeader client:media="(max-width: 50em)" {initialHeadings} />
34+
35+
<main>
36+
<div id="left-bg"></div>
37+
<div class="layout">
38+
<aside id="grid-left">
39+
<LeftSidebar currentPage={currentPage} section={frontmatter.section} />
40+
</aside>
41+
<div id="grid-main">
42+
<PageContent {titleHeading}>
43+
<slot />
44+
</PageContent>
45+
</div>
46+
</div>
47+
</main>
48+
49+
<style>
50+
main {
51+
margin-bottom: 0 !important;
52+
}
53+
54+
.layout {
55+
display: grid;
56+
grid-template-columns: auto;
57+
--gutter: var(--space-6x);
58+
--doc-padding: var(--space-6x);
59+
margin-bottom: 0;
60+
}
61+
62+
#grid-left,
63+
#grid-right {
64+
display: none;
65+
}
66+
67+
#grid-main {
68+
padding: var(--doc-padding) var(--gutter);
69+
display: flex;
70+
flex-direction: column;
71+
margin-bottom: var(--space-10x);
72+
min-width: 0;
73+
}
74+
75+
@media (min-width: 50em) {
76+
main {
77+
display: grid;
78+
grid-template-columns: auto fit-content(100%) auto;
79+
}
80+
81+
.layout {
82+
grid-template-columns: auto 1fr auto;
83+
gap: var(--gutter);
84+
width: 100vw;
85+
max-width: 1505px;
86+
}
87+
88+
#grid-left,
89+
#left-bg {
90+
background: #fafbfd;
91+
}
92+
93+
#grid-left,
94+
#grid-right {
95+
display: flex;
96+
}
97+
98+
#grid-main {
99+
padding: 0 0 var(--doc-padding) 0;
100+
}
101+
102+
#grid-left {
103+
width: 260px;
104+
padding-left: var(--space-6x);
105+
}
106+
107+
#grid-right {
108+
width: 0;
109+
padding-right: 0;
110+
transition: 300ms ease-in-out;
111+
transition-property: width padding-right;
112+
}
113+
}
114+
115+
@media (min-width: 992px) {
116+
.layout {
117+
gap: var(--doc-padding);
118+
}
119+
120+
#grid-left {
121+
width: 350px;
122+
padding-left: var(--space-6x);
123+
}
124+
}
125+
126+
@media (min-width: 1200px) {
127+
#grid-right {
128+
width: 315px;
129+
padding-right: var(--space-16x);
130+
}
131+
}
132+
</style>
133+
134+
<script define:vars={{ includeLinkToWalletScript }}>
135+
window["includeLinkToWalletScript"] = includeLinkToWalletScript
136+
</script>
137+
138+
<script>
139+
import "~/scripts"
140+
if (window["includeLinkToWalletScript"]) {
141+
import("~/scripts/link-to-wallet.ts")
142+
}
143+
</script>
144+
</BaseLayout>

‎src/layouts/DocsV3Layout/README.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# DocsV3Layout Component Guide
2+
3+
## What is DocsV3Layout?
4+
5+
DocsV3Layout is the template that creates the standard layout for documentation pages on the Chainlink Docs website. Think of it as a "frame" that wraps around your content to give it a consistent look and feel.
6+
7+
## What Does It Do?
8+
9+
When you use this layout, it automatically creates:
10+
11+
- **A left sidebar** with navigation links to help users find related pages
12+
- **A main content area** where your documentation content appears
13+
- **A header** that shows the page outline (on mobile devices)
14+
- **Responsive design** that adapts to different screen sizes (mobile, tablet, desktop)
15+
16+
## How to Use It
17+
18+
### Basic Setup
19+
20+
To use this layout for a documentation page, you need to specify it at the top of your Markdown file:
21+
22+
```
23+
---
24+
layout: ~/layouts/DocsV3Layout/DocsV3Layout.astro
25+
title: Your Page Title
26+
section: your-section-name
27+
---
28+
29+
Your content goes here...
30+
```
31+
32+
### Required Information
33+
34+
You need to provide two key pieces of information:
35+
36+
1. **Title** - The name of your documentation page
37+
- Example: `title: Getting Started with Chainlink`
38+
39+
2. **Section** - Which documentation section this page belongs to
40+
- Example: `section: quickstarts`
41+
- This helps organize pages in the left sidebar navigation
42+
43+
### Optional Information
44+
45+
You can also include:
46+
47+
- **Metadata** - Special settings for the page, like SEO information
48+
- **Link to Wallet** - If your page needs blockchain wallet integration, add:
49+
```
50+
metadata:
51+
linkToWallet: true
52+
```
53+
54+
## Example Usage
55+
56+
Here's a complete example of how to set up a documentation page:
57+
58+
```
59+
---
60+
layout: ~/layouts/DocsV3Layout/DocsV3Layout.astro
61+
title: How to Use Chainlink Data Feeds
62+
section: data-feeds
63+
---
64+
65+
# How to Use Chainlink Data Feeds
66+
67+
This guide will teach you how to use data feeds...
68+
69+
## Step 1: Prerequisites
70+
71+
Before you begin, make sure you have...
72+
73+
## Step 2: Installation
74+
75+
To install the required packages...
76+
```
77+
78+
## What Happens Behind the Scenes
79+
80+
When you use this layout:
81+
82+
1. **Your title** becomes the main heading and appears in the page outline
83+
2. **Your headings** (anything starting with `#`, `##`, `###`) are automatically collected and used for navigation
84+
3. **The sidebar** is populated with links based on your section
85+
4. **The layout adapts** to the user's screen size automatically
86+
87+
## Layout Structure
88+
89+
The page is divided into three columns:
90+
91+
```
92+
┌──────────────┬─────────────────────┬──────────────┐
93+
│ │ │ │
94+
│ Left │ Main Content │ Right │
95+
│ Sidebar │ (Your Docs) │ Sidebar │
96+
│ (Navigation) │ │ (Future) │
97+
│ │ │ │
98+
└──────────────┴─────────────────────┴──────────────┘
99+
```
100+
101+
- **Left Sidebar**: Shows navigation for the current section
102+
- **Main Content**: Your documentation content
103+
- **Right Sidebar**: Reserved for future use (currently empty)
104+
105+
## Tips for Best Results
106+
107+
1. **Use clear headings** - Your headings create the page outline, so make them descriptive
108+
2. **Keep titles concise** - The title appears in multiple places, so shorter is better
109+
3. **Choose the right section** - Make sure your page is in the correct section so users can find it
110+
4. **Limit heading depth** - Only headings up to level 4 (`####`) are included in the navigation

‎src/pages/ccip/index.astro‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
import DocsLayout from "~/layouts/DocsLayout.astro"
32
import { getEntry, render } from "astro:content"
3+
import DocsV3Layout from "~/layouts/DocsV3Layout/DocsV3Layout.astro"
44
55
const entry = await getEntry("ccip", "index")
66
if (!entry) {
@@ -11,6 +11,4 @@ if (!entry) {
1111
const { Content, headings } = await render(entry)
1212
---
1313

14-
<DocsLayout frontmatter={entry.data} {headings}>
15-
<Content />
16-
</DocsLayout>
14+
<DocsV3Layout frontmatter={entry.data} {headings} />

0 commit comments

Comments
 (0)