Added more pages and created <FeatureLinks/> component

This commit is contained in:
ポール ウェッブ 2018-07-13 11:28:24 -05:00
parent eb7a76f0a5
commit f6eaf4fb13
12 changed files with 349 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,77 @@
.feature-links {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
list-style-type: none;
padding-top: 0.5rem;
}
.feature-link {
width: 320px; min-height: 135px;
background-color: $white;
border: 1px solid rgba($black, 0.1);
border-radius: 3px;
cursor: pointer;
display: inline-block;
position: relative;
transition: box-shadow 0.2s;
vertical-align: top;
> div:first-of-type {
top: 85px; left: 5%;
position: relative;
text-align: center;
width: 90%;
z-index: 1;
}
&:not(:hover) {
.feature-link__background {
filter: brightness(0.5);
}
}
&:hover {
box-shadow: 0 0 15px rgba($black, 0.15);
.feature-link__title {
color: $teal;
}
}
}
.feature-link__title {
background-color: $white;
border: 1px solid rgba(gray, 0.1);
box-shadow: 0 2px 5px rgba($black, 0.025);
border-radius: 3px;
box-decoration-break: clone;
display: inline;
font-size: 1rem;
line-height: 1.7;
padding: 0.25rem 0.5rem;
transition: color 0.2s;
position: relative;
}
.feature-link__background {
width: calc(100% + 2px); height: 100px;
top: -1px; left: -1px;
background-color: $teal;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
transition: filter 0.2s;
overflow: hidden;
position: absolute;
z-index: 0;
img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
}

View file

@ -11,6 +11,7 @@
"partials/animation", "partials/animation",
"partials/ecosystem", "partials/ecosystem",
"partials/email-subscribe", "partials/email-subscribe",
"partials/feature-links",
"partials/github-feed", "partials/github-feed",
"partials/navigation", "partials/navigation",
"partials/mission-statement", "partials/mission-statement",

View file

