web: style donate page

website/.eleventy.js

@@ -7,6 +7,7 @@ const i18n = require('eleventy-plugin-i18n')
 const fs = require("fs")
 const path = require("path")
 const matter = require('gray-matter')
+const cheerio = require('cheerio')
 const pluginRss = require('@11ty/eleventy-plugin-rss')
 const { JSDOM } = require('jsdom')
 
@@ -93,6 +94,40 @@ module.exports = function (ty) {
     }
   })
 
+  ty.addShortcode("includeReadmeSectionHtml", function(sectionName) {
+    const readmePath = path.join(__dirname, '../README.md')
+    const readmeContent = fs.readFileSync(readmePath, 'utf8')
+    
+    const htmlContent = md.render(readmeContent)
+    
+    const cheerioDoc = cheerio.load(htmlContent)
+    let sectionContent = ''
+    let captureContent = false
+    let depth = 0
+    
+    cheerioDoc('body > *').each((i, elem) => {
+      if (cheerioDoc(elem).is('h2') && cheerioDoc(elem).text().trim() === sectionName) {
+        captureContent = true
+        sectionContent += cheerioDoc(elem).prop('outerHTML')
+      } else if (cheerioDoc(elem).is('h2') && captureContent) {
+        if (depth === 0) {
+          captureContent = false
+          return false // Stop iterating
+        }
+      } else if (captureContent) {
+        if (cheerioDoc(elem).is('ul, ol')) {
+          depth++
+        }
+        sectionContent += cheerioDoc(elem).prop('outerHTML')
+        if (cheerioDoc(elem).is('ul, ol')) {
+          depth--
+        }
+      }
+    })
+    
+    return sectionContent || `Section "${sectionName}" not found in README.md`
+  })
+
   ty.addFilter('applyGlossary', function (content) {
     const dom = new JSDOM(content)
     const { document } = dom.window

website/package.json

@@ -28,6 +28,7 @@
     "tailwindcss": "3.3.1"
   },
   "dependencies": {
+    "cheerio": "^1.0.0-rc.12",
     "eleventy-plugin-i18n": "^0.1.3",
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.3",

website/src/donate.html

@@ -192,9 +192,128 @@ templateEngineOverride: njk
     input[type=range].btcpay-input-range:focus::-ms-fill-upper {
         background: #fff;
     }
+
+    .donate-content h2{
+        color: #0197ff;
+        font-weight: 700;
+        font-size: 28px;
+        line-height: 36px;
+        margin-bottom: 28px;
+        text-align: left;
+    }
+
+    :is([dir="rtl"] .donate-content h2) {
+        text-align: right;
+    }
+
+    .donate-content p{
+        color: #0d0e12;
+        line-height: 24px;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+
+    :is(.dark .donate-content p) {
+        color: #ffffff;
+    }
+
+    @media (min-width: 768px) {
+        .donate-content h2{
+            font-size: 35px;
+            line-height: 43px;
+        }
+    }
+
+    .donate-content a {
+        color: #0053D0;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+    }
+
+    .dark .donate-content a,
+    .dark .donate-content h2 {
+        color: #70F0F9;
+    }
+
+    .donate-content ul,
+    .donate-content ol {
+        list-style-position: inside;
+        overflow: auto;
+        margin: 10px 0;
+    }
+
+    .donate-content > ul{
+        margin-bottom: 1.5rem;
+    }
+
+    .donate-content ul li,
+    .donate-content ol li {
+        margin-right: 0;
+        margin-left: 0;
+        -webkit-margin-start: 1.1rem;
+        color: #0d0e12;
+        word-wrap: break-word;
+        white-space: normal; 
+    }
+
+    @media (min-width: 1024px) {
+        .donate-content ul li,
+        .donate-content ol li {
+            word-break: break-all;
+        }
+    }
+
+    .dark .donate-content ul li,
+    .dark .donate-content ol li {
+        color: #fff;
+    }
+
+    .donate-content ul li::marker,
+    .donate-content ol li::marker {
+        color: #0d0e12;
+    }
+
+    .dark .donate-content ul li::marker,
+    .dark .donate-content ol li::marker {
+        color: white;
+    }
+
+    .donate-content ul li {
+        list-style: disc;
+        letter-spacing: 0.4px;
+    }
+
+    .donate-content ol li {
+        list-style: decimal;
+    }
+
+    .donate-content > p:nth-last-child(3),
+    .donate-content > p:nth-last-child(2){
+        margin-bottom: 4px;
+    }
+
+    .donate-content > p:nth-last-child(3) {
+        font-weight: bold;
+    }
+
+    .donate-form{
+        padding: 5rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .donate-form form{
+        scale: 1.2;
+    }
 </style>
 <section
-    class="bg-primary-bg-light dark:bg-primary-bg-dark py-[75px] mt-[66px] px-5 lg:h-[calc(100vh-66px)] lg:max-h-[888px] lg:flex lg:items-center">
+    class="container bg-primary-bg-light dark:bg-primary-bg-dark mt-[66px] px-5 flex flex-col-reverse lg:flex-row lg:gap-5">
+    <div class="donate-content flex-[5] py-[75px]">
+        {% includeReadmeSectionHtml 'Help us with donations' %}
+    </div>
+
+    <div class="donate-form flex-[4] max-h-[calc(100vh-66px)]">
     <form method="POST" action="https://btcpay.simplex.chat/api/v1/invoices" class="btcpay-form btcpay-form--block">
         <input type="hidden" name="storeId" value="932Twc9xWnAzFx1iA5VRMoRVEvn7tydmpwqqTVf6ziiV" />
         <input type="hidden" name="jsonResponse" value="true" />
@@ -216,6 +335,7 @@ templateEngineOverride: njk
                 style="height:57px;display:inline-block;padding:5% 0 5% 5px;vertical-align:middle;">
         </button>
     </form>
+    </div>
 </section>
 <script>
     (function () {