Merge pull request #39 from mearashadowfax/add-toc

Add table of contents (TOC)

astro.config.mjs

@@ -16,11 +16,11 @@ export default defineConfig({
     defaultLocale: "en",
     locales: ["en", "fr"],
     fallback: {
-      fr: "en"
+      fr: "en",
     },
     routing: {
-      prefixDefaultLocale: false
+      prefixDefaultLocale: false,
-    }
+    },
   },
   prefetch: true,
   integrations: [

src/content/config.ts

@@ -76,7 +76,7 @@ const insightsCollection = defineCollection({
   schema: ({ image }) => z.object ({
   title: z.string(),
   description: z.string(),
-  contents: z.array(z.string()),
+  // contents: z.array(z.string()),
   cardImage: image(),
   cardImageAlt: z.string(),
   }),

src/content/insights/insight-1.md

@@ -3,10 +3,40 @@ title: "The Future of Construction Technology"
 description: "Explore ScrewFast's pioneering role in revolutionizing construction through advanced technology and innovative solutions."
 cardImage: "@/images/insights/insight-1.avif"
 cardImageAlt: "Top view mechanical tools arrangement"
-contents: [
+---
-        "As technology continues to evolve, so too does the construction industry. From advanced robotics to augmented reality, the possibilities for innovation are endless. At ScrewFast, we're at the forefront of this technological revolution, developing cutting-edge tools and solutions to drive the industry forward.",
+
-        "Our range of hardware tools combines precision engineering with user-centric design, ensuring maximum productivity on every job site. From power drills to advanced fastening solutions, ScrewFast's tools are built to withstand the rigors of construction while streamlining your workflow.",
+In the world of construction, where innovation meets practicality, ScrewFast stands as a beacon of pioneering advancements. For years, this company has been at the forefront of revolutionizing construction through its unwavering commitment to advanced technology and innovative solutions. From skyscrapers to bridges, ScrewFast has left an indelible mark on the industry, shaping the future of construction in ways once thought unimaginable.
-        "Another area of focus for us is in data analytics. By harnessing the power of data, we're able to provide valuable insights into project performance, resource utilization, and more. This allows our clients to make informed decisions that optimize efficiency and drive success.",
+
-        "Looking ahead, we see even greater opportunities for innovation in areas like sustainable construction and modular design. By embracing new technologies and pushing the boundaries of what's possible, ScrewFast is committed to shaping the future of the construction industry for the better."
+## A Legacy of Innovation
-]
+
----
+Founded with a vision to redefine the norms of construction, ScrewFast embarked on a journey marked by relentless innovation. Since its inception, the company has continually pushed the boundaries of what is possible, introducing groundbreaking technologies that have transformed the way structures are built.
+
+## Reinventing Foundation Systems
+
+At the heart of ScrewFast's success lies its revolutionary approach to foundation systems. Traditionally, the process of laying foundations has been cumbersome and time-consuming, often requiring extensive excavation and manual labor. However, ScrewFast's innovative solutions have changed the game entirely.
+
+By leveraging advanced techniques such as helical pile installation, ScrewFast has streamlined the foundation process, significantly reducing both time and cost. These helical piles, with their screw-like design, offer unparalleled stability and can be installed with remarkable efficiency, making them the go-to choice for projects of all sizes.
+
+## Embracing Digitalization
+
+In an era dominated by digitalization, ScrewFast has embraced technology wholeheartedly, harnessing its power to drive efficiency and precision. Through the use of advanced software and modeling techniques, the company has revolutionized the design and planning phases of construction projects.
+
+From 3D modeling to Building Information Modeling (BIM), ScrewFast employs cutting-edge tools to create detailed simulations of structures, allowing for better visualization and optimization. This digital approach not only enhances the accuracy of construction plans but also enables seamless collaboration among architects, engineers, and builders.
+
+## Sustainable Solutions for a Greener Tomorrow
+
+In a world increasingly concerned with sustainability, ScrewFast has taken proactive steps to minimize its environmental footprint. By prioritizing eco-friendly materials and sustainable construction practices, the company is leading the charge towards a greener future.
+
+One notable example is ScrewFast's commitment to modular construction—a method that involves prefabricating building components off-site and assembling them on-site. This approach not only reduces construction waste but also minimizes disruption to local ecosystems, making it a win-win for both builders and the environment.
+
+## The Road Ahead: Challenges and Opportunities
+
+As ScrewFast continues to push the boundaries of construction technology, it faces a myriad of challenges and opportunities on the horizon. From navigating regulatory hurdles to adapting to evolving industry trends, the road ahead is fraught with complexities.
+
+However, with its unwavering dedication to innovation and a track record of success, ScrewFast is well-positioned to overcome these obstacles and continue shaping the future of construction for generations to come. As the industry marches towards an increasingly digital and sustainable future, ScrewFast stands as a beacon of progress, leading the way towards a world where construction is not just efficient and cost-effective but also environmentally responsible.
+
+## Conclusion
+
+In the ever-evolving landscape of construction technology, ScrewFast remains a trailblazer, constantly pushing the boundaries of what is possible. Through its commitment to innovation, digitalization, and sustainability, the company has not only revolutionized the way structures are built but has also set a new standard for excellence in the industry.
+
+As we look towards the future, one thing is clear: the legacy of ScrewFast will continue to shape the world of construction for years to come, inspiring generations of builders to dream big and push the limits of possibility. With ScrewFast leading the way, the future of construction has never looked brighter.

src/content/insights/insight-2.md

@@ -3,10 +3,42 @@ title: "The Importance of Collaboration"
 description: "Explore how collaboration is central to ScrewFast's construction approach, driving effective communication and teamwork to achieve outstanding outcomes."
 cardImage: "@/images/insights/insight-2.avif"
 cardImageAlt: "Top view mechanical tools arrangement"
-contents: [
-        "Construction projects are complex undertakings that require collaboration and coordination among various stakeholders. From architects and engineers to contractors and suppliers, effective collaboration is essential for success.",
-        "At ScrewFast, we understand the importance of collaboration, which is why we prioritize communication and teamwork in everything we do. Whether it's working closely with our clients to understand their needs or partnering with other industry professionals to deliver comprehensive solutions, collaboration is at the heart of our approach.",
-        "But collaboration isn't just about working together—it's also about sharing knowledge and expertise. That's why we're committed to providing valuable resources and support to our clients, empowering them to make informed decisions and achieve their goals.",
-        "By fostering a culture of collaboration, we're able to tackle even the most complex challenges and deliver exceptional results. Together, we can build a better future for the construction industry."
-]
 ---
+
+In the realm of construction, where projects often involve intricate designs, tight deadlines, and complex logistical challenges, the importance of collaboration cannot be overstated. Effective collaboration is not just a desirable aspect of project management; it is the cornerstone upon which successful construction endeavors are built. In this long read, we delve into how collaboration serves as the driving force behind ScrewFast's construction approach, facilitating effective communication and teamwork to achieve outstanding outcomes.
+
+## Understanding ScrewFast: A Brief Overview
+
+Before we delve into the intricacies of collaboration within ScrewFast's construction projects, it's essential to grasp the company's background and ethos. ScrewFast is a renowned construction firm known for its innovative approach to foundation solutions. Specializing in helical pile foundations, ScrewFast has established itself as a leader in the construction industry, delivering high-quality, cost-effective solutions for a wide range of projects, from small-scale developments to large-scale infrastructure ventures.
+
+## The Collaborative Culture at ScrewFast
+
+At the heart of ScrewFast's success lies a culture that prioritizes collaboration at every stage of the construction process. From project inception to completion, collaboration is woven into the fabric of the company's operations. Unlike traditional hierarchical models prevalent in many construction firms, ScrewFast fosters an environment where every team member's input is valued, regardless of their role or seniority.
+
+### Breaking Down Silos: The Key to Effective Collaboration
+
+One of the biggest hurdles to collaboration in construction is the presence of silos within organizations. Departments often operate in isolation, leading to miscommunication, duplication of efforts, and a lack of synergy. ScrewFast tackles this challenge head-on by breaking down silos and promoting cross-functional collaboration.
+
+#### Cross-Functional Teams: Bridging the Gap
+
+ScrewFast forms cross-functional teams comprising professionals from diverse backgrounds, including engineers, architects, project managers, and construction workers. By bringing together individuals with varied expertise and perspectives, ScrewFast ensures comprehensive problem-solving and holistic decision-making throughout the project lifecycle.
+
+#### Integrated Project Delivery: A Unified Approach
+
+Integrated project delivery (IPD) is another cornerstone of ScrewFast's collaborative ethos. Unlike traditional project delivery methods where stakeholders operate in separate silos, IPD fosters a unified approach where all parties work together from the outset. This integrated approach promotes transparency, efficiency, and collective accountability, ultimately leading to superior project outcomes.
+
+## Driving Innovation Through Collaboration
+
+Collaboration isn't just about improving communication and teamwork; it also serves as a catalyst for innovation. At ScrewFast, collaboration fuels a culture of continuous improvement and forward thinking, driving the development of groundbreaking solutions that push the boundaries of construction technology.
+
+### Co-Creation with Clients: Turning Ideas into Reality
+
+ScrewFast recognizes the importance of involving clients in the co-creation process. By collaborating closely with clients from project inception, ScrewFast gains valuable insights into their needs, preferences, and challenges. This collaborative approach enables ScrewFast to tailor its solutions to meet clients' specific requirements, resulting in enhanced customer satisfaction and project success.
+
+### Embracing Emerging Technologies
+
+Innovation thrives in collaborative environments where diverse perspectives intersect. At ScrewFast, collaboration extends beyond internal teams to external partners, including technology providers, research institutions, and academia. By forging strategic partnerships with industry leaders, ScrewFast stays at the forefront of technological advancements, leveraging cutting-edge tools and techniques to drive efficiency and performance across its projects.
+
+## Conclusion
+
+In the fast-paced world of construction, collaboration isn't just a buzzword; it's a fundamental principle that underpins success. ScrewFast's construction approach exemplifies the transformative power of collaboration, demonstrating how effective communication, teamwork, and innovation can drive outstanding outcomes. As the construction industry continues to evolve, embracing collaboration will be key to navigating challenges, seizing opportunities, and delivering sustainable solutions that stand the test of time.

src/content/insights/insight-3.md

@@ -3,11 +3,35 @@ title: "The Impact of Sustainable Practices"
 description: "Discover how ScrewFast is leading the charge in promoting sustainability within the construction industry"
 cardImage: "@/images/insights/insight-3.avif"
 cardImageAlt: "Top view mechanical tools arrangement"
-contents: [
-        "With growing concerns about climate change and environmental sustainability, the construction industry is facing increasing pressure to adopt more eco-friendly practices. At ScrewFast, we're committed to doing our part to minimize our environmental footprint and promote sustainability in everything we do.",
-        "One way we're addressing this is through our selection of materials and manufacturing processes. We prioritize sustainable materials and practices whenever possible, ensuring that our products are not only durable and reliable but also environmentally friendly.",
-        "Additionally, we're exploring innovative solutions for reducing waste and conserving resources on construction sites. From modular construction techniques to recycling and repurposing materials, we're constantly seeking ways to minimize our impact on the planet.",
-        "But perhaps most importantly, we're committed to raising awareness about the importance of sustainability in the construction industry. Through education and advocacy, we're working to inspire change and encourage others to join us in building a more sustainable future.",
-        "By embracing sustainable practices, we're not only protecting the planet for future generations but also creating healthier, more resilient communities for everyone."
-]
 ---
+
+The construction industry casts a long shadow.  While it provides the essential framework for our lives, its environmental impact is undeniable. From resource depletion and pollution to energy consumption and waste generation, traditional construction practices take a toll on our planet. But a revolution is brewing, and at the forefront is ScrewFast, a company demonstrably changing the game with its commitment to sustainable practices.
+
+## The Scope of the Challenge
+
+Imagine this: the construction industry is responsible for a staggering 36% of global energy use and a whopping 40% of total CO2 emissions [1].  That's not all.  Buildings and construction are major contributors to solid waste generation, accounting for up to 40%, and gobble up 30% of the world's raw materials [1]. These statistics paint a clear picture: business as usual is simply unsustainable.
+
+## ScrewFast: Building with Responsibility
+
+ScrewFast is a company built on the foundation of responsibility. They understand the environmental cost of construction and are taking decisive action to change course. Their commitment to sustainability permeates every aspect of their operations, from the materials they use to the construction processes they implement.
+
+* **Material Innovation:** ScrewFast prioritizes the use of recycled and recyclable materials. This not only reduces reliance on virgin resources but also lessens the environmental burden associated with resource extraction. 
+* **Energy Efficiency:**  ScrewFast champions energy-efficient construction methods.  This might involve incorporating high-performance insulation materials, optimizing building design for natural light and ventilation, or even integrating renewable energy sources like solar panels.  The result?  Buildings that require less energy to operate, leading to a significant reduction in greenhouse gas emissions.
+* **Waste Reduction:**  ScrewFast meticulously plans and executes projects to minimize waste generation.  This can involve using prefabricated components, employing modular construction techniques, and implementing meticulous waste segregation and recycling programs.  By minimizing waste, ScrewFast conserves resources and reduces the environmental impact associated with landfills.
+* **Sustainable Sourcing:**  ScrewFast takes a responsible approach to sourcing its materials.  They prioritize working with suppliers who share their commitment to sustainability.  This ensures that the environmental footprint is considered throughout the entire supply chain.
+
+## The Impact of Change
+
+ScrewFast's dedication to sustainable practices extends far beyond their company walls.  The ripple effect of their actions is substantial:
+
+* **Environmental Benefits:**  By promoting resource conservation, reduced energy consumption, and minimized waste, ScrewFast contributes significantly to a healthier planet.  This translates to cleaner air, a more stable climate, and the preservation of natural resources for future generations. 
+* **Economic Advantages:**  Sustainable construction practices often lead to long-term economic benefits.  Energy-efficient buildings have lower operational costs, and sustainable materials can sometimes be surprisingly cost-competitive.  ScrewFast demonstrates that being green can also be good for the bottom line.
+* **Social Responsibility:**  ScrewFast recognizes that sustainability encompasses more than just the environment.  They are committed to creating safe and healthy work environments for their employees and fostering positive relationships with the communities in which they operate.
+
+## Leading by Example
+
+ScrewFast isn't just talking the talk, they're walking the walk. Their commitment to sustainability is evident in every project they undertake.  By showcasing the tangible benefits of sustainable construction, ScrewFast is inspiring a paradigm shift within the industry.  They are paving the way for a future where buildings are not only functional but also environmentally responsible.
+
+## The Road Ahead
+
+The construction industry is at a crossroads.  ScrewFast stands as a beacon, illuminating the path towards a more sustainable future.  By embracing innovative practices and prioritizing environmental responsibility, ScrewFast is not just building structures; they are building a better tomorrow.  As more companies follow suit, the impact will be profound. A greener construction industry signifies a healthier planet for all. 

src/pages/insights/[...slug].astro

@@ -13,15 +13,16 @@ export async function getStaticPaths() {
     props: { post },
   }));
 }
