forked from plume/joinplu.me
First homepage draft
Baptiste Gelez
6 years ago
commit
502de8bb67
@ -0,0 +1,5 @@
|
||||
.bundle
|
||||
.cache
|
||||
.DS_Store
|
||||
.sass-cache
|
||||
build/
|
||||
@ -0,0 +1,6 @@
|
||||
source 'https://rubygems.org'
|
||||
|
||||
gem 'middleman', '~> 4.2'
|
||||
gem 'middleman-autoprefixer', '~> 2.7'
|
||||
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
|
||||
gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw]
|
||||
@ -0,0 +1,110 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (5.0.7.1)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 0.7, < 2)
|
||||
minitest (~> 5.1)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
autoprefixer-rails (8.6.5)
|
||||
execjs
|
||||
backports (3.11.4)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.12.2)
|
||||
compass-import-once (1.0.5)
|
||||
sass (>= 3.2, < 3.5)
|
||||
concurrent-ruby (1.1.3)
|
||||
contracts (0.13.0)
|
||||
dotenv (2.5.0)
|
||||
erubis (2.7.0)
|
||||
execjs (2.7.0)
|
||||
fast_blank (1.0.0)
|
||||
fastimage (2.1.5)
|
||||
ffi (1.9.25)
|
||||
haml (5.0.4)
|
||||
temple (>= 0.8.0)
|
||||
tilt
|
||||
hamster (3.0.0)
|
||||
concurrent-ruby (~> 1.0)
|
||||
hashie (3.6.0)
|
||||
i18n (0.7.0)
|
||||
kramdown (1.17.0)
|
||||
listen (3.0.8)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
memoist (0.16.0)
|
||||
middleman (4.2.1)
|
||||
coffee-script (~> 2.2)
|
||||
compass-import-once (= 1.0.5)
|
||||
haml (>= 4.0.5)
|
||||
kramdown (~> 1.2)
|
||||
middleman-cli (= 4.2.1)
|
||||
middleman-core (= 4.2.1)
|
||||
sass (>= 3.4.0, < 4.0)
|
||||
middleman-autoprefixer (2.9.0)
|
||||
autoprefixer-rails (~> 8.0)
|
||||
middleman-core (>= 3.3.3)
|
||||
middleman-cli (4.2.1)
|
||||
thor (>= 0.17.0, < 2.0)
|
||||
middleman-core (4.2.1)
|
||||
activesupport (>= 4.2, < 5.1)
|
||||
addressable (~> 2.3)
|
||||
backports (~> 3.6)
|
||||
bundler (~> 1.1)
|
||||
contracts (~> 0.13.0)
|
||||
dotenv
|
||||
erubis
|
||||
execjs (~> 2.0)
|
||||
fast_blank
|
||||
fastimage (~> 2.0)
|
||||
hamster (~> 3.0)
|
||||
hashie (~> 3.4)
|
||||
i18n (~> 0.7.0)
|
||||
listen (~> 3.0.0)
|
||||
memoist (~> 0.14)
|
||||
padrino-helpers (~> 0.13.0)
|
||||
parallel
|
||||
rack (>= 1.4.5, < 3)
|
||||
sass (>= 3.4)
|
||||
servolux
|
||||
tilt (~> 2.0)
|
||||
uglifier (~> 3.0)
|
||||
minitest (5.11.3)
|
||||
padrino-helpers (0.13.3.4)
|
||||
i18n (~> 0.6, >= 0.6.7)
|
||||
padrino-support (= 0.13.3.4)
|
||||
tilt (>= 1.4.1, < 3)
|
||||
padrino-support (0.13.3.4)
|
||||
activesupport (>= 3.1)
|
||||
parallel (1.12.1)
|
||||
public_suffix (3.0.3)
|
||||
rack (2.0.6)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
sass (3.4.25)
|
||||
servolux (0.13.0)
|
||||
temple (0.8.0)
|
||||
thor (0.20.3)
|
||||
thread_safe (0.3.6)
|
||||
tilt (2.0.9)
|
||||
tzinfo (1.2.5)
|
||||
thread_safe (~> 0.1)
|
||||
uglifier (3.2.0)
|
||||
execjs (>= 0.3.0, < 3)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
middleman (~> 4.2)
|
||||
middleman-autoprefixer (~> 2.7)
|
||||
tzinfo-data
|
||||
wdm (~> 0.1)
|
||||
|
||||
BUNDLED WITH
|
||||
1.17.1
|
||||
@ -0,0 +1,46 @@
|
||||
# Activate and configure extensions
|
||||
# https://middlemanapp.com/advanced/configuration/#configuring-extensions
|
||||
|
||||
activate :autoprefixer do |prefix|
|
||||
prefix.browsers = "last 2 versions"
|
||||
end
|
||||
|
||||
# Layouts
|
||||
# https://middlemanapp.com/basics/layouts/
|
||||
|
||||
# Per-page layout changes
|
||||
page '/*.xml', layout: false
|
||||
page '/*.json', layout: false
|
||||
page '/*.txt', layout: false
|
||||
|
||||
# With alternative layout
|
||||
# page '/path/to/file.html', layout: 'other_layout'
|
||||
|
||||
# Proxy pages
|
||||
# https://middlemanapp.com/advanced/dynamic-pages/
|
||||
|
||||
# proxy(
|
||||
# '/this-page-has-no-template.html',
|
||||
# '/template-file.html',
|
||||
# locals: {
|
||||
# which_fake_page: 'Rendering a fake page with a local variable'
|
||||
# },
|
||||
# )
|
||||
|
||||
# Helpers
|
||||
# Methods defined in the helpers block are available in templates
|
||||
# https://middlemanapp.com/basics/helper-methods/
|
||||
|
||||
# helpers do
|
||||
# def some_helper
|
||||
# 'Helping'
|
||||
# end
|
||||
# end
|
||||
|
||||
# Build-specific configuration
|
||||
# https://middlemanapp.com/advanced/configuration/#environment-specific-settings
|
||||
|
||||
# configure :build do
|
||||
# activate :minify_css
|
||||
# activate :minify_javascript
|
||||
# end
|
||||
@ -0,0 +1,16 @@
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://docs.joinplu.me/">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/Plume-org/Plume">Source code</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://riot.im/app/#/room/#plume:disroot.org">Chat room</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://framavox.org/g/WK40YHMA/plume">Loomio group</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Plume
|
||||
---
|
||||
|
||||
<header>
|
||||
<h1>Plume</h1>
|
||||
<h2>A federated blogging application</h2>
|
||||
<img src="/images/logo.png"/>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<%= partial "nav" %>
|
||||
|
||||
<section class="features">
|
||||
<div class="card">
|
||||
<span class="icon"><i data-feather="globe"></i></span>
|
||||
<main>
|
||||
<h2>Write once, publish everywhere</h2>
|
||||
<p>
|
||||
Plume is not a single website, but a network of what we call <em>instances</em>.
|
||||
You write from your instance, but anyone on any Plume instance can enjoy your stories.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="icon"><i data-feather="message-circle"></i></span>
|
||||
<main>
|
||||
<h2>Social blogging</h2>
|
||||
<p>
|
||||
When we write it is, most of the time, to share something with other people.
|
||||
Plume has many features that allow the exchange to be bi-directional.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="icon"><i data-feather="users"></i></span>
|
||||
<main>
|
||||
<h2>Collaborative writing</h2>
|
||||
<p>
|
||||
Plume also makes it easy to collaborate on an article. Since blogs are not
|
||||
limited to one author, many people can write in the same blog, improve each other work,
|
||||
to get the best final result.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Find an instance</h2>
|
||||
<ul id="instances">
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="grid">
|
||||
<h2>Enter the Fediverse</h2>
|
||||
<div class="card vertical">
|
||||
<span class="icon"><i data-feather="share-2"></i></span>
|
||||
<main>
|
||||
<h3>Not just Plume</h3>
|
||||
<p>
|
||||
Plume instances are part of a huge network, called the Fediverse. It is made
|
||||
of many instances, each one running a specific application, not always Plume.
|
||||
It means that for instance, Plume is able to communicate with microblogging apps
|
||||
like <a href="https://joinmastodon.org">Mastodon</a> or
|
||||
<a href="https://pleroma.social/">Pleroma</a>.
|
||||
Other blogging apps, like <a href="https://write.as">Write.as</a> can also
|
||||
communicate with Plume! It means that you can comment and like Plume articles
|
||||
from any of these other instances.
|
||||
</p>
|
||||
<a href="">Learn more about the Fediverse</a>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="card vertical">
|
||||
<span class="icon"><i data-feather="user"></i></span>
|
||||
<main>
|
||||
<h3>Great diversity</h3>
|
||||
<p>
|
||||
Each instance is hosted and moderated by different peoples, resulting in different
|
||||
rules, thematics and ambiance. An instance can suit you better than another, depending
|
||||
on your opinions and interests.
|
||||
</p>
|
||||
<a href="">Find your dream instance</a>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="card vertical">
|
||||
<span class="icon"><i data-feather="lock"></i></span>
|
||||
<main>
|
||||
<h3>A solid network</h3>
|
||||
<p>
|
||||
Because the Fediverse is mostly backed by volunteers, and not investors,
|
||||
it is resilient to economic problems. And because of its decentralized nature it is
|
||||
also harder to censor than traditional platforms.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="card vertical">
|
||||
<span class="icon"><i data-feather="heart"></i></span>
|
||||
<main>
|
||||
<h3>Open</h3>
|
||||
<p>
|
||||
Plume is libre software, based on open standards, like
|
||||
<a href="https://activitypub.rocks">ActivityPub</a>,
|
||||
which means you can help making it better.
|
||||
</p>
|
||||
<a href="https://contribute.joinplu.me">Discover how you can help</a>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- todo https://github.com/hovancik/middleman-github-deploy -->
|
||||
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
{
|
||||
"instances": [
|
||||
{
|
||||
"name": "Fediverse.blog",
|
||||
"description": "Generalistic instance.",
|
||||
"url": "https://fediverse.blog"
|
||||
},
|
||||
{
|
||||
"name": "Plume on Mastodon.Host",
|
||||
"description": "A public Plume instance by the Mastodon.host team",
|
||||
"url": "https://plume.mastodon.host"
|
||||
},
|
||||
{
|
||||
"name": "Les Nouvelles d'Ombreport",
|
||||
"description": "A public Plume instance by the Mastodon.host team",
|
||||
"url": "https://plume.ombreport.info/"
|
||||
},
|
||||
{
|
||||
"name": "plume.hostux.coffee",
|
||||
"url": "https://plume.hostux.coffee"
|
||||
},
|
||||
{
|
||||
"name": "Plume OpenAlgeria",
|
||||
"description": "A Plume testing instance, by the OpenAlgeria team",
|
||||
"url": "https://plume.oa-dev.com/"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
const instancesList = document.getElementById('instances')
|
||||
if (instancesList) {
|
||||
fetch('/javascripts/instances.json')
|
||||
.then(r => r.json())
|
||||
.then(res => {
|
||||
for (const inst of res.instances) {
|
||||
const li = document.createElement('li')
|
||||
const link = document.createElement('a')
|
||||
link.href = inst.url
|
||||
link.title = inst.url
|
||||
link.appendChild(document.createTextNode(inst.name || inst.url))
|
||||
li.appendChild(link)
|
||||
if (inst.description) {
|
||||
li.appendChild(document.createTextNode(` — ${inst.description}`))
|
||||
}
|
||||
instancesList.appendChild(li)
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
instancesList.appendChild(document.createTextNode('Error retriving instances'))
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Use the title from a page's frontmatter if it has one -->
|
||||
<title><%= current_page.data.title || "Middleman" %></title>
|
||||
<%= stylesheet_link_tag "site" %>
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
</head>
|
||||
<body>
|
||||
<%= yield %>
|
||||
<footer>
|
||||
Website under the GPL 3.0 license.
|
||||
—
|
||||
<a href="https://github.com/Plume-org/joinplu.me">Source code of this website</a>
|
||||
</footer>
|
||||
<script>feather.replace()</script>
|
||||
<%= javascript_include_tag "site" %>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,169 @@
|
||||
$plume: #7765e3;
|
||||
$plumedark: #6457a6;
|
||||
$gray: #F4F4F4;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
|
||||
|
||||
html, body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Playfair Display';
|
||||
}
|
||||
|
||||
header {
|
||||
margin: auto;
|
||||
padding: 30vh 20vw;
|
||||
background: linear-gradient(0deg, $plumedark, $plume);
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
|
||||
display: grid;
|
||||
grid-template: 50% 50% / 80% 20%;
|
||||
|
||||
img {
|
||||
height: 8em;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
body > main {
|
||||
nav {
|
||||
background: $gray;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding: 0px 20vw;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 2em 0em;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all ease-in 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $plume;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: $plume;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: $gray;
|
||||
padding: 1em;
|
||||
margin: 1em 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span.icon {
|
||||
padding: 0.5em;
|
||||
margin-left: -2em;
|
||||
border-radius: 100%;
|
||||
background: $plume;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
svg.feather {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
margin-left: 2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
main > a {
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
margin-top: 2em;
|
||||
|
||||
span.icon {
|
||||
margin-left: 0;
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#instances {
|
||||
font-size: 1.2em;
|
||||
padding: 0;
|
||||
margin: 1em 5vw;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding: 1em;
|
||||
transition: all ease-in 0.2s;
|
||||
&:hover {
|
||||
background: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
|
||||
& > h2 {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
section > h2 {
|
||||
text-align: center;
|
||||
margin: 5em 0 2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 5em 5vw;
|
||||
background: $gray;
|
||||
margin-top: 10vh;
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Reference in New Issue