adding stuff

content/camp-form.md

@@ -8,7 +8,7 @@ template: "simple_page.html"
 
 {{ floating_button(icon="chevron-down" text="To the form!" link="#form")}}
 
-{{ pt(src="https://videos.tfcconnection.org/videos/embed/757dc0dd-9bdc-4d79-8f81-754249ff23d2" width="700" height="576")}}
+{{ pt(src="https://videos.tfcconnection.org/videos/embed/0e6378c4-bb58-4fb1-8edf-72b73efc5ad2" width="700" height="576") }}
 {{ spacing(height="h-4")}}
 
 We hope you are as excited about camp as we are! If there is anything we can do to answer your questions and help you to get signed up for camp, please let us know! You can email any of us by going to the [contact page](/contact).

content/ministries/camp/2024/index.md

@@ -0,0 +1,26 @@
+---
+title: 2024 TFC Camp - Anchors Aweigh
+date: 2024-07-16
+description:  Join us for an adventure diving deep into the sea! We are studying the anchors of sin that weigh us down. Come find out more!
+---
+
+# Make Sure You Are Ready!
+
+To come to camp, you should make sure you are ready! Follow this checklist to make sure you are ready:  
+
+-   Have my money for camp! (If you haven't paid the full amount, you likely owe $100. We also have a snack shop you may want to bring some more for!)
+-   Health form! If you haven't filled it out you can do so [here](file:///camp-health-form)!
+-   Packed and ready?
+-   Bible: Bring a paper Bible!
+-   Leave your phone and other electronics at home!
+
+
+## Pray for open hearts and lives changed
+
+Camp is one of those times of the year where God works in incredible ways. Often times the sheer amount of time and intentionality of diving into God's Word and seeing ourselves reflected there helps to change us. Please be praying for the campers who will be there!  
+
+
+## Donations
+
+If you have any donations you'd like to give toward camp please go [here](https://secure.myvanco.com/L-Z772/campaign/C-13PK8) to give a monetary donation. If you'd like to give a food donation of some sort, please bring it by the TFC Office!  
+

content/ministries/camp/2024/index.org

@@ -1,35 +0,0 @@
----
-#+TITLE: 2024 TFC Camp - Anchors Aweigh
-TITLE: 2024 TFC Camp - Anchors Aweigh
-#+DATE: 2024-07-16
-DATE: 2024-07-16
-tags:
-   - Camp
-   - Anchors Aweigh
-featured_image: "featured.jpg"
-description: Anchors Aweigh
-summary: Join us for an adventure diving deep into the sea! We are studying the anchors of sin that weigh us down. Come find out more!
-showAuthor: false
-showAuthorsBadge: true
-showTaxonomies: true
-showReadingTime: true
-showWordCount: true
-showDate: true
-layout: hero
-heroStyle: background
-showTableOfContents: false
----
-
-* Make Sure You Are Ready!
-To come to camp, you should make sure you are ready! Follow this checklist to make sure you are ready:
-- Have my money for camp! (If you haven't paid the full amount, you likely owe $100. We also have a snack shop you may want to bring some more for!)
-- Health form! If you haven't filled it out you can do so [[/camp-health-form][here]]!
-- Packed and ready?
-- Bible: Bring a paper Bible!
-- Leave your phone and other electronics at home!
-
-** Pray for open hearts and lives changed
-Camp is one of those times of the year where God works in incredible ways. Often times the sheer amount of time and intentionality of diving into God's Word and seeing ourselves reflected there helps to change us. Please be praying for the campers who will be there!
-
-** Donations
-If you have any donations you'd like to give toward camp please go [[https://secure.myvanco.com/L-Z772/campaign/C-13PK8][here]] to give a monetary donation. If you'd like to give a food donation of some sort, please bring it by the TFC Office!

content/staff/chris-and-abbie-cochrun/2024-07/index.md

@@ -1,23 +1,17 @@
 ---
 title: The Mystery of Camp
-
 date: 2024-08-09
-
+description: More than anything I've yet to experience, TFC Camp is a magical place. I have loved it so much since I was a teenager and went myself. It was the place God changed my life...
-taxonomies:
+extra:
-    tags:
+    image: "featured.jpg"
-    - Chris & Abbie Cochrun
+    tags: ["Staff", "Northern Valley"]
-    - Camp
-    - Newsletter
-
-featured~image~: \"featured.jpg\"
-description: More than anything I\'ve yet to experience, TFC Camp is a magical place. I have loved it so much since I was a teenager and went myself. It was the place God changed my life...
 ---
 
-# The Mystery of Camp {#the-mystery-of-camp-1}
+# The Mystery of Camp
 
-More than anything I\'ve yet to experience, TFC Camp is a magical place. I have loved it so much since I was a teenager and went myself. It was the place God changed my life, and the place where I found so many incredible friends that shaped who I became. I\'ve never been able to put into words quite how astounding camp is and what God has done there. This year, I was blessed with having some remarkable conversations with kids and volunteers alike about their experience at camp, and their joy as God did His thing there yet again. I thought I would share some of the cool things they said in this months newsletter. Check them our below!
+More than anything I've yet to experience, TFC Camp is a magical place. I have loved it so much since I was a teenager and went myself. It was the place God changed my life, and the place where I found so many incredible friends that shaped who I became. I've never been able to put into words quite how astounding camp is and what God has done there. This year, I was blessed with having some remarkable conversations with kids and volunteers alike about their experience at camp, and their joy as God did His thing there yet again. I thought I would share some of the cool things they said in this months newsletter. Check them our below!
 
-{{\< figure src=asa.jpg alt=\"Asa and the kid he poured hours into!\" caption=\"Asa and the kid he poured hours into!\" \>}}
+{{ img(path="asa.jpg" alt="Asa and the kid he poured hours into!" caption="Asa and the kid he poured hours into!")}}
 
 > "This week has been incredible. I got to help in the kitchen at the first week of TFC camp and I am SO thankful for that!! This year my kids attended their second year and I was invited to help serve in the kitchen and got to bring my littles. It was hard work. It was exhausting. It was NOT enough sleep. But it was also one of the biggest blessings to myself and my children. The staff are unparalleled. Exceptional. More than my vocabulary can describe. The way they pour out love on every single person in their path. The way they spread the gospel and Jesus' love on anything that moves. The respect, appreciation, encouragement, love, kindness and joy that they spread thicker than sand at the beach. Our week at TFC camp was beyond the words that I can express. It was such a blessing to me, and I truly believe that every moment my kids get to spend at TFC camp will bless them and change them for the rest of their lives."
 >
@@ -25,7 +19,7 @@ More than anything I\'ve yet to experience, TFC Camp is a magical place. I have
 
 How cool is that!!
 
-{{\< figure src=devo.jpg alt=\"It\'s amazing watching kids do their devos in front of the cross!!\" caption=\"It\'s amazing watching kids do their devos in front of the cross!!\" \>}}
+{{ img(path="devo.jpg" alt="It's amazing watching kids do their devos in front of the cross!!" caption="It's amazing watching kids do their devos in front of the cross!!")}}
 
 And here is a text my wife received after the first week of camp:
 
@@ -33,13 +27,13 @@ And here is a text my wife received after the first week of camp:
 
 Larry was on staff with us several years ago, and went to be with Jesus in 2017. He's someone we loved very dearly, he even helped officiate our wedding! Larry had a personality and gift for just chatting with kids and loving on them well. He had many conversations about Jesus with kids that changed lives all over the place. He, more than anyone I know, was all about Jesus. Furthermore, he loved teenagers well, and loved talking with kids about life and Jesus. It's an honor to be compared to him!
 
-{{\< figure src=skit.jpg alt=\"The kids who did a powerful skit on our last night praying for their peers!\" caption=\"The kids who did a powerful skit on our last night praying for their peers!\" \>}}
+{{ img(path="skit.jpg" alt="The kids who did a powerful skit on our last night praying for their peers!" caption="The kids who did a powerful skit on our last night praying for their peers!")}}
 
-Finally, here is a message from Jack Hager, whom we\'ve had speak at camp for years and has spoke at tons of other camps too. He and his wife Jane visited these last two weeks to help out.
+Finally, here is a message from Jack Hager, whom we've had speak at camp for years and has spoke at tons of other camps too. He and his wife Jane visited these last two weeks to help out.
 
-> "Just a written reminder that you guys are amazing. As you know, I\'ve spoken at a few camps over the decades...and although \"Camp Joy\" in and of itself is not on the top ten, TFC Connection camp is number one.
+> "Just a written reminder that you guys are amazing. As you know, I've spoken at a few camps over the decades...and although "Camp Joy" in and of itself is not on the top ten, TFC Connection camp is number one.
 > Why?
-> The blood, sweat, and tears of the months of preparation that are brought to fruition during the two weeks. It was a privilege and joy to sit in on one of the planning meetings for \"Cave\" week, so I know a bit of what goes on. But just a bit. All I know for sure is that the programming fleshes out to opportunities to steer the thinking of campers and thus impact them with the message of hope in a wide variety of ways. I do not believe there is anything like TFC anywhere in the country. There may be, but not known to me."
+> The blood, sweat, and tears of the months of preparation that are brought to fruition during the two weeks. It was a privilege and joy to sit in on one of the planning meetings for "Cave" week, so I know a bit of what goes on. But just a bit. All I know for sure is that the programming fleshes out to opportunities to steer the thinking of campers and thus impact them with the message of hope in a wide variety of ways. I do not believe there is anything like TFC anywhere in the country. There may be, but not known to me."
 >
 > -   Jack Hager
 
@@ -49,19 +43,19 @@ Reading what other people thought about camp, is so affirming of what I believe
 
 ### Struggles
 
-One kid I talked to had been struggling with some things for many years and was wanting to set things right. After he and I chatted about his struggles being all too common, you could just see his shoulders straightening. We talked about how God wants nothing more than to forgive him and give him strength to overcome it. We prayed, cried, and chatted. He called me the next week asking me to keep praying for him, and while I\'m sure he\'ll continue to struggle, as I mentioned to him, the desire to stop this thing means God is changing his heart!
+One kid I talked to had been struggling with some things for many years and was wanting to set things right. After he and I chatted about his struggles being all too common, you could just see his shoulders straightening. We talked about how God wants nothing more than to forgive him and give him strength to overcome it. We prayed, cried, and chatted. He called me the next week asking me to keep praying for him, and while I'm sure he'll continue to struggle, as I mentioned to him, the desire to stop this thing means God is changing his heart!
 
 ### Caden
 
-Caden and I had so many talks throughout this last week too that I can\'t even count them! He had questions about friendships, working in ministry, and bible questions galore! We chatted every day I believe and all of them I found myself just amazed at what God was doing in Caden\'s heart. In fact I\'m not even sure which thing to really tell you about because we just chatted so much!! But what I do know is that God was doing something in him. On our campfire night Caden sat with Theo and I and just broken by feeling lost as to what God is calling him to do in life, and feeling afraid that he\'d get it wrong. We comforted him, prayed with him, and reminded him over and over that God is big and nothing Caden does would ever stop him from accomplishing his mission, so when Caden is prayerfully doing what God wants him to do, he\'ll be just fine.
+Caden and I had so many talks throughout this last week too that I can't even count them! He had questions about friendships, working in ministry, and bible questions galore! We chatted every day I believe and all of them I found myself just amazed at what God was doing in Caden's heart. In fact I'm not even sure which thing to really tell you about because we just chatted so much!! But what I do know is that God was doing something in him. On our campfire night Caden sat with Theo and I and just broken by feeling lost as to what God is calling him to do in life, and feeling afraid that he'd get it wrong. We comforted him, prayed with him, and reminded him over and over that God is big and nothing Caden does would ever stop him from accomplishing his mission, so when Caden is prayerfully doing what God wants him to do, he'll be just fine.
 
 ### Others
 
-If I had pages and pages of newsletter, I might be able to tell you about most of the conversations I had with kids, and many too with interns. I wish I had the space to tell you all about Jeremy, Theo, Will, or Dorian, I wish I could share the heart-to-heart deep stuff about Kaylee or Cash, I wish I could tell you more about this family who sent their kids because they wanted to show their kids how they can learn about Jesus without bells and whistles at camp, and now they keep coming! Some things we hear at camp can\'t be repeated because it isn\'t our story to share, some things are just too sad, and some things are so incredible I\'m not sure anyone would believe it! Despite all that, I know this, God is good, and like He has for so long, He uses camp to do some remarkable things in the lives of kids.
+If I had pages and pages of newsletter, I might be able to tell you about most of the conversations I had with kids, and many too with interns. I wish I had the space to tell you all about Jeremy, Theo, Will, or Dorian, I wish I could share the heart-to-heart deep stuff about Kaylee or Cash, I wish I could tell you more about this family who sent their kids because they wanted to show their kids how they can learn about Jesus without bells and whistles at camp, and now they keep coming! Some things we hear at camp can't be repeated because it isn't our story to share, some things are just too sad, and some things are so incredible I'm not sure anyone would believe it! Despite all that, I know this, God is good, and like He has for so long, He uses camp to do some remarkable things in the lives of kids.
 
 ### Thank You
 
-Thank you guys for supporting us at TFC, I pray God is doing good things around your world too. If you aren\'t a part of our support team but want to be, just let me know! If you are, thank you so much for financially supporting us, it makes all this possible. And for everyone who prays for our ministry, thank you that we can rely on you to go to battle with us in prayer against much of the hard things we hear at camp. Most importantly, though, know that God is doing some cool things because you are praying!
+Thank you guys for supporting us at TFC, I pray God is doing good things around your world too. If you aren't a part of our support team but want to be, just let me know! If you are, thank you so much for financially supporting us, it makes all this possible. And for everyone who prays for our ministry, thank you that we can rely on you to go to battle with us in prayer against much of the hard things we hear at camp. Most importantly, though, know that God is doing some cool things because you are praying!
 
 # Cochrun Happenings
 
@@ -71,6 +65,6 @@ The boys got to enjoy the fair while I was at camp and loved the cotton candy an
 
 And at the end of July, Josiah turned 6 and Luke turned 4! I was at camp for their birthdays, but they came up to visit both days so it was fun to celebrate with them a bit!
 
-{{\< figure src=fam.png alt=\"Family Happenings\" caption=\"Family Happenings\" \>}}
+{{ img(path="fam.png" alt="Family Happenings" caption="Family Happenings" height=900)}}
 
 > Remember that you can help by donating [here](https://secure.myvanco.com/L-Z772/campaign/C-12WG5)! We love how God provides so we can serve this community!!

src/api/camp_form.rs

@@ -43,7 +43,7 @@ impl From<&CampForm> for HashMap<&str, String> {
     fn from(form: &CampForm) -> Self {
         let mut map = HashMap::new();
         map.insert(
-            "Full_Name",
+            "Student_Name",
             format!("{} {}", form.first_name.0, form.last_name.0),
         );
         map.insert(
@@ -52,15 +52,15 @@ impl From<&CampForm> for HashMap<&str, String> {
         );
         map.insert("Parent_Phone", form.parent_phone.0.clone());
         map.insert("Parent_Email", form.parent_email.0.clone().clone());
-        map.insert("Birth_Date", form.birthdate.0.clone());
+        map.insert("Birthdate", form.birthdate.0.clone());
         map.insert("Gender", form.gender.0.clone());
-        map.insert("Street_Address", form.street.0.clone());
+        map.insert("Street", form.street.0.clone());
         map.insert("City", form.city.0.clone());
         map.insert("State", form.state.0.clone());
-        map.insert("Zipcode", form.zip.0.clone().to_string());
+        map.insert("Zip", form.zip.0.clone().to_string());
         map.insert("Grade", form.grade.0.clone());
-        map.insert("Week_Chosen", form.week.0.clone());
+        map.insert("Week", form.week.0.clone());
-        map.insert("Shirt_Size", form.shirt.0.clone());
+        map.insert("Shirt", form.shirt.0.clone());
         map.insert("Registration", form.registration.0.clone());
         map.insert("Health_Form", form.health_form.0.clone());
         map
@@ -302,7 +302,7 @@ async fn store_camp_form(map: HashMap<&str, String>) -> Result<Response> {
     fields.insert("fields", map);
     json.insert("records", vec![fields]);
     let response = request
-        .post("https://table.tfcconnection.org/api/docs/opaHfFbgoZzdPYXhrUt2S8/tables/Camp_Data/records")
+        .post("https://table.tfcconnection.org/api/docs/opaHfFbgoZzdPYXhrUt2S8/tables/Camp_Process/records")
         .bearer_auth("b8189d1b315548aa610db2fd3a43177a967cd41f")
         .header("Content-Type", "application/json")
         .json(&json)

src/css/main.css

@@ -1,76 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-@layer base {
-  h1 {
-    @apply text-2xl;
-  }
-  h2 {
-    @apply text-xl;
-  }
-
-  p {
-    @apply pb-4;
-  }
-
-  ul, ol {
-    @apply list-outside;
-    @apply pl-6; /* Indent the list elements. */
-    @apply mb-4; /* The bottom of the list should have a margin, like the paragraphs. */
-
-    /* Lists within a list, however, should not have a bottom margin. */
-    ul, ol {
-      @apply mb-0;
-    }
-  }
-
-  ul {
-    @apply list-disc;
-  }
-
-  ol {
-    @apply list-decimal;
-  }
-
-  blockquote {
-    p {
-      @apply py-0;
-    }
-
-    @apply italic;
-    @apply border-l-2;
-    @apply border-neutral-500;
-    @apply pl-4;
-    @apply mb-4;
-    @apply text-neutral-600;
-    @apply dark:text-neutral-400;
-  }
-
-  img {
-      @apply py-0;
-      @apply rounded-lg;
-      @apply shadow-xl;
-      @apply object-cover;
-  }
-}
-
-/* Global default styles */
-html {
-  scroll-behavior: smooth;
-}
-
-/* Default Pages content styles */
-#page-content a {
-    @apply underline;
-}
-#page-content p, h2 {
-    @apply py-4;
-}
-#page-content :is(h1, h2, h3, h4, h5, h6) {
-    @apply underline;
-}
-#page-content pre {
-    @apply p-4 my-4 overflow-x-auto;
-}

src/js/lang.js

@@ -1,7 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-    document.getElementById('switch-lang')?.addEventListener('click', switchLang);
-})
-
-function switchLang(event) {
-    document.getElementById('switch-lang-panel').classList.toggle('hidden')
-}

src/js/main.js

@@ -1,78 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-  // ---------------- Selected Navbar Link -------------------------
-  let navbar_links = document.querySelectorAll('.nav-links a');
-  let trim_last_slash = window.location.href.replace(/\/$/, '');
-  let selected_navbar_link = [...navbar_links].filter((item) => {
-    return ((item.href === trim_last_slash) || (item.href === window.location.href))
-  })
-  if (selected_navbar_link.length !== 0) {
-    for (let element of selected_navbar_link) {
-      element.className = "bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium"
-    }
-  }
-
-  // ---------------- Switch Theme -------------------------
-  // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.classList.add('dark')
-    document.getElementById('dark').classList.add('hidden');
-    document.getElementById("syntax_highlight").href = "/syntax-dark.css";
-  } else {
-    document.documentElement.classList.remove('dark')
-    document.getElementById('light').classList.add('hidden');
-    document.getElementById("syntax_highlight").href = "/syntax-light.css";
-  }
-  // Switch theme action
-  document.getElementById('switch-theme')?.addEventListener('click', switchTheme);
-
-  // ---------------- Toggle Sidebar -------------------------
-  document.getElementById('toggle-sidebar')?.addEventListener('click', toggleSidebar);
-
-  // ---------------- Toggle Mobile menu -------------------------
-  document.getElementById('toggle-mobile-menu')?.addEventListener('click', toggleMobileMenu);
-});
-
-function switchTheme() {
-  let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
-  if (current_theme === 'dark') {
-    localStorage.theme = 'light';
-    document.documentElement.classList.remove('dark');
-    document.getElementById('light').classList.add('hidden');
-    document.getElementById('dark').classList.remove('hidden');
-    document.getElementById("syntax_highlight").href = "/syntax-light.css";
-  } else {
-    localStorage.theme = 'dark';
-    document.documentElement.classList.add('dark');
-    document.getElementById('dark').classList.add('hidden');
-    document.getElementById('light').classList.remove('hidden');
-    document.getElementById("syntax_highlight").href = "/syntax-dark.css";
-  }
-}
-
-function toggleSidebar() {
-  let sidebar = document.getElementById('sidebar');
-  if ([...sidebar.classList].includes('translate-x-0')) {
-    document.body.style.removeProperty("overflow")
-    sidebar.classList.remove('translate-x-0')
-    sidebar.classList.add('-translate-x-full')
-  } else {
-    document.body.style.setProperty("overflow", "hidden")
-    sidebar.classList.remove('-translate-x-full')
-    sidebar.classList.add('translate-x-0')
-  }
-}
-
-function toggleMobileMenu() {
-  let menu = document.querySelector('#mobile-menu div.nav-links');
-  if ([...menu.classList].includes('h-screen')) {
-    document.body.classList.remove("overflow-hidden", "relative")
-    document.documentElement.classList.remove("overscroll-none",)
-    menu.classList.remove('h-screen')
-    menu.classList.add('h-0')
-  } else {
-    document.body.classList.add("overflow-hidden", "relative")
-    document.documentElement.classList.add("overscroll-none",)
-    menu.classList.remove('h-0')
-    menu.classList.add('h-screen')
-  }
-}

src/js/page.js

@@ -1,38 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-  // ---------------- TOC Scrollspy --------------------
-  if (document.getElementById('toc') !== null) {
-
-    const table_of_content_links = document.querySelectorAll('#toc li a')
-
-    let page_titles_ids = [];
-    [...table_of_content_links].forEach((item)=> {
-      page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
-    })
-    const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));
-
-    let reversed_title_elements = [...page_titles_elements].reverse();
-    let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
-    findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
-    var previous_elem = elem
-
-    window.addEventListener('scroll', () => {
-      let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];
-
-      if (element !== previous_elem) {
-        findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
-        findCorrespondingTocTitle(element).classList.add('bg-blue-700')
-        previous_elem = element
-      }
-    })
-  }
-});
-function getActiveTocElement(elements) {
-  return [...elements].find((item) => {
-    return (item.getBoundingClientRect().y <= 0)
-  })
-}
-function findCorrespondingTocTitle(element) {
-  return [...document.querySelectorAll('#toc li a')].find((item) => {
-    return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
-  })
-}

src/js/search.js

@@ -1,121 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-  // let search_input = document.getElementById('search').addEventListener('click', openSearch)
-
-  // var openmodal = document.querySelectorAll('.modal-open')
-  // for (var i = 0; i < openmodal.length; i++) {
-  //   openmodal[i].addEventListener('click', function(event){
-  //     event.preventDefault()
-  //     toggleSearchModal()
-  //   })
-  // }
-  let nav_search_input = document.getElementById('search');
-  nav_search_input.addEventListener('click', function(event){
-    event.preventDefault()
-    toggleSearchModal()
-  })
-
-  const overlay = document.querySelector('.modal-overlay')
-  overlay.addEventListener('click', toggleSearchModal)
-
-  let closemodal = document.querySelectorAll('.modal-close')
-  // closemodal.addEventListener('click', toggleSearchModal)
-  for (var i = 0; i < closemodal.length; i++) {
-    closemodal[i].addEventListener('click', toggleSearchModal)
-  }
-
-  document.onkeydown = function(evt) {
-    evt = evt || window.event
-    let isEscape = false
-    let isCmdK = false
-    if ("key" in evt) {
-      isEscape = (evt.key === "Escape" || evt.key === "Esc")
-      isCmdK = (evt.key === "k" && evt.metaKey === true)
-    } else {
-      isCmdK = (evt.keyCode === 75 && evt.metaKey)
-      isEscape = (evt.keyCode === 27)
-    }
-    if (isCmdK) { evt.preventDefault() }
-    if ((isEscape && document.body.classList.contains('search-active')) || isCmdK) {
-      toggleSearchModal();
-    }
-  };
-
-  let search_index = elasticlunr.Index.load(window.searchIndex);
-  let elasticlunr_options = {
-    bool: "AND",
-    fields: {
-      title: {boost: 2},
-      body: {boost: 1},
-    }
-  };
-  let search_term = "";
-  let search_results = "";
-  let search_input = document.getElementById('search-input');
-  let search_results_container = document.getElementById('search-results');
-  search_input.addEventListener('keyup', function(event) {
-    // Trigger search
-    if ([...document.body.classList].includes('search-active') && search_input.value.trim().length > 3) {
-      // console.log('search')
-      search_term = search_input.value.trim();
-      // console.log(search_term)
-      search_results = search_index.search(search_term, elasticlunr_options);
-      // console.log(search_results)
-      if (Array.isArray(search_results) && search_results.length > 0) {
-        let result_list = document.getElementById('results-list');
-        result_list.replaceChildren();
-        let item = "";
-        for (i = 0; i < search_results.length; i++) {
-          let item = formatResultItem(search_results[i]);
-          result_list.appendChild(item);
-        }
-      }
-      // if (results.length === 0) {
-      //   $searchResults.style.display = "none";
-      //   return;
-      // }
-    }
-  })
-});
-
-function toggleSearchModal () {
-  const modal = document.getElementById('search-modal')
-  modal.classList.toggle('opacity-0')
-  modal.classList.toggle('pointer-events-none')
-  document.body.classList.toggle('search-active')
-  if ([...document.body.classList].includes('search-active')) {
-    // window.setTimeout(function() {
-    document.getElementById('search-input').value = ""
-    document.getElementById('search-input').focus()
-    // }, 500);
-  }
-}
-
-function formatResultItem(search_result) {
-  console.log(search_result)
-  let formatted_result = `<li class="flex hover:bg-gray-200 dark:hover:bg-gray-600 text-black dark:text-gray-200 p-2 rounded-lg border border-black dark:border-gray-200 bg-gray-200 dark:bg-gray-500 rounded-lg hover:shadow-xl mb-2">
-  <a href="${search_result.doc.path}">
-  <span class="text-xl text-bold">${search_result.doc.title}</span>
-  <span class="text-lg">${search_result.doc.description}</span>
-  </a>
-  </li>`
-  return htmlToElement(formatted_result)
-}
-
-// Credits : https://stackoverflow.com/a/35385518/7098666
-function htmlToElement(html) {
-    let template = document.createElement('template');
-    html = html.trim();
-    template.innerHTML = html;
-    return template.content.firstChild;
-}
-
-// function openSearch() {
-//   console.log("open modal");
-//   let search_modal = document.getElementById('search-modal');
-//   search_modal.classList.remove('hidden');
-//   console.log(search_modal);
-// }
-
-// function search() {
-//   let index = elasticlunr.Index.load(window.searchIndex);
-// }

