Reusable Snippets

This directory contains reusable markdown snippets powered by the mkdocs-macros-plugin for dynamic variable substitution.

Available Templates

1. Call-to-Action Cards

cta-macro.md - Fully customizable CTA card with macro variables

2. Featured Project Cards

featured-project-macro.md - Project showcase card with metrics and tech stack

3. Generic Cards

card-macro.md - Generic grid card template with macros

Usage with Variables:

Set variables in your page's front matter, then include the template:

---
title: "Your Page Title"
cta_icon: material-brain
cta_title: "Ready to implement AI solutions?"
cta_button_text: "Book AI Consultation"
cta_description: "Discover how AI can transform your business processes."
---

# Your content here...

<div class="grid cards" style="margin-top: 3rem" markdown>

* :material-handshake:{ .lg .middle } **Ready to transform your data operations?**

    ---

    :material-calendar: **Free 30-minute consultation**  
    :material-lightbulb: **Custom roadmap for your business**  
    :material-chart-line: **ROI assessment & timeline**

    Let's discuss how we can help solve your specific data challenges and unlock new opportunities for your business.

    [Schedule Free Consultation :material-calendar:](/contact/){ .md-button .md-button--primary }

</div>

Benefits

Consistency: Ensure all cards look and behave the same across your site
Maintainability: Update content in one place, changes appear everywhere
Flexibility: Create variations for different content types using templates
DRY Principle: Don't repeat yourself - write once, use many times
Version Control: Track changes to shared components in Git

Complete Examples

Example 1: Default CTA Card

Uses the default variables from mkdocs.yml:

## Contact Us

Ready to get started with your data transformation?

<div class="grid cards" style="margin-top: 3rem" markdown>

* :material-handshake:{ .lg .middle } **Ready to transform your data operations?**

    ---

    :material-calendar: **Free 30-minute consultation**  
    :material-lightbulb: **Custom roadmap for your business**  
    :material-chart-line: **ROI assessment & timeline**

    Let's discuss how we can help solve your specific data challenges and unlock new opportunities for your business.

    [Schedule Free Consultation :material-calendar:](/contact/){ .md-button .md-button--primary }

</div>

Example 2: Custom CTA Card with Variables

For specialized content, set variables in your page front matter:

---
title: "Data Security Consulting"
cta_icon: material-security
cta_title: "Need data security consulting?"
cta_session_type: "security assessment"
cta_deliverable: "Security audit & remediation plan"
cta_assessment: "Compliance gap analysis"
cta_description: "Ensure your data meets industry standards and regulations."
cta_button_text: "Schedule Security Review"
---

# Your security content...

<div class="grid cards" style="margin-top: 3rem" markdown>

* :material-handshake:{ .lg .middle } **Ready to transform your data operations?**

    ---

    :material-calendar: **Free 30-minute consultation**  
    :material-lightbulb: **Custom roadmap for your business**  
    :material-chart-line: **ROI assessment & timeline**

    Let's discuss how we can help solve your specific data challenges and unlock new opportunities for your business.

    [Schedule Free Consultation :material-calendar:](/contact/){ .md-button .md-button--primary }

</div>

Example 3: Featured Project Card

For showcasing projects with metrics:

---
title: "Portfolio Page"
project_icon: material-database
project_title: "Real-time Analytics Platform"
project_link: "projects/realtime-analytics.md"
project_metrics: ":material-clock-fast: **90% faster queries** • :material-trending-up: **10x scale improvement**"
project_tech_stack: ":simple-apache: Kafka • :simple-clickhouse: ClickHouse • :simple-grafana: Grafana"
project_description: "Built a real-time analytics platform handling millions of events per second with sub-second query response times."
project_button_text: "View Implementation"
---

<div class="grid cards" markdown>

- :material-rocket-launch:{ .lg .middle } [**Featured Project**](#)

    ---

    Key impact metrics and results

    **Tech Stack:** Technology stack used

    Project description and overview

    [:octicons-arrow-right-24: Read Case Study](#)

</div>

Example 4: Generic Card

For non-CTA content cards:

---
title: "Case Study Page"
card_style: "margin: 2rem 0; border: 1px solid #ddd;"
card_icon: material-chart-box
card_title: "Featured Case Study"
card_content: "Learn how we reduced data processing time by 80% using modern tools."
card_button_text: "Read Full Case Study"
card_button_link: "/portfolio/case-study-1/"
---

<div class="grid cards" style="margin-top: 3rem" markdown>

* **Card Title**

    ---

    Card content goes here.



</div>

Template Variables Reference

CTA Template Variables

Variable	Default	Description
`cta_icon`	`material-handshake`	Material icon name
`cta_title`	`Ready to transform your data operations?`	Main heading
`cta_session_type`	`consultation`	Type of session offered
`cta_deliverable`	`Custom roadmap for your business`	What you'll provide
`cta_assessment`	`ROI assessment & timeline`	Assessment type
`cta_description`	Default generic text	Descriptive paragraph
`cta_button_text`	`Schedule Free Consultation`	Button label

Featured Project Template Variables

Variable	Default	Description
`project_icon`	`material-rocket-launch`	Material icon for the project
`project_title`	`Featured Project`	Project title/heading
`project_link`	`#`	Link to the full project page
`project_metrics`	Default metrics text	Key impact metrics with icons
`project_tech_stack`	Default tech stack	Technologies used with icons
`project_description`	Default description	Project overview paragraph
`project_button_text`	`Read Case Study`	Button label text

Generic Card Template Variables

Variable	Default	Description
`card_style`	`margin-top: 3rem`	CSS style attribute
`card_icon`	None	Optional Material icon
`card_title`	`Card Title`	Card heading
`card_content`	`Card content goes here.`	Main content
`card_button_text`	None	Optional button text
`card_button_link`	None	Optional button URL

Creating New Snippets

Create a new .md file in the snippets/ directory
Add your reusable content (HTML, markdown, or both)
For templates, use Jinja2 syntax for variables: fallback
Include it in any page using: --8<-- "snippets/your-file.md"

Snippet Syntax Notes

The --8<-- syntax is used by the pymdownx.snippets extension: - Must be on its own line - Path is relative to the docs/ directory - Can include nested snippets - Supports conditional includes and Jinja2 templating