From 19d40a5ee98fb1f244612155acc559ff2f21bf6b Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Wed, 12 Feb 2020 00:09:34 +0100 Subject: viewer: implemented config.json Note: The DevServer needs to know when the file is from the App, or from the FileSystem. We use a tilde to make this separation. The tilde URL is declared in '.env.development' GitHub: Resolves #32 --- viewer/.env | 6 +++--- viewer/.env.development | 3 +++ viewer/src/@types/gallery.d.ts | 5 +++++ viewer/src/components/LdPicture.vue | 12 +++++++----- viewer/src/components/LdThumbnail.vue | 7 +++---- viewer/src/store/galleryStore.ts | 18 ++++++++++++++++-- viewer/src/views/MainLayout.vue | 3 ++- viewer/vue.config.js | 2 +- 8 files changed, 40 insertions(+), 16 deletions(-) create mode 100644 viewer/.env.development (limited to 'viewer') diff --git a/viewer/.env b/viewer/.env index 959477b..0914292 100644 --- a/viewer/.env +++ b/viewer/.env @@ -1,5 +1,5 @@ +# Override with .env.development.local and .env.production.local + VUE_APP_I18N_LOCALE=en VUE_APP_I18N_FALLBACK_LOCALE=en -VUE_APP_EXAMPLE_PROJECT=../example/out/ -VUE_APP_DATA_URL=gallery/ -VUE_APP_DEVSERVER_PORT=8085 +VUE_APP_DATA_URL=./ diff --git a/viewer/.env.development b/viewer/.env.development new file mode 100644 index 0000000..0d87cf4 --- /dev/null +++ b/viewer/.env.development @@ -0,0 +1,3 @@ +VUE_APP_DEVSERVER_PORT=8085 +VUE_APP_DEVSERVER_CONFIG_PATH=../example/ +VUE_APP_DATA_URL=~/ diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 1987416..865f621 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -18,6 +18,11 @@ */ declare namespace Gallery { + interface Config { + generationTimestamp: number, + galleryRoot: string, + } + interface Other extends Item { properties: OtherProperties, } diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue index 8a9a08e..a5faeb3 100644 --- a/viewer/src/components/LdPicture.vue +++ b/viewer/src/components/LdPicture.vue @@ -28,7 +28,7 @@ @dragscrollend="dragScrollClickFix.onDragScrollEnd()" > diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue index 17c7659..13468e1 100644 --- a/viewer/src/components/LdThumbnail.vue +++ b/viewer/src/components/LdThumbnail.vue @@ -21,7 +21,7 @@
config.json()) + .then(this.setConfig); + } + // Fetches the gallery's JSON metadata - @action async fetchGalleryItems(url: string) { - return fetch(url) + @action async fetchGalleryItems() { + const root = this.config?.galleryRoot ?? ''; + const timestamp = this.config?.generationTimestamp ?? 0; + return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json?${timestamp}`) .then(response => response.json()) .then(this.setGalleryItemsRoot) .then(this.indexTags); diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index 12388a9..63a1b83 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue @@ -60,7 +60,8 @@ export default class MainLayout extends Vue { fetchGalleryItems() { this.isLoading = true; this.$galleryStore - .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}index.json`) + .fetchConfig() + .then(this.$galleryStore.fetchGalleryItems) .finally(() => (this.isLoading = false)) .catch(this.displayError); } diff --git a/viewer/vue.config.js b/viewer/vue.config.js index 9d885bd..9b92dc2 100644 --- a/viewer/vue.config.js +++ b/viewer/vue.config.js @@ -43,7 +43,7 @@ module.exports = { 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_EXAMPLE_PROJECT}${decodeURIComponent(filepath)}`; + const fullpath = `${process.env.VUE_APP_DEVSERVER_CONFIG_PATH}${decodeURIComponent(filepath)}`; const file = fs.readFileSync(fullpath); res.end(file); }); -- cgit v1.2.3 From ee9d82d0b307dee1c9138babf954a3864a0c2f83 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Wed, 12 Feb 2020 00:33:45 +0100 Subject: example: cleaner examples --- viewer/public/config.json | 4 ---- viewer/public/config.json.example | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 viewer/public/config.json create mode 100644 viewer/public/config.json.example (limited to 'viewer') diff --git a/viewer/public/config.json b/viewer/public/config.json deleted file mode 100644 index 7023edb..0000000 --- a/viewer/public/config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "generationTimestamp": 0, - "galleryRoot": "gallery/" -} \ No newline at end of file diff --git a/viewer/public/config.json.example b/viewer/public/config.json.example new file mode 100644 index 0000000..7023edb --- /dev/null +++ b/viewer/public/config.json.example @@ -0,0 +1,4 @@ +{ + "generationTimestamp": 0, + "galleryRoot": "gallery/" +} \ No newline at end of file -- cgit v1.2.3 From 1763c8ce725098100618079553a9ec4f79386a5d Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Thu, 13 Feb 2020 17:44:34 +0100 Subject: viewer: no-cache for config.json and index.json --- viewer/public/config.json.example | 1 - viewer/src/@types/gallery.d.ts | 1 - viewer/src/store/galleryStore.ts | 4 ++-- 3 files changed, 2 insertions(+), 4 deletions(-) (limited to 'viewer') diff --git a/viewer/public/config.json.example b/viewer/public/config.json.example index 7023edb..90c5f74 100644 --- a/viewer/public/config.json.example +++ b/viewer/public/config.json.example @@ -1,4 +1,3 @@ { - "generationTimestamp": 0, "galleryRoot": "gallery/" } \ No newline at end of file diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index 865f621..44eecf6 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts @@ -19,7 +19,6 @@ declare namespace Gallery { interface Config { - generationTimestamp: number, galleryRoot: string, } diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts index bcd4bc9..6f5f0ad 100644 --- a/viewer/src/store/galleryStore.ts +++ b/viewer/src/store/galleryStore.ts @@ -66,7 +66,7 @@ export default class GalleryStore extends VuexModule { // Fetches the gallery's JSON config @action async fetchConfig() { - return fetch(`${process.env.VUE_APP_DATA_URL}config.json`) + return fetch(`${process.env.VUE_APP_DATA_URL}config.json`, { cache: "no-cache" }) .then(config => config.json()) .then(this.setConfig); } @@ -75,7 +75,7 @@ export default class GalleryStore extends VuexModule { @action async fetchGalleryItems() { const root = this.config?.galleryRoot ?? ''; const timestamp = this.config?.generationTimestamp ?? 0; - return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json?${timestamp}`) + return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json`, { cache: "no-cache" }) .then(response => response.json()) .then(this.setGalleryItemsRoot) .then(this.indexTags); -- cgit v1.2.3 From ef1778e051e007f08f9188a479d04fdf95a57d21 Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Thu, 13 Feb 2020 18:13:55 +0100 Subject: documentation --- viewer/readme.md | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'viewer') diff --git a/viewer/readme.md b/viewer/readme.md index 864dcc6..3757f3e 100644 --- a/viewer/readme.md +++ b/viewer/readme.md @@ -8,6 +8,10 @@ npm install ``` ### Compiles and hot-reloads for development + +The viewer DevServer will serve the compiled version of the example gallery by default. +To override, create a file .env.development.local + ``` npm run serve ``` -- cgit v1.2.3