From 0ec328538236b65e48f7575e7eb98d2f22c0d9d0 Mon Sep 17 00:00:00 2001 From: Zsolt Ero Date: Thu, 13 Jun 2024 02:50:07 +0200 Subject: [PATCH] astro --- website_astro/public/scripts/map.js | 2 +- website_astro/src/components/Donate.astro | 83 +++++++ website_astro/src/components/Logo.astro | 21 +- website_astro/src/components/Map.astro | 87 ++++++- .../src/components/StyleUrlBug.astro | 11 + .../src/content/how_to_use/custom_styles.md | 6 +- .../src/content/how_to_use/maplibre.md | 4 +- website_astro/src/pages/how_to_use.astro | 21 -- website_astro/src/pages/index.astro | 11 +- website_astro/src/pages/quick_start.astro | 68 ++++++ website_astro/src/styles/global.css | 212 +----------------- 11 files changed, 280 insertions(+), 246 deletions(-) create mode 100644 website_astro/src/components/StyleUrlBug.astro delete mode 100644 website_astro/src/pages/how_to_use.astro create mode 100644 website_astro/src/pages/quick_start.astro diff --git a/website_astro/public/scripts/map.js b/website_astro/public/scripts/map.js index 4c60107..4840f8e 100644 --- a/website_astro/public/scripts/map.js +++ b/website_astro/public/scripts/map.js @@ -65,7 +65,7 @@ function selectStyle(style) { map.setZoom(berlin.zoom) } - // document.getElementById('style-url-code').innerText = styleUrl + document.getElementById('style-url-code').innerText = styleUrl } // --- start diff --git a/website_astro/src/components/Donate.astro b/website_astro/src/components/Donate.astro index c0c2c23..9df192f 100644 --- a/website_astro/src/components/Donate.astro +++ b/website_astro/src/components/Donate.astro @@ -14,3 +14,86 @@ import { Content as DonateText } from '../content/index/donate.md' + + diff --git a/website_astro/src/components/Logo.astro b/website_astro/src/components/Logo.astro index 13dfc1a..f6197ae 100644 --- a/website_astro/src/components/Logo.astro +++ b/website_astro/src/components/Logo.astro @@ -1,12 +1,31 @@ --- +interface Props { + title: string +} +const { title } = Astro.props --- -

OpenFreeMap

+ +

{title}

+
github x
+ + diff --git a/website_astro/src/components/Map.astro b/website_astro/src/components/Map.astro index d7b6853..b201194 100644 --- a/website_astro/src/components/Map.astro +++ b/website_astro/src/components/Map.astro @@ -1,10 +1,8 @@ --- - +import StyleUrlBug from './StyleUrlBug.astro' +const { showStyleURL } = Astro.props --- -

How can I use it?

- -
@@ -22,12 +20,81 @@
-

- Have a look at the default styles and read more about how to integrate it to your website or app - here: -

- -

How to use OpenFreeMap

+{showStyleURL && } + + diff --git a/website_astro/src/components/StyleUrlBug.astro b/website_astro/src/components/StyleUrlBug.astro new file mode 100644 index 0000000..b39f1e0 --- /dev/null +++ b/website_astro/src/components/StyleUrlBug.astro @@ -0,0 +1,11 @@ +

Use the following style in a MapLibre map:

