Skip to content

GitLab

R
retribute.me
Commit 7a6feb96 authored by Ciarán Ainsworth's avatar Ciarán Ainsworth
Browse files
Options

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
      Showing with 893 additions and 157 deletions
      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;
      &:hover {
      text-decoration: none;
      }
      }
      hr {
      color: $divider-color;
      margin: $content-padding * 2 0;
      clear: both;
      }
      hr.small {
      margin: $content-padding / 2 0;
      }
      hr.hide {
      visibility: hidden;
      }
      hr.visual {
      margin: 0;
      }
      section {
      li {
      margin-bottom: $content-padding / 2;
      }
      }
      p.big {