From fa06aaea30da0cdb8bbbdb9790e2d52dd035ffc3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 2 Sep 2020 10:17:50 +0200 Subject: [PATCH] Add ability to change language --- README.md | 10 ++- client/public/img/bottom-peertube-logo.svg | 12 ++++ client/public/img/interface-languages.svg | 7 ++ client/src/components/Footer.vue | 38 +++++++--- client/src/components/Header.vue | 17 ++++- .../components/InterfaceLanguageDropdown.vue | 71 +++++++++++++++++++ client/src/main.ts | 32 +++++++-- client/src/router.ts | 20 ------ client/src/scss/main.scss | 1 + client/src/shims.d.ts | 2 + client/src/views/Search.vue | 20 +++++- config/default.yaml | 4 ++ server/controllers/api/config.ts | 3 +- server/initializers/constants.ts | 1 + shared/server-config.model.ts | 2 + 15 files changed, 198 insertions(+), 42 deletions(-) create mode 100644 client/public/img/bottom-peertube-logo.svg create mode 100644 client/public/img/interface-languages.svg create mode 100644 client/src/components/InterfaceLanguageDropdown.vue delete mode 100644 client/src/router.ts diff --git a/README.md b/README.md index 8a3e96e..f427f5c 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,9 @@ $ git submodule update --init --recursive $ yarn install --pure-lockfile ``` -The database (Elastic Search) is automatically created by PeerTube on startup. +The database (Elastic Search) is automatically created by PeerTube at startup. -Run simultaneously (for example with 2 terminals): +Run simultaneously (for example with 3 terminals): ```terminal $ tsc -w @@ -19,7 +19,11 @@ $ tsc -w $ node dist/server ``` -Then open http://localhost:3234. +``` +$ cd client && npm run serve +``` + +Then open http://localhost:8080. ## Production diff --git a/client/public/img/bottom-peertube-logo.svg b/client/public/img/bottom-peertube-logo.svg new file mode 100644 index 0000000..d942a4f --- /dev/null +++ b/client/public/img/bottom-peertube-logo.svg @@ -0,0 +1,12 @@ + + + Peertube_V3_logo + + \ No newline at end of file diff --git a/client/public/img/interface-languages.svg b/client/public/img/interface-languages.svg new file mode 100644 index 0000000..53e0305 --- /dev/null +++ b/client/public/img/interface-languages.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/client/src/components/Footer.vue b/client/src/components/Footer.vue index 8bca3f5..3a9c9c6 100644 --- a/client/src/components/Footer.vue +++ b/client/src/components/Footer.vue @@ -2,7 +2,7 @@ @@ -43,14 +47,17 @@ flex-direction: column; justify-content: center; align-items: center; - } - .title { - font-size: 36px; + img { + width: 100%; + max-width: 500px; + margin-bottom: 20px; + } } .description { color: $grey; + text-align: center; } .columns { @@ -89,6 +96,17 @@ } } + .footer { + margin-top: 50px; + + a { + font-size: 20px; + font-weight: bold; + text-decoration: none; + text-align: center; + } + } + @media screen and (max-width: $container-width) { width: 100%; } @@ -103,6 +121,10 @@ .subtitle { font-size: 16px; } + + .footer a { + font-size: 16px; + } } } diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue index 4cce991..15aca93 100644 --- a/client/src/components/Header.vue +++ b/client/src/components/Header.vue @@ -1,11 +1,13 @@ @@ -21,7 +23,14 @@ margin-bottom: 30px; font-family: monospace; - img { + .interface-language-dropdown { + width: 20px; + position: absolute; + right: 10px; + top: 10px; + } + + .search-home { width: 300px; margin: 30px 0 0 0; } @@ -61,8 +70,12 @@ diff --git a/client/src/main.ts b/client/src/main.ts index 6d305f4..cff5caa 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -3,7 +3,11 @@ import Vue from 'vue' import GetTextPlugin from 'vue-gettext' import VueMatomo from 'vue-matomo' import App from './App.vue' -import router from './router' +import Router from 'vue-router' +import Search from './views/Search.vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) Vue.config.productionTip = process.env.NODE_ENV === 'production' @@ -63,6 +67,27 @@ p.catch(err => { Vue.config.language = currentLanguage + // Routes + let routes = [] + + for (const locale of [ '' ].concat(allLocales)) { + const base = locale + ? '/' + locale + '/' + : '/' + + routes = routes.concat([ + { + path: '/' + locale, + component: Search + } + ]) + } + + const router = new Router({ + mode: 'history', + routes + }) + // Stats Matomo if (!(navigator.doNotTrack === 'yes' || navigator.doNotTrack === '1' || @@ -112,10 +137,7 @@ p.catch(err => { new Vue({ router, - render: h => h(App), - components: { - - } + render: h => h(App) }).$mount('#app') }) diff --git a/client/src/router.ts b/client/src/router.ts deleted file mode 100644 index 927058b..0000000 --- a/client/src/router.ts +++ /dev/null @@ -1,20 +0,0 @@ -import Vue from 'vue' -import Router from 'vue-router' - -import Search from '@/views/Search.vue' - -Vue.use(Router) - -export default new Router({ - mode: 'history', - routes: [ - { - path: '/', - component: Search - }, - { - path: '/search', - component: Search - } - ] -}) diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss index 80e7638..2197fbb 100644 --- a/client/src/scss/main.scss +++ b/client/src/scss/main.scss @@ -22,6 +22,7 @@ body { background-color: #fff; margin: auto; padding: 50px 80px; + position: relative; @media screen and (max-width: $container-width) { width: 100%; diff --git a/client/src/shims.d.ts b/client/src/shims.d.ts index d9f24fa..8e6dc5a 100644 --- a/client/src/shims.d.ts +++ b/client/src/shims.d.ts @@ -2,3 +2,5 @@ declare module '*.vue' { import Vue from 'vue' export default Vue } + +declare var $language diff --git a/client/src/views/Search.vue b/client/src/views/Search.vue index 0a28b7c..4324129 100644 --- a/client/src/views/Search.vue +++ b/client/src/views/Search.vue @@ -3,8 +3,8 @@
-

- Search for your favorite videos and channels on %{instancesCount} PeerTube websites listed on %{indexName}! +

+ Search for your favorite videos and channels on %{instancesCount} PeerTube websites listed on %{indexName}!

@@ -155,7 +155,7 @@
- +
@@ -194,6 +194,14 @@ font-weight: normal; font-size: 16px; + a { + color: $orange-darken; + + &:hover { + color: $orange; + } + } + @media screen and (max-width: $small-screen) { font-size: 14px; } @@ -395,6 +403,7 @@ indexName: '', instancesCount: 0, + indexedInstancesUrl: '', results: [] as (EnhancedVideo | EnhancedVideoChannel)[], resultsCount: null as number, @@ -432,6 +441,7 @@ const config = await getConfig() this.instancesCount = config.indexedHostsCount + this.indexedInstancesUrl = config.indexedInstancesUrl this.indexName = config.searchInstanceName this.loadUrl() @@ -451,6 +461,10 @@ }, computed: { + applyFiltersLabel () { + return this.$gettext('Apply filters') + }, + inputPlaceholder () { return this.$gettext('Keyword, channel, video, etc.') }, diff --git a/config/default.yaml b/config/default.yaml index 760ca7d..dbdb226 100644 --- a/config/default.yaml +++ b/config/default.yaml @@ -25,6 +25,10 @@ instances-index: # Must answer the following format: https://framagit.org/framasoft/peertube/instances-peertube#peertube-auto-follow-global-search url: 'https://instances.joinpeertube.org/api/v1/instances/hosts' + # A public URL that will be displayed in the search page + # So your users can see what instances your search instance indexed + public_url: 'https://instances.joinpeertube.org' + # Useful to do tests whitelist: enabled: false diff --git a/server/controllers/api/config.ts b/server/controllers/api/config.ts index 6b08632..363c4fc 100644 --- a/server/controllers/api/config.ts +++ b/server/controllers/api/config.ts @@ -18,6 +18,7 @@ export { configRouter } async function getConfig (req: express.Request, res: express.Response) { return res.json({ searchInstanceName: CONFIG.SEARCH_INSTANCE.NAME, - indexedHostsCount: VideosIndexer.Instance.getIndexedHosts().length + indexedHostsCount: VideosIndexer.Instance.getIndexedHosts().length, + indexedInstancesUrl: CONFIG.INSTANCES_INDEX.PUBLIC_URL } as ServerConfig) } diff --git a/server/initializers/constants.ts b/server/initializers/constants.ts index b8f7270..5f81f86 100644 --- a/server/initializers/constants.ts +++ b/server/initializers/constants.ts @@ -28,6 +28,7 @@ const CONFIG = { }, INSTANCES_INDEX: { URL: config.get('instances-index.url'), + PUBLIC_URL: config.get('instances-index.public_url'), WHITELIST: { ENABLED: config.get('instances-index.whitelist.enabled'), HOSTS: config.get('instances-index.whitelist.hosts') diff --git a/shared/server-config.model.ts b/shared/server-config.model.ts index f6e57c9..61008c6 100644 --- a/shared/server-config.model.ts +++ b/shared/server-config.model.ts @@ -2,4 +2,6 @@ export interface ServerConfig { searchInstanceName: string indexedHostsCount: number + + indexedInstancesUrl: string }