Implement JavaScript card transformation: Read markdown content, create proper card divs with header+description

content/_index.md

@@ -3,10 +3,9 @@ title: "Building Bitcoin Community in Wichita"
 date: 2024-01-01T00:00:00Z
 draft: false
 description: "Join us for monthly meetups, educational sessions, and networking with fellow Bitcoin enthusiasts in south-central Kansas."
-hero_button: '<a href="#meetup-info" class="btn">Join Our Meetup</a>'
 ---
 
-We're a grassroots group dedicated to Bitcoin education, adoption, and community building in Wichita, Kansas. Whether you're a seasoned Bitcoiner or just curious about digital currency, you'll find a welcoming community here.
+We're a grassroots group dedicated to Bitcoin education, adoption, and community building in south-central Kansas. Whether you're an OG or just starting to learn about Bitcoin, you're more than welcome.
 
 What We Do {#meetup-info}
 ------------
@@ -15,7 +14,7 @@ What We Do {#meetup-info}
 
 Learn about Bitcoin technology, wallet security, mining, and best practices from experienced community members.
 
-### 🤝 Monthly Meetups
+### 🤝 Meetups
 
 Join us for informal gatherings to discuss Bitcoin news, share experiences, and network with local enthusiasts.
 
@@ -26,15 +25,11 @@ Help promote Bitcoin awareness and adoption in Wichita through community outreac
 Get Involved
 -----------
 
-### 📅 Monthly Meetups
+### 📅 Meetups
 
-**When:** First Thursday of each month  
+**Location:** Various locations around Wichita
-**Time:** 6:30 PM - 8:30 PM  
+**Date/Time:** TBD
-**Where:** Various locations around Wichita
+Sign up for our mailing list for notifications about our next event!
-
-### 💬 Stay Connected
-
-Join our online community to stay updated on events, ask questions, and connect with other Bitcoin enthusiasts.
 
 ### 🎓 Learn More
 

layouts/index.html

@@ -11,57 +11,24 @@
             text-align: center;
         }
         
-        .content-wrapper h3 {
+        .content-wrapper .card h3 {
-            color: #f7931a;
-            font-size: 1.5rem;
-            margin: 1.5rem 0 1rem;
-        }
-        
-        .content-wrapper h4 {
             color: #f7931a;
             font-size: 1.25rem;
             margin-bottom: 1rem;
         }
         
-        .content-wrapper p {
+        .content-wrapper .card p {
-            max-width: 800px;
-            margin: 0 auto 1rem;
             font-size: 1.1rem;
             color: #ccc;
             text-align: center;
+            margin-bottom: 0;
         }
         
-        .content-wrapper strong {
+        .content-wrapper .card strong {
             color: #fff;
         }
         
-        .content-wrapper a {
+        .content-wrapper .card {
-            color: #f7931a;
-            text-decoration: none;
-            transition: color 0.2s;
-        }
-        
-        .content-wrapper a:hover {
-            color: #ff9500;
-        }
-        
-        /* Card styling for section content */
-        .content-wrapper > h3 + p {
-            background: #111;
-            padding: 2rem;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(255,255,255,0.1);
-            text-align: center;
-        }
-        
-        /* Special styling for sections with multiple h4 elements */
-        .content-wrapper h3[id="meetup-info"],
-        .content-wrapper h3[id="get-involved"] {
-            text-align: center;
-        }
-        
-        .content-wrapper h3[id="meetup-info"] ~ h4,
-        .content-wrapper h3[id="get-involved"] ~ h4 {
             background: #111;
             padding: 2rem;
             border-radius: 10px;
@@ -71,13 +38,7 @@
             max-width: 400px;
         }
         
-        .content-wrapper h3[id="meetup-info"] ~ h4 h4,
+        .content-wrapper .btn {
-        .content-wrapper h3[id="get-involved"] ~ h4 h4 {
-            margin-bottom: 1rem;
-        }
-        
-        /* Questionnaire button styling */
-        .content-wrapper a[href*="google.com/forms"] {
             display: inline-block;
             background: white;
             color: #f7931a;
@@ -89,9 +50,64 @@
             margin-top: 1rem;
         }
         
-        .content-wrapper a[href*="google.com/forms"]:hover {
+        .content-wrapper .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }
     </style>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const content = document.querySelector('.content-wrapper');
+        const html = content.innerHTML;
+        
+        // Transform markdown-rendered content into card structure
+        let newHtml = '';
+        
+        // Get first paragraph as About card
+        const firstP = html.match(/<p[^>]*>(.*?)<\/p>/);
+        if (firstP) {
+            newHtml += '<div class="card">' + firstP[0] + '</div>';
+        }
+        
+        // Process What We Do section
+        const meetupInfo = html.match(/<h2[^>]*id="meetup-info"[^>]*>.*?<\/h2>(.*?)(?=<h2|$)/s);
+        if (meetupInfo) {
+            newHtml += '<h2 id="meetup-info">What We Do</h2>';
+            const cards = meetupInfo[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>/gs);
+            if (cards) {
+                cards.forEach(card => {
+                    newHtml += '<div class="card">' + card + '</div>';
+                });
+            }
+        }
+        
+        // Process Get Involved section
+        const getInvolved = html.match(/<h2[^>]*id="get-involved"[^>]*>.*?<\/h2>(.*?)(?=<h2|$)/s);
+        if (getInvolved) {
+            newHtml += '<h2 id="get-involved">Get Involved</h2>';
+            const cards = getInvolved[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>/gs);
+            if (cards) {
+                cards.forEach(card => {
+                    newHtml += '<div class="card">' + card + '</div>';
+                });
+            }
+        }
+        
+        // Process Questionnaire section
+        const questionnaire = html.match(/<h2[^>]*id="we-want-to-hear-from-you"[^>]*>.*?<\/h2>(.*?)(?=<\/div>|$)/s);
+        if (questionnaire) {
+            newHtml += '<h2 id="we-want-to-hear-from-you">We Want To Hear From You!</h2>';
+            const card = questionnaire[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>(\s*<p[^>]*>.*?<\/p>)?/s);
+            if (card) {
+                // Convert link to button
+                let cardHtml = card[0];
+                cardHtml = cardHtml.replace(/<a[^>]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g, '<a href="$1" class="btn">$2</a>');
+                newHtml += '<div class="card">' + cardHtml + '</div>';
+            }
+        }
+        
+        content.innerHTML = newHtml;
+    });
+    </script>
 {{ end }}

public/index.html

@@ -170,21 +170,19 @@
         <div class="container">
             
     <div class="content-wrapper">
-        <p>We&rsquo;re a grassroots group dedicated to Bitcoin education, adoption, and community building in Wichita, Kansas. Whether you&rsquo;re a seasoned Bitcoiner or just curious about digital currency, you&rsquo;ll find a welcoming community here.</p>
+        <p>We&rsquo;re a grassroots group dedicated to Bitcoin education, adoption, and community building in south-central Kansas. Whether you&rsquo;re an OG or just starting to learn about Bitcoin, you&rsquo;re more than welcome.</p>
 <h2 id="meetup-info">What We Do</h2>
 <h3 id="-educational-sessions">📚 Educational Sessions</h3>
 <p>Learn about Bitcoin technology, wallet security, mining, and best practices from experienced community members.</p>
-<h3 id="-monthly-meetups">🤝 Monthly Meetups</h3>
+<h3 id="-meetups">🤝 Meetups</h3>
 <p>Join us for informal gatherings to discuss Bitcoin news, share experiences, and network with local enthusiasts.</p>
 <h3 id="-bitcoin-adoption">🎯 Bitcoin Adoption</h3>
 <p>Help promote Bitcoin awareness and adoption in Wichita through community outreach and merchant education.</p>
 <h2 id="get-involved">Get Involved</h2>
-<h3 id="-monthly-meetups-1">📅 Monthly Meetups</h3>
+<h3 id="-meetups-1">📅 Meetups</h3>
-<p><strong>When:</strong> First Thursday of each month<br>
+<p><strong>Location:</strong> Various locations around Wichita
-<strong>Time:</strong> 6:30 PM - 8:30 PM<br>
+<strong>Date/Time:</strong> TBD
-<strong>Where:</strong> Various locations around Wichita</p>
+Sign up for our mailing list for notifications about our next event!</p>
-<h3 id="-stay-connected">💬 Stay Connected</h3>
-<p>Join our online community to stay updated on events, ask questions, and connect with other Bitcoin enthusiasts.</p>
 <h3 id="-learn-more">🎓 Learn More</h3>
 <p>Resources for beginners and advanced users alike. No prior Bitcoin knowledge required - curiosity is enough!</p>
 <h2 id="we-want-to-hear-from-you">We Want To Hear From You!</h2>
@@ -202,57 +200,24 @@
             text-align: center;
         }
         
-        .content-wrapper h3 {
+        .content-wrapper .card h3 {
-            color: #f7931a;
-            font-size: 1.5rem;
-            margin: 1.5rem 0 1rem;
-        }
-        
-        .content-wrapper h4 {
             color: #f7931a;
             font-size: 1.25rem;
             margin-bottom: 1rem;
         }
         
-        .content-wrapper p {
+        .content-wrapper .card p {
-            max-width: 800px;
-            margin: 0 auto 1rem;
             font-size: 1.1rem;
             color: #ccc;
             text-align: center;
+            margin-bottom: 0;
         }
         
-        .content-wrapper strong {
+        .content-wrapper .card strong {
             color: #fff;
         }
         
-        .content-wrapper a {
+        .content-wrapper .card {
-            color: #f7931a;
-            text-decoration: none;
-            transition: color 0.2s;
-        }
-        
-        .content-wrapper a:hover {
-            color: #ff9500;
-        }
-        
-         
-        .content-wrapper > h3 + p {
-            background: #111;
-            padding: 2rem;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(255,255,255,0.1);
-            text-align: center;
-        }
-        
-         
-        .content-wrapper h3[id="meetup-info"],
-        .content-wrapper h3[id="get-involved"] {
-            text-align: center;
-        }
-        
-        .content-wrapper h3[id="meetup-info"] ~ h4,
-        .content-wrapper h3[id="get-involved"] ~ h4 {
             background: #111;
             padding: 2rem;
             border-radius: 10px;
@@ -262,13 +227,7 @@
             max-width: 400px;
         }
         
-        .content-wrapper h3[id="meetup-info"] ~ h4 h4,
+        .content-wrapper .btn {
-        .content-wrapper h3[id="get-involved"] ~ h4 h4 {
-            margin-bottom: 1rem;
-        }
-        
-         
-        .content-wrapper a[href*="google.com/forms"] {
             display: inline-block;
             background: white;
             color: #f7931a;
@@ -280,12 +239,67 @@
             margin-top: 1rem;
         }
         
-        .content-wrapper a[href*="google.com/forms"]:hover {
+        .content-wrapper .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(0,0,0,0.2);
         }
     </style>
 
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const content = document.querySelector('.content-wrapper');
+        const html = content.innerHTML;
+        
+        
+        let newHtml = '';
+        
+        
+        const firstP = html.match(/<p[^>]*>(.*?)<\/p>/);
+        if (firstP) {
+            newHtml += '<div class="card">' + firstP[0] + '</div>';
+        }
+        
+        
+        const meetupInfo = html.match(/<h2[^>]*id="meetup-info"[^>]*>.*?<\/h2>(.*?)(?=<h2|$)/s);
+        if (meetupInfo) {
+            newHtml += '<h2 id="meetup-info">What We Do</h2>';
+            const cards = meetupInfo[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>/gs);
+            if (cards) {
+                cards.forEach(card => {
+                    newHtml += '<div class="card">' + card + '</div>';
+                });
+            }
+        }
+        
+        
+        const getInvolved = html.match(/<h2[^>]*id="get-involved"[^>]*>.*?<\/h2>(.*?)(?=<h2|$)/s);
+        if (getInvolved) {
+            newHtml += '<h2 id="get-involved">Get Involved</h2>';
+            const cards = getInvolved[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>/gs);
+            if (cards) {
+                cards.forEach(card => {
+                    newHtml += '<div class="card">' + card + '</div>';
+                });
+            }
+        }
+        
+        
+        const questionnaire = html.match(/<h2[^>]*id="we-want-to-hear-from-you"[^>]*>.*?<\/h2>(.*?)(?=<\/div>|$)/s);
+        if (questionnaire) {
+            newHtml += '<h2 id="we-want-to-hear-from-you">We Want To Hear From You!</h2>';
+            const card = questionnaire[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>(\s*<p[^>]*>.*?<\/p>)?/s);
+            if (card) {
+                
+                let cardHtml = card[0];
+                cardHtml = cardHtml.replace(/<a[^>]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g, '<a href="$1" class="btn">$2</a>');
+                newHtml += '<div class="card">' + cardHtml + '</div>';
+            }
+        }
+        
+        content.innerHTML = newHtml;
+    });
+    </script>
+
         </div>
     </main>