@ -39,7 +39,7 @@ if (typeof process.env.REDISCLOUD_URL !== "undefined") {
client.on("error", redisError => { client.on("error", redisError => {
process.env.NODE_ENV === "development" ? process.env.NODE_ENV === "development" ?
log("Unable to connect to Redis client. You may be missing an .env file") : log(`\n${chalk.yellow("Unable to connect to Redis client.")}\nYou may be missing an .env file or your connection was reset.`) :
logSlackError("An error occured with Redis", redisError) logSlackError("An error occured with Redis", redisError)
; ;
}); });

54
views/pages/build.md Normal file
View file

@ -0,0 +1,54 @@
---
title: Development
---
Want to build something on top of LBRY? This is the place to get you started.
At least, it's the place to get started so long as you have some idea of what LBRY _is_. If you don't, you should read the
[Overview](/overview) first.
## When to Use LBRY
- You want to build an application that contributes to the world's knowledge, or benefits from global, shared discovery (flesh this out).
- You want to replace an existing centralized service related to digital content distribution with a decentralized/community-controlled one.
## When Not to Use LBRY
- You want to privately distribute data/information.
- You want to do illegal things.
## How (Ways?) to Build on LBRY
### Web, Desktop, and Mobile Applications (Daemon-based Applications)
Almost all web, desktop, and mobile applications will use the [lbry daemon](https://github.com/lbryio/lbry) as a way of accessing and communicating with the LBRY network.
#### Web Applications
1. Set up a web server.
1. Install lbry. (Docker images? Other convenient ways of doing this?)
1. Bridging basics.
#### Desktop Applications
1. Desktop applications will typically bundle the [lbry daemon](https://github.com/lbryio/lbry).
1. lbry-desktop as example
#### Android Applications
1. (Whatever magic you have to do to get a daemon running on Android.)
#### iOS Applications
It is not currently possible to use LBRY on iOS. [There is a bounty](lbry.io/bounty/ios-daemon) for this.
### Blockchain and Wallet Level (Full Node Applications)
Not all applications will want to use the full LBRY protocol, or some applications may be specifically designed with full blockchain interactions in mind.
1. How to install lbrycrd.
1. lbrycrd documentation
## Desired Applications
TBD

11
views/pages/community.md Normal file
View file

@ -0,0 +1,11 @@
---
title: Community
---
Sometimes we say that the LBRY [[blockchain]] is the foundation of the LBRY protocol, but that's a lie.
The foundation of LBRY is the community of people that make it possible. LBRY uses computers to move bits around, but it's people that tell them how.
## Commune Yourself
<FeatureLinks/>

124
views/pages/contribute.md Normal file
View file

@ -0,0 +1,124 @@
---
title: Contributing
---
## Contributing to LBRY
Interested in working on the LBRY protocol, an official LBRY app, or other LBRY infrastructure? Awesome! This guide will get you started.
This guide is for contributing to the code bases maintained by the LBRY organization. For building on top of the LBRY protocol, see [Build](/build).
Contributors that provide accepted pull requests, well-specified issues, or assist in testing and quality assurance typically receive LBC tokens as appreciation.
## Ecosystem Overview
Typical usage of LBRY does not involve a single piece of software, but several interacting components.
If you want to contribute to LBRY, the first step is to understand where.
### Core Protocol Components
| Component | Language (Toolset) | What Is It
--- | --- | ---
| [lbrycrd](https://github.com/lbryio/lbrycrd) | C++ | A full node for the LBRY blockchain, including a standalone wallet. Used by miners and some applications. Most consumer applications do not bundle `lbrycrd` directly.
| [lbry](https://github.com/lbryio/lbry) | Python (Twisted) | A daemon that implements the LBRY protocol. Bundled with and/or used by most LBRY applications.
| [lbryum](https://github.com/lbryio/lbryum) | Python | The Simple Payment Verification (SPV) wallet bundled with `lbry`.
| [lbryum-server](https://github.com/lbryio/lbryschema) | Protobuf, Python | The wallet server for the `lbryum` SPV wallet.
| [lbry-schema](https://github.com/lbryio/lbryschema) | Protobuf, Python | The structure of the metadata stored in the LBRY blockchain.
### Official Applications
| Application | Language (Toolset) | What Is It
--- | --- | ---
| [lbry-desktop](https://github.com/lbryio/lbry-desktop) | JavaScript (ReactJS, Electron) | A graphical browser for the LBRY protocol for Windows, macOS, and Linux. `lbry-desktop` bundles `lbry` and is primarily frontend code.
| [lbry-android](https://github.com/lbryio/lbry-desktop) | JavaScript (ReactNative), Python (kivy) | A graphical browser for the LBRY protocol for Android. `lbry-android` bundles `lbry` and is primarily frontend code.
| [lbry-redux](https://github.com/lbryio/lbry-redux) | JavaScript (Redux) | A common codebase for shared Redux logic between `lbry-desktop` and `lbry-android`.
| [spee.ch](https://github.com/lbryio/spee.ch) | JavaScript (Node, ReactJS, Express) | A web-based host for free LBRY content. Usable directly as a content link dump site or as a customized, standalone install.
### Websites
| Domain | Language (Toolset) | What Is It
--- | --- | ---
| [lbry.tech](https://github.com/lbryio/lbry.tech) | JavaScript (Vue, Vuepress) | You're on it.
| [lbry.io](https://github.com/lbryio/lbry.io) | PHP (vanilla) | A website for LBRY end-users and creators.
| [lbry.fund](https://github.com/lbryio/lbry.fund) | HTML | A website for receiving funding from LBRY, Inc.
### Auxiliary Services and Applications
| Domain | Language (Toolset) | What Is It
--- | --- | ---
| [chainquery](https://github.com/lbryio/chainquery) | Go | A utility for parsing, extracting, and updating the LBRY blockchain into structured SQL data. Used by several internal tools and useful for 3rd-party application development.
| [lighthouse](https://github.com/lbryio/lighthouse) | JavaScript, ElasticSearch | A search service for the LBRY blockchain.
| [wunderbot](https://github.com/lbryio/lbry-wunderbot) | JavaScript (Node) | A chatbot used by the LBRY discord.
| [block-explorer](https://github.com/lbryio/block-explorer) | PHP (vanilla) | A blockchain explorer for the LBRY blockchain.
| Add more? other tipbots... |
## Coding
Several hundred extremely good-looking, intelligent and popular people, as well as our CTO, have contributed to LBRY. Join us!
Additionally, every technical employee of LBRY outside of the founding team started as a public contributor.
### How To Contribute Code
1. **Identify the component you want to work on**. LBRY has code bases in Python, JavaScript, PHP, and C++. See [Ecosystem Overview](#ecosystem-overview).
1. **Get set up.** Each repo has a `README.md` with clear instructions on how to get the repo up and running properly. Thanks, [Repository Standards](/repository-standards)!
1. **Find something to work on**. All actively developed repositories should have issues tagged "Good First Issues" specifically for new contributors. Some projects use a "level: n" tagging system, where lower numbers are simpler and higher numbers are more complex. Of course, you are also welcome to work on something not currently filed if you have your own idea! Additionally, all repositories have contact information for the maintainer if you have trouble finding an issue to work on.
1. **Abide coding and commit standards**. Any specific information necessary to know in this regard should be in the `README`.
1. **Commit early and ask questions**. Is an issue confusing? Please comment and say so! Not sure if you've got the right approach? Commit your code and we'll give feedback. Certain you're doing everything right? Commit it anyway. Once you commit, open a pull request. We encourage work-in-progress commits to let us know you're working on something and to facilitate feedback.
1. **Accept feedback and finish**. Most pull requests are reviewed within two business days. Once the repository maintainer has approved your contribution, it will get merged and we'll try really hard to give you LBC even if you say no.
## Designing
Web and application designers are requested to be able to work directly on CSS in the project they'd be contributing to. Please follow the [Coding](#coding) instructions for any website or application you want to improve.
## Writing
Most written content at LBRY is checked into source control. To improve content we've written:
1. Identify which website or application it is in (see the [overview])(#ecosystem-overview).
1. Search for a quoted phrase of the content you want to change.
1. Edit the content via the GitHub interface and submit it as a pull request.
## Testing
If you want to contribute without getting directly into the code, one of the best ways you can contribute is testing.
A number of our code bases (`lbrycrd`, `lbry`, all applications, more...) go through regular release cycles where new versions are shipped every several weeks. Testing pre-release versions is a great way to help us identify issues and ship bug-free code.
For any projects that you want to be a tester on, "Watch" the repo on GitHub. You will receive an email with release notes whenever a release candidate is out.
For even harder-core testing, you can follow the `README` instructions in a project and test against the `master` branch of a project at any time. Additionally, `master` builds for some projects are always available via [releases.lbry.io](http://releases.lbry.io).
Opening well-specified issues against release candidates or master builds is extremely useful in helping us create quality software.
**Note: that you perform testing at your own risk! If using release candidates and especially master builds, back up your wallet and be cautious.**
## Raising Issues
If you're about to raise an issue because you've found a problem with LBRY, or you'd like to request a new feature, or for any other reason, please read this first.
GitHub is the preferred channel for [bug reports](#reporting-a-bug) and [feature requests](#feature-requests).
### Reporting a Bug
A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful - thank you!
Guidelines for bug reports:
1. **Identify the correct repo**. See [ecosystem overview](#ecosystem-overview). While it's okay if you get this wrong, it's a big help to us if you get it right.
2. **Use the GitHub issue search** — check if the issue has already been reported (or fixed). Be sure to include closed tickets in your search.
3. **Follow the instructions** — When you open an issue inside of GitHub, each repo contains a template for how to create a good bug report. Please follow it!
Well-specified bug reports save developers lots of time and are extremely appreciated, typically with an LBRY credit tip.
### Feature Requests
Feature requests are welcome. Before you submit one be sure to:
1. **Identify the correct repo**. See [ecosystem overview](#ecosystem-overview).
2. **Use the Github Issues search** and check the feature hasn't already been requested. Be sure to include closed tickets.
3. **Consider whether it's feasible** for us to tackle this feature in the next 6-12 months. The LBRY team is currently stretched thin just adding basic functionality. If this is a nice to have rather than a need, it is probably more clutter than helpful.
4. **Make a strong case** to convince the project's leaders of the merits of this feature. Please provide as much detail and context as possible. This means explaining the use case and why it is likely to be common.
## Tips
We offer LBC as a thank you to anyone who contributes to LBRY. While we think we're fair-to-generous in our tips, tipping is more about recognizing and appreciating what you've given to the community than providing compensation.
The amount of LBC is not typically specified in advance of a contribution, though if you're particularly motivated by this aspect you are welcome to ask.

View file

@ -5,12 +5,6 @@
// P A C K A G E // P A C K A G E
const html = require("choo-async/html"); const html = require("choo-async/html");
// const local = require("app-root-path").require;
// const test = local("/views/partials/github-feed");
// console.log(test());
// test();

View file

@ -34,4 +34,4 @@ Learn more about how LBRY works from this ecosystem overview.
- Explore live metadata and add your own blockchain entry on [the Tour](/tour). - Explore live metadata and add your own blockchain entry on [the Tour](/tour).
- Read the whitepaper, the API specification and other documentation in [Resources](/resources). - Read the whitepaper, the API specification and other documentation in [Resources](/resources).
- Learn how to [contribute to LBRY](/contribute/) or [build your own application](/build). - Learn how to [contribute to LBRY](/contribute) or [build your own application](/build).

View file

@ -79,7 +79,7 @@ function partialFinder(markdownBody) {
const regexToFindPartials = /<\w+\/>/g; const regexToFindPartials = /<\w+\/>/g;
const partials = markdownBody.match(regexToFindPartials); const partials = markdownBody.match(regexToFindPartials);
if (!partials) return; if (!partials) return markdownBody;
for (const partial of partials) { for (const partial of partials) {
const filename = decamelize(partial, "-").replace("<", "").replace("/>", ""); const filename = decamelize(partial, "-").replace("<", "").replace("/>", "");

View file

@ -0,0 +1,77 @@
"use strict";
// P A C K A G E
const dedent = require("dedent");
// V A R I A B L E
const links = [ // TODO: Update images
{
href: "https://discord.gg/YjYbwhS",
image: "http://static.simpledesktops.com/static/images/sd-bg.png",
title: "Join us in chat"
},
{
href: "https://lbry.io/developer",
image: "http://static.simpledesktops.com/uploads/desktops/2017/02/28/GeoShapes_2880x1800.png",
title: "Join the developer email list"
},
{
href: "https://lbry.io/meet",
image: "http://static.simpledesktops.com/uploads/desktops/2016/12/05/Untitled-1-03-01.png",
title: "Host a meet-up"
},
{
href: "https://www.reddit.com/r/lbry",
image: "http://static.simpledesktops.com/uploads/desktops/2016/08/28/Wind-Vector-resize.png",
title: "Reddit"
},
{
href: "https://lbry.fund",
image: "http://static.simpledesktops.com/uploads/desktops/2015/08/20/Sunset_by_Banned.png",
title: "Get funding for a project"
},
{
href: "https://lbry.io/join-us",
image: "http://static.simpledesktops.com/uploads/desktops/2015/09/25/Siri.png",
title: "Get a job"
},
{
href: "https://lbry.io/twitter",
title: "Twitter"
}
];
// E X P O R T
module.exports = exports = () => {
const renderedLinks = [];
let imageLink = "";
for (const link of links) {
if (link.image) imageLink = `<img src="${link.image}" alt="${link.title}"/>`;
renderedLinks.push(`
<li class="feature-link">
<div>
<a href="${link.href}" title="${link.title}" class="feature-link__title">${link.title}</a>
</div>
<figure class="feature-link__background">
${imageLink}
</figure>
</li>
`);
}
return dedent`
<ul class="feature-links">
${renderedLinks.join("")}
</ul>
`;
};