Markdoc Components Demo
This article demonstrates all the custom Markdoc components we've built for SAHD.dev.
What is Markdoc?
Markdoc is a powerful content authoring framework that allows us to create rich, interactive content with custom components.
Quick Win Example
Quick Win
Here's a quick win that every SAHD can implement right now. This should take about 2 minutes and requires minimal coding experience.
Just add this to your terminal:
echo "Hello SAHD world!"
That's it! You've just mastered your first command.
Dad Story
Dad Humor
So there I was, trying to debug a complex React component at 2 AM while my 3-year-old decided it was the perfect time to have a existential crisis about why bananas are curved.
"Daddy, why aren't bananas straight like carrots?"
And honestly? After staring at this component for 3 hours, I was asking myself the same question about my code.
The funny thing is, both the banana question and my bug had the same root cause: sometimes things grow in unexpected ways, and that's actually by design.
Fixed the bug, answered the banana question, and we both went back to bed satisfied.
Tip Boxes
Always use React.memo() for components that render frequently but don't change often. Your users (and your laptop fan) will thank you.
Watch out for async operations in useEffect cleanup functions. They can cause memory leaks if not handled properly!
Remember to add proper ARIA labels to your interactive elements. Screen readers need context just like your kids need explanations for everything.
Code Examples
Here's how you can use our CodeExample component:
const useDADLogic = (kidCount, coffeeLevel) => { const [sanity, setSanity] = useState(100);useEffect(() => { const sanityDrain = kidCount * 10 - coffeeLevel * 5; setSanity(prev => Math.max(0, prev - sanityDrain)); }, [kidCount, coffeeLevel]);return { sanity, needsCoffee: sanity < 30 }; };Code Blocks with Syntax Highlighting
Regular code blocks also work with syntax highlighting:
interface SAHDProps {
kidCount: number;
coffeeLevel: 'empty' | 'half' | 'full' | 'overcaffeinated';
sleepHours: number;
projectDeadlines: Date[];
}
const calculateProductivity = (props: SAHDProps): number => {
const { kidCount, coffeeLevel, sleepHours, projectDeadlines } = props;
let productivity = sleepHours * 10;
productivity += getCoffeeMultiplier(coffeeLevel);
productivity -= kidCount * 15; // They're worth it though
productivity -= projectDeadlines.length * 5;
return Math.max(0, productivity);
};
Reality Check
This productivity calculator is for entertainment purposes only. Actual SAHD productivity may vary wildly based on nap schedules, WiFi stability, and whether the kids found your hiding spot for snacks.
That's a wrap on our Markdoc components! These tools help us create engaging, interactive content that speaks directly to the SAHD experience.