static/css/main.css

@@ -310,9 +310,6 @@
   .m-300 {
     margin: calc(var(--spacing) * 300);
   }
-  .mx-5 {
-    margin-inline: calc(var(--spacing) * 5);
-  }
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
@@ -542,9 +539,6 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-2 {
-    flex: 2;
-  }
   .flex-3 {
     flex: 3;
   }
@@ -718,13 +712,9 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
-  .border-t-2 {
+  .border-y-2 {
-    border-top-style: var(--tw-border-style);
+    border-block-style: var(--tw-border-style);
-    border-top-width: 2px;
+    border-block-width: 2px;
-  }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
   }
   .border-black {
     border-color: var(--color-black);
@@ -819,9 +809,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1532,11 +1519,6 @@
       height: calc(var(--spacing) * 72);
     }
   }
-  .md\:w-1\/3 {
-    @media (width >= 48rem) {
-      width: calc(1/3 * 100%);
-    }
-  }
   .md\:w-full {
     @media (width >= 48rem) {
       width: 100%;
@@ -1547,11 +1529,6 @@
       max-width: var(--container-md);
     }
   }
-  .md\:flex-1 {
-    @media (width >= 48rem) {
-      flex: 1;
-    }
-  }
   .md\:flex-2 {
     @media (width >= 48rem) {
       flex: 2;
@@ -1567,11 +1544,6 @@
       flex-basis: calc(3/4 * 100%);
     }
   }
