From 4b47d5f1aaf94bca70554bc5e0e9dc8abb0ed9a8 Mon Sep 17 00:00:00 2001 From: travissouthard Date: Sun, 21 Jan 2024 19:31:25 -0500 Subject: [PATCH] Support older search param links --- app.js | 313 ++++++--------------------------------------------------- 1 file changed, 29 insertions(+), 284 deletions(-) diff --git a/app.js b/app.js index 0d24463..dfdde1b 100644 --- a/app.js +++ b/app.js @@ -1,287 +1,32 @@ -const createPostSlug = (title) => { - const justWords = title.replace(/[.,\/#!$%\^&\*;:{}=_`~()\?]/g, ""); - const wordsArr = justWords.toLowerCase().split(" "); - return wordsArr.join("-"); -}; - -const getDetailPageName = (title) => { - const pageNames = { - projects: "projects", - art: "art", - blog: "blog", - }; - for (let [key, arr] of Object.entries(data)) { - for (let post of arr) { - if (title === post.title || title === createPostSlug(post.title)) { - return pageNames[key]; +// This just redirects the old `?post=slug` style of link +// to keep them alive +const [folder, fileExtension] = window.location.pathname.split("."); +const urlParams = new URLSearchParams(window.location.search); +const postSlug = urlParams.get("post"); + +const redirectIfValid = async (url) => { + return await fetch(fixedPostPath) + .then((res) => { + if (res.status >= 400) { + console.error(res); + return; } - } - } - return; -}; - -const assembleBlogPost = (blog) => { - const pubDate = new Date(blog.lastUpdated); - const $blogImage = blog.imagePath - ? $(`${blog.altText} width=`) - : null; - const $blogPost = $("
").attr("class", "blog-post"); - const $title = $(`

${blog.title}

`); - const $dateLine = $( - `
Last updated: ${pubDate.toDateString()} | Permalink | RSS
` - ); - const blogHtml = $.parseHTML(blog.description); - - $blogPost.append($title); - $blogPost.append($dateLine); - $blogPost.append($blogImage); - $blogPost.append(blogHtml); - $blogPost.append( - `

- - Thank you for reading! - - Please consider supporting this blog. - - -

` - ); - - return $blogPost; -}; - -const assembleProjectCard = (project) => { - const postLink = - project.siteLink || - `./${getDetailPageName( - project.title - ).toLowerCase()}.html?post=${createPostSlug(project.title)}`; - const $card = $("
").attr("class", "project-card"); - const $projectImage = $("").attr({ - href: postLink, - target: project.siteLink ? "_blank" : "", - }); - $projectImage.append( - $("").attr({ - src: project.imagePath || "./assets/images/art/headshot-32.png", - alt: project.altText, + window.location.replace(url); }) - ); - - const $projectText = $("

"); - const descText = project.description || project.altText; - const $strippedDescText = $(`

${descText}

`).text(); - const previewLength = 240; - const $descPreview = - $strippedDescText.length > previewLength - ? `${$strippedDescText.slice( - 0, - previewLength - )}... Read more` - : $strippedDescText; - $projectText.append($descPreview); - - $card.append($(`

${project.title}

`)); - $card.append($projectImage); - $card.append($projectText); - - return $card; -}; - -const assembleResumeCard = (entry) => { - const $card = $("
").attr("class", "resume-card"); - const { title, start, end, company, coLink, description, location } = entry; - const formatDate = (dateNum) => { - if (dateNum === null) return "Present"; - return new Intl.DateTimeFormat("en-US", { - month: "long", - year: "numeric", - }).format(dateNum); - }; - const companyLink = (child) => { - return coLink - ? `${child}` - : child; - }; - - $card.append($(`

${title}

`)); - $card.append( - $( - `

${companyLink( - `${company}` - )} | ${location} | ${formatDate(start)}-${formatDate( - end - )}

` - ) - ); - description && $card.append($(`

${description}

`)); - return $card; -}; - -const sortArrayByDate = (arr) => { - const isResume = !arr[0].lastUpdated && arr[0].end; - const sortCallback = isResume - ? (a, b) => { - const endA = a.end === null ? Infinity : a.end; - const endB = b.end === null ? Infinity : b.end; - return endB - endA; - } - : (a, b) => b.lastUpdated - a.lastUpdated; - return arr.sort(sortCallback); -}; - -const fillOutListView = (key, value) => { - const $section = $(key).attr("class", "list-view"); - const sortedData = sortArrayByDate(value); - const isResume = !value[0].lastUpdated && value[0].start; - - for (let entry of sortedData) { - const $card = isResume - ? assembleResumeCard(entry) - : assembleProjectCard(entry); - - $section.append($card); - } -}; - -const fillOutDetailNavigation = (blogs, choice) => { - const makeLink = (num) => `?post=${createPostSlug(blogs[num].title)}`; - const parts = { - first: { link: makeLink(0), button: "<<" }, - prev: { link: choice > 0 ? makeLink(choice - 1) : "", button: "<" }, - next: { - link: choice < blogs.length - 1 ? makeLink(choice + 1) : "", - button: ">", - }, - last: { link: makeLink(blogs.length - 1), button: ">>" }, - }; - - const $blogNav = $("").attr("class", "blog-nav"); - const $spacers = $("
  • "); - - if (choice > 0) { - $blogNav.append( - $( - `
  • ${parts.first.button}
    • ` - ) - ); - $blogNav.append( - $(`
  • ${parts.prev.button}
    • `) - ); - } else { - $blogNav.append($spacers); - } - if (choice + 1 < blogs.length) { - $blogNav.append( - $(`
  • ${parts.next.button}
    • `) - ); - $blogNav.append( - $(`
  • ${parts.last.button}
    • `) - ); - } else { - $blogNav.append($spacers); + .catch((err) => console.error(err)); +}; + +if (postSlug) { + try { + const fixedPostUrl = [ + window.location.origin, + folder, + "/", + postSlug, + fileExtension, + ].join(""); + redirectIfValid(fixedPostUrl); + } catch (e) { + console.log(e); } - - return $blogNav; -}; - -const fillOutDetailView = (data, postSlug) => { - if (!getDetailPageName(postSlug)) { - const $body = $("body"); - $body.empty(); - $body.append( - $(` -
    -

    404: Not found

    -
    -
    -
    We can't find that post! Please double check your link and try again.
    -
    -
    -
    - `).attr("class", "blog-post") - ); - return; - } - - const sectionType = `#${getDetailPageName(postSlug)}`; - const postList = data[sectionType]; - const $detailSection = $(sectionType).attr("class", "detail-view"); - const orderedData = sortArrayByDate(postList).reverse(); - let choice; - postSlug === null - ? (choice = postList.length - 1) - : (choice = orderedData.findIndex( - (blog) => createPostSlug(blog.title) === postSlug - )); - $detailSection.empty(); - - const $chosenPost = assembleBlogPost(orderedData[choice]); - $detailSection.append(fillOutDetailNavigation(orderedData, choice)); - $detailSection.append($chosenPost); - $detailSection.append(fillOutDetailNavigation(orderedData, choice)); -}; - -const buildPage = (sectionData, slug) => { - !!slug - ? fillOutDetailView(sectionData, slug) - : Object.entries(sectionData).map(([key, value]) => - fillOutListView(key, value) - ); - - const $body = $("body"); - const $mainHtml = $body.html(); - const $header = ` -
    -

    Travis Southard

    -

    Philadelphian Software Engineer

    -
    - `; - const $nav = $(""); - const $footer = $(""); - - const buildNav = (linkArr) => { - const $list = $(""); - for (let { name, linkUrl } of linkArr) { - $list.append(` - -
  • ${name}
    • -     - `); - } - - return $list; - }; - - $nav.append(buildNav(LOCALNAV)); - $footer.append(buildNav(LOCALNAV)); - $footer.append(buildNav(EXTERIORLINKS)); - - $body.empty(); - $body.append($header); - $body.append($nav); - $body.append($mainHtml); - $body.append($footer); -}; - -// $(() => { -// const sortedData = sortArrayByDate([ -// ...data.projects, -// ...data.art, -// ...data.blog, -// ]); -// const sectionData = { -// "#projects": data.projects, -// "#art": data.art, -// "#blog": data.blog, -// "#most-recent": sortedData.slice(0, 6), -// "#resume": data.resume, -// }; - -// const urlParams = new URLSearchParams(window.location.search); -// const postSlug = urlParams.get("post"); - -// buildPage(sectionData, postSlug); -// }); +}