Gemini
/
ergol-http
mirror of https://codeberg.org/rdelaage/ergol-http.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding zoom text button and table of content

This commit is contained in:
Adële 2021-04-21 14:51:11 +02:00
parent c6a0eeec25
commit 88c89f325e
2 changed files with 116 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.php
View File

@ -278,6 +278,10 @@ function gmi2html($capsule, $body, $lang, $urlgem, $favicon)
{
$title='';
$lines=array();
$tocs=array();
$lev1=0;
$lev2=0;
$lev3=0;
$pre=false;
$glines = explode("\n", $body);
foreach($glines as $line)
@ -311,13 +315,25 @@ function gmi2html($capsule, $body, $lang, $urlgem, $favicon)
switch($prefix)
{
case "#":
$lines[] = "<h1>".htmlentities(substr($line,1))."</h1>";
$lev1++;
$lev2=0;
$lev3=0;
$levid = $lev1;
$lines[] = '<h1 id="'.$levid.'">'.trim(htmlentities(substr($line,1))).'</h1>';
$tocs[] = '<li class="l1"><a href="#'.$levid.'">'.trim(htmlentities(substr($line,1))).'</a></li>';
break;
case "##":
$lines[] = "<h2>".htmlentities(substr($line,2))."</h2>";
$lev2++;
$lev3=0;
$levid = $lev1.'-'.$lev2;
$lines[] = '<h1 id="'.$levid.'">'.trim(htmlentities(substr($line,2))).'</h1>';
$tocs[] = '<li class="l2"><a href="#'.$levid.'">'.trim(htmlentities(substr($line,2))).'</a></li>';
break;
case "###":
$lines[] = "<h3>".htmlentities(substr($line,3))."</h3>";
$lev3++;
$levid = $lev1.'-'.$lev2.'-'.$lev3;
$lines[] = '<h1 id="'.$levid.'">'.trim(htmlentities(substr($line,3))).'</h1>';
$tocs[] = '<li class="l3"><a href="#'.$levid.'">'.trim(htmlentities(substr($line,3))).'</a></li>';
break;
case ">":
$lines[] = "<blockquote>".htmlentities(substr($line,2))."</blockquote>";
@ -350,10 +366,25 @@ function gmi2html($capsule, $body, $lang, $urlgem, $favicon)
'.@file_get_contents(__DIR__.'/style.css').'
</style>
</head>
<body>
<body>';
if(count($tocs)>1)
{
$html.= '<div class="toc" role="navigation">
<span class="icon">⚓</span>
<ul>
'.implode("\n",$tocs).'
</ul>
</div>';
}
$html.= '
<label class="control">🔍 </label>
<input type="radio" name="check-size" class="control check-small" />
<input type="radio" name="check-size" class="control check-normal" checked="checked" />
<input type="radio" name="check-size" class="control check-big" />
<div class="main" role="article">
'.implode("\n",$lines).'
</div>
<div class="topanchor"><a href="#top">🔝</a></div>
<div class="gemini" role="banner">
<span>'.$favicon.'</span>
<a href="'.$urlgem.'" title="Gemini address">'.htmlentities($urlgem).'</a>

92
style.css
View File

@ -1,40 +1,110 @@
body {
margin: 0;
padding: 0;
padding: 80px 0;
}
div.main {
margin: 4em auto;
padding: 1em;
max-width: 72em;
margin: 0px auto;
padding: 16px;
max-width: 1152px;
border: 1px solid #ccc;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, .1);;
}
pre {
background: #eee;
padding: 1em;
padding: 16px;
overflow-x: auto;
}
li {
margin-left: 1em;
margin-left: 16px;
}
p {
margin: 0.5em 0;
margin: 8px 0;
}
blockquote {
background: #ffc;
padding: 1em;
margin: 0.5em;
padding: 16px;
margin: 8px;
}
div.toc {
float: right;
margin: 16px;
padding: 0;
max-width: 256px;
border: 1px solid #ccc;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, .1);;
background: #fff;
}
@media screen and (max-width: 728px) {
div.toc {
float: none;
margin: 16px auto;
padding: 16px;
max-width: 728px;
}
}
div.toc .icon {
float: left;
margin: 4px 0;
}
div.toc ul {
margin: 8px;
}
div.toc .l1 {
margin-left: 0px;
list-style-type: square;
}
div.toc .l2 {
margin-left: 10px;
list-style-type: circle;
}
div.toc .l3 {
margin-left: 20px;
list-style-type: disc;
}
.control {
float: left;
margin: 4px;
}
.check-small {
width: 16px;
height: 16px;
}
.check-normal {
width: 20px;
height: 20px;
}
.check-big {
width: 24px;
height: 24px;
}
.check-big:checked ~ .main {
font-size: 150%;
}
.check-normal:checked ~ .main {
font-size: 100%;
}
.check-small:checked ~ .main {
font-size: 70%;
}
div.inline-img img {
max-width: 100%;
}
div.topanchor {
margin: 0px auto;
padding: 16px;
max-width: 1152px;
text-align: right;
}
div.topanchor a {
text-decoration: none;
}
div.gemini {
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0.5em 0;
padding: 8px 0;
font-family: monospace;
font-size: 120%;
background: #000;
@ -47,5 +117,5 @@ div.gemini a {
div.gemini span {
color: #fff;
font-size: 150%;
margin-left: 1em;
margin-left: 16px;
}