Skip to content

Commit b20678c

Browse files
xPawxPaw
committed
Render release notes on the site
1 parent 6f56649 commit b20678c

File tree

3 files changed

+195
-11
lines changed

3 files changed

+195
-11
lines changed

‎index.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<div class="download-reqs">Requirements: Windows 11, OpenGL 4.6</div>
7474
<div class="download-dev">Having issues? <a href="https://nightly.link/ValveResourceFormat/ValveResourceFormat/workflows/build/master/Source2Viewer.zip">Download dev build</a></div>
7575
<div class="download-notes">
76-
<a href="https://github.com/ValveResourceFormat/ValveResourceFormat/releases" class="download-version">View release notes</a>
76+
<a href="#release-notes" class="download-version">View release notes</a>
7777
</div>
7878
</div>
7979
</div>
@@ -337,6 +337,16 @@ <h3>Additional File Formats</h3>
337337
</div>
338338
</div>
339339

340+
<div class="container" id="release-notes">
341+
<h2 id="js-release-notes-title">Release Notes</h2>
342+
<div class="release-notes-content">
343+
<div id="js-release-notes">
344+
<p>Loading latest release notes…</p>
345+
</div>
346+
<div class="release-assets" id="js-release-assets"></div>
347+
</div>
348+
</div>
349+
340350
<div class="workshop">
341351
<div class="workshop-bg"></div>
342352
<div class="container">

‎static/main.js‎

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ fetch( 'https://api.github.com/repositories/42366054' )
1515
starsCount.textContent = formatter.format( response.stargazers_count );
1616
} );
1717

18-
fetch( 'https://api.github.com/repositories/42366054/releases/latest' )
18+
fetch( 'https://api.github.com/repositories/42366054/releases/latest', {
19+
headers: {
20+
Accept: 'application/vnd.github.html+json',
21+
},
22+
} )
1923
.then( function( response )
2024
{
2125
if( !response.ok )
@@ -27,14 +31,16 @@ fetch( 'https://api.github.com/repositories/42366054/releases/latest' )
2731
} )
2832
.then( function( response )
2933
{
34+
const releaseAssetsContainer = document.getElementById( 'js-release-assets' );
35+
releaseAssetsContainer.innerHTML = '';
36+
3037
for( const asset of response.assets )
3138
{
3239
if( asset.name === 'Source2Viewer.exe' )
3340
{
3441
document.getElementById( 'js-download' ).href = asset.browser_download_url;
3542

3643
const version = document.querySelector( '.download-version' );
37-
version.href = response.html_url;
3844

3945
let string = `View release notes for v${response.tag_name}`;
4046

@@ -45,10 +51,37 @@ fetch( 'https://api.github.com/repositories/42366054/releases/latest' )
4551
}
4652

4753
version.textContent = string;
54+
}
55+
56+
let name = asset.name;
4857

49-
break;
58+
if( name.endsWith( '.zip' ) )
59+
{
60+
name = name.substring( 0, name.length - 4 ).replace( /-/g, ' ' );
5061
}
62+
63+
const assetLink = document.createElement( 'a' );
64+
assetLink.href = asset.browser_download_url;
65+
assetLink.className = 'asset-link';
66+
assetLink.download = '';
67+
assetLink.textContent = name;
68+
releaseAssetsContainer.append( assetLink );
5169
}
70+
71+
const githubLink = document.createElement( 'a' );
72+
githubLink.href = response.html_url;
73+
githubLink.className = 'asset-link';
74+
githubLink.target = '_blank';
75+
githubLink.rel = 'noopener';
76+
githubLink.textContent = 'View release on GitHub';
77+
releaseAssetsContainer.append( githubLink );
78+
79+
const releaseNotesTitle = document.getElementById( 'js-release-notes-title' );
80+
releaseNotesTitle.textContent = `Release Notes for v${response.tag_name}`;
81+
82+
const releaseNotesContainer = document.getElementById( 'js-release-notes' );
83+
releaseNotesContainer.innerHTML = response.body_html;
84+
5285
} );
5386

5487
function LoadWorkshop()

‎static/style.css‎

Lines changed: 148 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
--color-accent: #63a1ff;
1212
scrollbar-width: thin;
1313
scrollbar-color: rgb(71 168 255 / 50%) #0c121c;
14+
scroll-behavior: smooth;
1415
}
1516

