mirror of
https://codeberg.org/video-prize-ranch/rimgo.git
synced 2025-12-14 04:05:14 +00:00
Merge redesign into main (#111)
This commit is contained in:
video-prize-ranch
105
views/about.hbs
Normal file
105
views/about.hbs
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>About - rimgo</title>
|
||||
|
||||
{{> partials/head }}
|
||||
</head>
|
||||
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<main class="my-8">
|
||||
<p>An alternative frontend for Imgur. Originally based on <a href="https://codeberg.org/3np/rimgu" rel="noreferrer">rimgu</a>.</p>
|
||||
|
||||
<h2 class="font-bold text-2xl my-2">Features</h2>
|
||||
<ul class="list-disc ml-4">
|
||||
<li>Lightweight</li>
|
||||
<li>No JavaScript</li>
|
||||
<li>No ads or tracking</li>
|
||||
<li>No sign up or app install prompts</li>
|
||||
<li>Bandwidth efficient - automatically uses newer image formats (if enabled)</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="font-bold text-2xl my-2">Comparison</h2>
|
||||
<p>Comparing rimgo to Imgur.</p>
|
||||
|
||||
<h3 class="font-bold text-xl my-2">Speed</h3>
|
||||
<p>Tested using <a href="https://pagespeed.web.dev/" rel="nofollow noreferrer">Google PageSpeed Insights</a>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fi.bcow.xyz%2Fgallery%2FgYiQLWy" rel="nofollow noreferrer">rimgo</a></td>
|
||||
<td><a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fimgur.com%2Fgallery%2FgYiQLWy" rel="nofollow noreferrer">Imgur</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Performance</td>
|
||||
<td>91</td>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Request count</td>
|
||||
<td>29</td>
|
||||
<td>340</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource Size</td>
|
||||
<td>218 KiB</td>
|
||||
<td>2,542 KiB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Time to Interactive</td>
|
||||
<td>1.6s</td>
|
||||
<td>23.8s</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3 class="font-bold text-xl my-2">Privacy</h3>
|
||||
<p>Imgur collects information about your device and uses tracking cookies for advertising, this is mentioned in their <a href="https://imgur.com/privacy/" rel="nofollow noreferrer">privacy policy</a>. <a href="https://themarkup.org/blacklight" rel="nofollow noreferrer">Blacklight</a> found 31 trackers and 87 third-party cookies.</p>
|
||||
<p>See what cookies and trackers Imgur uses and where your data gets sent: <a href="https://themarkup.org/blacklight?url=imgur.com" rel="nofollow noreferrer">https://themarkup.org/blacklight?url=imgur.com</a></p>
|
||||
|
||||
<h2 class="font-bold text-2xl my-2">Usage</h2>
|
||||
<p>Just replace imgur.com or i.imgur.com with <code>{{domain}}</code> (add stack/ before the media ID for i.stack.imgur.com). You can setup automatic redirects using <a href="https://github.com/libredirect/libredirect" rel="nofollow noreferrer">LibRedirect</a> (recommended) or <a href="https://github.com/einaregilsson/Redirector" rel="nofollow noreferrer">Redirector</a>.</p>
|
||||
|
||||
{{#if force_webp}}
|
||||
<p>To download images as their original filetype, add <code>?no_webp=1</code> to the end of the image URL.</p>
|
||||
{{/if}}
|
||||
|
||||
<h2 class="font-bold text-2xl my-2">Automatically redirect links</h2>
|
||||
|
||||
<h3 class="font-bold text-xl my-2">LibRedirect</h3>
|
||||
<p>Use <a href="https://github.com/libredirect/libredirect" rel="nofollow noreferrer">LibRedirect</a> to automatically redirect Imgur links to rimgo!</p>
|
||||
|
||||
<h3 class="font-bold text-xl my-2">GreaseMonkey script</h3>
|
||||
<p>There is a script to redirect Imgur links to rimgo. <a rel="noreferrer" href="https://codeberg.org/zortazert/GreaseMonkey-Redirect/src/branch/main/imgur-to-rimgo.user.js">https://codeberg.org/zortazert/GreaseMonkey-Redirect/src/branch/main/imgur-to-rimgo.user.js</a></p>
|
||||
|
||||
<h3 class="font-bold text-xl my-2">Redirector</h3>
|
||||
<p>You can use the <a href="https://github.com/einaregilsson/Redirector" rel="nofollow noreferrer">Redirector</a> extension to redirect Imgur links to rimgo with the configuration below:</p>
|
||||
<ul class="list-disc ml-4">
|
||||
<li>Description: Imgur -> rimgo</li>
|
||||
<li>Example URL: https://imgur.com/a/H8M4rcp</li>
|
||||
<li>Include pattern: <code>^https?://i?.?imgur.com(/.*)?$</code></li>
|
||||
<li>Redirect to: <code>{{proto}}://{{domain}}$1</code></li>
|
||||
<li>Pattern type: Regular Expression</li>
|
||||
<li>Advanced Options > Apply to: Check Images</li>
|
||||
</ul>
|
||||
<br/>
|
||||
<p>For Stack Overflow Images:</p>
|
||||
<ul class="list-disc ml-4">
|
||||
<li>Description: Stack Overflow Imgur -> rimgo</li>
|
||||
<li>Example URL: https://i.stack.imgur.com/BTKqD.png?s=128&g=1</li>
|
||||
<li>Include pattern: <code>^https?://i\.stack\.imgur\.com(/.*)?$</code></li>
|
||||
<li>Redirect to: <code>{{proto}}://{{domain}}/stack$1</code></li>
|
||||
<li>Pattern type: Regular Expression</li>
|
||||
<li>Advanced Options > Apply to: Check Images</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="font-bold text-2xl my-2">Notice</h2>
|
||||
<p>All images and media are from Imgur. rimgo does not allow uploads or comments. Any issues with content should be reported to Imgur.</p>
|
||||
</main>
|
||||
|
||||
{{> partials/footer }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -2,21 +2,20 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{> 'partials/head' }}
|
||||
<title>Not Found - rimgo</title>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/error.css" />
|
||||
|
||||
<title>404 Not Found - rimgo</title>
|
||||
{{> partials/head }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> 'partials/header' }}
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<main>
|
||||
<h2 class="errorTitle">404 Not Found</h2>
|
||||
<p class="errorTitle">Click <a href="/">here</a> to return to home.</p>
|
||||
<h2 class="text-2xl font-bold">Not Found</h2>
|
||||
<p>Click <a href="/">here</a> to return to home.</p>
|
||||
</main>
|
||||
|
||||
{{> partials/footer }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -2,21 +2,20 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{> 'partials/head' }}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/error.css" />
|
||||
|
||||
<title>Rate limited by Imgur - rimgo</title>
|
||||
|
||||
{{> partials/head }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> 'partials/header' }}
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<main>
|
||||
<h2 class="errorTitle">Rate limited by Imgur</h2>
|
||||
<p class="errorTitle">This instance has been temporarily blocked by Imgur. <a href="https://rimgo.codeberg.page/">Try using another instance</a>.</p>
|
||||
<h2 class="text-2xl font-bold">Rate limited by Imgur</h2>
|
||||
<p>This instance has been temporarily blocked by Imgur. <a href="https://rimgo.codeberg.page/#{{ path }}">Try using another instance ></a></p>
|
||||
</main>
|
||||
|
||||
{{> partials/footer }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -2,22 +2,21 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{> 'partials/head' }}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/error.css" />
|
||||
|
||||
<title>Error - rimgo</title>
|
||||
|
||||
{{> partials/head }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> 'partials/header' }}
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<main>
|
||||
<h2 class="errorTitle">An error occurred</h2>
|
||||
<main class="flex flex-col">
|
||||
<h2 class="text-2xl font-bold">An error occurred</h2>
|
||||
<p>You may have found a bug in rimgo. If this is a bug, open an issue on <a href="https://codeberg.org/video-prize-ranch/rimgo/issues/new">Codeberg</a>.</p>
|
||||
<code>{{err}}</code>
|
||||
<code class="mt-4 p-2 bg-slate-600 rounded-md">{{err}}</code>
|
||||
</main>
|
||||
|
||||
{{> partials/footer }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -5,104 +5,49 @@
|
||||
<title>rimgo</title>
|
||||
|
||||
{{> partials/head }}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/frontpage.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> partials/header }}
|
||||
|
||||
<main>
|
||||
<p>An alternative frontend for Imgur. Originally based on <a href="https://codeberg.org/3np/rimgu" rel="noreferrer">rimgu</a>.</p>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Lightweight</li>
|
||||
<li>No JavaScript</li>
|
||||
<li>No ads or tracking</li>
|
||||
<li>No sign up or app install prompts</li>
|
||||
<li>Bandwidth efficient - automatically uses newer image formats (if enabled)</li>
|
||||
</ul>
|
||||
|
||||
<h2>Comparison</h2>
|
||||
<p>Comparing rimgo to Imgur.</p>
|
||||
|
||||
<h3>Speed</h3>
|
||||
<p>Tested using <a href="https://pagespeed.web.dev/" rel="nofollow noreferrer">Google PageSpeed Insights</a>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fi.bcow.xyz%2Fgallery%2FgYiQLWy" rel="nofollow noreferrer">rimgo</a></td>
|
||||
<td><a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fimgur.com%2Fgallery%2FgYiQLWy" rel="nofollow noreferrer">Imgur</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Performance</td>
|
||||
<td>91</td>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Request count</td>
|
||||
<td>29</td>
|
||||
<td>340</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource Size</td>
|
||||
<td>218 KiB</td>
|
||||
<td>2,542 KiB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Time to Interactive</td>
|
||||
<td>1.6s</td>
|
||||
<td>23.8s</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Privacy</h3>
|
||||
<p>Imgur collects information about your device and uses tracking cookies for advertising, this is mentioned in their <a href="https://imgur.com/privacy/" rel="nofollow noreferrer">privacy policy</a>. <a href="https://themarkup.org/blacklight" rel="nofollow noreferrer">Blacklight</a> found 31 trackers and 87 third-party cookies.</p>
|
||||
<p>See what cookies and trackers Imgur uses and where your data gets sent: <a href="https://themarkup.org/blacklight?url=imgur.com" rel="nofollow noreferrer">https://themarkup.org/blacklight?url=imgur.com</a></p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>Just replace imgur.com or i.imgur.com with <code>{{domain}}</code> (add stack/ before the media ID for i.stack.imgur.com). You can setup automatic redirects using <a href="https://github.com/libredirect/libredirect" rel="nofollow noreferrer">LibRedirect</a> (recommended) or <a href="https://github.com/einaregilsson/Redirector" rel="nofollow noreferrer">Redirector</a>.</p>
|
||||
|
||||
{{#if force_webp}}
|
||||
<p>To download images as their original filetype, add <code>?no_webp=1</code> to the end of the image URL.</p>
|
||||
{{/if}}
|
||||
|
||||
<h2>Automatically redirect links</h2>
|
||||
|
||||
<h3>LibRedirect</h3>
|
||||
<p>Use <a href="https://github.com/libredirect/libredirect" rel="nofollow noreferrer">LibRedirect</a> to automatically redirect Imgur links to rimgo!</p>
|
||||
|
||||
<h3>GreaseMonkey script</h3>
|
||||
<p>There is a script to redirect Imgur links to rimgo. <a rel="noreferrer" href="https://codeberg.org/zortazert/GreaseMonkey-Redirect/src/branch/main/imgur-to-rimgo.user.js">https://codeberg.org/zortazert/GreaseMonkey-Redirect/src/branch/main/imgur-to-rimgo.user.js</a></p>
|
||||
|
||||
<h3>Redirector</h3>
|
||||
<p>You can use the <a href="https://github.com/einaregilsson/Redirector" rel="nofollow noreferrer">Redirector</a> extension to redirect Imgur links to rimgo with the configuration below:</p>
|
||||
<ul>
|
||||
<li>Description: Imgur -> rimgo</li>
|
||||
<li>Example URL: https://imgur.com/a/H8M4rcp</li>
|
||||
<li>Include pattern: <code>^https?://i?.?imgur.com(/.*)?$</code></li>
|
||||
<li>Redirect to: <code>{{proto}}://{{domain}}$1</code></li>
|
||||
<li>Pattern type: Regular Expression</li>
|
||||
<li>Advanced Options > Apply to: Check Images</li>
|
||||
</ul>
|
||||
|
||||
<p>For Stack Overflow Images:</p>
|
||||
<ul>
|
||||
<li>Description: Stack Overflow Imgur -> rimgo</li>
|
||||
<li>Example URL: https://i.stack.imgur.com/BTKqD.png?s=128&g=1</li>
|
||||
<li>Include pattern: <code>^https?://i\.stack\.imgur\.com(/.*)?$</code></li>
|
||||
<li>Redirect to: <code>{{proto}}://{{domain}}/stack$1</code></li>
|
||||
<li>Pattern type: Regular Expression</li>
|
||||
<li>Advanced Options > Apply to: Check Images</li>
|
||||
</ul>
|
||||
|
||||
<h2>Notice</h2>
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<header class="my-8 p-8 rounded-xl flex flex-col gap-4 items-center justify-center bg-gradient-to-r from-blue-400 to-emerald-400">
|
||||
<h2 class="font-bold text-white text-2xl">The fast, private image viewer for Imgur.</h2>
|
||||
<!--<input class="p-2 rounded-lg bg-slate-200 text-black w-full lg:w-1/2" type="text" placeholder="Search or paste a link">-->
|
||||
</header>
|
||||
|
||||
<main class="my-8">
|
||||
<h2 class="font-bold text-2xl">What is rimgo?</h2>
|
||||
<p>
|
||||
rimgo is an alternative frontend for Imgur.
|
||||
Originally based on <a href="https://codeberg.org/3np/rimgu" rel="noreferrer">rimgu</a>.
|
||||
It's a way to access Imgur without the ads, tracking, and other garbage.
|
||||
rimgo is not affiliated with Imgur, all content is proxied from Imgur.
|
||||
</p>
|
||||
<br/>
|
||||
<h3 class="font-bold text-xl">Notice</h3>
|
||||
<p>All images and media are from Imgur. rimgo does not allow uploads or comments. Any issues with content should be reported to Imgur.</p>
|
||||
</main>
|
||||
|
||||
|
||||
<h2 class="font-bold text-2xl">This instance</h2>
|
||||
<section class="my-4 lg:m-4 flex flex-col lg:flex-row gap-4 items-center">
|
||||
{{> partials/privacy }}
|
||||
<div class="self-start">
|
||||
<h2 class="text-xl my-2 font-bold">Additional information</h2>
|
||||
<ul>
|
||||
<li>Version: {{version}}</li>
|
||||
<li>Country: {{config.Privacy.country}}</li>
|
||||
<li>Provider: {{config.Privacy.provider}}</li>
|
||||
{{#if config.Privacy.cloudflare}}
|
||||
<li>Using Cloudflare?: Yes</li>
|
||||
{{else}}
|
||||
<li>Using Cloudflare?: No</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<p><a href="/privacy">Learn more about instance privacy ></a></p>
|
||||
|
||||
{{> partials/footer }}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -1,30 +1,32 @@
|
||||
<div class="comment flex flex-col">
|
||||
<div class="comment__user">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2 items-center">
|
||||
{{#noteq this.User.Username "[deleted]"}}
|
||||
<img src="{{this.User.Avatar}}" class="pfp" width="24" height="24" loading="lazy">
|
||||
<img src="{{this.User.Avatar}}" class="rounded-full" width="24" height="24" loading="lazy">
|
||||
<a href="/user/{{this.User.Username}}">
|
||||
<p class="comment__user__username"><b>{{this.User.Username}}</b></p>
|
||||
<p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>{{this.User.Username}}</b></p>
|
||||
</a>
|
||||
{{/noteq}}
|
||||
{{#equal this.User.Username "[deleted]"}}
|
||||
<p class="comment__user__username"><b>[deleted]</b></p>
|
||||
<p class="whitespace-nowrap text-ellipsis overflow-hidden"><b>[deleted]</b></p>
|
||||
{{/equal}}
|
||||
</div>
|
||||
<div>
|
||||
<p>{{{this.Comment}}}</p>
|
||||
<div>
|
||||
<div class="flex gap-2">
|
||||
<span title="{{this.CreatedAt}}">{{this.RelTime}}</span>
|
||||
{{#if this.DeletedAt}}
|
||||
<span class="comment__updatedDate">(deleted {{this.DeletedAt}})</span>
|
||||
<span class="text-md">(deleted {{this.DeletedAt}})</span>
|
||||
{{/if}}
|
||||
|
|
||||
<img class="icon" src="/static/icons/chevron-up.svg" alt="Likes"> {{this.Upvotes}}
|
||||
<img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes"> {{this.Downvotes}}
|
||||
<img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px"> {{this.Upvotes}}
|
||||
<img class="invert icon" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px"> {{this.Downvotes}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="replies">
|
||||
{{#if this.Comments}}
|
||||
<div class="ml-4 p-2 border-solid border-l-2 border-slate-400">
|
||||
{{#each this.Comments}}
|
||||
{{> partials/comment }}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@@ -1,4 +1,14 @@
|
||||
<footer class="flex flex-center">
|
||||
<a href="/privacy">Privacy</a>
|
||||
<a href="https://codeberg.org/video-prize-ranch/rimgo" rel="noreferrer">Source Code</a>
|
||||
<footer class="mt-24 mb-12">
|
||||
<div class="mb-1 flex gap-4 font-bold">
|
||||
<a href="/">
|
||||
<div class="flex">
|
||||
<img src="/static/img/rimgo.svg" class="invert hue-rotate-180" width="32" height="32" />
|
||||
<h1 class="text-md font-extrabold">rimgo</h1>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://codeberg.org/rimgo/rimgo">Source Code</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/privacy">Privacy</a>
|
||||
</div>
|
||||
<p class="text-md text-slate-200">rimgo does not allow uploads or host any content. Issues with content should be reported to Imgur.</p>
|
||||
</footer>
|
||||
@@ -12,5 +12,4 @@
|
||||
<meta name="msapplication-config" content="/static/favicon/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="stylesheet" href="/static/css/normalize.css"/>
|
||||
<link rel="stylesheet" href="/static/css/base.css"/>
|
||||
<link rel="stylesheet" href="/static/app.css" />
|
||||
@@ -1,8 +0,0 @@
|
||||
<nav class="flex flex-center">
|
||||
<a href="/">
|
||||
<img src="/static/img/rimgo.svg" width="64" height="64" class="logo" alt="Logo">
|
||||
</a>
|
||||
<a href="/">
|
||||
<h2>rimgo</h2>
|
||||
</a>
|
||||
</nav>
|
||||
6
views/partials/nav.hbs
Normal file
6
views/partials/nav.hbs
Normal file
@@ -0,0 +1,6 @@
|
||||
<a href="/">
|
||||
<nav class="m-4 flex items-center justify-center">
|
||||
<img src="/static/img/rimgo.svg" class="invert hue-rotate-180" width="72" height="72" />
|
||||
<h1 class="font-extrabold text-3xl">rimgo</h1>
|
||||
</nav>
|
||||
</a>
|
||||
@@ -1,5 +1,5 @@
|
||||
<a href="{{Link}}">
|
||||
<div class="post">
|
||||
<div class="bg-slate-600 rounded-lg">
|
||||
{{#equal Cover.Type "video"}}
|
||||
<video controls loop poster="/{{Cover.Id}}.webp" preload="none" width="100%" height="100%">
|
||||
<source src="{{Cover.Url}}" type="video/mp4" />
|
||||
@@ -8,18 +8,18 @@
|
||||
{{#equal Cover.Type "image"}}
|
||||
<img src="{{Cover.Url}}" loading="lazy" width="100%" height="100%">
|
||||
{{/equal}}
|
||||
<p class="post__title">{{Title}}</p>
|
||||
<p class="m-2 text-ellipsis whitespace-nowrap overflow-hidden">{{Title}}</p>
|
||||
<div class="flex gap-2 p-2">
|
||||
<div>
|
||||
<img class="icon" src="/static/icons/chevron-up.svg" alt="Points">
|
||||
<div class="flex gap-1">
|
||||
<img class="invert icon" src="/static/icons/PhArrowFatUp.svg" alt="Points" width="18px" height="18px">
|
||||
{{Points}}
|
||||
</div>
|
||||
<div>
|
||||
<img class="icon" src="/static/icons/message-square.svg" alt="Comments">
|
||||
<div class="flex gap-1">
|
||||
<img class="invert icon" src="/static/icons/PhChat.svg" alt="Comments" width="18px" height="18px">
|
||||
{{Comments}}
|
||||
</div>
|
||||
<div>
|
||||
<img class="icon" src="/static/icons/eye.svg" alt="Views">
|
||||
<div class="flex gap-1">
|
||||
<img class="invert icon" src="/static/icons/PhEye.svg" alt="Views" width="18px" height="18px">
|
||||
{{Views}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
48
views/partials/privacy.hbs
Normal file
48
views/partials/privacy.hbs
Normal file
@@ -0,0 +1,48 @@
|
||||
{{#if config.Privacy.not_collected}}
|
||||
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
|
||||
<img class="invert" src="/static/icons/PhCheckCircle.svg" alt="" height="36" width="36" />
|
||||
<h2 class="font-bold text-xl">Data not collected</h2>
|
||||
<p class="text-lg">This instance does not collect any data.</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#unless config.Privacy.set}}
|
||||
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
|
||||
<img class="invert" src="/static/icons/PhWarning.svg" alt="" height="36" width="36" />
|
||||
<h2 class="font-bold text-xl">No details provided</h2>
|
||||
<p class="text-lg">The operator of this instance will be required to provide privacy details to be added to the instance list.</p>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#unless config.Privacy.not_collected}}
|
||||
<div class="flex flex-col items-center w-full lg:w-1/2 p-4 bg-slate-600 rounded-lg">
|
||||
<img class="invert" src="/static/icons/PhWarningCircle.svg" alt="" height="36" width="36" />
|
||||
<h2 class="font-bold text-xl">Data collected</h2>
|
||||
<p class="text-lg">The following data may be collected:</p>
|
||||
<ul class="flex flex-col">
|
||||
{{#if config.Privacy.ip}}
|
||||
<li class="flex gap-1">
|
||||
<img class="invert" src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
|
||||
Internet address (IP Address)
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if config.Privacy.url}}
|
||||
<li class="flex gap-1">
|
||||
<img class="invert" src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
|
||||
Page viewed (Request URL)
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if config.Privacy.device}}
|
||||
<li class="flex gap-1">
|
||||
<img class="invert" src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
|
||||
Device Type (User agent)
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if config.Privacy.diagnostics}}
|
||||
<li class="flex gap-1">
|
||||
<img class="invert" src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
|
||||
Diagnostics
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
@@ -7,62 +7,58 @@
|
||||
{{post.Title}} -
|
||||
{{/if}}
|
||||
rimgo
|
||||
</title>
|
||||
</title>
|
||||
|
||||
{{> partials/head }}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/album.css" />
|
||||
<link rel="stylesheet" href="/static/css/comments.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> partials/header }}
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<header>
|
||||
<h1>{{post.Title}}</h1>
|
||||
<h1 class="text-3xl font-bold">{{post.Title}}</h1>
|
||||
<p>{{post.CreatedAt}}</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="flex flex-center-y gap-4">
|
||||
<div class="flex gap-4 items-center my-4">
|
||||
{{#if post.User.Username}}
|
||||
<a href="/user/{{post.User.Username}}" class="user">
|
||||
<img src="{{post.User.Avatar}}" class="pfp" width="36" height="36" />
|
||||
<a href="/user/{{post.User.Username}}" class="flex gap-2 items-center">
|
||||
<img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" />
|
||||
<p>
|
||||
<b>{{post.User.Username}}</b>
|
||||
</p>
|
||||
</a>
|
||||
{{/if}}
|
||||
<div class="flex flex-center-y gap-2">
|
||||
<div class="flex gap-2 items-center">
|
||||
<div class="flex flex-center gap-2">
|
||||
<img class="icon" src="/static/icons/eye.svg" alt="Views">
|
||||
<img class="icon invert" src="/static/icons/PhEye.svg" alt="Views" width="24px" height="24px">
|
||||
<p>{{post.Views}}</p>
|
||||
</div>
|
||||
{{#if post.SharedWithCommunity}}
|
||||
<div class="flex flex-center gap-2">
|
||||
<img class="icon" src="/static/icons/chevron-up.svg" alt="Likes">
|
||||
<img class="icon invert" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
|
||||
<p>{{post.Upvotes}}</p>
|
||||
</div>
|
||||
<div class="flex flex-center gap-2">
|
||||
<img class="icon" src="/static/icons/chevron-down.svg" alt="Dislikes">
|
||||
<img class="icon invert" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
|
||||
<p>{{post.Downvotes}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post__media flex flex-center flex-col">
|
||||
<div class="flex flex-center flex-col">
|
||||
{{#each post.Media}}
|
||||
{{#if this.Title}}
|
||||
<h4>{{this.Title}}</h4>
|
||||
<h4 class="font-bold">{{this.Title}}</h4>
|
||||
{{/if}}
|
||||
|
||||
{{#equal this.Type "image"}}
|
||||
<img src="{{this.Url}}" loading="lazy">
|
||||
<img class="my-2 max-h-96 object-contain" src="{{this.Url}}" loading="lazy">
|
||||
{{/equal}}
|
||||
{{#equal this.Type "video"}}
|
||||
<video controls loop>
|
||||
<video class="my-2 max-h-96 object-contain" controls loop>
|
||||
<source type="{{this.MimeType}}" src="{{this.Url}}" />
|
||||
</video>
|
||||
{{/equal}}
|
||||
@@ -74,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
{{#if post.tags}}
|
||||
<div class="tags">
|
||||
<div class="flex gap-2 my-2 flex-flow-wrap">
|
||||
<style nonce="{{nonce}}">
|
||||
{{#each post.tags}}
|
||||
.{{this.BackgroundId}} { background-image: url('{{this.Background}}') }
|
||||
@@ -82,8 +78,8 @@
|
||||
</style>
|
||||
{{#each post.tags}}
|
||||
<a href="/t/{{this.Tag}}">
|
||||
<div class="tag {{this.BackgroundId}}">
|
||||
<p class="tag__display">{{this.Display}}</p>
|
||||
<div class="rounded-md p-4 min-w-[110px] bg-slate-500 {{this.BackgroundId}}">
|
||||
<p class="font-bold text-white text-center">{{this.Display}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
@@ -94,13 +90,12 @@
|
||||
<section>
|
||||
{{#if comments}}
|
||||
<div>
|
||||
<hr>
|
||||
<input id="comments__expandBtn" type="checkbox">
|
||||
<label class="comments__expandBtn__label" for="comments__expandBtn">
|
||||
<h3>Comments ({{post.Comments}})</h3>
|
||||
<span class="comments__expandBtn__icon"></span>
|
||||
<input id="comments__expandBtn" type="checkbox" checked>
|
||||
<label class="comments__expandBtn__label my-2 py-4 border-solid border-t-2 border-slate-400" for="comments__expandBtn">
|
||||
<h3 class="text-xl font-bold">Comments ({{post.Comments}})</h3>
|
||||
<span class="text-xl font-bold"></span>
|
||||
</label>
|
||||
<div class="comments flex flex-col">
|
||||
<div class="comments flex flex-col gap-2">
|
||||
{{#each comments}}
|
||||
{{> partials/comment }}
|
||||
{{/each}}
|
||||
|
||||
@@ -2,18 +2,16 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{> 'partials/head' }}
|
||||
<title>Privacy - rimgo</title>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/privacy.css">
|
||||
|
||||
<title>Instance privacy - rimgo</title>
|
||||
{{> partials/head }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> 'partials/header' }}
|
||||
|
||||
<main>
|
||||
<h1>Instance Privacy</h1>
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<header>
|
||||
<h1 class="text-3xl font-bold">Instance Privacy</h1>
|
||||
{{#if config.Privacy.policy}}
|
||||
<p>The instance operator has indicated their instance's privacy practices below. For more information, see the
|
||||
instance operator's <a href="{{config.Privacy.policy}}">privacy policy</a>.</p>
|
||||
@@ -22,95 +20,42 @@
|
||||
{{/if}}
|
||||
|
||||
{{#if config.Privacy.message}}
|
||||
<p>{{{config.Privacy.message}}}</p>
|
||||
<p class="my-4">{{{config.Privacy.message}}}</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if config.Privacy.not_collected}}
|
||||
<div class="badge">
|
||||
<div class="flex flex-col flex-center p-2 gap-2">
|
||||
<img class="icon largeIcon" src="/static/icons/check-circle.svg" alt="">
|
||||
<h2>Data Not Collected</h2>
|
||||
<p>The instance operator does not collect any data from this instance.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#unless config.Privacy.set}}
|
||||
<div class="badge">
|
||||
<div class="flex flex-col flex-center p-2 gap-2">
|
||||
<img class="icon largeIcon" src="/static/icons/alert-triangle.svg" alt="">
|
||||
<h3>No Details Provided</h3>
|
||||
<p>The operator of this instance will be required to provide privacy details to be added to the instance list.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#unless config.Privacy.not_collected}}
|
||||
<div class="badge">
|
||||
<div class="flex flex-col flex-center p-2 gap-2">
|
||||
<img class="icon largeIcon" src="/static/icons/alert-circle.svg" alt="">
|
||||
<h2>Data Collected</h2>
|
||||
<p>The following data may be collected:</p>
|
||||
<ul>
|
||||
{{#if config.Privacy.ip}}
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/hash.svg" alt="">
|
||||
Internet address (IP Address)
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if config.Privacy.url}}
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/link.svg" alt="">
|
||||
Page viewed (Request URL)
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if config.Privacy.device}}
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/smartphone.svg" alt="">
|
||||
Device Type (User agent)
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if config.Privacy.diagnostics}}
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/tool.svg" alt="">
|
||||
Diagnostics
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
|
||||
<details class="privacyDetails">
|
||||
<summary>What's this?</summary>
|
||||
<p>
|
||||
Instance privacy aims to bring transparency to the data collected by frontends and encourage privacy friendly practices. There is often no privacy policy and users are forced to trust that the instance operator is not collecting data. However, there is a possibility that the instance operator can put false information so we encourage looking at other factors when selecting an instance.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/hash.svg" alt="">
|
||||
Internet address (IP Address) - This is an address that is given to your computer or internet connection.
|
||||
This can be used to find your city or region and internet provider but can change depending on your connection.
|
||||
</li>
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/link.svg" alt="">
|
||||
Page viewed (Request URL) - This is what page you are viewing. Searches are kept private.
|
||||
</li>
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/smartphone.svg" alt="">
|
||||
Device Type (User agent) - This is what browser, device, and operating system you are using.
|
||||
Advanced users can change this with an extension or browser setting.
|
||||
</li>
|
||||
<li>
|
||||
<img class="icon" src="/static/icons/tool.svg" alt="">
|
||||
Diagnostics - When this data is only collected when there is an error or only a short amount of time while
|
||||
diagnosing an issue.
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<h2 class="addInfo">Additional information</h2>
|
||||
</header>
|
||||
|
||||
<main class="flex justify-center w-full">
|
||||
{{> partials/privacy }}
|
||||
</main>
|
||||
|
||||
<section>
|
||||
<h2 class="text-2xl my-4 font-bold">What is instance privacy?</h2>
|
||||
<p>Instance privacy aims to bring transparency to the data collected by frontends and encourage privacy friendly practices. There is often no privacy policy and users are forced to trust that the instance operator is not collecting data. However, there is a possibility that the instance operator can put false information so we encourage looking at other factors when selecting an instance.</p>
|
||||
<ul class="flex flex-col list-outside list-disc mt-2 ml-4">
|
||||
<li>
|
||||
<img class="inline invert" src="/static/icons/PhGlobe.svg" alt="" width="24px" height="24px" />
|
||||
Internet address (IP Address) - This is an address that is given to your computer or internet connection.
|
||||
This can be used to find your city or region and internet provider but can change depending on your connection.
|
||||
</li>
|
||||
<li>
|
||||
<img class="inline invert" src="/static/icons/PhLink.svg" alt="" width="24px" height="24px" />
|
||||
Page viewed (Request URL) - This is what page you are viewing.
|
||||
</li>
|
||||
<li>
|
||||
<img class="inline invert" src="/static/icons/PhDevices.svg" alt="" width="24px" height="24px" />
|
||||
Device Type (User agent) - This is what browser, device, and operating system you are using.
|
||||
Advanced users can change this with an extension or browser setting.
|
||||
</li>
|
||||
<li>
|
||||
<img class="inline invert" src="/static/icons/PhWrench.svg" alt="" width="24px" height="24px" />
|
||||
Diagnostics - When this data is only collected when there is an error or only a short amount of time while
|
||||
diagnosing an issue.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-2xl my-4 font-bold">Additional information</h2>
|
||||
<ul>
|
||||
<li>Version: {{version}}</li>
|
||||
<li>Country: {{config.Privacy.country}}</li>
|
||||
@@ -121,7 +66,7 @@
|
||||
<li>Using Cloudflare?: No</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
{{> 'partials/footer' }}
|
||||
</body>
|
||||
|
||||
@@ -5,46 +5,43 @@
|
||||
<title>{{tag.Display}} - rimgo</title>
|
||||
|
||||
{{> partials/head }}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/base.css" />
|
||||
<link rel="stylesheet" href="/static/css/tag.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> partials/header }}
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<main>
|
||||
<div class="tagMeta" style="background-image: url('{{tag.Background}}');">
|
||||
<div class="flex flex-center flex-col text-center">
|
||||
<h2>{{tag.Display}}</h2>
|
||||
<p>{{tag.PostCount}} posts</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
{{#equal tag.Sort "popular"}}
|
||||
<a href="?sort=popular"><b>Popular</b></a>
|
||||
<a href="?sort=newest">Newest</a>
|
||||
<a href="?sort=best">Best</a>
|
||||
{{/equal}}
|
||||
{{#equal tag.Sort "newest"}}
|
||||
<a href="?sort=popular">Popular</a>
|
||||
<a href="?sort=newest"><b>Newest</b></a>
|
||||
<a href="?sort=best">Best</a>
|
||||
{{/equal}}
|
||||
{{#equal tag.Sort "best"}}
|
||||
<a href="?sort=popular">Popular</a>
|
||||
<a href="?sort=newest">Newest</a>
|
||||
<a href="?sort=best"><b>Best</b></a>
|
||||
{{/equal}}
|
||||
</div>
|
||||
<header class="p-4 rounded-xl text-white mb-4" style="background-image: url('{{tag.Background}}');">
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<h2 class="text-2xl font-bold">{{tag.Display}}</h2>
|
||||
<p>{{tag.PostCount}} posts</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
{{#equal tag.Sort "popular"}}
|
||||
<a href="?sort=popular"><b>Popular</b></a>
|
||||
<a href="?sort=newest">Newest</a>
|
||||
<a href="?sort=best">Best</a>
|
||||
{{/equal}}
|
||||
{{#equal tag.Sort "newest"}}
|
||||
<a href="?sort=popular">Popular</a>
|
||||
<a href="?sort=newest"><b>Newest</b></a>
|
||||
<a href="?sort=best">Best</a>
|
||||
{{/equal}}
|
||||
{{#equal tag.Sort "best"}}
|
||||
<a href="?sort=popular">Popular</a>
|
||||
<a href="?sort=newest">Newest</a>
|
||||
<a href="?sort=best"><b>Best</b></a>
|
||||
{{/equal}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="posts">
|
||||
{{#each tag.Posts}}
|
||||
{{> partials/post }}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="pageSelector">
|
||||
<div class="mt-4 font-bold">
|
||||
{{#if displayPrev}}
|
||||
<a href="{{channel.RelUrl}}?page={{prevPage}}">Previous page</a>
|
||||
{{/if}}
|
||||
|
||||
@@ -5,33 +5,30 @@
|
||||
<title>{{user.Username}} - rimgo</title>
|
||||
|
||||
{{> partials/head }}
|
||||
|
||||
<link rel="stylesheet" href="/static/css/user.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{> partials/header }}
|
||||
<body class="font-sans text-lg bg-slate-800 text-white">
|
||||
{{> partials/nav }}
|
||||
|
||||
<header class="p-4 rounded-xl text-white mb-4" style="background-image: url('{{user.Cover}}');">
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="rounded-full" src="{{user.Avatar}}" width="72" height="72">
|
||||
<div>
|
||||
<h2 class="font-bold text-2xl">{{user.Username}}</h2>
|
||||
<p>{{user.Points}} pts · {{user.CreatedAt}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2">{{user.Bio}}</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="userMeta" style="background-image: url('{{user.Cover}}');">
|
||||
<div class="flex flex-center-y gap-2">
|
||||
<img class="pfp" src="{{user.Avatar}}" width="72" height="72">
|
||||
<div>
|
||||
<h2>{{user.Username}}</h2>
|
||||
<p>{{user.Points}} pts · {{user.CreatedAt}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{user.Bio}}</p>
|
||||
</div>
|
||||
|
||||
<div class="posts">
|
||||
{{#each submissions}}
|
||||
{{> partials/post }}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="pageSelector">
|
||||
<div class="mt-4 font-bold">
|
||||
{{#equal page "0" }}
|
||||
{{else}}
|
||||
<a href="{{channel.RelUrl}}?page={{prevPage}}">Previous page</a>
|
||||
|
||||
Reference in New Issue
Block a user