From cb5e5ca86178eb27f342116eddb1a5fc157bbf2c Mon Sep 17 00:00:00 2001 From: pacien Date: Sat, 2 May 2020 05:11:39 +0200 Subject: doc: fix incorrect output path in quickstart guide --- ldgallery-quickstart.7.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ldgallery-quickstart.7.md b/ldgallery-quickstart.7.md index 2154d20..b95c886 100644 --- a/ldgallery-quickstart.7.md +++ b/ldgallery-quickstart.7.md @@ -65,14 +65,14 @@ If the compiler was installed manually through the extraction of a pre-built arc /ldgallery --with-viewer=/viewer --input-dir ``` -Running the command above produces a directory named "out" within the input gallery directory, which contains the compiled gallery and a web viewer, ready to be deployed on some web server. +Running the command above produces a directory named "out" in the current directory, which contains the compiled gallery and a web viewer ready to be deployed on some web server. ## Step 5: deploying the gallery The content of the "out" directory generated at the previous step can now simply be uploaded to some web host, for example with an FTP client like FileZilla or through rsync/SSH with the following command: ```sh -rsync -Prz /out/* user@webhost:publication_path/ +rsync -Prz out/* user@webhost:publication_path/ ``` The target web host doesn't need to run any additional software besides a web server correctly configured to serve flat static files. -- cgit v1.2.3 From 07d78c126e9fb8d1129d728df9347b2c94f2c707 Mon Sep 17 00:00:00 2001 From: pacien Date: Sat, 2 May 2020 05:39:10 +0200 Subject: doc: simplify sentence --- ldgallery-quickstart.7.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ldgallery-quickstart.7.md b/ldgallery-quickstart.7.md index b95c886..c54e8f0 100644 --- a/ldgallery-quickstart.7.md +++ b/ldgallery-quickstart.7.md @@ -14,7 +14,7 @@ This document is a step-by-step guide showing how to create, compile and deploy ## Step 1: setting up the compiler -The _ldgallery_ compiler's job is to transform a directory containing pictures and other types of items, alongside additional metadata to associate to those, into a gallery that can be viewed in a web browser. +The _ldgallery_ compiler's job is to transform a directory containing pictures and other types of items, alongside additional metadata, into a gallery that can be viewed in a web browser. This compiler program is typically installed and runs on the computer of the gallery's owner. -- cgit v1.2.3 From 09624c0089f0e29ffb1abc578525b6a07fd95e81 Mon Sep 17 00:00:00 2001 From: pacien Date: Sun, 3 May 2020 23:05:38 +0200 Subject: viewer/GallerySearch: use proper i18n pluralisation --- viewer/src/locales/en.json | 3 +-- viewer/src/views/GallerySearch.vue | 6 ++---- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index 9e0fd4b..e6c1df2 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json @@ -1,8 +1,7 @@ { "tagInput.placeholder": "Filters", "tagInput.nomatch": "No match", - "search.no-results": "No results", - "search.no-results.otherfolders": "No results • {0} result{1} in other folders", + "search.no-result-fmt": "No result
({0} match in other folders) | No result
({0} matches in other folders)", "panelLeft.propositions": "Related filters", "tag-propositions.substraction": "Exclude items with this tag", "tag-propositions.addition": "Include all items with this tag", diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue index e75a37e..dfaa5d3 100644 --- a/viewer/src/views/GallerySearch.vue +++ b/viewer/src/views/GallerySearch.vue @@ -29,8 +29,7 @@ import IndexSearch from "@/services/indexsearch"; @Component export default class GalleryPicture extends Vue { @Prop(String) readonly path!: string; - - otherCount: Number = 0; + otherCount: number = 0; mounted() { this.$uiStore.toggleFullscreen(false); @@ -50,8 +49,7 @@ export default class GalleryPicture extends Vue { } noResult() { - const params = [this.otherCount, this.otherCount > 1 ? "s" : ""]; - return this.$t("search.no-results.otherfolders", params); + return this.$tc("search.no-result-fmt", this.otherCount, [this.otherCount]); } } -- cgit v1.2.3 From 665139f7d25a64f66e1149a6403fc26efcbabb2a Mon Sep 17 00:00:00 2001 From: pacien Date: Sun, 3 May 2020 23:07:51 +0200 Subject: viewer/GalleryNavigation: better error messages Introducing a generic error page with some icon and a different error for unknown resources GitHub: closes #190 --- viewer/src/components/LdError.vue | 64 ++++++++++++++++++++++++++++++++++ viewer/src/components/LdGallery.vue | 8 ++--- viewer/src/locales/en.json | 3 +- viewer/src/plugins/fontawesome.ts | 2 ++ viewer/src/views/GalleryNavigation.vue | 32 ++++++++++++----- 5 files changed, 95 insertions(+), 14 deletions(-) create mode 100644 viewer/src/components/LdError.vue diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue new file mode 100644 index 0000000..5e266ab --- /dev/null +++ b/viewer/src/components/LdError.vue @@ -0,0 +1,64 @@ + + + + + + + diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue index 29c18b9..e512758 100644 --- a/viewer/src/components/LdGallery.vue +++ b/viewer/src/components/LdGallery.vue @@ -18,11 +18,11 @@ --> @@ -47,11 +47,9 @@ export default class LdPicture extends Vue { flex-wrap: wrap; align-items: center; justify-content: space-evenly; + & > a { margin: 2px; } - & .noresult { - margin-top: 40px; - } } diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index e6c1df2..c011552 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json @@ -7,7 +7,8 @@ "tag-propositions.addition": "Include all items with this tag", "tag-propositions.intersection": "Search for this tag", "tag-propositions.item-count": "Item count", - "gallery.unknowntype": "Unknown item type", + "gallery.unknown-type": "Could not display item of unknown type", + "gallery.unknown-resource": "Resource not found", "command.search": "Open/close search panel", "command.search.clear": "Clear", "command.search.search": "Search", diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 480e8e0..933bce6 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts @@ -23,6 +23,7 @@ import { library, config } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { faFolder, + faFolderOpen, faEraser, faSearch, faPlus, @@ -38,6 +39,7 @@ import { library.add( faFolder, + faFolderOpen, faEraser, faSearch, faPlus, diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index 7c6d11b..08c8218 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -18,18 +18,14 @@ --> -- cgit v1.2.3 From f328a730b516f5e9104f85e553c083c2865660a8 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 4 May 2020 00:10:39 +0200 Subject: viewer/galleryStore: unify resource root parametrisation --- viewer/src/components/LdPicture.vue | 2 +- viewer/src/components/LdThumbnail.vue | 2 +- viewer/src/store/galleryStore.ts | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue index de46bcb..78829ec 100644 --- a/viewer/src/components/LdPicture.vue +++ b/viewer/src/components/LdPicture.vue @@ -76,7 +76,7 @@ export default class LdPicture extends Vue { } pictureSrc(resource: string) { - return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; + return this.$galleryStore.resourceRoot + resource; } generateSlowLoadingStyle() { diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue index e774f00..bfcc595 100644 --- a/viewer/src/components/LdThumbnail.vue +++ b/viewer/src/components/LdThumbnail.vue @@ -47,7 +47,7 @@ export default class LdThumbnail extends Vue { loading: boolean = false; pictureSrc(resource: string) { - return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; + return this.$galleryStore.resourceRoot + resource; } pictureStyle() { diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts index 0cffdd9..a57122c 100644 --- a/viewer/src/store/galleryStore.ts +++ b/viewer/src/store/galleryStore.ts @@ -79,6 +79,10 @@ export default class GalleryStore extends VuexModule { return this.galleryIndex?.properties.galleryTitle ?? "ldgallery"; } + get resourceRoot(): string { + return process.env.VUE_APP_DATA_URL + this.config!.galleryRoot; + } + // --- // Fetches the gallery's JSON config -- cgit v1.2.3 From 35456c6183c199b23ded85838414eb28a6d4b60f Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 4 May 2020 00:11:31 +0200 Subject: viewer/LdDownload: add generic file download handler GitHub: closes #209 --- viewer/src/@types/gallery.d.ts | 1 + viewer/src/components/LdDownload.vue | 67 ++++++++++++++++++++++++++++++++++ viewer/src/locales/en.json | 2 +- viewer/src/plugins/fontawesome.ts | 2 + viewer/src/views/GalleryNavigation.vue | 5 +-- 5 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 viewer/src/components/LdDownload.vue diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 066aedf..3246894 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -55,6 +55,7 @@ declare namespace Gallery { } interface OtherProperties { type: "other", + resource: string } interface PictureProperties { type: "picture", diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue new file mode 100644 index 0000000..3b13e99 --- /dev/null +++ b/viewer/src/components/LdDownload.vue @@ -0,0 +1,67 @@ + + + + + + + diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json index c011552..824064e 100644 --- a/viewer/src/locales/en.json +++ b/viewer/src/locales/en.json @@ -7,8 +7,8 @@ "tag-propositions.addition": "Include all items with this tag", "tag-propositions.intersection": "Search for this tag", "tag-propositions.item-count": "Item count", - "gallery.unknown-type": "Could not display item of unknown type", "gallery.unknown-resource": "Resource not found", + "download.download-file-fmt": "Download {0}", "command.search": "Open/close search panel", "command.search.clear": "Clear", "command.search.search": "Search", diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts index 933bce6..886d680 100644 --- a/viewer/src/plugins/fontawesome.ts +++ b/viewer/src/plugins/fontawesome.ts @@ -35,6 +35,7 @@ import { faAngleRight, faAngleDoubleLeft, faFile, + faFileDownload, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -51,6 +52,7 @@ library.add( faAngleRight, faAngleDoubleLeft, faFile, + faFileDownload, ); config.autoAddCss = false; diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index 08c8218..2e40409 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -65,10 +65,7 @@ export default class GalleryNavigation extends Vue { return { component: "ld-picture", properties: { picture: this.$galleryStore.currentItem } }; default: - return { - component: "ld-error", - properties: { icon: "file", message: this.$t("gallery.unknown-type") } - }; + return { component: "ld-download", properties: { item: this.$galleryStore.currentItem } }; } } } -- cgit v1.2.3 From c175db32132201cefec699b69f71fb23bdd2c687 Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:03:09 +0200 Subject: viewer/LdDownload: fix item type and remove getters For consistency. --- viewer/src/components/LdDownload.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue index 3b13e99..f86d455 100644 --- a/viewer/src/components/LdDownload.vue +++ b/viewer/src/components/LdDownload.vue @@ -20,10 +20,10 @@ @@ -32,19 +32,19 @@ import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class LdDownload extends Vue { - @Prop({ required: true }) readonly item!: Gallery.Item; + @Prop({ required: true }) readonly item!: Gallery.Other; - get itemResource(): string { - return (this.item.properties as Gallery.OtherProperties).resource; + itemResource(): string { + return this.item.properties.resource; } - get itemFileName(): string { - const timeStamped = this.itemResource.split("/").pop() ?? ""; + itemFileName(): string { + const timeStamped = this.itemResource().split("/").pop() ?? ""; return timeStamped.split("?")[0]; } - get itemDownloadUrl(): string { - return this.$galleryStore.resourceRoot + this.itemResource; + itemDownloadUrl(): string { + return this.$galleryStore.resourceRoot + this.itemResource(); } } -- cgit v1.2.3 From 3cf40298471995fddea8a66860353a2b1ceeeeee Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:04:29 +0200 Subject: viewer/LdError: fix prop constructor type --- viewer/src/components/LdError.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue index 5e266ab..4b958dc 100644 --- a/viewer/src/components/LdError.vue +++ b/viewer/src/components/LdError.vue @@ -31,8 +31,8 @@ import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class LdError extends Vue { - @Prop({ required: true }) readonly icon!: string; - @Prop({ required: true }) readonly message!: string; + @Prop({ required: true, type: String }) readonly icon!: string; + @Prop({ required: true, type: String }) readonly message!: string; } -- cgit v1.2.3 From e02b09f405c81fd3eb612b0bb1f78f5860b0a5e8 Mon Sep 17 00:00:00 2001 From: pacien Date: Fri, 8 May 2020 19:10:52 +0200 Subject: viewer/style/global: factorise flex centering container --- viewer/src/assets/scss/global.scss | 11 +++++++++++ viewer/src/components/LdDownload.vue | 9 +-------- viewer/src/components/LdError.vue | 9 +-------- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 9444548..5d2e6dc 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -51,6 +51,17 @@ button svg + span { align-items: center; } +/** + * Class for containers that centers its content vertically and horizontally, + * preferably sticking to the container start if the container is smaller than the content. + */ +.container-vh-centering { + min-height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + // === Links .link { diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue index f86d455..aea4123 100644 --- a/viewer/src/components/LdDownload.vue +++ b/viewer/src/components/LdDownload.vue @@ -19,7 +19,7 @@ --> -- cgit v1.2.3 From e9e46a3b3392ab435f7414729592b2b5af4071b6 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 18 May 2020 20:05:14 +0200 Subject: compiler: add pdf resource type --- compiler/src/Processors.hs | 6 ++++-- compiler/src/Resource.hs | 1 + viewer/src/@types/gallery.d.ts | 11 +++++++++-- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/compiler/src/Processors.hs b/compiler/src/Processors.hs index ca8a74c..2988f83 100644 --- a/compiler/src/Processors.hs +++ b/compiler/src/Processors.hs @@ -47,8 +47,8 @@ data ProcessingException = ProcessingException FilePath String deriving Show instance Exception ProcessingException --- TODO: handle video, music, markdown, pdf... -data Format = PictureFormat | PlainTextFormat | Unknown +-- TODO: handle video, music, markdown... +data Format = PictureFormat | PlainTextFormat | PortableDocumentFormat | Unknown formatFromPath :: Path -> Format formatFromPath = @@ -68,6 +68,7 @@ formatFromPath = ".gif" -> PictureFormat ".txt" -> PlainTextFormat ".md" -> PlainTextFormat -- TODO: handle markdown separately + ".pdf" -> PortableDocumentFormat _ -> Unknown @@ -173,6 +174,7 @@ itemFileProcessor maxResolution cached inputBase outputBase resClass inputRes = processorFor PictureFormat (Just maxRes) = (resizePictureUpTo maxRes, getPictureProps) processorFor PictureFormat Nothing = (copyFileProcessor, getPictureProps) processorFor PlainTextFormat _ = (copyFileProcessor, const $ return . PlainText) + processorFor PortableDocumentFormat _ = (copyFileProcessor, const $ return . PDF) -- TODO: handle video reencoding and others? processorFor Unknown _ = (copyFileProcessor, const $ return . Other) diff --git a/compiler/src/Resource.hs b/compiler/src/Resource.hs index 5c175f1..129a817 100644 --- a/compiler/src/Resource.hs +++ b/compiler/src/Resource.hs @@ -76,6 +76,7 @@ data GalleryItemProps = { resource :: Resource , resolution :: Resolution } | PlainText { resource :: Resource } + | PDF { resource :: Resource } | Other { resource :: Resource } deriving (Generic, Show) diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 04df1bb..7345ef9 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -40,6 +40,9 @@ declare namespace Gallery { interface PlainText extends Item { properties: PlainTextProperties, } + interface PDF extends Item { + properties: PDFProperties, + } interface Directory extends Item { properties: DirectoryProperties, } @@ -50,7 +53,7 @@ declare namespace Gallery { tags: RawTag[], path: string, thumbnail?: Thumbnail - properties: OtherProperties | PictureProperties | PlainTextProperties | DirectoryProperties, + properties: OtherProperties | PictureProperties | PlainTextProperties | PDFProperties | DirectoryProperties, } interface Resolution { width: number, @@ -69,6 +72,10 @@ declare namespace Gallery { type: "plaintext", resource: string, } + interface PDFProperties { + type: "pdf", + resource: string, + } interface DirectoryProperties { type: "directory", items: Item[] @@ -78,5 +85,5 @@ declare namespace Gallery { resolution: Resolution } type RawTag = string; - type ItemType = "other" | "picture" | "plaintext" | "directory"; + type ItemType = "other" | "picture" | "plaintext" | "pdf" | "directory"; } -- cgit v1.2.3 From 185b84fbed180e4d2da7d4cc2ee91a3481f47406 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 18 May 2020 20:05:32 +0200 Subject: viewer: add icon for pdf files --- viewer/src/plugins/fontawesome-icons.ts | 1 + viewer/src/services/navigation.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/viewer/src/plugins/fontawesome-icons.ts b/viewer/src/plugins/fontawesome-icons.ts index b5df176..ffe3709 100644 --- a/viewer/src/plugins/fontawesome-icons.ts +++ b/viewer/src/plugins/fontawesome-icons.ts @@ -32,5 +32,6 @@ export { faAngleDoubleLeft, faFile, faFileAlt, + faFilePdf, faFileDownload, } from "@fortawesome/free-solid-svg-icons"; diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts index 4d3b376..7d1ae50 100644 --- a/viewer/src/services/navigation.ts +++ b/viewer/src/services/navigation.ts @@ -72,6 +72,8 @@ export default class Navigation { return "image"; case "plaintext": return "file-alt"; + case "pdf": + return "file-pdf"; case "directory": return "folder"; case "other": -- cgit v1.2.3 From 226e0beb50061844470bd8a717a74307b975bd96 Mon Sep 17 00:00:00 2001 From: pacien Date: Mon, 18 May 2020 20:06:22 +0200 Subject: viewer: add pdf viewer Based on native browser rendering. GitHub: closes #211 --- viewer/src/components/LdPdfViewer.vue | 50 ++++++++++++++++++++++++++++++++++ viewer/src/views/GalleryNavigation.vue | 1 + 2 files changed, 51 insertions(+) create mode 100644 viewer/src/components/LdPdfViewer.vue diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/LdPdfViewer.vue new file mode 100644 index 0000000..78ff3d2 --- /dev/null +++ b/viewer/src/components/LdPdfViewer.vue @@ -0,0 +1,50 @@ + + + + + + + diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue index b5f06a2..e1c860b 100644 --- a/viewer/src/views/GalleryNavigation.vue +++ b/viewer/src/views/GalleryNavigation.vue @@ -25,6 +25,7 @@ + -- cgit v1.2.3 From 037db071d42d4a7fdb8ed5cf88bc2c37fba4ae93 Mon Sep 17 00:00:00 2001 From: pacien Date: Tue, 19 May 2020 21:04:50 +0200 Subject: viewer/css/global: factorise util classes --- viewer/src/assets/scss/global.scss | 8 ++++++++ viewer/src/components/LdPdfViewer.vue | 10 +++------- viewer/src/components/LdPlainTextViewer.vue | 11 ++--------- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss index 5d2e6dc..f95a54d 100644 --- a/viewer/src/assets/scss/global.scss +++ b/viewer/src/assets/scss/global.scss @@ -36,6 +36,9 @@ button svg + span { .nowrap { white-space: nowrap; } +.no-scroll { + overflow: hidden; +} .no-scroll-x { overflow-x: hidden; } @@ -51,6 +54,11 @@ button svg + span { align-items: center; } +.fill { + width: 100%; + height: 100%; +} + /** * Class for containers that centers its content vertically and horizontally, * preferably sticking to the container start if the container is smaller than the content. diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/LdPdfViewer.vue index 78ff3d2..20055cc 100644 --- a/viewer/src/components/LdPdfViewer.vue +++ b/viewer/src/components/LdPdfViewer.vue @@ -20,9 +20,9 @@