w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Implement templating to avoid copy/paste HTML code. #7

Browse Source
This commit is contained in:
Ian Renton
2025-10-02 11:16:38 +01:00
parent 10f8d9b4ed
commit cc1a7a9b8c
17 changed files with 105 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
views/webpage_about.tpl Normal file
View File

@@ -0,0 +1,12 @@
% rebase('webpage_base.tpl')
<div id="info-container" class="mt-4">
<h3>About (S)pothole</h3>
<p>(S)pothole is a utility to aggregate "spots" from amateur radio DX clusters and xOTA spotting sites, and provide an open JSON API as well as a website to browse the data.</p>
<p>While there are several other web-based interfaces to DX clusters, and sites that aggregate spots from various outfoor activity programmes for amateur radio, (S)pothole differentiates itself by supporting a large number of data sources, and by being "API first" rather than just providing a web front-end. This allows other software to be built on top of it.</p>
<p>The API is deliberately well-defined with an <a href="/apidocs/openapi.yml">OpenAPI specification</a> and auto-generated <a href="/apidocs">API documentation</a>. The API delivers spots in a consistent format regardless of the data source, freeing developers from needing to know how each individual data source presents its data.</p>
<p>(S)pothole itself is also open source, Public Domain licenced code that anyone can take and modify. <a href="https://git.ianrenton.com/ian/metaspot/">The source code is here</a>.</p>
<p>Supported data sources include DX Clusters, the Reverse Beacon Network (RBN), the APRS Internet Service (APRS-IS), POTA, SOTA, WWFF, GMA, WWBOTA, HEMA, and Parks 'n' Peaks.</p>
<p>The software was written by <a href="https://ianrenton.com">Ian Renton, MØTRT</a>.</p>
<p><a href="/">&laquo; Back home</a></p>
</div>

4
views/webpage_apidocs.tpl Normal file
View File

@@ -0,0 +1,4 @@
% rebase('webpage_base.tpl')
<redoc spec-url="/apidocs/openapi.yml"></redoc>
<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>

47
views/webpage_base.tpl Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>(S)pothole</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="icon" type="image/png" href="img/icon-512.png">
<link rel="alternate icon" type="image/png" href="img/icon-192.png">
<link rel="alternate icon" type="image/png" href="img/icon-32.png">
<link rel="alternate icon" type="image/png" href="img/icon-16.png">
<link rel="alternate icon" type="image/x-icon" href="img/favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="/js/code.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light justify-content-between p-0 border-bottom" style="background-color: white;">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" width="192" height="60" alt="Spothole">
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="/about" class="nav-link">About</a></li>
<li class="nav-item"><a href="/apidocs" class="nav-link">API</a></li>
</ul>
</nav>
<main>
{{!base}}
</main>
</div>
</body>
</html>

6
views/webpage_home.tpl Normal file
View File

@@ -0,0 +1,6 @@
% rebase('webpage_base.tpl')
<div class="mt-3">
<p>Latest spots as of XXXX. Updating in XXX seconds...</p>
<div id="table-container"></div>
</div>