From d220734b4a5d1aaa4800223f261e590244335e08 Mon Sep 17 00:00:00 2001 From: Mateo Morris Date: Thu, 25 Jan 2024 20:35:09 -0500 Subject: [PATCH] download images in root-level sections --- src/lib/views/modal/Deploy.js | 89 +++++++++++++++++++++++++++++-- src/lib/views/modal/Deploy.svelte | 10 ++-- 2 files changed, 91 insertions(+), 8 deletions(-) diff --git a/src/lib/views/modal/Deploy.js b/src/lib/views/modal/Deploy.js index d4bbea9..064f3e0 100644 --- a/src/lib/views/modal/Deploy.js +++ b/src/lib/views/modal/Deploy.js @@ -1,4 +1,5 @@ import { get } from 'svelte/store' +import { createUniqueID } from '$lib/utilities' import pages from '$lib/stores/data/pages' import symbols from '$lib/stores/data/symbols' // import beautify from 'js-beautify' // remove for now to reduce bundle size, dynamically import later if wanted @@ -28,11 +29,13 @@ export async function push_site(repo_name, create_new = false) { return await deploy({ files, site_id: get(site).id, repo_name }, create_new) } -export async function build_site_bundle({ pages, symbols }) { +export async function build_site_bundle({ pages, symbols }, include_assets = false) { let site_bundle - let all_sections = [] - let all_pages = [] + const all_sections = [] + const all_pages = [] + const image_files = [] + try { const page_files = await Promise.all( pages.map((page) => { @@ -84,6 +87,17 @@ export async function build_site_bundle({ pages, symbols }) { order: ['index', { ascending: true }] }) + // Download images & replace urls in sections + if (include_assets && has_nested_property(sections, 'alt')) { + await Promise.all( + sections.map(async (section, i) => { + const response = await swap_in_local_asset_urls(section.content) + image_files.push(...response.image_files) // store image blobs for later download + sections[i]['content'] = response.content // replace image urls in content with relative urls + }) + ) + } + const { html } = await buildStaticPage({ page, page_sections: sections, @@ -128,8 +142,8 @@ export async function build_site_bundle({ pages, symbols }) { full_url = `${language}/${full_url}` } else { // only add en sections and pages to primo.json - all_sections = [...all_sections, ...sections] - all_pages = [...all_pages, page] + all_sections.push(...sections) + all_pages.push(page) } const page_tree = [ @@ -184,6 +198,7 @@ export async function build_site_bundle({ pages, symbols }) { }) return [ + ...image_files, ..._.flattenDeep(pages), { path: `primo.json`, @@ -214,3 +229,67 @@ export async function build_site_bundle({ pages, symbols }) { ] } } + +/** + * @param {import('$lib').Content} + */ +async function swap_in_local_asset_urls(content) { + const files_to_fetch = [] + + const updated_content = _.mapValues(content, (lang_value) => + _.mapValues(lang_value, (field_value) => { + if (typeof field_value === 'object' && field_value.hasOwnProperty('alt')) { + const urlObject = new URL(field_value.url) + const pathname = urlObject.pathname + const extension = pathname.slice(pathname.lastIndexOf('.')) + const filename = + field_value.alt.replace(/[\/:*?"<>|\s]/g, '_') + `---${createUniqueID()}` + extension + + files_to_fetch.push({ + url: field_value.url, + filename + }) + return { + ...field_value, + url: `./images/${filename}` + } + } else { + return field_value + } + }) + ) + + // Download images + const image_files = [] + await Promise.all( + files_to_fetch.map(async ({ url, filename }) => { + const response = await fetch(url) + const blob = await response.blob() + console.log({ blob }) + + image_files.push({ + path: `./images/${filename}`, + blob + }) + }) + ) + + return { + content: updated_content, + image_files + } +} + +function has_nested_property(obj, key) { + if (obj.hasOwnProperty(key)) { + return true + } + for (let i in obj) { + if (typeof obj[i] === 'object') { + if (has_nested_property(obj[i], key)) { + return true + } + } + } + return false +} diff --git a/src/lib/views/modal/Deploy.svelte b/src/lib/views/modal/Deploy.svelte index 45b3c1a..a135603 100644 --- a/src/lib/views/modal/Deploy.svelte +++ b/src/lib/views/modal/Deploy.svelte @@ -58,7 +58,7 @@ async function download_site() { loading = true - const files = await build_site_bundle({ pages: $pages, symbols: $symbols }) + const files = await build_site_bundle({ pages: $pages, symbols: $symbols }, true) if (!files) { loading = false return @@ -69,8 +69,12 @@ async function create_site_zip(files) { const zip = new JSZip() - files.forEach(({ path, content }) => { - zip.file(path, content) + files.forEach(({ path, content, blob }) => { + if (blob) { + zip.file(path, blob, { binary: true }) + } else { + zip.file(path, content) + } }) return await zip.generateAsync({ type: 'blob' }) }