|
| 1 | +<script lang="ts"> |
| 2 | + import changelog from '../pluginPackage/changelog.json' |
| 3 | +
|
| 4 | + function formatDateFull(date: string) { |
| 5 | + // @ts-expect-error |
| 6 | + return getDateDisplay(date).full |
| 7 | + } |
| 8 | + function formatDateShort(date: string) { |
| 9 | + // @ts-expect-error |
| 10 | + return getDateDisplay(date).short |
| 11 | + } |
| 12 | +
|
| 13 | + const ISSUES_URL = 'https://api.github.com/repos/animated-java/animated-java/issues/' |
| 14 | +
|
| 15 | + async function formatMarkdown(text: string) { |
| 16 | + const issues: Record<number, { title: string; url: string }> = {} |
| 17 | + text = text.replace(/\[(.*?)\]\((.*?)\)/g, (match, title, url) => { |
| 18 | + const issueMatch = url.match(/issues\/(\d+)/) |
| 19 | + if (issueMatch) { |
| 20 | + const issueNumber = parseInt(issueMatch[1]) |
| 21 | + issues[issueNumber] = { title, url } |
| 22 | + return `$$$ISSUE${issueNumber}$$$` |
| 23 | + } |
| 24 | + return `<a href="${url}" target="_blank">${title}</a>` |
| 25 | + }) |
| 26 | + for (const [issueNumber, { title, url }] of Object.entries(issues)) { |
| 27 | + await fetch(`${ISSUES_URL}${issueNumber}`) |
| 28 | + .then(response => response.json()) |
| 29 | + .then(data => { |
| 30 | + text = text.replace( |
| 31 | + `$$$ISSUE${issueNumber}$$$`, |
| 32 | + `<a href="${url}" target="_blank">#${issueNumber} - ${data.title}</a>`, |
| 33 | + ) |
| 34 | + }) |
| 35 | + } |
| 36 | + // inline code blocks |
| 37 | + text = text.replace(/`([^`]+?)`/g, '<code>$1</code>') |
| 38 | + return text |
| 39 | + } |
| 40 | +</script> |
| 41 | + |
| 42 | +<div class="content plugin_browser_tabbed_page" id="plugin_browser_changelog"> |
| 43 | + {#each Object.values(changelog) as versions} |
| 44 | + <h3> |
| 45 | + {versions.title} |
| 46 | + </h3> |
| 47 | + <!-- svelte-ignore a11y-label-has-associated-control --> |
| 48 | + <label class="plugin_changelog_author">{versions.author}</label> |
| 49 | + <!-- svelte-ignore a11y-label-has-associated-control --> |
| 50 | + <label class="plugin_changelog_date" title={formatDateFull(versions.date)}> |
| 51 | + <i class="material-icons icon">calendar_today</i> |
| 52 | + <!-- svelte-ignore missing-declaration --> |
| 53 | + {formatDateShort(versions.date)} |
| 54 | + </label> |
| 55 | + <ul> |
| 56 | + {#each versions.categories as category} |
| 57 | + <li> |
| 58 | + <h4>{category.title}</h4> |
| 59 | + <ul class="plugin_changelog_features"> |
| 60 | + {#each category.list as item} |
| 61 | + <li> |
| 62 | + {#await formatMarkdown(item) then data} |
| 63 | + {@html data} |
| 64 | + {/await} |
| 65 | + </li> |
| 66 | + {/each} |
| 67 | + </ul> |
| 68 | + </li> |
| 69 | + {/each} |
| 70 | + </ul> |
| 71 | + <hr /> |
| 72 | + {/each} |
| 73 | +</div> |
| 74 | + |
| 75 | +<style> |
| 76 | + .content { |
| 77 | + max-height: 75vh; |
| 78 | + overflow: auto; |
| 79 | + } |
| 80 | + :global(.plugin_browser_tabbed_page code) { |
| 81 | + background-color: var(--color-back); |
| 82 | + padding: 0.2em 0.4em; |
| 83 | + border-radius: 3px; |
| 84 | + font-size: 0.8em; |
| 85 | + } |
| 86 | +</style> |
0 commit comments