From 730566c1d0368d549f7a489a96d07de1fd031400 Mon Sep 17 00:00:00 2001 From: James Acklin Date: Fri, 1 Oct 2021 12:19:03 -0400 Subject: [PATCH] basic page layouts --- components/Container.js | 8 +++ components/Layout.js | 4 +- components/Section.js | 21 +++++++ components/SingleColumn.js | 8 +++ content/community.md | 8 +-- package.json | 1 + pages/[slug].js | 19 ++++-- pages/index.js | 124 +++++++++++++++++++++---------------- styles/globals.css | 89 +++++--------------------- tailwind.config.js | 20 ++++++ 10 files changed, 165 insertions(+), 137 deletions(-) create mode 100644 components/Container.js create mode 100644 components/Section.js create mode 100644 components/SingleColumn.js diff --git a/components/Container.js b/components/Container.js new file mode 100644 index 0000000..18bdedc --- /dev/null +++ b/components/Container.js @@ -0,0 +1,8 @@ +// Ensures the root container is always 100vw, min 100vh, and centers all children along the y-axis +export default function Container({ children }) { + return ( +
+ {children} +
+ ); +} diff --git a/components/Layout.js b/components/Layout.js index f5869d4..1b7df9a 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -4,9 +4,7 @@ export default function Layout({ children }) { return ( <> -
- {children} -
+
{children}
); } diff --git a/components/Section.js b/components/Section.js new file mode 100644 index 0000000..2b80181 --- /dev/null +++ b/components/Section.js @@ -0,0 +1,21 @@ +import classnames from "classnames"; + +// Provides a flexible layout building block +export default function Section({ + children, + className = "", + short = false, + narrow = false, +}) { + const spacing = classnames({ + "py-8": short, + "py-20": !short, + "layout-narrow": narrow, + layout: !narrow, + }); + return ( +
+ {children} +
+ ); +} diff --git a/components/SingleColumn.js b/components/SingleColumn.js new file mode 100644 index 0000000..fdc2b38 --- /dev/null +++ b/components/SingleColumn.js @@ -0,0 +1,8 @@ +// Provides a limited-width column with all children center-aligned along the vertical axis +export default function SingleColumn({ children }) { + return ( +
+ {children} +
+ ); +} diff --git a/content/community.md b/content/community.md index ddd83ff..d3a215f 100644 --- a/content/community.md +++ b/content/community.md @@ -4,11 +4,11 @@ title: Community The developer community is a combination of top-down stewardship from the Urbit Foundation and Tlon, as well as organic, bottom-up coordination from unaffiliated enthusiasts. -The Forge is a community-run Landscape group (~middev/the-forge) focused on all things related to Urbit development. Its members consist of enthusiasts, Tlon and Foundation developers, and grant workers. It’s also a great repository of community-compiled knowledge of common issues and development techniques. +The Forge is a community-run Landscape group (`~middev/the-forge`) focused on all things related to Urbit development. Its members consist of enthusiasts, Tlon and Foundation developers, and grant workers. It’s also a great repository of community-compiled knowledge of common issues and development techniques. -The Urbit Foundation makes direct investments of address space into the community as a means of improving the network. The Foundation also maintains developer documentation, runs Developer Calls, and acts as the hub of the Urbit ecosystem. You can find us hanging around in the Foundation group in Landscape (~wolref-podlex/foundation). +The Urbit Foundation makes direct investments of address space into the community as a means of improving the network. The Foundation also maintains developer documentation, runs Developer Calls, and acts as the hub of the Urbit ecosystem. You can find us hanging around in the Foundation group in Landscape (`~wolref-podlex/foundation`). -Tlon is the primary developer of Urbit itself and the foremost product developer within the Urbit ecosystem. They’ve been developing Urbit since 2013 and are naturally a great source of information. They maintain the most popular Landscape groups, Urbit Community (~bitbex-bolbel/urbit-community) and Urbit Index (~todo-todo/urbit-index). +Tlon is the primary developer of Urbit itself and the foremost product developer within the Urbit ecosystem. They’ve been developing Urbit since 2013 and are naturally a great source of information. They maintain the most popular Landscape groups, Urbit Community (`~bitbex-bolbel/urbit-community`) and Urbit Index (`~todo-todo/urbit-index`). ## Directory @@ -58,4 +58,4 @@ Infrastructure development, Vere, Arvo Senior infrastructure engineer, Tlon Infrastructure development, Arvo, software distribution -~palfun-foslup, ~littel-wolfur, ~lavlyn-litmeg, ~mocrux-nomdep, ~sicdev-pilnup, etc. +`~palfun-foslup`, `~littel-wolfur`, `~lavlyn-litmeg`, `~mocrux-nomdep`, `~sicdev-pilnup`, etc. diff --git a/package.json b/package.json index 9a62a6f..9dfe41e 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "@tailwindcss/typography": "^0.4.1", + "classnames": "^2.3.1", "gray-matter": "^4.0.3", "next": "latest", "react": "^17.0.2", diff --git a/pages/[slug].js b/pages/[slug].js index 03a5d7c..6319ecc 100644 --- a/pages/[slug].js +++ b/pages/[slug].js @@ -1,7 +1,10 @@ import { useRouter } from "next/router"; import { getPostBySlug, getAllPosts } from "../lib/api"; import markdownToHtml from "../lib/markdownToHtml"; +import Container from "../components/Container"; import Layout from "../components/Layout"; +import Section from "../components/Section"; +import SingleColumn from "../components/SingleColumn"; export default function Post({ post, morePosts, preview }) { const router = useRouter(); @@ -10,10 +13,18 @@ export default function Post({ post, morePosts, preview }) { } return ( -
-

