mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-09-11 13:55:59 +03:00
basic page layouts
This commit is contained in:
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Meta />
|
<Meta />
|
||||||
<div className="max-w-full min-h-screen flex justify-center">
|
<div className="">{children}</div>
|
||||||
{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 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
|
## Directory
|
||||||
|
|
||||||
@ -58,4 +58,4 @@ Infrastructure development, Vere, Arvo
|
|||||||
Senior infrastructure engineer, Tlon
|
Senior infrastructure engineer, Tlon
|
||||||
Infrastructure development, Arvo, software distribution
|
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": {
|
"dependencies": {
|
||||||
"@tailwindcss/typography": "^0.4.1",
|
"@tailwindcss/typography": "^0.4.1",
|
||||||
|
"classnames": "^2.3.1",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"next": "latest",
|
"next": "latest",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
@ -1,7 +1,10 @@
|
|||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { getPostBySlug, getAllPosts } from "../lib/api";
|
import { getPostBySlug, getAllPosts } from "../lib/api";
|
||||||
import markdownToHtml from "../lib/markdownToHtml";
|
import markdownToHtml from "../lib/markdownToHtml";
|
||||||
|
import Container from "../components/Container";
|
||||||
import Layout from "../components/Layout";
|
import Layout from "../components/Layout";
|
||||||
|
import Section from "../components/Section";
|
||||||
|
import SingleColumn from "../components/SingleColumn";
|
||||||
|
|
||||||
export default function Post({ post, morePosts, preview }) {
|
export default function Post({ post, morePosts, preview }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -10,10 +13,18 @@ export default function Post({ post, morePosts, preview }) {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="prose lg:prose-lg">
|
<Container>
|
||||||
<h1>{post.title}</h1>
|
<SingleColumn>
|
||||||
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
|
<Section>
|
||||||
</div>
|
<h1>{post.title}</h1>
|
||||||
|
</Section>
|
||||||
|
<Section>
|
||||||
|
<div className="prose lg:prose-lg">
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
</SingleColumn>
|
||||||
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
124
pages/index.js
124
pages/index.js
@ -1,70 +1,90 @@
|
|||||||
import Head from "next/head";
|
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="">
|
<Layout>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Urbit Developers</title>
|
<title>Urbit Developers</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</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">
|
<p>
|
||||||
<h1>
|
Urbit is an entirely new computer and novel programming
|
||||||
Urbit is a general-purpose platform for building decentralized,
|
environment. Start with our series of self-guided courses.{" "}
|
||||||
peer-to-peer applications.
|
</p>
|
||||||
</h1>
|
|
||||||
<button>
|
|
||||||
<span className="type-ui">Learn More</span>
|
|
||||||
</button>
|
|
||||||
<h2>Learn</h2>
|
|
||||||
<span>Become an Urbit developer</span>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Urbit is an entirely new computer and novel programming environment.
|
You can get a high level overview with the primer, or jump into
|
||||||
Start with our series of self-guided courses.{" "}
|
learning with a series of self-led courses designed to teach you
|
||||||
</p>
|
the basics called Urbit 101. If you’re already familiar with the
|
||||||
|
basics, consult the series of standalone guides called Urbit
|
||||||
|
201.
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>Stack overview | Urbit 101 | Urbit 201 </p>
|
||||||
You can get a high level overview with the primer, or jump into
|
</div>
|
||||||
learning with a series of self-led courses designed to teach you the
|
</Section>
|
||||||
basics called Urbit 101. If you’re already familiar with the basics,
|
<Section>
|
||||||
consult the series of standalone guides called Urbit 201.
|
<div className="p-6 bg-blue-100 rounded-xl prose lg:prose-lg">
|
||||||
</p>
|
<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>
|
<p>Get involved | Developer Calls | Join the mailing list </p>
|
||||||
<span>Join the community </span>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
The developer community is friendly, helpful, and organized from
|
The mailing list is meant to be a separate, developer-only list
|
||||||
within Urbit itself—but you don’t have to take our word for it! Join
|
for those that want to stay up-to-date on developer-specific
|
||||||
our public groups on the network, or tune into a Developer Call to
|
announcements. These would be things like new documentation,
|
||||||
join the community.{" "}
|
upcoming developer calls, infrastructure updates/breaking
|
||||||
</p>
|
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>
|
<p>Grants | Jobs | The Combine</p>
|
||||||
The mailing list is meant to be a separate, developer-only list for
|
</div>
|
||||||
those that want to stay up-to-date on developer-specific
|
</Section>
|
||||||
announcements. These would be things like new documentation, upcoming
|
</SingleColumn>
|
||||||
developer calls, infrastructure updates/breaking changes, etc.{" "}
|
</Container>
|
||||||
</p>
|
</Layout>
|
||||||
|
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -36,11 +36,11 @@ strong {
|
|||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
|
|
||||||
/* h1,
|
h1,
|
||||||
.type-h1 {
|
.type-h1 {
|
||||||
@apply text-4xl lg:text-5xl font-extrabold leading-tight text-wall-600;
|
@apply text-4xl lg:text-5xl font-extrabold leading-tight text-wall-600;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
h2,
|
h2,
|
||||||
.type-h2 {
|
.type-h2 {
|
||||||
@apply text-3xl lg:text-4xl font-bold leading-tight;
|
@apply text-3xl lg:text-4xl font-bold leading-tight;
|
||||||
@ -128,84 +128,25 @@ a:hover {
|
|||||||
opacity: 0.66;
|
opacity: 0.66;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BEM Classes - Use sparingly */
|
.prose pre,
|
||||||
|
.prose pre[class*="language-"] {
|
||||||
.port-hero-card-height {
|
|
||||||
height: 36em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.port-hero-image-height {
|
.prose code,
|
||||||
height: 32em;
|
.prose code[class*="language-"] {
|
||||||
|
@apply px-2 py-0.5 bg-wall-100 rounded-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
.port-hero-image {
|
.prose a code,
|
||||||
transform: translateX(8%);
|
.prose a code[class*="language-"] {
|
||||||
background-image: linear-gradient(
|
@apply bg-green-100 text-green-400;
|
||||||
to right,
|
|
||||||
rgba(255, 255, 255, 0) 85%,
|
|
||||||
rgba(255, 255, 255, 1) 100%
|
|
||||||
),
|
|
||||||
url("https://media.urbit.org/port.svg");
|
|
||||||
background-size: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray-menu-open {
|
.prose pre {
|
||||||
transform: translateX(0);
|
@apply block p-4 bg-wall-100 rounded-md overflow-x-auto;
|
||||||
transition: transform var(--tray-time);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray-menu-closed {
|
.prose pre > code,
|
||||||
transform: translateX(-110vw);
|
.prose pre[class*="language-"] > code {
|
||||||
transition: transform var(--tray-time);
|
/* @apply p-0; */
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
@ -48,6 +48,26 @@ module.exports = {
|
|||||||
mono: ["Source Code Pro", "monospace"],
|
mono: ["Source Code Pro", "monospace"],
|
||||||
},
|
},
|
||||||
extend: {
|
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: {
|
fontSize: {
|
||||||
xs: "0.75rem",
|
xs: "0.75rem",
|
||||||
sm: "0.875rem",
|
sm: "0.875rem",
|
||||||
|
Loading…
Reference in New Issue
Block a user