From 7714815396b4e86afc5db1af3726fab4edf0ca35 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Sat, 3 Jul 2021 23:07:09 +0200 Subject: viewer: add markdown rendering component Extracted from b170f49 (GH PR #304) --- viewer/src/plugins/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 viewer/src/plugins/index.ts (limited to 'viewer/src/plugins') diff --git a/viewer/src/plugins/index.ts b/viewer/src/plugins/index.ts new file mode 100644 index 0000000..1555882 --- /dev/null +++ b/viewer/src/plugins/index.ts @@ -0,0 +1,8 @@ +export const MainLayout = () => + Promise.all([ + import(/* webpackChunkName: "ui" */ "@/plugins/buefy"), + import(/* webpackChunkName: "ui" */ "@/components"), + import(/* webpackChunkName: "ui" */ "@/plugins/lazyimage"), + import(/* webpackChunkName: "ui" */ "@/plugins/dragscroll"), + import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome"), + ]).then(() => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue")); -- cgit v1.2.3 From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001 From: Zéro~Informatique Date: Tue, 26 Jul 2022 08:44:34 +0200 Subject: viewer: migrate to vue 3, general refactoring and cleanup Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112 --- viewer/src/plugins/asyncLib.ts | 3 ++ viewer/src/plugins/buefy.ts | 48 ----------------------------- viewer/src/plugins/devServer.js | 53 +++++++++++++++++++++++++++++++++ viewer/src/plugins/dragscroll.ts | 23 -------------- viewer/src/plugins/fontawesome-icons.ts | 45 ---------------------------- viewer/src/plugins/fontawesome.ts | 31 ------------------- viewer/src/plugins/i18n.ts | 19 +++++------- viewer/src/plugins/index.ts | 8 ----- viewer/src/plugins/lazyimage.ts | 23 -------------- viewer/src/plugins/router.ts | 22 ++++++-------- 10 files changed, 73 insertions(+), 202 deletions(-) create mode 100644 viewer/src/plugins/asyncLib.ts delete mode 100644 viewer/src/plugins/buefy.ts create mode 100644 viewer/src/plugins/devServer.js delete mode 100644 viewer/src/plugins/dragscroll.ts delete mode 100644 viewer/src/plugins/fontawesome-icons.ts delete mode 100644 viewer/src/plugins/fontawesome.ts delete mode 100644 viewer/src/plugins/index.ts delete mode 100644 viewer/src/plugins/lazyimage.ts (limited to 'viewer/src/plugins') diff --git a/viewer/src/plugins/asyncLib.ts b/viewer/src/plugins/asyncLib.ts new file mode 100644 index 0000000..de4f7ee --- /dev/null +++ b/viewer/src/plugins/asyncLib.ts @@ -0,0 +1,3 @@ + +export const importFaIcon = async() => (await import(/* webpackChunkName: "icons" */ '@fortawesome/vue-fontawesome')).FontAwesomeIcon; +export const importHammer = async() => import(/* webpackChunkName: "hammer" */'hammerjs'); diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts deleted file mode 100644 index 4794ad9..0000000 --- a/viewer/src/plugins/buefy.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import Vue from "vue"; - -// @ts-ignore -import Taginput from "buefy/src/components/taginput"; -// @ts-ignore -import Loading from "buefy/src/components/loading"; -// @ts-ignore -import Button from "buefy/src/components/button"; -// @ts-ignore -import SnackBar from "buefy/src/components/snackbar"; -// @ts-ignore -import Tag from "buefy/src/components/tag"; -// @ts-ignore -import DropDown from "buefy/src/components/dropdown"; - -import "@/assets/scss/buefy.scss"; - -Vue.use(Taginput); -Vue.use(Loading); -Vue.use(Button); -Vue.use(SnackBar); -Vue.use(Tag); -Vue.use(DropDown); - -declare module "vue/types/vue" { - interface Vue { - $buefy: any; - } -} diff --git a/viewer/src/plugins/devServer.js b/viewer/src/plugins/devServer.js new file mode 100644 index 0000000..2cccbbb --- /dev/null +++ b/viewer/src/plugins/devServer.js @@ -0,0 +1,53 @@ +/* ldgallery - A static generator which turns a collection of tagged +-- pictures into a searchable web gallery. +-- +-- Copyright (C) 2019-2022 Guillaume FOUET +-- +-- This program is free software: you can redistribute it and/or modify +-- it under the terms of the GNU Affero General Public License as +-- published by the Free Software Foundation, either version 3 of the +-- License, or (at your option) any later version. +-- +-- This program is distributed in the hope that it will be useful, +-- but WITHOUT ANY WARRANTY; without even the implied warranty of +-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +-- GNU Affero General Public License for more details. +-- +-- You should have received a copy of the GNU Affero General Public License +-- along with this program. If not, see . +*/ + +/* +-- Create a file .env.development.local in the project to customize your DevServer +-- VUE_APP_DEVSERVER_CONFIG_PATH= will use the dev_proxyconfig +-- VUE_APP_DEVSERVER_CONFIG_PATH= will use the dev_fsconfig +*/ + +const devReady = Boolean(process.env.VUE_APP_DEVSERVER_CONFIG_PATH); +const devIsProxy = devReady && Boolean(process.env.VUE_APP_DEVSERVER_CONFIG_PATH?.match(/^https?:\/\//i)); +const devLocalpath = `^/${process.env.VUE_APP_DATA_URL}`; +const devProxyconfig = { + [devLocalpath]: { + target: process.env.VUE_APP_DEVSERVER_CONFIG_PATH, + pathRewrite: { [devLocalpath]: '' }, + }, +}; + +function devFsConfig(middlewares, devServer) { + devServer.app.get(`${devLocalpath}*`, (req, res) => { + const fs = require('fs'); + const url = req.url.slice(process.env.VUE_APP_DATA_URL?.length); + const paramIdx = url.indexOf('?'); + const filepath = paramIdx < 0 ? url : url.substring(0, paramIdx); + const fullpath = `${process.env.VUE_APP_DEVSERVER_CONFIG_PATH}${decodeURIComponent(filepath)}`; + const file = fs.readFileSync(fullpath); + res.end(file); + }); + return middlewares; +} + +module.exports = { + port: process.env.VUE_APP_DEVSERVER_PORT, + proxy: devReady && devIsProxy ? devProxyconfig : undefined, + setupMiddlewares: devReady && !devIsProxy ? devFsConfig : undefined, +}; diff --git a/viewer/src/plugins/dragscroll.ts b/viewer/src/plugins/dragscroll.ts deleted file mode 100644 index a10b0fd..0000000 --- a/viewer/src/plugins/dragscroll.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import Vue from "vue"; -import VueDragscroll from "vue-dragscroll"; - -Vue.use(VueDragscroll); diff --git a/viewer/src/plugins/fontawesome-icons.ts b/viewer/src/plugins/fontawesome-icons.ts deleted file mode 100644 index 4b50641..0000000 --- a/viewer/src/plugins/fontawesome-icons.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -export { - faFolder, - faFolderOpen, - faEraser, - faSearch, - faPlus, - faMinus, - faImage, - faHome, - faArrowLeft, - faLevelUpAlt, - faAngleRight, - faAngleDoubleLeft, - faFile, - faFileAlt, - faFilePdf, - faFileVideo, - faFileAudio, - faFileDownload, - faCaretUp, - faCaretDown, - faAngleDoubleDown, - faSortAmountDown, -} from "@fortawesome/free-solid-svg-icons"; - -export { faCircle, faDotCircle } from "@fortawesome/free-regular-svg-icons"; diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts deleted file mode 100644 index 25ddd99..0000000 --- a/viewer/src/plugins/fontawesome.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import Vue from "vue"; - -import { library, config } from "@fortawesome/fontawesome-svg-core"; -import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; -import * as faIcons from "./fontawesome-icons"; - -library.add(faIcons); - -config.autoAddCss = false; -import "@fortawesome/fontawesome-svg-core/styles.css"; - -Vue.component("fa-icon", FontAwesomeIcon); diff --git a/viewer/src/plugins/i18n.ts b/viewer/src/plugins/i18n.ts index bc3dde5..c377250 100644 --- a/viewer/src/plugins/i18n.ts +++ b/viewer/src/plugins/i18n.ts @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as @@ -17,14 +17,11 @@ -- along with this program. If not, see . */ -import Vue from "vue"; -import VueI18n, { LocaleMessages } from "vue-i18n"; +import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'; -Vue.use(VueI18n); - -function loadLocaleMessages(): LocaleMessages { - const locales = require.context("@/locales", true, /[A-Za-z0-9-_,\s]+\.json$/i); - const messages: LocaleMessages = {}; +function loadLocaleMessages(): LocaleMessages { + const locales = require.context('../locales', false, /[A-Za-z0-9-_,\s]+\.yml$/i); + const messages: LocaleMessages = {}; locales.keys().forEach(key => { const matched = key.match(/([A-Za-z0-9-_]+)\./i); if (matched && matched.length > 1) { @@ -35,8 +32,8 @@ function loadLocaleMessages(): LocaleMessages { return messages; } -export default new VueI18n({ - locale: process.env.VUE_APP_I18N_LOCALE || "en", - fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en", +export default createI18n({ + locale: process.env.VUE_APP_I18N_LOCALE || 'en', + fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', messages: loadLocaleMessages(), }); diff --git a/viewer/src/plugins/index.ts b/viewer/src/plugins/index.ts deleted file mode 100644 index 1555882..0000000 --- a/viewer/src/plugins/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const MainLayout = () => - Promise.all([ - import(/* webpackChunkName: "ui" */ "@/plugins/buefy"), - import(/* webpackChunkName: "ui" */ "@/components"), - import(/* webpackChunkName: "ui" */ "@/plugins/lazyimage"), - import(/* webpackChunkName: "ui" */ "@/plugins/dragscroll"), - import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome"), - ]).then(() => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue")); diff --git a/viewer/src/plugins/lazyimage.ts b/viewer/src/plugins/lazyimage.ts deleted file mode 100644 index 276c7e2..0000000 --- a/viewer/src/plugins/lazyimage.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* ldgallery - A static generator which turns a collection of tagged --- pictures into a searchable web gallery. --- --- Copyright (C) 2019-2020 Guillaume FOUET --- --- This program is free software: you can redistribute it and/or modify --- it under the terms of the GNU Affero General Public License as --- published by the Free Software Foundation, either version 3 of the --- License, or (at your option) any later version. --- --- This program is distributed in the hope that it will be useful, --- but WITHOUT ANY WARRANTY; without even the implied warranty of --- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the --- GNU Affero General Public License for more details. --- --- You should have received a copy of the GNU Affero General Public License --- along with this program. If not, see . -*/ - -import Vue from "vue"; -import { VLazyImagePlugin } from "v-lazy-image"; - -Vue.use(VLazyImagePlugin); diff --git a/viewer/src/plugins/router.ts b/viewer/src/plugins/router.ts index 03ca021..8568173 100644 --- a/viewer/src/plugins/router.ts +++ b/viewer/src/plugins/router.ts @@ -1,7 +1,7 @@ /* ldgallery - A static generator which turns a collection of tagged -- pictures into a searchable web gallery. -- --- Copyright (C) 2019-2020 Guillaume FOUET +-- Copyright (C) 2019-2022 Guillaume FOUET -- -- This program is free software: you can redistribute it and/or modify -- it under the terms of the GNU Affero General Public License as @@ -17,26 +17,22 @@ -- along with this program. If not, see . */ -import Vue from "vue"; -import VueRouter, { RouteConfig } from "vue-router"; -import GalleryNavigation from "@/views/GalleryNavigation.vue"; +import GalleryNavigation from '@/views/GalleryNavigation.vue'; +import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; -Vue.use(VueRouter); - -const routes: RouteConfig[] = [ +const routes: Array = [ { - path: "*", - name: "GalleryNavigation", + path: '/:catchAll(.*)', + name: 'GalleryNavigation', component: GalleryNavigation, props: route => ({ - path: route.params.pathMatch, + path: decodeURIComponent(route.path), query: Object.keys(route.query), }), }, ]; -const router = new VueRouter({ +export default createRouter({ + history: createWebHashHistory(), routes, }); - -export default router; -- cgit v1.2.3