removed donate

website/public/scripts/donate.js

@@ -1,113 +0,0 @@
-const pricingList = [
-  {
-    price: 10,
-    name: 'Steel',
-    icon: '🗡️',
-    lm_url: 'af5553c6-f5fe-4253-b5d5-eb5531f8dcdf',
-  },
-  {
-    price: 20,
-    name: 'Bronze',
-    icon: '🗽',
-    lm_url: '9d2b0961-d8d2-4b10-94fc-5d7497baef40',
-  },
-  {
-    price: 40,
-    name: 'Copper',
-    icon: '🎷',
-    lm_url: '76d47d46-9ffa-411c-b6c3-96dd491631bc',
-  },
-  {
-    price: 75,
-    name: 'Silver',
-    icon: '🍴',
-    lm_url: 'df45c1e6-49dc-4494-9bdf-071d85e254a5',
-  },
-  {
-    price: 150,
-    name: 'Gold',
-    icon: '🏆',
-    lm_url: '30bf66e8-c9ff-4642-bb39-17a1dfe278f2',
-  },
-  {
-    price: 250,
-    name: 'Platinum',
-    icon: '🛰',
-    lm_url: 'c837df35-eb23-4206-a0b5-024a236077cb',
-  },
-  {
-    price: 500,
-    name: 'Sapphire',
-    icon: '💍',
-    lm_url: '5e5f0b42-b885-4bb6-a981-642d1e40d9ac',
-  },
-  {
-    price: 1000,
-    name: 'Diamond',
-    icon: '👑',
-    lm_url: '5c24c85b-cd08-42ff-9515-743e46f3e825',
-  },
-]
-
-const priceNumbers = pricingList.map(i => i.price)
-
-const sliderDiv = document.getElementById('support-plans-slider')
-
-const tooltipFormat = {
-  to: function (value) {
-    const price = pricingList[value]
-    const url = `https://support.openfreemap.org/checkout/buy/${price.lm_url}?media=1&desc=0&discount=0`
-    return `
-        <div class="plan-name">${price.name} Plan</div>
-        <div>$${price.price}/month</div>
-        <div>
-          <a class="plan-link" href="${url}" target="_blank">Subscribe</a>
-        </div>
-        `
-  },
-}
-
-const pipFormat = {
-  to: function (value) {
-    return pricingList[value].icon
-  },
-}
-
-const pricingSlider = noUiSlider.create(sliderDiv, {
-  start: 3,
-  range: { min: 0, max: priceNumbers.length - 1 },
-  step: 1,
-  tooltips: tooltipFormat,
-  pips: { mode: 'count', values: priceNumbers.length, format: pipFormat, density: -1 },
-})
-
-pricingSlider.on('update', function (values, _) {
-  for (const e of sliderDiv.querySelectorAll('.noUi-value')) {
-    e.classList.remove('active')
-  }
-
-  const value = parseInt(values[0])
-  const el = sliderDiv.querySelector('.noUi-value[data-value="' + value + '"]')
-  el.classList.add('active')
-
-  const tooltip = sliderDiv.querySelector('.noUi-tooltip')
-  tooltip.classList.remove('first')
-  tooltip.classList.remove('last')
-
-  if (document.documentElement.clientWidth < 500) {
-    if (value === 0) {
-      tooltip.classList.add('first')
-    }
-    if (value === priceNumbers.length - 1) {
-      tooltip.classList.add('last')
-    }
-  }
-})
-
-const pips = sliderDiv.querySelectorAll('.noUi-value')
-for (const pip of pips) {
-  pip.addEventListener('click', e => {
-    const v = e.target.getAttribute('data-value')
-    pricingSlider.set(v)
-  })
-}

website/src/components/Donate.astro

@@ -1,18 +1,12 @@
 ---
-import { Content as DonateText } from '../content/index/donate.md'
+const { title } = Astro.props
+
+import { Content as Sponsor } from '../content/donate/sponsor.md'
+import { Content as Pro } from '../content/donate/pro.md'
+
 ---
 
-<h2>How can I donate or support this project?</h2>
-<p>
-  If this project helps you save on your map hosting costs, please subscribe to one of our support
-  plans here. Alternatively, sponsor us on <a href="https://github.com/sponsors/hyperknot"
-    >GitHub Sponsors</a
-  >.
-</p>
 
-<div id="support-plans-slider"></div>
+<Sponsor/>
-
+<a class="quick-start-button pink" href="https://github.com/sponsors/hyperknot">Sponsor</a>
-<DonateText />
+<Pro/>
-
-<script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
-<script is:inline src="/scripts/donate.js"></script>

website/src/content/donate/pro.md

@@ -0,0 +1,4 @@
+## Do you offer support and SLA guarantees?
+
+I'm considering launching paid support plans - where I personally help you migrate to OpenFreeMap - and maybe a Pro plan with SLA guarantees. If you're interested, please write me an [email](mailto:zsolt@openfreemap.org).
+

website/src/content/donate/sponsor.md

