git.iko.soy/urbit.org
on master help sign in
grants: add toc
616ac28Matilde Park
components/GrantPreview.js+3−1
compare with master
unifiedsplit
@@ -19,7 +19,9 @@ export default function GrantPreview({ grant }) {
19 <Link href={`/grants/${grant.slug}`}>
19 <Link href={`/grants/${grant.slug}`}>
20 <div className="p-8">
20 <div className="p-8">
21 <div className="flex items-center mb-4">
21 <div className="flex items-center mb-4">
22− <h3 className="type-ui">{grant.title}</h3>
22+ <h3 className="type-ui" id={grant.slug}>
23+ {grant.title}
24+ </h3>
23 <div className={`bg-gray text-wall badge-sm ml-2`}>
25 <div className={`bg-gray text-wall badge-sm ml-2`}>
24 {isOpen ? "Open" : "Completed"}
26 {isOpen ? "Open" : "Completed"}
25 </div>
27 </div>
components/TableOfContents.js+7−2
@@ -1,12 +1,17 @@
1import { useState, useEffect, useRef } from "react";
1import { useState, useEffect, useRef } from "react";
2
2
3−export const TableOfContents = () => {
3+export const TableOfContents = ({ staticPosition }) => {
4 const { nestedHeadings } = useHeadingsData();
4 const { nestedHeadings } = useHeadingsData();
5 const [activeId, setActiveId] = useState();
5 const [activeId, setActiveId] = useState();
6 useIntersectionObserver(setActiveId);
6 useIntersectionObserver(setActiveId);
7 return (
7 return (
8 <nav
8 <nav
9+ className={
10+ staticPosition
11+ ? "static"
12+ : "sticky" +
9− className="sticky min-h-0 overflow-y-scroll w-52 flex-shrink-0 pb-24 hidden lg:block"
13+ " min-h-0 overflow-y-scroll w-52 flex-shrink-0 pb-24 hidden lg:block"
14+ }
10 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
15 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
11 >
16 >
12 <Headings headings={nestedHeadings} activeId={activeId} />
17 <Headings headings={nestedHeadings} activeId={activeId} />
pages/grants.js+25−15
@@ -1,4 +1,5 @@
1import Head from "next/head";
1import Head from "next/head";
2+import { TableOfContents } from "../components/TableOfContents";
2import Meta from "../components/Meta";
3import Meta from "../components/Meta";
3import Link from "next/link";
4import Link from "next/link";
4import { useState } from "react";
5import { useState } from "react";
@@ -122,18 +123,21 @@ export default function Grants({
122 // Heading and introduction
123 // Heading and introduction
123 }
124 }
124 <Section wide>
125 <Section wide>
125− <div className="measure pb-16">
126+ <div className="flex flex-column justify-between pb-16">
127+ <div className="pr-24">
126− <h1 className="pb-16">Grants</h1>
128+ <h1 className="pb-16">Grants</h1>
127− <p className="mb-8">
129+ <p className="mb-8">
128− Urbit is a community project. While anyone can contribute, we help
130+ Urbit is a community project. While anyone can contribute, we
129− focus development and reward exceptional contribution through our
131+ help focus development and reward exceptional contribution
130− grants program.
132+ through our grants program.
131− </p>
133+ </p>
132− <p>
134+ <p>
133− Contributors of all types have access to a wide variety of
135+ Contributors of all types have access to a wide variety of
134− resources while working on projects, including a supportive team
136+ resources while working on projects, including a supportive team
135− at urbit.org, Tlon developers, and community mentors.
137+ at urbit.org, Tlon developers, and community mentors.
136− </p>
138+ </p>
139+ </div>
140+ <TableOfContents staticPosition />
137 </div>
141 </div>
138 <div className="p-8 bg-wall flex flex-col w-full rounded-lg space-y-4">
142 <div className="p-8 bg-wall flex flex-col w-full rounded-lg space-y-4">
139 <p>
143 <p>
@@ -153,7 +157,9 @@ export default function Grants({
153 }
157 }
154 <Section wide>
158 <Section wide>
155 <div className="measure pb-16">
159 <div className="measure pb-16">
160+ <h2 className="pb-16" id="featured">
156− <h2 className="pb-16">Featured Grants</h2>
161+ Featured Grants
162+ </h2>
157 <p className="mb-8">
163 <p className="mb-8">
158 These grants should give you a general idea of what kind of work
164 These grants should give you a general idea of what kind of work
159 we reward:
165 we reward:
@@ -258,7 +264,9 @@ export default function Grants({
258 </Section>
264 </Section>
259 {/* Submit a proposal */}
265 {/* Submit a proposal */}
260 <Section wide>
266 <Section wide>
261− <h2 className="mb-16">Proposals</h2>
267+ <h2 className="mb-16" id="proposals">
268+ Proposals
269+ </h2>
262 <p className="mb-8">
270 <p className="mb-8">
263 Contributors are also welcome to have their personal projects
271 Contributors are also welcome to have their personal projects
264 considered as a proposal. If you'd like to propose a project for the
272 considered as a proposal. If you'd like to propose a project for the
@@ -276,7 +284,9 @@ export default function Grants({
276 }
284 }
277 <Section wide>
285 <Section wide>
278 <div className="pb-16">
286 <div className="pb-16">
279− <h2 className="pb-16">Gifts</h2>
287+ <h2 className="pb-16" id="gifts">
288+ Gifts
289+ </h2>
280 <p className="mb-8">
290 <p className="mb-8">
281 Gifts are given post-facto for exceptional contributions.
291 Gifts are given post-facto for exceptional contributions.
282 </p>
292 </p>