-  .md\:basis-full {
-    @media (width >= 48rem) {
-      flex-basis: 100%;
-    }
-  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1591,11 +1563,40 @@
       }
     }
   }
+  .md\:border {
+    @media (width >= 48rem) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .md\:border-2 {
+    @media (width >= 48rem) {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .md\:border-gray-200 {
+    @media (width >= 48rem) {
+      border-color: var(--color-gray-200);
+    }
+  }
   .md\:px-0 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 0);
     }
   }
+  .md\:text-sm {
+    @media (width >= 48rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .md\:shadow-2xl {
+    @media (width >= 48rem) {
+      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .lg\:block {
     @media (width >= 64rem) {
       display: block;
@@ -1661,11 +1662,6 @@
       background-color: var(--color-blue-800);
     }
   }
-  .dark\:bg-gray-500 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-500);
-    }
-  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -1742,6 +1738,13 @@
       }
     }
   }
+  .md\:dark\:border-black {
+    @media (width >= 48rem) {
+      @media (prefers-color-scheme: dark) {
+        border-color: var(--color-black);
+      }
+    }
+  }
   .\[\&\>\*\]\:py-4 {
     &>* {
       padding-block: calc(var(--spacing) * 4);

static/js/main.js

@@ -1 +1,91 @@
-function switchTheme(){"dark"==([...document.documentElement.classList].includes("dark")?"dark":"light")?(localStorage.theme="light",document.documentElement.classList.remove("dark"),document.getElementById("light").classList.add("hidden"),document.getElementById("dark").classList.remove("hidden"),document.getElementById("syntax_highlight").href="/syntax-light.css"):(localStorage.theme="dark",document.documentElement.classList.add("dark"),document.getElementById("dark").classList.add("hidden"),document.getElementById("light").classList.remove("hidden"),document.getElementById("syntax_highlight").href="/syntax-dark.css")}function toggleSidebar(){var e=document.getElementById("sidebar");[...e.classList].includes("translate-x-0")?(document.body.style.removeProperty("overflow"),e.classList.remove("translate-x-0"),e.classList.add("-translate-x-full")):(document.body.style.setProperty("overflow","hidden"),e.classList.remove("-translate-x-full"),e.classList.add("translate-x-0"))}function toggleMobileMenu(){var e=document.querySelector("#mobile-menu div.nav-links");[...e.classList].includes("h-screen")?(document.body.classList.remove("overflow-hidden","relative"),document.documentElement.classList.remove("overscroll-none"),e.classList.remove("h-screen"),e.classList.add("h-0")):(document.body.classList.add("overflow-hidden","relative"),document.documentElement.classList.add("overscroll-none"),e.classList.remove("h-0"),e.classList.add("h-screen"))}document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".nav-links a");let t=window.location.href.replace(/\/$/,"");e=[...e].filter(e=>e.href===t||e.href===window.location.href);if(0!==e.length)for(var d of e)d.className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium";"dark"===localStorage.theme||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?(document.documentElement.classList.add("dark"),document.getElementById("dark").classList.add("hidden"),document.getElementById("syntax_highlight").href="/syntax-dark.css"):(document.documentElement.classList.remove("dark"),document.getElementById("light").classList.add("hidden"),document.getElementById("syntax_highlight").href="/syntax-light.css"),document.getElementById("switch-theme")?.addEventListener("click",switchTheme),document.getElementById("toggle-sidebar")?.addEventListener("click",toggleSidebar),document.getElementById("toggle-mobile-menu")?.addEventListener("click",toggleMobileMenu)});
+document.addEventListener("DOMContentLoaded", function() {
+    // ---------------- Selected Navbar Link -------------------------
+    let navbar_links = document.querySelectorAll('.nav-links a');
+    let trim_last_slash = window.location.href.replace(/\/$/, '');
+    let selected_navbar_link = [...navbar_links].filter((item) => {
+        return ((item.href === trim_last_slash) || (item.href === window.location.href))
+    })
+    if (selected_navbar_link.length !== 0) {
+        for (let element of selected_navbar_link) {
+            element.className = "bg-gray-900 text-white px-3 py-2 rounded-md md:text-sm text-3xl font-medium"
+        }
+    }
+
+    // ---------------- Image Zoom -------------------------
+    // Probably should only grab the images we want but whatever
+    const images = document.querySelectorAll('img');
+    for (let img of images){
+        img.addEventListener('click', zoomImage(img));
+    }
+
+    // ---------------- Switch Theme -------------------------
+    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark')
+        document.getElementById('dark').classList.add('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-dark.css";
+    } else {
+        document.documentElement.classList.remove('dark')
+        document.getElementById('light').classList.add('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-light.css";
+    }
+    // Switch theme action
+    document.getElementById('switch-theme')?.addEventListener('click', switchTheme);
+
+    // ---------------- Toggle Sidebar -------------------------
+    document.getElementById('toggle-sidebar')?.addEventListener('click', toggleSidebar);
+
+    // ---------------- Toggle Mobile menu -------------------------
+    document.getElementById('toggle-mobile-menu')?.addEventListener('click', toggleMobileMenu);
+});
+
+function zoomImage(img) {
+    const zoom = mediumZoom(img, {
+        background: "#282a36dd"
+    });
+}
+
+function switchTheme() {
+    let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
+    if (current_theme === 'dark') {
+        localStorage.theme = 'light';
+        document.documentElement.classList.remove('dark');
+        document.getElementById('light').classList.add('hidden');
+        document.getElementById('dark').classList.remove('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-light.css";
+    } else {
+        localStorage.theme = 'dark';
+        document.documentElement.classList.add('dark');
+        document.getElementById('dark').classList.add('hidden');
+        document.getElementById('light').classList.remove('hidden');
+        document.getElementById("syntax_highlight").href = "/syntax-dark.css";
+    }
+}
+
+function toggleSidebar() {
+    let sidebar = document.getElementById('sidebar');
+    if ([...sidebar.classList].includes('translate-x-0')) {
+        document.body.style.removeProperty("overflow")
+        sidebar.classList.remove('translate-x-0')
+        sidebar.classList.add('-translate-x-full')
+    } else {
+        document.body.style.setProperty("overflow", "hidden")
+        sidebar.classList.remove('-translate-x-full')
+        sidebar.classList.add('translate-x-0')
+    }
+}
+
+function toggleMobileMenu() {
+    let menu = document.querySelector('#mobile-menu div.nav-links');
+    if ([...menu.classList].includes('h-screen')) {
+        document.body.classList.remove("overflow-hidden", "relative")
+        document.documentElement.classList.remove("overscroll-none",)
+        menu.classList.remove('h-screen')
+        menu.classList.add('h-0')
+    } else {
+        document.body.classList.add("overflow-hidden", "relative")
+        document.documentElement.classList.add("overscroll-none",)
+        menu.classList.remove('h-0')
+        menu.classList.add('h-screen')
+    }
+}

static/js/page.js

@@ -1 +1,38 @@
-function getActiveTocElement(e){return[...e].find(e=>e.getBoundingClientRect().y<=0)}function findCorrespondingTocTitle(n){return[...document.querySelectorAll("#toc li a")].find(e=>e.href.substring(e.href.indexOf("#"))==="#"+n.id)}document.addEventListener("DOMContentLoaded",function(){if(null!==document.getElementById("toc")){var e=document.querySelectorAll("#toc li a");let n=[],t=([...e].forEach(e=>{n.push(e.href.substring(e.href.indexOf("#")))}),document.querySelectorAll(n.join(","))),i=[...t].reverse();var e=getActiveTocElement(i)||t[0],o=(findCorrespondingTocTitle(e).classList.add("bg-blue-700"),e);window.addEventListener("scroll",()=>{var e=getActiveTocElement(i)||t[0];e!==o&&(findCorrespondingTocTitle(o).classList.remove("bg-blue-700"),findCorrespondingTocTitle(e).classList.add("bg-blue-700"),o=e)})}});
+document.addEventListener("DOMContentLoaded", function() {
+  // ---------------- TOC Scrollspy --------------------
+  if (document.getElementById('toc') !== null) {
+
+    const table_of_content_links = document.querySelectorAll('#toc li a')
+
+    let page_titles_ids = [];
+    [...table_of_content_links].forEach((item)=> {
+      page_titles_ids.push(item.href.substring(item.href.indexOf("#")))
+    })
+    const page_titles_elements = document.querySelectorAll(page_titles_ids.join(','));
+
+    let reversed_title_elements = [...page_titles_elements].reverse();
+    let elem = getActiveTocElement(reversed_title_elements) || page_titles_elements[0]; //If no element has gone outside of viewport on y axis
+    findCorrespondingTocTitle(elem).classList.add('bg-blue-700') //page load
+    var previous_elem = elem
+
+    window.addEventListener('scroll', () => {
+      let element = getActiveTocElement(reversed_title_elements) || page_titles_elements[0];
+
+      if (element !== previous_elem) {
+        findCorrespondingTocTitle(previous_elem).classList.remove('bg-blue-700')
+        findCorrespondingTocTitle(element).classList.add('bg-blue-700')
+        previous_elem = element
+      }
+    })
+  }
+});
+function getActiveTocElement(elements) {
+  return [...elements].find((item) => {
+    return (item.getBoundingClientRect().y <= 0)
+  })
+}
+function findCorrespondingTocTitle(element) {
+  return [...document.querySelectorAll('#toc li a')].find((item) => {
+    return item.href.substring(item.href.indexOf("#")) === `#${element.id}`
+  })
+}

templates/layout.html

@@ -268,7 +268,7 @@
   <!---------------------------------------------------------->
   <!------------------------- FOOTER ------------------------->
   <!---------------------------------------------------------->
-  <footer class="max-w-7xl mx-auto relative pt-1 px-2 border-b-2 border-gray-300 dark:border-gray-200 w-full">
+  <footer class="max-w-7xl mx-auto relative pt-1 px-2 border-gray-300 dark:border-gray-200 w-full">
     <!-- <div class="container mx-auto px-6">
       <div class="sm:flex sm:mt-8">
         <div class="mt-8 sm:mt-0 sm:w-full sm:px-8 flex flex-col md:flex-row justify-between">
@@ -293,7 +293,7 @@
         </div>
       </div>
     </div> -->
-    <div class="mt-16 border-t-2 border-gray-300 flex flex-col items-center">
+    <div class="mt-16 border-y-2 border-gray-300 flex flex-col items-center">
       <div class="sm:w-2/3 text-center py-6">
         <p class="text-sm text-black dark:text-white font-bold mb-2">
           {% block content_footer %}
@@ -306,6 +306,7 @@
 
   <!------------------------- SCRIPTS ------------------------->
   <script defer src="/js/main.js"></script>
+  <script defer src="/js/zoom.js"></script>
   {% if config.extra.enable_search %}
     <script src="/js/elasticlunr.min.js"></script>
     <script src="/search_index.{{lang}}.js"></script>

templates/page.html

@@ -1,14 +1,13 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<script src="/js/zoom.js"/>
 <div class="flex px-4">
-   <h1 class="text-2xl text-bold my-6 mx-auto">
+    <h1 class="text-3xl text-bold my-6 mx-auto">
         {{ page.title }}
     </h1>
 </div>
 <div class="flex gap-x-8 p-4 justify-center">
-  <div class="flex flex-col sm:w-3/4 w-full border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-2xl bg-gray-200 dark:bg-gray-800">
+    <div class="flex flex-col sm:w-3/4 w-full md:border md:border-2 md:border-gray-200 md:dark:border-black rounded-xl p-5 md:shadow-2xl bg-gray-200 dark:bg-gray-800">
 
         <div class="flex flex-col py-2 justify-center">
             <!-- <h2 class="text-2xl text-bold"><a href='{{ page.permalink }}'>{{ page.title }}</a></h2> -->
@@ -139,7 +138,7 @@
 
 {% block pagination %}
 {% if page.earlier or page.later or page.lighter or page.heavier %}
-  <div class="max-w-7xl px-2 sm:px-6 lg:px-8 mx-auto">
+<div class="max-w-7xl px-2 sm:px-6 lg:px-8 mx-auto">
     <div class="flex items-center space-x-56 mt-4">
         {% if page.later %}
         <a class="flex items-center border border-gray-400 dark:border-black rounded-lg text-gray-800 dark:text-gray-300 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-600 dark:hover:text-white px-3 py-4 rounded-md text-sm font-medium transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800" href="{{ page.later.permalink }}">
@@ -179,5 +178,5 @@
 {% endblock %}
 
 {% block extra_js %}
-  <script defer src="/js/page.js"></script>
+<script defer src="/js/page.js"></script>
 {% endblock %}

templates/section.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 <div class="flex items-center flex-col mt-10">
-  <h1 class="text-2xl text-bold mb-6">
+  <h1 class="text-3xl text-bold mb-6">
     {{ section.title }}
   </h1>
   <div class="p-4 mb-8 mx-8 [&>*]:py-4">

templates/shortcodes/img.html

@@ -7,6 +7,6 @@
 {% set image = resize_image(path=path, width=width, height=height, op=op) %}
 {% endif %}
 <div class="w-full flex basis-full place-content-center">
-    <img class="py-0 rounded-lg shadow-xl object-cover w-[{{width}}px] h-[{{height}}px]"
+    <img class="py-0 rounded-lg shadow-xl data-zoomable object-cover w-[{{width}}px] h-[{{height}}px]"
          src="{{ image.url }}" />
 </div>