lbry.tech/app/views/home.js

104 lines
2.9 KiB
JavaScript

"use strict";
// I M P O R T
import html from "choo/html";
// U T I L
import linkGrid from "~component/link-grid";
// E X P O R T
export default () => html`
<div>
<section class="hero">
<div>
<h1>
LBRY is a free, open, and community-run digital marketplace.<br/>
Build the future of content freedom.
</h1>
</div>
</section>
<section class="features">
${linkGrid([
{
description: "Get your head around LBRY with 3 interactive examples.",
destination: "/playground",
label: "Party in the Playground",
title: "Learn By Trying"
},
{
description: "Dig into the formal specification of the LBRY protocol.",
destination: "/spec",
label: "Study the Spec",
title: "Learn By Reading"
}
])}
</section>
<section class="intro">
<div class="inner-wrap">
<h3>Overview</h3>
<p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
<a class="cta" href="/overview">Observe the Overview</a>
</div>
</section>
<section class="docs">
<div class="inner-wrap">
<h3>Resources</h3>
<p>Looking for API documentation, formal specifications, how-tos, resources, or the meaning of life? Find at least some of these things in the resources area.</p>
<a class="cta" href="/resources">Roam to Resources</a>
</div>
</section>
<div id="github-feed" class="github-feed">
<h3>GitHub</h3>
<h5 class="last-updated">Unable to fetch latest GitHub data</h5>
</div>
<section class="contribute">
<div class="inner-wrap">
<h3>Contribute</h3>
<p>No matter your experience or skill level, <em>you</em> can progress content freedom.</p>
<ul>
<li>Coding</li>
<li>Creative</li>
<li>Writing</li>
<li>Testing</li>
</ul>
<p>
<a class="cta" href="/contribute">Collaborate with Contributors</a>
</p>
</div>
</section>
<section class="community">
<div class="inner-wrap">
<h3>Community</h3>
<p>There's literally <a href="https://lbry.tv/@lbrytech:1/dozens:e">12n</a> of us.</p>
<ul>
<li><a href="//chat.lbry.com" title="LBRY on Discord">Chat</a></li>
<li><a href="//discourse.lbry.com" title="LBRY on Discourse">Forum</a></li>
<li><a href="//www.reddit.com/r/lbry" title="LBRY on Reddit">Reddit</a></li>
</ul>
</div>
</section>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
send({ message: "landed on homepage" });
});
document.getElementsByTagName("body")[0].classList.add("home"); // TODO: make this happen in components/layout
</script>
`;