New unlogged homepage

With fancy illustrations ✨

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/graphql/admin.ts

@@ -133,6 +133,7 @@ export const ADMIN_SETTINGS_FRAGMENT = gql`
     instanceName
     instanceDescription
     instanceLongDescription
+    instanceSlogan
     contact
     instanceTerms
     instanceTermsType
@@ -160,6 +161,7 @@ export const SAVE_ADMIN_SETTINGS = gql`
     $instanceName: String
     $instanceDescription: String
     $instanceLongDescription: String
+    $instanceSlogan: String
     $contact: String
     $instanceTerms: String
     $instanceTermsType: InstanceTermsType
@@ -175,6 +177,7 @@ export const SAVE_ADMIN_SETTINGS = gql`
       instanceName: $instanceName
       instanceDescription: $instanceDescription
       instanceLongDescription: $instanceLongDescription
+      instanceSlogan: $instanceSlogan
       contact: $contact
       instanceTerms: $instanceTerms
       instanceTermsType: $instanceTermsType

js/src/graphql/config.ts

@@ -5,6 +5,7 @@ export const CONFIG = gql`
     config {
       name
       description
+      slogan
       registrationsOpen
       registrationsAllowlist
       demoMode

js/src/graphql/todos.ts

@@ -11,6 +11,7 @@ export const GET_TODO = gql`
         actor {
           id
           preferredUsername
+          domain
           name
         }
         title

js/src/i18n/en_US.json

@@ -386,7 +386,6 @@
   "Welcome back!": "Welcome back!",
   "Welcome to Mobilizon, {username}!": "Welcome to Mobilizon, {username}!",
   "Who can view this event and participate": "Who can view this event and participate",
-  "World map": "World map",
   "Write something…": "Write something…",
   "You are participating in this event anonymously but didn't confirm participation": "You are participating in this event anonymously but didn't confirm participation",
   "You are participating in this event anonymously": "You are participating in this event anonymously",
@@ -806,5 +805,15 @@
   "{username} was invited to {group}": "{username} was invited to {group}",
   "The member was removed from the group {group}": "The member was removed from the group {group}",
   "The organiser has chosen to close comments.": "The organiser has chosen to close comments.",
-  "Comments are closed for everybody else.": "Comments are closed for everybody else."
+  "Comments are closed for everybody else.": "Comments are closed for everybody else.",
+  "Instance Slogan": "Instance Slogan",
+  "A short tagline for your instance homepage. Defaults to \"Gather ⋅ Organize ⋅ Mobilize\"": "A short tagline for your instance homepage. Defaults to \"Gather ⋅ Organize ⋅ Mobilize\"",
+  "Learn more about {instance}": "Learn more about {instance}",
+  "Unable to detect timezone.": "Unable to detect timezone.",
+  "A practical tool": "A practical tool",
+  "Mobilizon is a tool that helps you <b>find, create and organise events</b>.": "Mobilizon is a tool that helps you <b>find, create and organise events</b>.",
+  "An ethical alternative": "An ethical alternative",
+  "Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.": "Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.",
+  "A federated software": "A federated software",
+  "Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.": "Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>."
 }

js/src/i18n/fr_FR.json

@@ -857,5 +857,15 @@
   "{username} was invited to {group}": "{username} a été invité à {group}",
   "The member was removed from the group {group}": "Le ou la membre a été supprimé·e du groupe {group}",
   "The organiser has chosen to close comments.": "L'organisateur·ice a choisi de fermer les commentaires.",
-  "Comments are closed for everybody else.": "Les commentaires sont fermés pour tous·tes les autres."
+  "Comments are closed for everybody else.": "Les commentaires sont fermés pour tous·tes les autres.",
+  "Instance Slogan": "Slogan de l'instance",
+  "A short tagline for your instance homepage. Defaults to \"Gather ⋅ Organize ⋅ Mobilize\"": "Un court slogan pour la page d'accueil de votre instance. La valeur par défaut est « Rassembler ⋅ Organiser ⋅ Mobiliser »",
+  "Learn more about {instance}": "En savoir plus sur {instance}",
+  "Unable to detect timezone.": "Impossible de détecter le fuseau horaire.",
+  "A practical tool": "Un outil pratique",
+  "Mobilizon is a tool that helps you <b>find, create and organise events</b>.": "Mobilizon est un outil qui vous permet de <b>trouver, créer et organiser des événements</b>.",
+  "An ethical alternative": "Une alternative éthique",
+  "Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.": "Alternative éthique aux événements, groupes et pages Facebook, Mobilizon est <b>un outil conçu pour vous servir</b>. Point.",
+  "A federated software": "Un logiciel fédéré",
+  "Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.": "Mobilizon n’est pas une plateforme géante, mais une <b>multitude de sites web Mobilizon interconnectés</b>."
 }

js/src/types/admin.model.ts

@@ -34,6 +34,7 @@ export interface ILanguage {
 export interface IAdminSettings {
   instanceName: string;
   instanceDescription: string;
+  instanceSlogan: string;
   instanceLongDescription: string;
   contact: string;
   instanceTerms: string;

js/src/types/config.model.ts

@@ -6,6 +6,7 @@ export interface IConfig {
   description: string;
   longDescription: string;
   contact: string;
+  slogan: string;
 
   registrationsOpen: boolean;
   registrationsAllowlist: boolean;

js/src/views/Admin/Settings.vue

@@ -28,6 +28,20 @@
           </small>
           <b-input type="textarea" v-model="adminSettings.instanceDescription" rows="2" />
         </div>
+        <div class="field">
+          <label class="label has-help">{{ $t("Instance Slogan") }}</label>
+          <small>
+            {{
+              $t(
+                'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
+              )
+            }}
+          </small>
+          <b-input
+            v-model="adminSettings.instanceSlogan"
+            :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
+          />
+        </div>
         <div class="field">
           <label class="label has-help">{{ $t("Contact") }}</label>
           <small>

js/src/views/Home.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <section class="hero is-light is-bold" v-if="config && (!currentUser.id || !currentActor.id)">
+  <div id="homepage">
+    <section class="hero" v-if="config && (!currentUser.id || !currentActor.id)">
       <div class="hero-body">
         <div class="container">
-          <h1 class="title">{{ $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
+          <h1 class="title">{{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
           <p
             v-html="$t('Join <b>{instance}</b>, a Mobilizon instance', { instance: config.name })"
           />
@@ -26,13 +26,17 @@
             <!-- We don't invite to find other instances yet -->
             <!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
             <b-button type="is-text" tag="router-link" :to="{ name: RouteName.ABOUT }">
-              {{ $t("Learn more about Mobilizon") }}
+              {{ $t("Learn more about {instance}", { instance: config.name }) }}
             </b-button>
           </div>
         </div>
       </div>
     </section>
-    <div class="container section" v-if="config && (!currentUser.id || !currentActor.id)">
+    <div
+      id="featured_events"
+      class="container section"
+      v-if="config && (!currentUser.id || !currentActor.id)"
+    >
       <section class="events-featured">
         <h2 class="title">{{ $t("Featured events") }}</h2>
         <b-loading :active.sync="$apollo.loading" />
@@ -48,6 +52,48 @@
         <b-message v-else type="is-danger">{{ $t("No events found") }}</b-message>
       </section>
     </div>
+    <div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
+      <div class="picture-container">
+        <img src="/img/pics/2020-10-06-mobilizon-illustration-A_homepage.jpg" alt="" />
+      </div>
+      <div class="container section">
+        <div class="columns">
+          <div class="column">
+            <h3 class="title">{{ $t("A practical tool") }}</h3>
+            <p
+              v-html="
+                $t('Mobilizon is a tool that helps you <b>find, create and organise events</b>.')
+              "
+            />
+          </div>
+          <div class="column">
+            <h3 class="title">{{ $t("An ethical alternative") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
+                )
+              "
+            />
+          </div>
+          <div class="column">
+            <h3 class="title">{{ $t("A federated software") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
+                )
+              "
+            />
+          </div>
+        </div>
+        <div class="buttons">
+          <a class="button is-primary is-large" href="https://joinmobilizon.org">{{
+            $t("Learn more about Mobilizon")
+          }}</a>
+        </div>
+      </div>
+    </div>
     <div class="container section" v-if="config && loggedUser && loggedUser.settings">
       <section v-if="currentActor.id">
         <b-message type="is-info" v-if="welcomeBack">{{
@@ -343,6 +389,8 @@ export default class Home extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@import "~bulma/sass/utilities/mixins.sass";
+
 main > div > .container {
   background: $white;
   padding: 1rem 1.5rem 3rem;
@@ -388,7 +436,20 @@ span.view-all {
 }
 
 section.hero {
-  background: lighten($secondary, 20%);
+  position: relative;
+  z-index: 1;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+    z-index: -1;
+    background: url("/img/pics/homepage_background.png");
+  }
 
   & > .hero-body {
     padding: 1rem 1.5rem 3rem;
@@ -406,4 +467,71 @@ section.hero {
     margin-bottom: 1rem;
   }
 }
+
+#featured_events {
+  padding: 1rem 0;
+  min-height: calc(100vh - 400px);
+  z-index: 10;
+
+  .title {
+    margin: 20px auto 0;
+  }
+
+  .columns {
+    margin: 0rem auto 3rem;
+  }
+}
+
+#picture {
+  .picture-container {
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        0deg,
+        $white 0,
+        rgba(0, 0, 0, 0) 5%,
+        rgba(0, 0, 0, 0) 90%,
+        $white 100%
+      );
+      z-index: 1;
+    }
+
+    & > img {
+      object-fit: cover;
+      max-height: 80vh;
+      display: block;
+      margin: auto;
+      width: 100%;
+    }
+  }
+
+  .container.section {
+    background: $white;
+
+    @include tablet {
+      margin-top: -4rem;
+    }
+    z-index: 10;
+
+    .title {
+      margin: 0 0 10px;
+      font-size: 30px;
+    }
+
+    .buttons {
+      justify-content: center;
+      margin-top: 2rem;
+    }
+  }
+}
+
+#homepage {
+  background: $white;
+}
 </style>

lib/graphql/resolvers/config.ex

@@ -75,6 +75,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
       demo_mode: Config.instance_demo_mode?(),
       description: Config.instance_description(),
       long_description: Config.instance_long_description(),
+      slogan: Config.instance_slogan(),
       languages: Config.instance_languages(),
       anonymous: %{
         participation: %{

lib/graphql/schema/admin.ex

@@ -89,6 +89,7 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
     field(:instance_name, :string)
     field(:instance_description, :string)
     field(:instance_long_description, :string)
+    field(:instance_slogan, :string)
     field(:contact, :string)
     field(:instance_terms, :string)
     field(:instance_terms_type, :instance_terms_type)
@@ -181,6 +182,7 @@ defmodule Mobilizon.GraphQL.Schema.AdminType do
       arg(:instance_name, :string)
       arg(:instance_description, :string)
       arg(:instance_long_description, :string)
+      arg(:instance_slogan, :string)
       arg(:contact, :string)
       arg(:instance_terms, :string)
       arg(:instance_terms_type, :instance_terms_type)

lib/graphql/schema/config.ex

@@ -12,6 +12,7 @@ defmodule Mobilizon.GraphQL.Schema.ConfigType do
     field(:name, :string)
     field(:description, :string)
     field(:long_description, :string)
+    field(:slogan, :string)
     field(:contact, :string)
 
     field(:languages, list_of(:string))

lib/mobilizon/config.ex

@@ -36,6 +36,9 @@ defmodule Mobilizon.Config do
         "instance_long_description"
       )
 
+  @spec instance_slogan :: String.t()
+  def instance_slogan, do: Mobilizon.Admin.get_admin_setting_value("instance", "instance_slogan")
+
   @spec contact :: String.t()
   def contact do
     Mobilizon.Admin.get_admin_setting_value("instance", "contact")
@@ -320,6 +323,7 @@ defmodule Mobilizon.Config do
       instance_description: instance_description(),
       instance_long_description: instance_long_description(),
       instance_name: instance_name(),
+      instance_slogan: instance_slogan(),
       registrations_open: instance_registrations_open?(),
       contact: contact(),
       instance_terms: instance_terms(),