{post.title}

-
-
+ + +
+

{post.title}

+
+
+
+
+
+
+ + ); } diff --git a/pages/index.js b/pages/index.js index e69bff5..c02aa6b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,70 +1,90 @@ import Head from "next/head"; +import Container from "../components/Container"; +import Layout from "../components/Layout"; +import Section from "../components/Section"; +import SingleColumn from "../components/SingleColumn"; export default function Home() { return ( -
+ Urbit Developers + + +
+

+ Urbit is a general-purpose platform for building decentralized, + peer-to-peer applications. +

+ +
+
+
+

Learn

+ Become an Urbit developer -
-

- Urbit is a general-purpose platform for building decentralized, - peer-to-peer applications. -

- -

Learn

- Become an Urbit developer +

+ Urbit is an entirely new computer and novel programming + environment. Start with our series of self-guided courses.{" "} +

-

- Urbit is an entirely new computer and novel programming environment. - Start with our series of self-guided courses.{" "} -

+

+ You can get a high level overview with the primer, or jump into + learning with a series of self-led courses designed to teach you + the basics called Urbit 101. If you’re already familiar with the + basics, consult the series of standalone guides called Urbit + 201. +

-

- You can get a high level overview with the primer, or jump into - learning with a series of self-led courses designed to teach you the - basics called Urbit 101. If you’re already familiar with the basics, - consult the series of standalone guides called Urbit 201. -

+

Stack overview | Urbit 101 | Urbit 201

+
+
+
+
+

Community

+ Join the community -

Stack overview | Urbit 101 | Urbit 201

+

+ The developer community is friendly, helpful, and organized from + within Urbit itself—but you don’t have to take our word for it! + Join our public groups on the network, or tune into a Developer + Call to join the community.{" "} +

-

Community

- Join the community +

Get involved | Developer Calls | Join the mailing list

-

- The developer community is friendly, helpful, and organized from - within Urbit itself—but you don’t have to take our word for it! Join - our public groups on the network, or tune into a Developer Call to - join the community.{" "} -

+

+ The mailing list is meant to be a separate, developer-only list + for those that want to stay up-to-date on developer-specific + announcements. These would be things like new documentation, + upcoming developer calls, infrastructure updates/breaking + changes, etc.{" "} +

+
+
+
+
+

Opportunities

+ Apply your skills -

Get involved | Developer Calls | Join the mailing list

+

+ The Urbit ecosystem is growing rapidly, which presents many + opportunities to enterprising developers. Address space grants + through the Urbit Foundation are a great way to take your skills + to the next level. Companies like Tlon are regularly hiring + developers, and The Combine is funding startups that build on + Urbit.{" "} +

-

- The mailing list is meant to be a separate, developer-only list for - those that want to stay up-to-date on developer-specific - announcements. These would be things like new documentation, upcoming - developer calls, infrastructure updates/breaking changes, etc.{" "} -

- -

Opportunities

- Apply your skills - -

- The Urbit ecosystem is growing rapidly, which presents many - opportunities to enterprising developers. Address space grants through - the Urbit Foundation are a great way to take your skills to the next - level. Companies like Tlon are regularly hiring developers, and The - Combine is funding startups that build on Urbit.{" "} -

- -

Grants | Jobs | The Combine

- -
+

Grants | Jobs | The Combine

+
+ + + + ); } diff --git a/styles/globals.css b/styles/globals.css index 1da4a64..213a390 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -36,11 +36,11 @@ strong { /* Typography */ -/* h1, +h1, .type-h1 { @apply text-4xl lg:text-5xl font-extrabold leading-tight text-wall-600; } - +/* h2, .type-h2 { @apply text-3xl lg:text-4xl font-bold leading-tight; @@ -128,84 +128,25 @@ a:hover { opacity: 0.66; } -/* BEM Classes - Use sparingly */ - -.port-hero-card-height { - height: 36em; +.prose pre, +.prose pre[class*="language-"] { } -.port-hero-image-height { - height: 32em; +.prose code, +.prose code[class*="language-"] { + @apply px-2 py-0.5 bg-wall-100 rounded-md; } -.port-hero-image { - transform: translateX(8%); - background-image: linear-gradient( - to right, - rgba(255, 255, 255, 0) 85%, - rgba(255, 255, 255, 1) 100% - ), - url("https://media.urbit.org/port.svg"); - background-size: cover; +.prose a code, +.prose a code[class*="language-"] { + @apply bg-green-100 text-green-400; } -.tray-menu-open { - transform: translateX(0); - transition: transform var(--tray-time); +.prose pre { + @apply block p-4 bg-wall-100 rounded-md overflow-x-auto; } -.tray-menu-closed { - transform: translateX(-110vw); - transition: transform var(--tray-time); -} - -.tray-menu-width { - width: calc(100vw - 4rem - 1rem - 1rem); -} - -.mobile-search-button-width { - width: calc(100vw - 4rem - 1rem - 1rem - 1rem - 1rem); -} - -.tray-overlay-open { - opacity: 1; - transition: opacity var(--tray-time); -} - -.tray-overlay-closed { - opacity: 0; - transition: opacity var(--tray-time); -} - -.menu-open { - left: 0; - visibility: visible; - display: block; -} - -.menu-closed { - left: -100vw; - visibility: hidden; - display: none; -} - -.dot::before { - width: 0.5rem; - height: 0.5rem; - border-radius: 99px; - content: ""; - position: absolute; - left: -0.75rem; - top: 0.4rem; - @apply bg-green-400; -} - -.sidebar figure, -.sidebar img { - width: auto !important; - margin: 0 auto !important; - left: 0 !important; - display: block !important; - position: static !important; - border-radius: 0 !important; +.prose pre > code, +.prose pre[class*="language-"] > code { + /* @apply p-0; */ } diff --git a/tailwind.config.js b/tailwind.config.js index 6413c23..147662e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -48,6 +48,26 @@ module.exports = { mono: ["Source Code Pro", "monospace"], }, extend: { + typography: { + DEFAULT: { + css: [ + { + color: "#24221E", + maxWidth: "none", + "p:nth-child(1)": { marginTop: "none" }, + code: { + background: "#F3F2F0", + }, + "code::before": { + content: "none", + }, + "code::after": { + content: "none", + }, + }, + ], + }, + }, fontSize: { xs: "0.75rem", sm: "0.875rem",