Skip to content

Commit

Permalink
Merge branch 'prettier-release-notes'
Browse files Browse the repository at this point in the history 
It has been a pet peeve of this maintainer for a long time that those
release notes were not quite easy to navigate. At least using
Javascript, they should now be clearer. For example, the known issues no
longer have such a prominent space in the front, as they are hidden by
default (and nobody read the notes about `winpty` or about
`MSYS_NO_PATHCONV` anyway).

Signed-off-by: Johannes Schindelin <[email protected]>
  • Loading branch information
@dscho
dscho committed Mar 5, 2020
2 parents 96c3030 + ebe00aa commit 3b89da0
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 24 deletions.
107 changes: 107 additions & 0 deletions ReleaseNotes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,10 @@ footer li {
text-decoration: underline;
}

.details h2 a {
color: #FFFFFF;
}

.details h2 {
background-color: #4A7CC2;
border-bottom: solid 0.104em #7198C1;
Expand Down Expand Up @@ -371,3 +375,106 @@ footer li {
clear: both;
}

@media screen and (max-width:850px) {
#git-for-windows-logo {
display: none;
}
}

#git-for-windows-logo {
position: absolute;
z-index: -5;
width: 128px;
height: 128px;
}

@media screen and (max-width:924px) {
#git-for-windows-logo {
filter: blur(5px);
}
}

#left-pane, #top-pane, #right-pane, #bottom-pane,
#diagonal-pipe, #vertical-pipe, #top-ball, #right-ball, #bottom-ball {
position: absolute;
box-sizing: content-box;
}

#left-pane, #top-pane, #right-pane, #bottom-pane {
content: "";
position: relative;
width: 40%;
height: 40%;
border-radius: 20% 0 0 0;
}

#diagonal-pipe, #vertical-pipe, #top-ball, #right-ball, #bottom-ball {
background-color: white;
z-index: +2;
}

#diagonal-pipe, #vertical-pipe {
width: 7%;
}

#top-ball, #right-ball, #bottom-ball {
width: 16.67%;
height: 16.67%;
border-radius: 50%;
}

#left-pane {
top: 30%;
left: 0;
background-color: #80b3ff;
transform: rotate(-45deg);
}

#top-pane {
top: -40%;
left: 30%;
background-color: #ff8080;
transform: rotate(+45deg);
}

#right-pane {
top: -50%;
left: 60%;
background-color: #8dd35f;
transform: rotate(+135deg);
}

#bottom-pane {
top: -60%;
left: 30%;
background-color: #ffe680;
transform: rotate(+225deg);
}

#diagonal-pipe {
height: 53.33%;
top: 1.5%;
left: 47.67%;
transform: rotate(-45deg);
}

#vertical-pipe {
height: 40%;
top: 26.67%;
left: 47.33%;
}

#top-ball {
top: 18.67%;
left: 42.33%;
}

#bottom-ball {
top: 65.33%;
left: 42.33%;
}

#right-ball {
top: 42%;
left: 65.33%;
}
117 changes: 93 additions & 24 deletions render-release-notes.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,31 +64,100 @@ render_release_notes () {
wiki=https://github.com/git-for-windows/git/wiki &&
faq=$wiki/FAQ &&
mailinglist=mailto:[email protected] &&
links="$(printf "%s\n%s\n%s\n%s\n%s\n%s\n%s\n%s\n%s\n" \
'<div class="links">' \
'<ul>' \
'<li><a href="'$homepage'">homepage</a></li>' \
'<li><a href="'$faq'">faq</a></li>' \
'<li><a href="'$contribute'">contribute</a></li>' \
'<li><a href="'$contribute'">bugs</a></li>' \
'<li><a href="'$mailinglist'">questions</a></li>' \
'</ul>' \
'</div>')" &&
printf '%s\n%s\n%s\n%s %s\n%s %s\n%s\n%s\n%s\n%s\n' \
'<!DOCTYPE html>' \
'<html>' \
'<head>' \
'<meta http-equiv="Content-Type" content="text/html;' \
'charset=UTF-8">' \
'<link rel="stylesheet"' \
'href="'$CSSDIR${CSSDIR:+/}'ReleaseNotes.css">' \
'</head>' \
'<body class="details">' \
"$links" \
'<div class="content">'
markdown "$SCRIPT_PATH"/ReleaseNotes.md ||
cat <<-EOF &&
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="stylesheet"
href="$CSSDIR${CSSDIR:+/}ReleaseNotes.css">
</head>
<body class="details">
<div class="links">
<ul>
<li><a href="$homepage">homepage</a></li>
<li><a href="$faq">faq</a></li>
<li><a href="$contribute">contribute</a></li>
<li><a href="$contribute">bugs</a></li>
<li><a href="$mailinglist">questions</a></li>
</ul>
<div id="git-for-windows-logo">
<div id="left-pane"></div>
<div id="top-pane"></div>
<div id="right-pane"></div>
<div id="bottom-pane"></div>
<div id="diagonal-pipe"></div>
<div id="vertical-pipe"></div>
<div id="top-ball"></div>
<div id="bottom-ball"></div>
<div id="right-ball"></div>
</div>
</div>
<div class="content">
EOF
body="$(markdown "$SCRIPT_PATH"/ReleaseNotes.md)" ||
die "Could not generate ReleaseNotes.html"
printf '</div>\n</body>\n</html>\n') >"$OUTPUTDIR${OUTPUTDIR:+/}ReleaseNotes.html"
echo "$body" | perl -pe '
s/^(<h1)(>Known issues)/\1 id="known-issues" class="collapsible"\2/;
s/^(<h2)(>Licenses.*)/\1 id="licenses" class="collapsible"\2<div>/;
$v = $1 if (/<h1>Git for Windows (\S+)/);
if (/^<h2>Changes since Git for Windows ([^ ]*)/) {
$previous_version = $1;
if (!$latest) {
s/>[^<]*/><a name="latest"$&<\/a>/;
$latest = 1;
}
# wrap the line before the date
s/ (\([^)]+\))</<br \/><small>$1<\/small></;
$nr = 0 if (!$nr);
$nr++;
s/^<h2/$& id="$v" nr="$nr" class="collapsible"/;
$v = $previous_version;
s/.*/<\/div>$&<div>/;
}'
cat <<-\EOF
</div>
</div>
<script>
(() => {
for (let el of document.getElementsByClassName('collapsible')) {
let arrow = document.createElement('div');
arrow.innerHTML = '⯆';
arrow.style.float = 'left';
arrow.style.position = 'relative';
arrow.style.left = '-1em';
arrow.style.top = '+1.5em';
const toggle = () => {
// this.classList.toggle('active');
let details = el.nextElementSibling;
if (details.style.display === 'none') {
details.style.display = 'block';
arrow.innerHTML = '⯆';
} else {
details.style.display = 'none';
arrow.innerHTML = '⯈';
}
};
if (el.getAttribute('nr') !== '1') {
toggle();
}
el.addEventListener('click', toggle);
arrow.addEventListener('click', toggle);
el.parentElement.insertBefore(arrow, el);
}
})();
</script>
</body>
</html>
EOF
) >"$OUTPUTDIR${OUTPUTDIR:+/}ReleaseNotes.html"
}

COPYCSS=
Expand Down

0 comments on commit 3b89da0

Please sign in to comment.