sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-22 14:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

astro

Browse Source
This commit is contained in:
Zsolt Ero
2024-06-12 16:18:32 +02:00
parent 791ad896b2
commit 61111872d9
13 changed files with 44 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website_astro/src/components/Map.astro
View File

@@ -2,6 +2,12 @@
---
<p>Use the following style in a MapLibre map:</p>
<pre><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
<h2>How can I use it?</h2>
<!--<p>(Click below, it's interactive!)</p>-->
<div id="map-container">
<div id="mapbg-image">
<div class="mapbg-attrib">
@@ -12,13 +18,15 @@
</div>
</div>
<p>Choose a style:</p>
<div class="button-container">
<button onclick="selectStyle(event, 'positron')" class="btn">Positron</button>
<button onclick="selectStyle(event, 'bright')" class="btn">Bright</button>
<button onclick="selectStyle(event, 'liberty')" class="btn selected">Liberty</button>
<button onclick="selectStyle(event, 'liberty-3d')" class="btn">3D</button>
<button data-style="positron" class="btn">Positron</button>
<button data-style="bright" class="btn">Bright</button>
<button data-style="liberty" class="btn selected">Liberty</button>
<button data-style="liberty-3d" class="btn">3D</button>
</div>
<p>Use the following style in a MapLibre map:</p>
<pre><code class="lang-uri" id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
<p>You use OpenFreeMap by adding it to a website or mobile app.</p>
<p><a href="#">How to use in detail</a></p>
<script is:inline src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script is:inline src="/scripts/map.js"></script>

11
website_astro/src/layouts/Layout.astro
View File

@@ -20,15 +20,14 @@ import '../styles/global.css'
/>
<meta name="generator" content={Astro.generator} />
<link rel="icon" href="/favicon.ico" sizes="any" />
<!-- <meta property="og:title" content="" />-->
<!-- <meta property="og:type" content="" />-->
<!-- <meta property="og:url" content="" />-->
<!-- <meta property="og:image" content="" />-->
<!-- <link rel="icon" href="/favicon.ico" sizes="any" />-->
<!--<link rel="icon" type="image/svg+xml" href="/favicon.svg" />-->
<!--<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />-->
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<!--<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />-->
<!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
</head>
@@ -37,8 +36,8 @@ import '../styles/global.css'
<slot />
<div class="footer">
<a href="privacy">Privacy Policy</a>
<a href="tos">Terms of Service</a>
<a href="/privacy">Privacy Policy</a>
<a href="/tos">Terms of Service</a>
</div>
</body>
</html>

44
website_astro/src/layouts/Static.astro
View File

@@ -1,44 +0,0 @@
---
interface Props {
title: string
}
const { title } = Astro.props
import '../styles/global.css'
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta
name="description"
content="Open and free custom maps for your website and apps, based on OpenStreetMap."
/>
<meta name="generator" content={Astro.generator} />
<!-- <meta property="og:title" content="" />-->
<!-- <meta property="og:type" content="" />-->
<!-- <meta property="og:url" content="" />-->
<!-- <meta property="og:image" content="" />-->
<!-- <link rel="icon" href="/favicon.ico" sizes="any" />-->
<!--<link rel="icon" type="image/svg+xml" href="/favicon.svg" />-->
<!--<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />-->
<!--<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />-->
<!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
</head>
<body>
<slot />
<div class="footer">
<a href="privacy">Privacy Policy</a>
<a href="tos">Terms of Service</a>
</div>
</body>
</html>

0
website_astro/src/pages/howto_use.astro → website_astro/src/pages/_howto_use.astro
View File

27
website_astro/src/pages/index.astro
View File

@@ -8,24 +8,18 @@ import { Content as Rest } from '../content/index/rest.md'
---
<Layout title="OpenFreeMap">
<img src="logo.jpg" alt="logo" height="200" class="logo" />
<img src="/logo.jpg" alt="logo" height="200" class="logo" />
<h1>OpenFreeMap</h1>
<div class="icons">
<a href="https://github.com/hyperknot/openfreemap" target="_blank"
><img src="github.svg" alt="github" height="28" /></a
><img src="/github.svg" alt="github" height="28" /></a
>
<a href="https://x.com/hyperknot" target="_blank"><img src="x.svg" alt="x" height="28" /></a>
<a href="https://x.com/hyperknot" target="_blank"><img src="/x.svg" alt="x" height="28" /></a>
</div>
<WhatIs />
<h2>How can I use it?</h2>
<p>(Click below, it's interactive!)</p>
<Map />
<!--<p>How to use: <a href="#">In detail</a></p>-->
<div id="pricing"></div>
<h2>How can I donate or support this project?</h2>
@@ -36,25 +30,10 @@ import { Content as Rest } from '../content/index/rest.md'
<div id="support-plans-slider"></div>
<Pricing />
<h2>Is commercial usage allowed?</h2>
<p>Yes.</p>
<h2>Who is behind this project?</h2>
<p>
I'm Zsolt Ero (<a href="https://x.com/hyperknot">X</a>, <a href="https://blog.hyperknot.com/"
>blog</a
>, <a href="mailto:zsolt@openfreemap.org">email</a>). I built <a href="https://maphub.net/"
>MapHub</a
> and have been running map hosting in production for 8 years.
</p>
<Rest />
<!--<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>-->
<!--<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>-->
<!--<script src="map_howto.js"></script>-->
<!--<script src="support_plans.js"></script>-->
<!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->

2
website_astro/src/pages/privacy.md
View File

@@ -1,5 +1,5 @@
---
layout: '../layouts/Static.astro'
layout: '../layouts/Layout.astro'
title: 'Privacy Policy'
---

2
website_astro/src/pages/tos.md
View File

@@ -1,5 +1,5 @@
---
layout: '../layouts/Static.astro'
layout: '../layouts/Layout.astro'
title: 'Terms of Services'
---

2
website_astro/src/styles/global.css
View File

@@ -178,7 +178,7 @@ code {
height: 100%;
position: absolute;
z-index: 1;
background-image: url('berlin.webp');
background-image: url('/berlin.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;