Implement JavaScript card transformation: Read markdown content, create proper card divs with header+description
This commit is contained in:
Wichita Bitcoiners
parent
04749e9857
commit
fdc9102cc1
3 changed files with 136 additions and 111 deletions
|
|
@ -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
|
||||
**Time:** 6:30 PM - 8:30 PM
|
||||
**Where:** Various locations around Wichita
|
||||
|
||||
### 💬 Stay Connected
|
||||
|
||||
Join our online community to stay updated on events, ask questions, and connect with other Bitcoin enthusiasts.
|
||||
**Location:** Various locations around Wichita
|
||||
**Date/Time:** TBD
|
||||
Sign up for our mailing list for notifications about our next event!
|
||||
|
||||
### 🎓 Learn More
|
||||
|
||||
|
|
|
|||
|
|
@ -11,57 +11,24 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.content-wrapper h3 {
|
||||
color: #f7931a;
|
||||
font-size: 1.5rem;
|
||||
margin: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.content-wrapper h4 {
|
||||
.content-wrapper .card h3 {
|
||||
color: #f7931a;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content-wrapper p {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 1rem;
|
||||
.content-wrapper .card p {
|
||||
font-size: 1.1rem;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content-wrapper strong {
|
||||
.content-wrapper .card strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-wrapper a {
|
||||
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 {
|
||||
.content-wrapper .card {
|
||||
background: #111;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -71,13 +38,7 @@
|
|||
max-width: 400px;
|
||||
}
|
||||
|
||||
.content-wrapper h3[id="meetup-info"] ~ h4 h4,
|
||||
.content-wrapper h3[id="get-involved"] ~ h4 h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Questionnaire button styling */
|
||||
.content-wrapper a[href*="google.com/forms"] {
|
||||
.content-wrapper .btn {
|
||||
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 }}
|
||||
|
|
@ -170,21 +170,19 @@
|
|||
<div class="container">
|
||||
|
||||
<div class="content-wrapper">
|
||||
<p>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.</p>
|
||||
<p>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.</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>
|
||||
<p><strong>When:</strong> First Thursday of each month<br>
|
||||
<strong>Time:</strong> 6:30 PM - 8:30 PM<br>
|
||||
<strong>Where:</strong> Various locations around Wichita</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="-meetups-1">📅 Meetups</h3>
|
||||
<p><strong>Location:</strong> Various locations around Wichita
|
||||
<strong>Date/Time:</strong> TBD
|
||||
Sign up for our mailing list for notifications about our next event!</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 {
|
||||
color: #f7931a;
|
||||
font-size: 1.5rem;
|
||||
margin: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.content-wrapper h4 {
|
||||
.content-wrapper .card h3 {
|
||||
color: #f7931a;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content-wrapper p {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 1rem;
|
||||
.content-wrapper .card p {
|
||||
font-size: 1.1rem;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content-wrapper strong {
|
||||
.content-wrapper .card strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content-wrapper a {
|
||||
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 {
|
||||
.content-wrapper .card {
|
||||
background: #111;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -262,13 +227,7 @@
|
|||
max-width: 400px;
|
||||
}
|
||||
|
||||
.content-wrapper h3[id="meetup-info"] ~ h4 h4,
|
||||
.content-wrapper h3[id="get-involved"] ~ h4 h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.content-wrapper a[href*="google.com/forms"] {
|
||||
.content-wrapper .btn {
|
||||
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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue