News.vue 5.64 KB
Newer Older
Chocobozzz's avatar
Chocobozzz committed
1
<template>
Chocobozzz's avatar
Chocobozzz committed
2
  <main id="news">
Chocobozzz's avatar
Chocobozzz committed
3
4
    <div class="blocks">
      <div class="title-block">
Chocobozzz's avatar
Chocobozzz committed
5
        <h1 v-translate>PeerTube news!</h1>
Chocobozzz's avatar
Chocobozzz committed
6

Chocobozzz's avatar
Chocobozzz committed
7
8
9
        <p>
          <span v-translate>Discover the latest PeerTube improvements</span>
        </p>
Chocobozzz's avatar
Chocobozzz committed
10

Rigel Kent's avatar
Rigel Kent committed
11
        <span class="icon-row">
Chocobozzz's avatar
Chocobozzz committed
12

Chocobozzz's avatar
Chocobozzz committed
13
          <a :title="getSyndicationTitle()" :href="getSyndicationLink()" target="_blank">
Chocobozzz's avatar
Chocobozzz committed
14
15
            <span class="sr-only">{{ getSyndicationLink() }}</span>

Chocobozzz's avatar
Chocobozzz committed
16
            <icon-RSS></icon-RSS>
Rigel Kent's avatar
Rigel Kent committed
17
          </a>
Chocobozzz's avatar
Chocobozzz committed
18

Chocobozzz's avatar
Chocobozzz committed
19
          <a :title="getMastodonTitle()" href="https://framapiaf.org/@peertube" target="_blank" class="icon-mastodon">
Chocobozzz's avatar
Chocobozzz committed
20
21
            <span class="sr-only">{{ getMastodonTitle() }}</span>

Chocobozzz's avatar
Chocobozzz committed
22
            <icon-mastodon></icon-mastodon>
Rigel Kent's avatar
Rigel Kent committed
23
          </a>
Chocobozzz's avatar
Chocobozzz committed
24

Rigel Kent's avatar
Rigel Kent committed
25
          <a :title="getTwitterTitle()" href="https://twitter.com/joinpeertube" target="_blank">
Chocobozzz's avatar
Chocobozzz committed
26
27
            <div class="sr-only">{{ getTwitterTitle() }}</div>

Chocobozzz's avatar
Chocobozzz committed
28
            <icon-twitter></icon-twitter>
Rigel Kent's avatar
Rigel Kent committed
29
30
          </a>
        </span>
Chocobozzz's avatar
Chocobozzz committed
31

JosephK's avatar
JosephK committed
32
33
34
35
36
        <div class="row pt-4 mb-4">
          <div class="rounded nl-form">
            <div class="px-5 py-4">
              <h2 class="h6 text-left">
                <icon-envelope class="mr-1 mt-n1" />
Chocobozzz's avatar
Cleanup    
Chocobozzz committed
37
                <b>{{ getNewsletterTitle() }}</b>
JosephK's avatar
JosephK committed
38
              </h2>
Chocobozzz's avatar
Cleanup    
Chocobozzz committed
39
40
41
42

              <form action="https://listmonk.framasoft.org/subscription/form" method="post">
                <label class="sr-only" for="nl-email">{{ getEmailTitle() }}</label>

JosephK's avatar
JosephK committed
43
44
45
46
47
48
49
50
51
52
                <input
                  id="nl-email"
                  v-model="email"
                  class="border-0 rounded my-2 px-2 py-1"
                  name="email"
                  :placeholder="getEmailTitle()"
                  required
                  size="40"
                  type="email"
                />
Chocobozzz's avatar
Cleanup    
Chocobozzz committed
53

JosephK's avatar
JosephK committed
54
55
56
57
58
59
60
61
62
63
                <div class="text-right">
                  <button
                    class="btn btn-sm btn-secondary"
                    name="subscribe"
                    type="submit"
                    value="subscribe"
                  >
                    <translate>Subscribe</translate>
                  </button>
                </div>