@@ -0,0 +1,5 @@
+## How can I sponsor the project?
+
+If this project helps you save on your map hosting costs, please consider sponsoring me on [GitHub Sponsors](https://github.com/sponsors/hyperknot).
+
+If possible, please choose a monthly donation, even if it's a smaller amount. The nature of this project needs recurring donations to cover the server costs.

website/src/content/index/after_donate.md

@@ -1,3 +1,25 @@
+## Why did you build this project?
+
+OpenStreetMap is one of the most important collective projects in history. It began 20 years ago, and today, 3 million edits are made each day!
+
+For a long time, when you wanted to use the map on your website or app, you had to look for a commercial map tile provider and hope your site didn't become too popular. Otherwise, you might end up with a $10,000 bill in a single day, as Hoodmaps [did](https://x.com/levelsio/status/1730659933232730443).
+
+Self-hosting was an option, but it required a big server and a lot of time to get it right.
+
+Since I've spent many years developing the map tile infrastructure for [MapHub](https://maphub.net/), I decided to open-source it so anyone can use it. With OpenFreeMap, you now have the option to either set up your own server with just one line of code or use our public instance.
+
+## How can you offer a free public instance ?
+
+There is no technical reason why map hosting costs as much as it does today. Vector tiles are just static files. It's true that serving hundreds of millions of files is not easy, but at the end of the day, they are just files.
+
+Financially, the plan is to keep renting servers until they cover the bandwidth. I believe it can be self-sustainable if enough people subscribe to the support plans.
+
+If this project helps you save on your map hosting costs, please consider subscribing to a support plan.
+
+## Is commercial usage allowed?
+
+Yes.
+
 ## What is the tech stack?
 
 There is no tile server running; only nginx serving a Btrfs image with 300 million hard-linked files. This was my idea; I haven't read about anyone else doing this in production, but it works really well. (You can read more about it on [GitHub](https://github.com/hyperknot/openfreemap).)

website/src/content/index/before_donate.md

@@ -9,24 +9,6 @@ X: [@OpenFreeMapOrg](https://x.com/OpenFreeMapOrg) (for announcements)
 
 GitHub: [openfreemap](https://github.com/hyperknot/openfreemap) and [openfreemap-styles](https://github.com/hyperknot/openfreemap-styles)
 
-## Why did you build this project?
 
-OpenStreetMap is one of the most important collective projects in history. It began 20 years ago, and today, 3 million edits are made each day!
 
-For a long time, when you wanted to use the map on your website or app, you had to look for a commercial map tile provider and hope your site didn't become too popular. Otherwise, you might end up with a $10,000 bill in a single day, as Hoodmaps [did](https://x.com/levelsio/status/1730659933232730443).
 
-Self-hosting was an option, but it required a big server and a lot of time to get it right.
-
-Since I've spent many years developing the map tile infrastructure for [MapHub](https://maphub.net/), I decided to open-source it so anyone can use it. With OpenFreeMap, you now have the option to either set up your own server with just one line of code or use our public instance.
-
-## How can you offer a free public instance ?
-
-There is no technical reason why map hosting costs as much as it does today. Vector tiles are just static files. It's true that serving hundreds of millions of files is not easy, but at the end of the day, they are just files.
-
-Financially, the plan is to keep renting servers until they cover the bandwidth. I believe it can be self-sustainable if enough people subscribe to the support plans.
-
-If this project helps you save on your map hosting costs, please consider subscribing to a support plan.
-
-## Is commercial usage allowed?
-
-Yes.

website/src/content/index/donate.md

@@ -1,7 +0,0 @@
-On **Gold** level and above, we offer personalised technical support by email. Otherwise, support is via GitHub [Discussions](https://github.com/hyperknot/openfreemap/discussions).
-
-If we ever receive a **Diamond** level supporter, we'll put their logo on this page.
-
-When subscribing to a support plan, you receive an invoice for each of your payments.
-
-Note: if you want to make a single donation, you can do this via [GitHub Sponsors](https://github.com/sponsors/hyperknot). However, please understand that the nature of this project needs recurring donations to cover the server costs.

website/src/layouts/Layout.astro

@@ -25,7 +25,6 @@ import '../styles/_style.css'
     <!--    <meta property="og:image" content="" />-->
 
     <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" />
   </head>
 
   <body>

website/src/styles/_style.css

@@ -2,4 +2,3 @@
 @import 'global.css';
 /* */
 @import 'map.css';
-@import 'donate.css';

website/src/styles/collapsible.css

@@ -1,29 +0,0 @@
-.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: '▼';
-}

website/src/styles/donate.css

@@ -1,78 +0,0 @@
-#support-plans-slider {
-  margin: 200px auto 150px;
-
-  @media (max-width: 550px) {
-    max-width: 98%;
-    margin: 170px auto 120px;
-  }
-}
-
-.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;
-
-  &:hover,
-  &:focus {
-    background-color: #fdb900;
-  }
-}
-
-/* noUI slider customizations */
-
-.noUi-connects {
-  cursor: pointer;
-}
-
-.noUi-value {
-  line-height: 0;
-  margin-top: 32px;
-  font-size: 30px;
-  transition: font-size 0.3s ease;
-  cursor: pointer;
-
-  &.active {
-    font-size: 45px;
-  }
-}
-
-.noUi-marker-horizontal {
-  &.noUi-marker-large {
-    height: 5px;
-  }
-
-  &.noUi-marker {
-    margin-left: 0;
-    width: 1px;
-  }
-}
-
-.noUi-tooltip {
-  border-color: #ccc;
-  border-radius: 10px;
-  padding: 10px;
-
-  &.first {
-    left: 0;
-    transform: unset;
-  }
-
-  &.last {
-    right: 0;
-    left: unset;
-    transform: unset;
-  }
-}

website/src/styles/global.css

@@ -123,4 +123,15 @@ hr {
   &:focus {
     background-color: #dea31d;
   }
+
+  &.pink {
+    background: linear-gradient(32deg, #0070a2, transparent) #ed36a7;
+
+      &:hover,
+  &:focus {
+    background-color: #dea31d;
+  }
+  }
 }
+
+