on master help sign in
grants: add toc
commit616ac2809549ea77cb2747e13b2eb74313bc6073 authorMatilde Park <matilde@tlon.io> dateTue 27 Jul 2021, 18:38 (5 years ago) parent39dd9c4
3 files changed+35−18
components/GrantPreview.js+3−1 components/TableOfContents.js+7−2 pages/grants.js+25−15
components/GrantPreview.js+3−1
@@ -19,7 +19,9 @@ export default function GrantPreview({ grant }) {
1919 <Link href={`/grants/${grant.slug}`}>
2020 <div className="p-8">
2121 <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>
2325 <div className={`bg-gray text-wall badge-sm ml-2`}>
2426 {isOpen ? "Open" : "Completed"}
2527 </div>
components/TableOfContents.js+7−2
@@ -1,12 +1,17 @@
11import { useState, useEffect, useRef } from "react";
22
3−export const TableOfContents = () => {
3+export const TableOfContents = ({ staticPosition }) => {
44 const { nestedHeadings } = useHeadingsData();
55 const [activeId, setActiveId] = useState();
66 useIntersectionObserver(setActiveId);
77 return (
88 <nav
9− className="sticky min-h-0 overflow-y-scroll w-52 flex-shrink-0 pb-24 hidden lg:block"
9+ className={
10+ staticPosition
11+ ? "static"
12+ : "sticky" +
13+ " min-h-0 overflow-y-scroll w-52 flex-shrink-0 pb-24 hidden lg:block"
14+ }
1015 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
1116 >
1217 <Headings headings={nestedHeadings} activeId={activeId} />
pages/grants.js+25−15
@@ -1,4 +1,5 @@
11import Head from "next/head";
2+import { TableOfContents } from "../components/TableOfContents";
23import Meta from "../components/Meta";
34import Link from "next/link";
45import { useState } from "react";
@@ -122,18 +123,21 @@ export default function Grants({
122123 // Heading and introduction
123124 }
124125 <Section wide>
125− <div className="measure pb-16">
126− <h1 className="pb-16">Grants</h1>
127− <p className="mb-8">
128− Urbit is a community project. While anyone can contribute, we help
129− focus development and reward exceptional contribution through our
130− grants program.
131− </p>
132− <p>
133− Contributors of all types have access to a wide variety of
134− resources while working on projects, including a supportive team
135− at urbit.org, Tlon developers, and community mentors.
136− </p>
126+ <div className="flex flex-column justify-between pb-16">
127+ <div className="pr-24">
128+ <h1 className="pb-16">Grants</h1>
129+ <p className="mb-8">
130+ Urbit is a community project. While anyone can contribute, we
131+ help focus development and reward exceptional contribution
132+ through our grants program.
133+ </p>
134+ <p>
135+ Contributors of all types have access to a wide variety of
136+ resources while working on projects, including a supportive team
137+ at urbit.org, Tlon developers, and community mentors.
138+ </p>
139+ </div>
140+ <TableOfContents staticPosition />
137141 </div>
138142 <div className="p-8 bg-wall flex flex-col w-full rounded-lg space-y-4">
139143 <p>
@@ -153,7 +157,9 @@ export default function Grants({
153157 }
154158 <Section wide>
155159 <div className="measure pb-16">
156− <h2 className="pb-16">Featured Grants</h2>
160+ <h2 className="pb-16" id="featured">
161+ Featured Grants
162+ </h2>
157163 <p className="mb-8">
158164 These grants should give you a general idea of what kind of work
159165 we reward:
@@ -258,7 +264,9 @@ export default function Grants({
258264 </Section>
259265 {/* Submit a proposal */}
260266 <Section wide>
261− <h2 className="mb-16">Proposals</h2>
267+ <h2 className="mb-16" id="proposals">
268+ Proposals
269+ </h2>
262270 <p className="mb-8">
263271 Contributors are also welcome to have their personal projects
264272 considered as a proposal. If you'd like to propose a project for the
@@ -276,7 +284,9 @@ export default function Grants({
276284 }
277285 <Section wide>
278286 <div className="pb-16">
279− <h2 className="pb-16">Gifts</h2>
287+ <h2 className="pb-16" id="gifts">
288+ Gifts
289+ </h2>
280290 <p className="mb-8">
281291 Gifts are given post-facto for exceptional contributions.
282292 </p>