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 ## Tech stack
Node.js, ExpressJS, MongoDB MEVN: MongoDD, ExpressJS, Vue, NodeJS
## Installation ## Installation

4
web/public/index.html
View file

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

15
web/src/App.vue
View file

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

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

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

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

@ -1,18 +1,40 @@
<template> <template>
<div class="home"> <div class="w3-container">
<img alt="Vue logo" src="../assets/logo.png"> <img alt="Guppe logo" src="/f/guppe.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> <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> </div>
</template> </template>
<script> <script>
// @ is an alias to /src // @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' // import HelloWorld from '@/components/HelloWorld.vue'
export default { export default {
name: 'home', name: 'home',
components: { components: {
HelloWorld
} }
} }
</script> </script>