+
 // Get the props for this page that define a specific insight post
 const { post } = Astro.props;
 
+const { Content } = await post.render();
+
 const pageTitle: string = `${post.data.title} | ${SITE.title}`;
 ---
 
-<MainLayout
+<MainLayout title={pageTitle}>
-  title={pageTitle}
->
   <section class="py-6 sm:py-8 lg:py-12">
     <div class="mx-auto max-w-screen-xl px-4 md:px-8">
       <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
@@ -35,6 +36,24 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
               format={"avif"}
             />
           </div>
+          <div id="pin" class="mt-10 hidden space-y-4 md:block">
+            <div class="h-px w-full bg-neutral-300 dark:bg-neutral-700">
+              <div
+                id="progress"
+                class="h-px w-full bg-gradient-to-r from-[#fa5a15]/30 to-[#fa5a15]"
+              >
+              </div>
+            </div>
+            <p class="text-pretty text-sm font-light text-neutral-500">
+              Table of Contents:
+            </p>
+            <div id="toc" class="">
+              <ul
+                class="space-y-2 text-pretty text-base text-neutral-700 transition duration-300 dark:text-neutral-400"
+              >
+              </ul>
+            </div>
+          </div>
         </div>
 
         <div class="md:pt-8">
@@ -43,17 +62,167 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
           >
             {post.data.title}
           </h1>