Chocobozzz's avatar
Cleanup    
Chocobozzz committed
64
65

                <input name="nonce" type="hidden" />
JosephK's avatar
JosephK committed
66
                <div style="display: none;">
Chocobozzz's avatar
Cleanup    
Chocobozzz committed
67
                  <input id="e97e4" checked name="l" type="checkbox" value="e97e4fa6-cf8d-4741-8fcd-4f60ab81ef30" />
JosephK's avatar
JosephK committed
68
69
70
71
72
73
                </div>
              </form>
            </div>
          </div>
        </div>

Rigel Kent's avatar
Rigel Kent committed
74
        <div class="separator"></div>
Chocobozzz's avatar
Chocobozzz committed
75
76
      </div>

77
      <NewsArticles :articles="articles"></NewsArticles>
Chocobozzz's avatar
Chocobozzz committed
78

79
      <div class="bottom">
Chocobozzz's avatar
Chocobozzz committed
80
81
82
        <router-link to="/news-archive" class="jpt-router-link">
          <translate>See older news</translate>
        </router-link>
Chocobozzz's avatar
Chocobozzz committed
83
      </div>
Chocobozzz's avatar
Chocobozzz committed
84
85
86
    </div>
  </main>
</template>
Chocobozzz's avatar
Chocobozzz committed
87

Chocobozzz's avatar
Chocobozzz committed
88
<style lang="scss">
Chocobozzz's avatar
Chocobozzz committed
89
  @import '../scss/_variables.scss';
Chocobozzz's avatar
Cleanup    
Chocobozzz committed
90

Chocobozzz's avatar
Chocobozzz committed
91
  #news {
JosephK's avatar
JosephK committed
92
93
    background-color: var(--light);

Chocobozzz's avatar
Chocobozzz committed
94
95
96
97
98
99
100
101
102
103
    .icon-mastodon {
      width: 22px;
      color: #424242 !important;

      svg {
        width: 100%;
        height: 100%;
      }
    }

Chocobozzz's avatar
Chocobozzz committed
104
105
    .blocks {
      margin: 60px auto;
Chocobozzz's avatar
Chocobozzz committed
106
    }
Chocobozzz's avatar
Chocobozzz committed
107

Chocobozzz's avatar
Chocobozzz committed
108
109
    .title-block {
      margin-bottom: 60px;
Chocobozzz's avatar
Chocobozzz committed
110
111
112
113
114
115
116
117
118
119

      a {
        border-bottom: none;
        font-weight: $font-semibold;
        color: #000;
      }

      p > span {
        display: block;
      }
Rigel Kent's avatar
Rigel Kent committed
120
121
122
123
124
125
126

      .icon-row {
        display: flex;
        justify-content: space-evenly;
        width: 50%;
        font-size: 130%;
      }
Chocobozzz's avatar
Chocobozzz committed
127
128
    }

129
130
131
    .bottom {
      display: flex;
      justify-content: center;
Chocobozzz's avatar
Chocobozzz committed
132
    }
JosephK's avatar
JosephK committed
133
134
135
136
137
138
139
140

    .news {
      background-color: #fff;
    }

    .nl-form {
      background: #f7ca8f;
    }
Chocobozzz's avatar
Chocobozzz committed
141
  }
Chocobozzz's avatar
Chocobozzz committed
142
143
144
</style>

<script>
Chocobozzz's avatar
Chocobozzz committed
145
146
147
148
  import IconEnvelope from '../components/icons/IconEnvelope'
  import IconMastodon from '../components/icons/IconMastodon'
  import IconTwitter from '../components/icons/IconTwitter'
  import IconRSS from '../components/icons/IconRSS'
149
  import NewsArticles from '../components/NewsArticles'
Rigel Kent's avatar
Rigel Kent committed
150

