mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-08-16 17:20:35 +03:00
basic page layouts
This commit is contained in:
James Acklin
parent
1dc29869bf
commit
730566c1d0
8
components/Container.js
Normal file
8
components/Container.js
Normal file
@ -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 (
|
||||
<div className="flex flex-col min-h-screen w-full items-center">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,9 +4,7 @@ export default function Layout({ children }) {
|
||||
return (
|
||||
<>
|
||||
<Meta />
|
||||
<div className="max-w-full min-h-screen flex justify-center">
|
||||
{children}
|
||||
</div>
|
||||
<div className="">{children}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
21
components/Section.js
Normal file
21
components/Section.js
Normal file
@ -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 (
|
||||
<section className={`w-full px-4 md:px-8 ${spacing} ${className}`}>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
8
components/SingleColumn.js
Normal file
8
components/SingleColumn.js
Normal file
@ -0,0 +1,8 @@
|
||||
// Provides a limited-width column with all children center-aligned along the vertical axis
|
||||
export default function SingleColumn({ children }) {
|
||||
return (
|
||||
<div className="flex flex-col w-full items-center max-w-screen-2xl">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -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.
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 (
|
||||
<Layout>
|
||||
<div className="prose lg:prose-lg">
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
|
||||
</div>
|
||||
<Container>
|
||||
<SingleColumn>
|
||||
<Section>
|
||||
<h1>{post.title}</h1>
|
||||
</Section>
|
||||
<Section>
|
||||
<div className="prose lg:prose-lg">
|
||||
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
|
||||
</div>
|
||||
</Section>
|
||||
</SingleColumn>
|
||||
</Container>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
124
pages/index.js
124
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 (
|
||||
<div className="">
|
||||
<Layout>
|
||||
<Head>
|
||||
<title>Urbit Developers</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Container>
|
||||
<SingleColumn>
|
||||
<Section>
|
||||
<h1>
|
||||
Urbit is a general-purpose platform for building decentralized,
|
||||
peer-to-peer applications.
|
||||
</h1>
|
||||
<button>
|
||||
<span className="type-ui">Learn More</span>
|
||||
</button>
|
||||
</Section>
|
||||
<Section>
|
||||
<div className="p-6 bg-green-100 rounded-xl prose lg:prose-lg">
|
||||
<h2>Learn</h2>
|
||||
<span>Become an Urbit developer</span>
|
||||
|
||||
<main className="prose lg:prose-lg">
|
||||
<h1>
|
||||
Urbit is a general-purpose platform for building decentralized,
|
||||
peer-to-peer applications.
|
||||
</h1>
|
||||
<button>
|
||||
<span className="type-ui">Learn More</span>
|
||||
</button>
|
||||
<h2>Learn</h2>
|
||||
<span>Become an Urbit developer</span>
|
||||
<p>
|
||||
Urbit is an entirely new computer and novel programming
|
||||
environment. Start with our series of self-guided courses.{" "}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Urbit is an entirely new computer and novel programming environment.
|
||||
Start with our series of self-guided courses.{" "}
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>Stack overview | Urbit 101 | Urbit 201 </p>
|
||||
</div>
|
||||
</Section>
|
||||
<Section>
|
||||
<div className="p-6 bg-blue-100 rounded-xl prose lg:prose-lg">
|
||||
<h2>Community</h2>
|
||||
<span>Join the community </span>
|
||||
|
||||
<p>Stack overview | Urbit 101 | Urbit 201 </p>
|
||||
<p>
|
||||
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.{" "}
|
||||
</p>
|
||||
|
||||
<h2>Community</h2>
|
||||
<span>Join the community </span>
|
||||
<p>Get involved | Developer Calls | Join the mailing list </p>
|
||||
|
||||
<p>
|
||||
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.{" "}
|
||||
</p>
|
||||
<p>
|
||||
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.{" "}
|
||||
</p>
|
||||
</div>
|
||||
</Section>
|
||||
<Section>
|
||||
<div className="p-6 bg-yellow-100 rounded-xl prose lg:prose-lg">
|
||||
<h2>Opportunities </h2>
|
||||
<span>Apply your skills</span>
|
||||
|
||||
<p>Get involved | Developer Calls | Join the mailing list </p>
|
||||
<p>
|
||||
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.{" "}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.{" "}
|
||||
</p>
|
||||
|
||||
<h2>Opportunities </h2>
|
||||
<span>Apply your skills</span>
|
||||
|
||||
<p>
|
||||
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.{" "}
|
||||
</p>
|
||||
|
||||
<p>Grants | Jobs | The Combine</p>
|
||||
</main>
|
||||
</div>
|
||||
<p>Grants | Jobs | The Combine</p>
|
||||
</div>
|
||||
</Section>
|
||||
</SingleColumn>
|
||||
</Container>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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; */
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user