Previously CodeWithErik.com was nothing but html and custom css. I always dread having to design and then implement. Sometimes I just want to write content and that's all. Over the weekend I looked into Docusaurus and it seemed like the perfect solution.
It looks good out-the-box and super easy to setup, plus it looks good!
After spending several hours playing with it, I went ahead and migrated CodeWithErik.com to it!
Git can be difficult to understand, but I have developed a mental model that helps me better understand it, and hopefully it will help you too!
First of all, think of yourself as a professional photographer with a Polaroid camera, an album to store the photos you take, and also you having a stage to place things you want to take pictures of. Lastly, you have a time machine!
Now, instead of thinking of files and folder, think of people and houses, respectively. You're the photographer so you can decide what people can wear and how to decorate a home at any time. (Editing files and folders).
Recently I decided to add some hardware to my cabinets. Had never done it before so didn't quite have direction. I took a trip to Lowe's and purchased the new hardware.
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.edges {
display: flex;
justify-content: flex-end;
}
.dot {
background-color: black;
border-radius: 50%;
height: 8mm;
width: 8mm;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.bar {
display: flex;
flex-direction: column;
border: 1px solid black;
height: calc(76.2mm + 8mm);
justify-content: space-between;
width: fit-content;
}
@page {
margin-top: 80mm;
margin-bottom: 80mm;
margin-left: 30mm;
margin-right: 30mm;
}
@media print {
#editor {
display: none;
}
}
</style>
</head>
<body>
<div class="edges">
<div class="bar">
<div class="dot">+</div>
<div class="dot">+</div>
</div>
</div>
<!-- <div id="editor">
<p>You can get most of this info from the packaging where your hardware comes in.</p>
<div>
<label for="">circle size</label>
<input type="text" id="circle-size" value="8">mm
</div>
<div>
<label for="">gap size</label>
<input type="text" id="gap-size" value="76.2">mm
</div>
<div>
<label for="">distance from edge</label>
<input type="text" id="edge-distance" value="30">mm
</div>
</div> -->
<script>
document.getElementById("circle-size").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("dot")).forEach(function (el) {
el.style.height = newSize + "mm";
el.style.width = newSize + "mm";
});
});
document.getElementById("gap-size").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("bar")).forEach(function (el) {
el.style.height = newSize + "mm";
});
});
/*
document.getElementById("edge-distance").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("bar")).forEach(function (el) {
el.style.height = newSize + "mm";
});
});
*/
</script>
</body>
</html>