+
https://tiles.openfreemap.org/styles/liberty
+ + diff --git a/website_astro/src/content/how_to_use/custom_styles.md b/website_astro/src/content/how_to_use/custom_styles.md index b331bcf..841479f 100644 --- a/website_astro/src/content/how_to_use/custom_styles.md +++ b/website_astro/src/content/how_to_use/custom_styles.md @@ -4,8 +4,8 @@ You can customize the styles using the [Maputnik](https://maputnik.github.io/) e When you use a customized style, you need to host the style JSON yourself and use its URL in MapLibre. -[Customize Bright](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright) +Customize Bright -[Customize Liberty](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty) +Customize Liberty -[Customize Positron](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron) +Customize Positron diff --git a/website_astro/src/content/how_to_use/maplibre.md b/website_astro/src/content/how_to_use/maplibre.md index d9865e3..1455545 100644 --- a/website_astro/src/content/how_to_use/maplibre.md +++ b/website_astro/src/content/how_to_use/maplibre.md @@ -14,8 +14,8 @@ Initialize it to a div like this: diff --git a/website_astro/src/pages/how_to_use.astro b/website_astro/src/pages/how_to_use.astro deleted file mode 100644 index 4cd2f56..0000000 --- a/website_astro/src/pages/how_to_use.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -import Layout from '../layouts/Layout.astro' - -import { Content as MaplibreText } from '../content/how_to_use/maplibre.md' -import { Content as MapboxText } from '../content/how_to_use/mapbox.md' -import { Content as LeafletText } from '../content/how_to_use/leaflet.md' -import { Content as MobileText } from '../content/how_to_use/mobile.md' -import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md' -import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md' ---- - - -

How to use OpenFreeMap in your website or app

- - - - - - - - diff --git a/website_astro/src/pages/index.astro b/website_astro/src/pages/index.astro index 037db1b..a1cfb70 100644 --- a/website_astro/src/pages/index.astro +++ b/website_astro/src/pages/index.astro @@ -9,9 +9,18 @@ import { Content as RestText } from '../content/index/rest.md' --- - + + + +

How can I use it?

+

+ Have a look at the default styles and read more about how to integrate it to your website or app + here: +

+

Quick Start Guide

+ diff --git a/website_astro/src/pages/quick_start.astro b/website_astro/src/pages/quick_start.astro new file mode 100644 index 0000000..6df56b5 --- /dev/null +++ b/website_astro/src/pages/quick_start.astro @@ -0,0 +1,68 @@ +--- +import Layout from '../layouts/Layout.astro' +import Map from '../components/Map.astro' + +import { Content as MaplibreText } from '../content/how_to_use/maplibre.md' +import { Content as MapboxText } from '../content/how_to_use/mapbox.md' +import { Content as LeafletText } from '../content/how_to_use/leaflet.md' +import { Content as MobileText } from '../content/how_to_use/mobile.md' +import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md' +import { Content as SelfHostingText } from '../content/how_to_use/self_hosting.md' +import Logo from '../components/Logo.astro' +--- + + + + +
+

+ This guide provides step-by-step instructions for integrating OpenFreeMap into your website or + mobile application. +

+ To get started, choose a style from the default styles provided below. Later, there'll be + options to use custom styles as well. +

+

(You can navigate the map, it's interactive!)

+
+ + + + + + + + + + + + diff --git a/website_astro/src/styles/global.css b/website_astro/src/styles/global.css index d2151c9..356bc45 100644 --- a/website_astro/src/styles/global.css +++ b/website_astro/src/styles/global.css @@ -7,9 +7,11 @@ *::after { box-sizing: border-box; } + * { margin: 0; } + img, picture, video, @@ -18,6 +20,7 @@ svg { display: block; max-width: 100%; } + input, button, textarea, @@ -49,14 +52,11 @@ button:-moz-focusring { body { padding-bottom: 100px; - line-height: 1.5; font-size: 17px; -webkit-font-smoothing: antialiased; - font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight: normal; - color: #000; } @@ -91,9 +91,7 @@ h6, max-width: 600px; margin: 1em auto 0.5em; line-height: 1.2; - - font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, - sans-serif; + font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; font-weight: bold; } @@ -113,17 +111,6 @@ strong { color: #333; } -.logo { - margin: 0 auto; -} - -.icons { - margin: 0 auto; - width: 80px; - display: flex; - justify-content: space-between; -} - h1 { text-align: center; } @@ -153,123 +140,14 @@ p { } pre { - /*background: #efefef;*/ max-width: 600px; margin: 0 auto 0.6em; font-size: 14px; - /*overflow: scroll;*/ - /*font-weight: bold;*/ + padding: 7px 14px; } - code { font-size: 14px; - /*font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;*/ -/* background: #efefef;*/ -} - -#map-container { - width: 100%; - height: 500px; - margin-bottom: 24px; - position: relative; -} - -#mapbg-image { - width: 100%; - height: 100%; - position: absolute; - z-index: 1; - background-image: url('/berlin.webp'); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - cursor: pointer; - transition: opacity 3s; -} - -.mapbg-attrib { - font: - 12px / 20px Helvetica Neue, - Arial, - Helvetica, - sans-serif; - background-color: hsla(0, 0%, 100%, 0.5); - padding: 0 5px; - bottom: 0; - right: 0; - position: absolute; -} - -.mapbg-attrib a { - color: rgba(0, 0, 0, 0.75); - text-decoration: none; -} - -.mapbg-attrib a:hover { - text-decoration: underline; -} - -.btn { - border: 0; - border-radius: 0.25rem; - background: #2f5f8b; - color: white; - font-size: 1rem; - white-space: nowrap; - text-decoration: none; - padding: 0.25rem 0.5rem; - margin-right: 0.5rem; - cursor: pointer; - display: inline-flex; - align-items: center; -} - -.btn.selected { - background: #4892d9; -} - -.button-container { - margin: 0 auto 0.6em; - max-width: 600px; - display: flex; - flex-wrap: nowrap; -} - -.btn:hover { - background: #4892d9; -} -/*button:focus { }*/ -/*button:active { }*/ - -.col-lbl { - display: block; - cursor: pointer; - color: #333; -} - -.col-chk { - display: none; -} - -.col-lbl:before { - content: '►'; - margin-right: 1em; - color: #555; - font-size: 0.8em; -} - -.col-cnt { - display: none; - margin: 1em 0 2em; -} - -.col-chk:checked ~ .col-cnt { - display: block; -} - -.col-chk:checked ~ .col-lbl:before { - content: '▼'; } hr { @@ -279,86 +157,6 @@ hr { margin: 2em 0; } -#support-plans-slider { - max-width: 600px; - margin: 200px auto 150px; -} - -@media (max-width: 550px) { - #support-plans-slider { - max-width: 98%; - margin: 170px auto 120px; - } -} - -.noUi-connects { - cursor: pointer; -} - -.noUi-value { - line-height: 0; - margin-top: 32px; - font-size: 30px; - transition: font-size 0.3s ease; - cursor: pointer; -} - -.noUi-value.active { - font-size: 45px; -} - -.noUi-marker-horizontal.noUi-marker-large { - height: 5px; -} -.noUi-marker-horizontal.noUi-marker { - margin-left: 0; - width: 1px; -} - -.noUi-tooltip { - border-color: #ccc; - border-radius: 10px; - padding: 10px; -} - -.noUi-tooltip.first { - left: 0; - transform: unset; -} - -.noUi-tooltip.last { - right: 0; - left: unset; - transform: unset; -} - -.plan-name { - font-weight: bold; - margin-bottom: 10px; -} - -.plan-link { - display: block; - text-decoration: none; - - color: white; - font-weight: bold; - letter-spacing: 0.05rem; - font-size: 15px; - - border-radius: 20px; - padding: 6px 16px; - margin-top: 15px; - - background: linear-gradient(32deg, #03a9f4, transparent) #f441a5; - transition: background-color 1s; -} - -.plan-link:hover, -.plan-link:focus { - background-color: #fdb900; -} - @media (max-width: 550px) { body { padding-bottom: 40px;