1617
*, *:before, *:after {
@@ -595,15 +596,14 @@ a.hljs-built_in {
595596
ul {
596597
padding-left: 1.2rem;
597598
margin: 0;
598-
}
599599

600-
li {
601-
padding: 0.3em 0;
602-
color: rgb(255 255 255 / 90%);
603-
line-height: 1.4;
600+
li {
601+
padding: 0.3em 0;
602+
line-height: 1.4;
604603

605-
&::marker {
606-
color: var(--color-accent);
604+
&::marker {
605+
color: var(--color-accent);
606+
}
607607
}
608608
}
609609

@@ -630,3 +630,144 @@ a.hljs-built_in {
630630
}
631631
}
632632
}
633+
634+
#release-notes {
635+
padding: 1.5rem 0;
636+
637+
> h2 {
638+
font-size: 2.5rem;
639+
font-weight: 700;
640+
color: #fff;
641+
text-align: center;
642+
margin: 0 0 1.5rem 0;
643+
}
644+
645+
.release-notes-content {
646+
background: rgb(255 255 255 / 3%);
647+
border: 1px solid rgb(71 168 255 / 10%);
648+
border-radius: 8px;
649+
padding: 1.5rem;
650+
overflow-x: auto;
651+
}
652+
653+
#js-release-notes {
654+
line-height: 1.6;
655+
656+
h1, h2, h3, h4, h5, h6 {
657+
color: #fff;
658+
margin: 1.5rem 0 0.5rem 0;
659+
660+
&:first-child {
661+
margin-top: 0;
662+
}
663+
}
664+
665+
p {
666+
margin: 0.8rem 0;
667+
}
668+
669+
ul, ol {
670+
padding-left: 1.2rem;
671+
margin: 0;
672+
673+
li {
674+
padding: 0.3em 0;
675+
line-height: 1.4;
676+
677+
&::marker {
678+
color: var(--color-accent);
679+
}
680+
}
681+
}
682+
683+
code {
684+
background: rgb(255 255 255 / 10%);
685+
border-radius: 3px;
686+
padding: 0.2em 0.4em;
687+
font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
688+
}
689+
690+
pre {
691+
background: rgb(255 255 255 / 5%);
692+
border-radius: 6px;
693+
padding: 1rem;
694+
overflow-x: auto;
695+
}
696+
697+
a {
698+
color: var(--color-accent);
699+
}
700+
701+
details {
702+
margin: 1rem 0;
703+
border: 1px solid rgb(71 168 255 / 20%);
704+
border-radius: 6px;
705+
background: rgb(255 255 255 / 3%);
706+
707+
summary {
708+
padding: 0.1rem 1rem;
709+
cursor: pointer;
710+
display: flex;
711+
align-items: center;
712+
gap: 0.5rem;
713+
color: rgb(255 255 255 / 90%);
714+
transition: background 0.2s ease;
715+
716+
&:hover {
717+
background: rgb(255 255 255 / 5%);
718+
}
719+
}
720+
}
721+
722+
video {
723+
display: flex;
724+
width: 100%;
725+
max-height: 1000px !important;
726+
height: auto;
727+
border-radius: 0 0 6px 6px;
728+
border-top: 1px solid rgb(71 168 255 / 20%);
729+
}
730+
731+
svg {
732+
fill: currentColor;
733+
}
734+
}
735+
736+
.release-assets {
737+
margin-top: 2rem;
738+
display: grid;
739+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
740+
gap: 0.75rem;
741+
742+
.asset-link {
743+
display: block;
744+
padding: 0.75rem 1rem;
745+
background: rgb(255 255 255 / 5%);
746+
border: 1px solid rgb(71 168 255 / 15%);
747+
border-radius: 6px;
748+
text-decoration: none;
749+
color: #fff;
750+
font-weight: 500;
751+
white-space: nowrap;
752+
overflow: hidden;
753+
text-overflow: ellipsis;
754+
transition: all 0.2s ease;
755+
756+
&:hover {
757+
background: rgb(255 255 255 / 8%);
758+
border-color: var(--color-accent);
759+
color: var(--color-accent);
760+
}
761+
}
762+
}
763+
764+
@media (max-width: 768px) {
765+
> h2 {
766+
font-size: 2rem;
767+
}
768+
769+
.release-notes-content {
770+
padding: 1rem;
771+
}
772+
}
773+
}

0 commit comments

Comments
 (0)