insert/rubberguppe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

styling and WIP homepage

Browse source
This commit is contained in:
Will Murphy 2019-10-13 19:25:07 -05:00
parent fe97162490
commit 5407d1cfe1
5 changed files with 47 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -6,7 +6,7 @@ This server-2-server ActivityPub implementation adds decentralized, federaded "g
## Tech stack
Node.js, ExpressJS, MongoDB
MEVN: MongoDD, ExpressJS, Vue, NodeJS
## Installation

4
web/public/index.html
View file

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>w3.css">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>web</title>
</head>

19
web/src/App.vue
View file

@ -4,15 +4,13 @@
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div> -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">&nbsp;</div>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
&nbsp;
</div>
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<router-view/>
<div class="w3-bar w3-black w3-card">&nbsp;</div>
<div class="w3-row">
<div class="w3-col s0 m2">&nbsp;</div>
<div class="w3-col s12 m8 w3-content">
<router-view/>
</div>
<div class="w3-col s0 m2">&nbsp;</div>
</div>
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
<a href="https://github.com/wmurphyrd/guppe"><i class="fa fa-github w3-hover-opacity"></i></a>
@ -22,11 +20,10 @@
<style>
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px; */
}
</style>

23
web/src/components/PostCard.vue
View file

@ -1,13 +1,15 @@
<template>
<div class="w3-card">
<div class="actor">
<img crossorigin="anonymous" :src="actorIconUrl">
<div class="w3-card w3-margin-bottom">
<div class="w3-container w3-left-align">
<img class="icon" crossorigin="anonymous" :src="actorIconUrl">
<label>
{{ actor.preferredUsername }}
<span class="muted">@{{ actorHost }}</span>
<b>{{ actor.preferredUsername }}</b>
<span class="w3-text-grey">@{{ actorHost }}</span>
</label>
</div>
<p v-html="post.content"></p>
<div class="w3-container">
<p v-html="post.content"></p>
</div>
</div>
</template>
@ -69,15 +71,8 @@ export default {
</script>
<style scoped>
.actor img {
.icon {
width: 32px;
height: 32px;
}
.actor label {
font-weight: bold;
}
.actor label .muted {
font-weight: normal;
color: gray;
}
</style>

32
web/src/views/Home.vue
View file

@ -1,18 +1,40 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<div class="w3-container">
<img alt="Guppe logo" src="/f/guppe.png">
<h1>Guppe Groups</h1>
<p>
Guppe brings social groups to the fediverse &mdash; making it easy to connect and meet new
people based on shared
interests without the maniuplation of your attention to maximize ad revenue nor the
walled garden lock-in of capitalist social media.
</p>
<h2>How does Guppe work?</h2>
<ol>
<li>Follow a user on @gup.pe to join that group</li>
<li>Mention a user on @gup.pe to share a post with everyone in the group</li>
<li>New groups are created on demand, just search for @YourGroupNameHere@gup.pe and it will show up</li>
<li>Visit a @gup.pe user profile to see the group history</li>
</ol>
<p>
A Guppe Group has its own account and profile.
This server-2-server ActivityPub implementation adds decentralized,
federaded "groups" support across all ActivityPub compliant social media networks.
Users join groups by following group-type actors on Guppe servers and contribute t
groups by mentioning those same actors in a post. Guppe group actors will
automatically forward posts they receive to all group members so that everyone in the
group sees any post made to the group. Guppe group actors' profiles (e.g. outboxes) also
serve as a group discussion history.
</p>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>