Skip to content
GitLab
Commit 7a6feb96 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth
Browse files

Started work on basic home screen/about content

parent 106c1894
Pipeline #5591 passed with stages
in 1 minute and 24 seconds
Hide whitespace changes
Inline Side-by-side
package.json
View file @ 7a6feb96
......@@ -11,9 +11,13 @@
},
"dependencies": {
"core-js": "^2.6.5",
"fork-awesome": "^1.1.7",
"typeface-montserrat": "^0.0.54",
"typeface-noto-sans": "^0.0.72",
"vue": "^2.6.10",
"vue-gettext": "^2.1.5",
"vue-router": "^3.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
......@@ -29,6 +33,7 @@
"node-sass": "^4.9.0",
"prerender-spa-plugin": "^3.4.0",
"prettier": "^1.18.2",
"purecss": "^1.0.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
......
src/App.vue
View file @ 7a6feb96
<template>
<div id="app">
<div id="nav">
<router-link :to="{ name: 'home', params: { locale: $language.current } }"
>Home</router-link
>
|
<router-link
:to="{ name: 'about', params: { locale: $language.current } }"
>About</router-link
>
</div>
<router-view />
<language-switcher></language-switcher>
<navigation/>
<main>
<router-view/>
</main>
<footer class="main-footer">
<div class="very wide wrapper">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-4">
<h5>
<translate translate-context="Content/Footer/Header">About us</translate>
</h5>
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li>
<a href="https://funkwhale.audio/en_US/collective" target="_blank">
<translate translate-context="Content/Footer/List.Item">Collective and statutes</translate>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/code-of-conduct" target="_blank">
<translate translate-context="Content/Footer/List.Item">Code of Conduct</translate>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/support-us" target="_blank">
<translate translate-context="Content/Footer/List.Item">Support us</translate>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/contact" target="_blank">
<translate translate-context="Content/Footer/List.Item">Contact</translate>
</a>
</li>
<li>
<a href="https://funkwhale.audio/en_US/logos" target="_blank">
<translate
translate-context="Content/Logos/Header"
>Logos and identity guidelines</translate>
</a>
</li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-4">
<h5>
<translate translate-context="Content/Footer/Header">Links</translate>
</h5>
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li>
<a rel="me" href="https://mastodon.eliotberriot.com/@eliotberriot">
<translate
translate-context="Content/Footer/List.Item"
>Retribute on the fediverse</translate>
</a>
</li>
<li class="pure-menu-item">
<a href="https://governance.funkwhale.audio">
<translate translate-context="Navigation/Link">Forum</translate>
</a>
</li>
<li class="pure-menu-item">
<a href="https://docs.funkwhale.audio">
<translate translate-context="Navigation/Link">Documentation</translate>
</a>
</li>
<li class="pure-menu-item">
<a href="https://dev.funkwhale.audio/funkwhale">
<translate translate-context="Navigation/Link">Source code</translate>
</a>
</li>
<li class="pure-menu-item">
<a href="https://blog.funkwhale.audio/local">
<translate translate-context="Navigation/Link">Blog</translate>
</a>
</li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-4">
<h5>
<label for="language" class="label">
<i class="fa fa-language"></i>&nbsp;
<translate translate-context="Label for language switcher">Language</translate>
</label>
</h5>
<language-switcher id="language" />
<a href="#">
<translate translate-context="Navigation/Link">Back to top</translate>
</a>
</div>
<div class="pure-u-1 pure-u-md-1-4">
<h5>
<translate translate-context="Footer/Title">Credits</translate>
</h5>
<p>
<translate
translate-context="Footer/Paragraph"
>Retribute is part of the Funkwhale community</translate>
</p>
<p>
<translate
translate-context="Footer/Paragraph"
>The illustrations were kindly drawn by Robin.</translate>
</p>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
require("typeface-noto-sans");
require("typeface-montserrat");
import Navigation from "./components/Navigation";
import LanguageSwitcher from "./components/LanguageSwitcher";
export default {
components: {
Navigation,
LanguageSwitcher
}
};
</script>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
@import "./style/main";
</style>
\ No newline at end of file
src/PageMixin.vue
View file @ 7a6feb96
......@@ -8,7 +8,60 @@ export default {
this.autodetectLanguage();
},
head: {
title() {
return {
inner: this.getInnerTitle()
};
},
meta: function() {
return [
{
name: "description",
content: this.$pgettext(
"Content/Home/Header",
"A Community Wealth Sharing Platform"
)
},
{
"http-equiv": "content-language",
content: this.$language.current.replace("_", "-")
}
];
},
link: function() {
let self = this;
let links = locales.locales.map(l => {
let params = {
...self.$route.params,
locale: l.code
};
let resolved = self.$router.resolve({
name: self.$route.name,
params
});
return {
rel: "alternate",
hreflang: l.code.replace("_", "-"),
href: `${resolved.href}`
};
});
links.push({
rel: "alternate",
type: "application/atom+xml",
title: "Blog - Atom Feed",
href: "https://blog.funkwhale.audio/~/Announcements/atom.xml"
});
return links;
}
},
methods: {
getInnerTitle() {
return this.$pgettext(
"HTML/Meta/Title",
"A Community Wealth Sharing Platform"
);
},
autodetectLanguage() {
let userLanguage =
this.locale || navigator.language || navigator.userLanguage;
......
src/components/HelloWorld.vue deleted 100644 → 0
View file @ 106c1894
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/Navigation.vue 0 → 100644
View file @ 7a6feb96
<template>
<div class="navigation-wrapper">
<nav
role="navigation"
:aria-label="labels.ariaLabel"
class="main pure-menu pure-menu-horizontal"
>
<router-link
class="pure-menu-heading"
:to="{ name: 'home' }"
:title="labels.homeTitle"
>
Retribute
</router-link>
<button class="pure-button menu-button" @click="showMenu = !showMenu">
<i v-if="showMenu" class="fa fa-close"></i>
<i v-else class="fa fa-bars"></i>
</button>
<ul :class="['pure-menu-list', { hide: !showMenu }]">
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'about', params: { locale: $language.current } }"
>
<translate translate-context="Navigation/Link/Short,Noun"
>About</translate
>
</router-link>
</li>
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'community', params: { locale: $language.current } }"
>
<translate translate-context="Navigation/Link">Community</translate>
</router-link>
</li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">
<translate translate-context="Navigation/Link">Resources</translate>
</a>
<ul class="pure-menu-children">
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'collective', params: { locale: $language.current } }"
>
<translate translate-context="Content/Footer/List.Item"
>Collective and statutes</translate
>
</router-link>
</li>
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'coc', params: { locale: $language.current } }"
>
<translate translate-context="Content/Footer/List.Item"
>Code of Conduct</translate
>
</router-link>
</li>
<li class="pure-menu-item">
<a
href="https://governance.funkwhale.audio"
target="_blank"
class="pure-menu-link"
>
<translate translate-context="Navigation/Link">Forum</translate>
</a>
</li>
<li class="pure-menu-item">
<a
href="https://docs.funkwhale.audio"
target="_blank"
class="pure-menu-link"
>
<translate translate-context="Navigation/Link"
>Documentation</translate
>
</a>
</li>
<li class="pure-menu-item">
<a
href="https://dev.funkwhale.audio/funkwhale"
target="_blank"
class="pure-menu-link"
>
<translate translate-context="Navigation/Link"
>Source code</translate
>
</a>
</li>
<li class="pure-menu-item">
<a
href="https://blog.funkwhale.audio/local"
target="_blank"
class="pure-menu-link"
>
<translate translate-context="Navigation/Link">Blog</translate>
</a>
</li>
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'contact', params: { locale: $language.current } }"
>
<translate translate-context="Content/Footer/List.Item">Contact</translate>
</router-link>
</li>
<li class="pure-menu-item">
<router-link
class="pure-menu-link"
:to="{ name: 'support-us', params: { locale: $language.current } }"
>
<translate translate-context="Content/Footer/List.Item">Support us</translate>
</router-link>
</li>
</ul>
</li>
<li class="pure-menu-item">
<span class="pure-menu-link">
<i class="fa fa-language"></i>&nbsp;
<language-switcher />
</span>
</li>
</ul>
</nav>
</div>
</template>
<script>
import LanguageSwitcher from "./LanguageSwitcher";
export default {
components: {
LanguageSwitcher
},
data() {
return {
showMenu: false
};
},
created() {
let self = this;
this.$router.afterEach(() => {
self.showMenu = false;
});
},
computed: {
labels() {
return {
ariaLabel: this.$pgettext("Navigation/Aria.Label", "Main navigation"),
homeTitle: this.$pgettext("Navigation/Link.Title", "Return to homepage")
};
}
}
};
</script>
\ No newline at end of file
src/setup.js 0 → 100644
View file @ 7a6feb96
import Vue from "vue";
require("fork-awesome/css/fork-awesome.min.css");
import GetTextPlugin from "vue-gettext";
import locales from "@/locales";
let availableLanguages = (function() {
let l = {};
locales.locales.forEach(c => {
l[c.code] = c.label;
});
return l;
})();
let defaultLanguage = "en_US";
Vue.use(GetTextPlugin, {
availableLanguages: availableLanguages,
defaultLanguage: defaultLanguage,
languageVmMixin: {
computed: {
currentKebabCase: function() {
return this.current.toLowerCase().replace("_", "-");
}
}
},
translations: {},
silent: true
});
Vue.config.productionTip = false;
export default {};
src/style/1-core/_reset.scss 0 → 100644
View file @ 7a6feb96
* {
box-sizing: border-box;
transition-duration: 100ms;
word-wrap: break-word;
}
html {
scroll-behavior: smooth;
}
src/style/1-core/_typography.scss 0 → 100644
View file @ 7a6feb96
body {
color: $text-color;
font-family: 'Montserrat', sans-serif;
font-size: 1.1em;
}
.pure-g, .pure-g [class*="pure-u"] {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Sans', sans-serif;
margin: $content-padding 0;
font-weight: normal;
&:first-child:not(.divider) {
margin-top: 0;
}
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.9em;
}
h3 {
font-size: 1.7em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.3em;
}
h6 {
font-size: 1.2em;
}
section {
p, li {
line-height: 1.5;
}
}
section a:not(.pure-button) {
color: $link-color;