Chocobozzz's avatar
Chocobozzz committed
151
152
  const archiveMeta = require('../news/archives/meta.json')

Chocobozzz's avatar
Chocobozzz committed
153
  export default {
Chocobozzz's avatar
Chocobozzz committed
154
155
156
157
    components: {
      IconEnvelope,
      IconRSS,
      IconTwitter,
158
159
      IconMastodon,
      NewsArticles
Chocobozzz's avatar
Chocobozzz committed
160
    },
Chocobozzz's avatar
Chocobozzz committed
161

Chocobozzz's avatar
Chocobozzz committed
162
163
    data: function () {
      return {
JosephK's avatar
JosephK committed
164
165
        articles: [],
        email: ''
Chocobozzz's avatar
Chocobozzz committed
166
167
168
      }
    },

169
    mounted () {
Chocobozzz's avatar
Chocobozzz committed
170
171
172
173
174
175
176
      const archivedIds = archiveMeta.map(o => '#' + o.id)

      if (window.location.hash && archivedIds.includes(window.location.hash)) {
        this.$router.push({ path: '/news-archive', hash: window.location.hash })
        return
      }

177
178
179
      this.getNews()
    },

Chocobozzz's avatar
Chocobozzz committed
180
    methods: {
Chocobozzz's avatar
Chocobozzz committed
181
182
183
      getCurrentLocale () {
        return this.$language.current.toLowerCase().split('_')[0]
      },
Rigel Kent's avatar
Rigel Kent committed
184

Chocobozzz's avatar
Chocobozzz committed
185
      getNews () {
186
        // Keep static path in require.context so webpack knows which directory it can import
Chocobozzz's avatar
Chocobozzz committed
187
        const ctx = this.getCurrentLocale() === 'fr'
188
189
          ? require.context('../news/fr', true, /\.md$/)
          : require.context('../news/en', true, /\.md$/)
Chocobozzz's avatar
Chocobozzz committed
190

191
        this.articles = this.buildArticles(ctx)
Chocobozzz's avatar
Chocobozzz committed
192
193
      },

Rigel Kent's avatar
Rigel Kent committed
194
195
      getNewsletterTitle () {
        return this.$gettext('Subscribe to the newsletter')
Chocobozzz's avatar
Chocobozzz committed
196
197
      },

JosephK's avatar
JosephK committed
198
199
200
201
      getEmailTitle () {
        return this.$gettext('Your email')
      },

Chocobozzz's avatar
Chocobozzz committed
202
203
204
205
      getSyndicationLink () {
        return '/rss-' + this.getCurrentLocale() + '.xml'
      },

Rigel Kent's avatar
Rigel Kent committed
206
207
208
209
210
211
212
      getSyndicationTitle () {
        return this.$gettext('Subscribe to RSS feed')
      },

      getMastodonTitle () {
        return this.$gettext('Subscribe to our Mastodon account')
      },
Chocobozzz's avatar
Chocobozzz committed
213

Rigel Kent's avatar
Rigel Kent committed
214
215
      getTwitterTitle () {
        return this.$gettext('Subscribe to our Twitter account')
Chocobozzz's avatar
Chocobozzz committed
216
217
      },

Rigel Kent's avatar
Rigel Kent committed
218
219
      getMastodonTootTitle () {
        return this.$gettext('Open the Toot')
Chocobozzz's avatar
Chocobozzz committed
220
221
      },

Rigel Kent's avatar
Rigel Kent committed
222
223
      getTwitterTweetTitle () {
        return this.$gettext('Open the Tweet')
Chocobozzz's avatar
Chocobozzz committed
224
225
226
      }
    },

Chocobozzz's avatar
Chocobozzz committed
227
228
    metaInfo: function () {
      return {
229
        title: this.$gettext('PeerTube news')
Chocobozzz's avatar
Chocobozzz committed
230
231
      }
    }
Chocobozzz's avatar
Chocobozzz committed
232
233
  }
</script>