-          <div class="space-y-8">
+
-            {
+          <article
-              post.data.contents.map((content) => (
+            class="text-pretty text-lg text-neutral-700 dark:text-neutral-300"
-                <p class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
+          >
-                  {content}
+            <Content />
-                </p>
+          </article>
-              ))
-            }
-          </div>
         </div>
       </div>
     </div>
   </section>
 </MainLayout>
+
+<style is:global>
+  :root {
+    --transition-cubic: cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+  article h2,
+  article h3,
+  article h4,
+  article h5,
+  article h6 {
+    font-weight: bold;
+    margin-top: 2.5rem;
+    scroll-margin-top: 3rem;
+  }
+  h2 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  h3 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  h4 {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  p {
+    margin-top: 1.5rem;
+  }
+  @keyframes grow-progress {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+  #progress {
+    transform-origin: 0 50%;
+    animation: grow-progress auto linear;
+    animation-timeline: scroll(block root);
+  }
+  #toc li {
+    display: flex;
+    align-items: center;
+    opacity: 0.8;
+    transition: all 300ms var(--transition-cubic);
+  }
+  #toc li.selected {
+    opacity: 1;
+  }
+  #toc li svg {
+    width: 0;
+    height: 0;
+    transition:
+      height 400ms var(--transition-cubic),
+      width 400ms var(--transition-cubic);
+  }
+  #toc li.selected svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.3rem;
+  }
+</style>
+
+<script>
+  import { gsap } from "gsap";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+  gsap.registerPlugin(ScrollTrigger);
+
+  gsap.timeline({
+    scrollTrigger: {
+      scrub: 1,
+      pin: true,
+      trigger: "#pin",
+      start: "top 20%",
+      endTrigger: "footer",
+      end: "top bottom",
+    },
+  });
+
+  document.addEventListener("DOMContentLoaded", function () {
+    // The article element that contains the Markdown content
+    const article: HTMLElement | null = document.querySelector("article");
+
+    // The ToC container <ul> element
+    const tocList: HTMLElement | null = document.querySelector("#toc ul");
+
+    // Function to create and add an item to the ToC list
+    function addToC(heading: HTMLElement) {
+      const li = document.createElement("li");
+      li.className = "toc-level-" + heading.tagName.toLowerCase();
+
+      const tempDiv = document.createElement("div");
+      tempDiv.innerHTML =
+        '<svg class="w-0 h-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fa5a15"><path stroke-linecap="round" stroke-linejoin="round" d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></svg>';
+      const svg = tempDiv.firstChild;
+
+      li.appendChild(svg as Node);
+
+      const link = document.createElement("a");
+      link.href = "#" + heading.id;
+      link.textContent = heading.textContent;
+
+      li.appendChild(link);
+
+      tocList?.appendChild(li);
+
+      return li;
+    }
+
+    // Helper function to toggle the 'selected' class
+    function setActiveLink(id: string) {
+      document.querySelectorAll("#toc li").forEach((li) => {
+        li.classList.remove("selected");
+      });
+
+      const activeLink = document.querySelector(`#toc a[href="#${id}"]`);
+      if (activeLink) {
+        const li: HTMLElement | null = activeLink.parentElement;
+        li?.classList.add("selected");
+      }
+    }
+
+    // Observe headings and add them to the ToC
+    let headings: NodeListOf<HTMLElement> | [] = article
+      ? article.querySelectorAll("h1, h2, h3, h4, h5, h6")
+      : [];
+
+    headings.forEach((heading: Element, i: number) => {
+      if (heading instanceof HTMLElement) {
+        addToC(heading);
+
+        gsap.timeline({
+          scrollTrigger: {
+            trigger: heading,
+            start: "top 20%",
+            end: () =>
+              `bottom top+=${i === headings.length - 1 ? 0 : headings[i + 1].getBoundingClientRect().height}`,
+            onEnter: () => setActiveLink(heading.id),
+            onLeaveBack: () =>
+              setActiveLink((headings[i - 1] || { id: null }).id),
+          },
+        });
+      }
+    });
+  });
+</script>