lbry.tech/app/views/home.js

105 lines
2.9 KiB
JavaScript
Raw Normal View History

2018-07-12 17:21:42 +02:00
"use strict";
2018-10-01 22:47:10 +02:00
2018-11-30 21:46:22 +01:00
// I M P O R T
2018-10-01 22:47:10 +02:00
2018-08-29 01:57:18 +02:00
import html from "choo/html";
2018-10-01 22:47:10 +02:00
2018-10-10 19:56:35 +02:00
// U T I L
2018-10-01 22:47:10 +02:00
import linkGrid from "~component/link-grid";
2018-10-01 22:47:10 +02:00
// E X P O R T
2018-07-12 17:21:42 +02:00
2018-11-30 21:46:22 +01:00
export default () => html`
2018-07-12 23:07:16 +02:00
<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">
2018-09-30 19:34:29 +02:00
${linkGrid([
2018-10-01 01:43:35 +02:00
{
description: "Get your head around LBRY with 3 interactive examples.",
destination: "/playground",
label: "Party in the Playground",
title: "Learn By Trying"
2018-10-01 01:43:35 +02:00
},
{
description: "Dig into the formal specification of the LBRY protocol.",
2019-01-29 17:23:46 +01:00
destination: "/spec",
label: "Study the Spec",
title: "Learn By Reading"
2018-10-01 01:43:35 +02:00
}
])}
2018-07-12 23:07:16 +02:00
</section>
<section class="intro">
<div class="inner-wrap">
<h3>Overview</h3>
2018-07-12 23:07:16 +02:00
<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>
2018-07-12 23:07:16 +02:00
</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>
2018-07-12 23:07:16 +02:00
</div>
</section>
2018-07-16 23:06:37 +02:00
<div id="github-feed" class="github-feed">
<h3>GitHub</h3>
<h5 class="last-updated">Unable to fetch latest GitHub data</h5>
</div>
2018-07-12 23:07:16 +02:00
<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>
2018-07-12 23:07:16 +02:00
<ul>
2018-11-01 17:23:38 +01:00
<li>Coding</li>
<li>Creative</li>
<li>Writing</li>
<li>Testing</li>
2018-07-12 23:07:16 +02:00
</ul>
<p>
<a class="cta" href="/contribute">Collaborate with Contributors</a>
</p>
2018-07-12 23:07:16 +02:00
</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>
2018-07-12 23:07:16 +02:00
<ul>
2019-03-19 23:56:32 +01:00
<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>
2018-07-12 23:07:16 +02:00
<li><a href="//www.reddit.com/r/lbry" title="LBRY on Reddit">Reddit</a></li>
</ul>
</div>
</section>
</div>
2018-07-12 17:21:42 +02:00
<script>
2018-10-02 00:11:20 +02:00
document.addEventListener("DOMContentLoaded", () => {
2019-02-05 00:42:52 +01:00
send({ message: "landed on homepage" });
2018-07-12 17:21:42 +02:00
});
document.getElementsByTagName("body")[0].classList.add("home"); // TODO: make this happen in components/layout
</script>
`;