mirror
/
activitypub-single-php-file
kopia lustrzana https://gitlab.com/edent/activitypub-single-php-file
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Rationalise HTML and CSS

merge-requests/5/head
Terence Eden 2024-03-02 23:33:59 +00:00
rodzic 2a7d476b1c
commit de1b5afbbb
1 zmienionych plików z 71 dodań i 52 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

57
index.php
Wyświetl plik

@ -497,31 +497,32 @@ echo <<< HTML
body { margin:0; padding: 0; font-family:sans-serif; } body { margin:0; padding: 0; font-family:sans-serif; }
@media screen and (max-width: 800px) { body { width: 100%; }} @media screen and (max-width: 800px) { body { width: 100%; }}
@media screen and (min-width: 799px) { body { width: 800px; margin: 0 auto; }} @media screen and (min-width: 799px) { body { width: 800px; margin: 0 auto; }}
address { font-style: normal; }
img { max-width: 50%; } img { max-width: 50%; }
.h-feed { margin:auto; width: 100%; } .h-feed { margin:auto; width: 100%; }
.h-feed > .header { text-align: center; margin: 0 auto; } .h-feed > header { text-align: center; margin: 0 auto; }
.h-feed .banner { text-align: center; margin:0 auto; max-width: 650px; } .h-feed .banner { text-align: center; margin:0 auto; max-width: 650px; }
.h-feed > h1, .h-feed > h2 { margin-top: 10px; margin-bottom: 0; } .h-feed > h1, .h-feed > h2 { margin-top: 10px; margin-bottom: 0; }
.h-feed > .header > h1:has(span.p-author), h2:has(a.p-nickname) { word-break: break-all; max-width: 90%; padding-left:20px; } .h-feed > header > h1:has(span.p-author), h2:has(a.p-nickname) { word-break: break-all; max-width: 90%; padding-left:20px; }
.h-feed .u-feature:first-child { margin-top: 10px; margin-bottom: -150px; max-width: 100%;} .h-feed .u-feature:first-child { margin-top: 10px; margin-bottom: -150px; max-width: 100%;}
.h-feed .u-photo { max-height: 8vw; max-width:100%; min-height: 120px; } .h-feed .u-photo { max-height: 8vw; max-width:100%; min-height: 120px; }
.h-feed .about { font-size: smaller; background-color: #F5F5F5; padding: 10px; border-top: dotted 1px #808080; border-bottom: dotted 1px #808080; } .h-feed .about { font-size: smaller; background-color: #F5F5F5; padding: 10px; border-top: dotted 1px #808080; border-bottom: dotted 1px #808080; }
.h-feed > ul { padding-left: 0; list-style-type: none; } .h-feed > ul { padding-left: 0; list-style-type: none; }
.h-feed > ul > li { padding: 10px; border-bottom: dotted 1px #808080; } .h-feed > ul > li { padding: 10px; border-bottom: dotted 1px #808080; }
.h-entry { padding-right: 10px; } .h-entry { padding-right: 10px; }
.h-entry time.dt-published { font-weight: bold; } .h-entry time { font-weight: bold; }
.h-entry .e-content a { word-break: break-all; } .h-entry .e-content a { word-wrap: break-all; }
</style> </style>
</head> </head>
<body> <body>
<div class="h-feed"> <main class="h-feed">
<div class="header"> <header>
<div class="banner"> <div class="banner">
<img src="banner.png" alt="banner" class="u-feature " /><br/> <img src="banner.png" alt="" class="u-feature" /><br/>
<img src="icon.png" alt="icon" class="u-photo" /> <img src="icon.png" alt="icon" class="u-photo" />
</div> </div>
<address> <address>
<h1><span class="p-name p-author">{$realName}</span></h1> <h1 class="p-name p-author">{$realName}</h1>
<h2><a class="p-nickname u-url" rel="author" href="https://{$server}/{$username}">@{$username}@{$server}</a></h2> <h2><a class="p-nickname u-url" rel="author" href="https://{$server}/{$username}">@{$username}@{$server}</a></h2>
</address> </address>
<p class="p-summary">{$summary}</p> <p class="p-summary">{$summary}</p>
@ -529,7 +530,7 @@ echo <<< HTML
<p><a href="https://gitlab.com/edent/activitypub-single-php-file/">This software is licenced under AGPL 3.0</a>.</p> <p><a href="https://gitlab.com/edent/activitypub-single-php-file/">This software is licenced under AGPL 3.0</a>.</p>
<p>This site is a basic <a href="https://www.w3.org/TR/activitypub/">ActivityPub</a> server designed to be <a href="https://shkspr.mobi/blog/2024/02/activitypub-server-in-a-single-file/">a lightweight educational tool</a>.</p> <p>This site is a basic <a href="https://www.w3.org/TR/activitypub/">ActivityPub</a> server designed to be <a href="https://shkspr.mobi/blog/2024/02/activitypub-server-in-a-single-file/">a lightweight educational tool</a>.</p>
</div> </div>
</div> </header>
<ul> <ul>
HTML; HTML;
// Get all posts, most recent first // Get all posts, most recent first
@ -555,12 +556,12 @@ echo <<< HTML
} }
// Display the post // Display the post
echo "<li><article class='h-entry'><a class='u-url' rel='bookmark' href='/{$post}'><time class='dt-published' datetime='{$postTime}'>$postTime</time></a><br><span class='e-content'>{$postHTML}{$postImg}</span></article></li>"; echo "<li><article class='h-entry'><a class='u-url' rel='bookmark' href='/{$post}'><time datetime='{$postTime}'>$postTime</time></a><br><span class='e-content'>{$postHTML}{$postImg}</span></article></li>";
} }
echo <<< HTML echo <<< HTML
</ul> </ul>
</div> </div>
</div> </main>
</body> </body>
</html> </html>
HTML; HTML;
@ -1223,14 +1224,29 @@ echo <<< HTML
<html lang="en-GB"> <html lang="en-GB">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reader</title> <title>Reader</title>
<style> <style>
body { text-align: center; font-family:sans-serif; font-size:1.1em; } body { margin:0; padding: 0; font-family:sans-serif; }
ul { text-align: left; } @media screen and (max-width: 800px) { body { width: 100%; }}
@media screen and (min-width: 799px) { body { width: 800px; margin: 0 auto; }}
img { max-width: 50%; } img { max-width: 50%; }
.h-feed { margin:auto; width: 100%; }
.h-feed > header { text-align: center; margin: 0 auto; }
.h-feed .banner { text-align: center; margin:0 auto; max-width: 650px; }
.h-feed > h1, .h-feed > h2 { margin-top: 10px; margin-bottom: 0; }
.h-feed > header > h1:has(span.p-author), h2:has(a.p-nickname) { word-break: break-all; max-width: 90%; padding-left:20px; }
.h-feed .u-feature:first-child { margin-top: 10px; margin-bottom: -150px; max-width: 100%;}
.h-feed > ul { padding-left: 0; list-style-type: none; }
.h-feed > ul > li { padding: 10px; border-bottom: dotted 1px #808080; }
.h-entry { padding-right: 10px; }
.h-entry time { font-weight: bold; }
.h-entry .e-content a { word-wrap: break-all; }
</style> </style>
</head> </head>
<body> <body>
<main class="h-feed">
<ul> <ul>
HTML; HTML;
@ -1245,13 +1261,15 @@ HTML;
$object = $inbox_message["object"]; $object = $inbox_message["object"];
if ( isset( $inbox_message["object"]["id"] ) ) { if ( isset( $inbox_message["object"]["id"] ) ) {
$id = $inbox_message["object"]["id"]; $id = $inbox_message["object"]["id"];
$timeHTML = "<time datetime=\"{$published}\" class=\"u-url\" rel=\"bookmark\"><a href=\"{$id}\">{$published}</a></time>";
} else { } else {
$id = ""; $id = "";
$timeHTML = "<time datetime=\"{$published}\" class=\"u-url\" rel=\"bookmark\">{$published}</time>";
} }
$actor = $inbox_message["actor"]; $actor = $inbox_message["actor"];
$actorName = end( explode("/", $actor ) ); $actorName = end( explode("/", $actor ) );
$actorHTML = "<a href=\"$actor\">@{$actorName}</a>"; $actorHTML = "<a href=\"$actor\">@{$actorName}</a>";
$timeHTML = "<time datetime=\"{$published}\"><a href=\"{$id}\">{$published}</a></time>";
// What type of message is this? // What type of message is this?
$type = $inbox_message["type"]; $type = $inbox_message["type"];
@ -1306,23 +1324,24 @@ HTML;
"Create" == $type ? $verb = "wrote" : $verb = "updated"; "Create" == $type ? $verb = "wrote" : $verb = "updated";
if ( $reply ) { if ( $reply ) {
// Highlight that this is a reply // Highlight that this is a reply
echo "<li><mark>{$timeHTML} {$actorHTML} {$verb}{$replyTo}:</mark> <blockquote>{$content}</blockquote></li>"; echo "<li><article class=\"h-entry\"><mark>{$timeHTML} {$actorHTML} {$verb}{$replyTo}:</mark> <blockquote class=\"e-content\">{$content}</blockquote></article></li>";
} else { } else {
echo "<li>{$timeHTML} {$actorHTML} {$verb}{$replyTo}: <blockquote>{$content}</blockquote></li>"; echo "<li><article class=\"h-entry\">{$timeHTML} {$actorHTML} {$verb}{$replyTo}: <blockquote class=\"e-content\">{$content}</blockquote></article></li>";
} }
} else if ( "Like" == $type ) { } else if ( "Like" == $type ) {
$objectHTML = "<a href=\"$object\">{$object}</a>"; $objectHTML = "<a href=\"$object\">{$object}</a>";
echo "<li>{$timeHTML} {$actorHTML} liked {$objectHTML}<br></li>"; echo "<li><article class=\"h-entry\">{$timeHTML} {$actorHTML} liked {$objectHTML}</article></li>";
} else if ( "Follow" == $type ) { } else if ( "Follow" == $type ) {
echo "<li>{$timeHTML} {$actorHTML} followed you<br></li>"; echo "<li><article class=\"h-entry\">{$timeHTML} {$actorHTML} followed you</article></li>";
} else if ( "Announce" == $type ) { } else if ( "Announce" == $type ) {
$objectHTML = "<a href=\"$object\">{$object}</a>"; $objectHTML = "<a href=\"$object\">{$object}</a>";
echo "<li>{$timeHTML} {$actorHTML} boosted {$objectHTML}<br></li>"; echo "<li><article class=\"h-entry\">{$timeHTML} {$actorHTML} boosted {$objectHTML}</article></li>";
} }
} }
echo <<< HTML echo <<< HTML
</ul> </ul>
</main>
</body> </body>
</html> </html>
HTML; HTML;