jekyll-bonsai 0.0.3

data/assets/img/bonsai-dark.svg

@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.03 399.59">
+	<defs>
+		<style>
+		.cls-1 {
+			fill: #54535b;
+		}
+		
+		.cls-2 {
+			fill: none;
+			stroke: #54535b;
+			stroke-miterlimit: 10;
+			stroke-width: 10px;
+		}
+		
+		.cls-3 {
+			fill: #31af31;
+		}
+		
+		.cls-4 {
+			fill: #e6e1e8;
+		}
+		</style>
+	</defs>
+	<g id="Layer_2" data-name="Layer 2">
+		<g id="Layer_1-2" data-name="Layer 1">
+			<path class="cls-1" d="M155.05,219.83a41.35,41.35,0,0,0,1,6.4,47.68,47.68,0,0,0,2.16,6.47,56.53,56.53,0,0,0,6.91,12.22,71.84,71.84,0,0,0,9.63,10.67l2.76,2.38c.94.78,1.94,1.49,2.9,2.25,2,1.48,4,2.89,6.09,4.21a105.38,105.38,0,0,0,13.25,7.05,117.12,117.12,0,0,0,14.31,5.34c4.92,1.46,10,2.67,15.08,3.66,2.57.42,5.14.93,7.74,1.21l3.9.5,3.93.36c2.6.27,5.27.34,7.91.52l4.18.25c.72.07,1.43.06,2.15.18l2.15.34a51.45,51.45,0,0,1,16.25,5.64,53.43,53.43,0,0,1,13.41,10.41A50.61,50.61,0,0,1,300,314a43.63,43.63,0,0,1,3.66,16.26,53.33,53.33,0,0,1-1.87,16.33,60.27,60.27,0,0,1-6.42,14.95,62.45,62.45,0,0,1-9.93,12.73l-.06-.06a61.81,61.81,0,0,0,9.1-13.16,57.91,57.91,0,0,0,5.41-14.92,51.19,51.19,0,0,0,.79-15.65,40.32,40.32,0,0,0-4.33-14.75,46.28,46.28,0,0,0-21.84-20.57,44.53,44.53,0,0,0-14.37-3.87l-1.84-.16c-.61-.07-1.25,0-1.87,0-1.28,0-2.43,0-3.89.06-2.72,0-5.43.19-8.19.13-5.49.07-11-.24-16.54-.61a165.09,165.09,0,0,1-16.59-2.24,131,131,0,0,1-16.4-4.37,101,101,0,0,1-15.74-7,90.35,90.35,0,0,1-14.43-9.87,77.76,77.76,0,0,1-12.19-13c-.91-1.19-1.7-2.48-2.55-3.71s-1.56-2.59-2.33-3.88-1.41-2.69-2.05-4.06-1.27-2.77-1.76-4.23l-.78-2.17c-.24-.73-.44-1.48-.66-2.22-.47-1.46-.76-3-1.11-4.53a46.53,46.53,0,0,1-.78-9.59Z" />
+			<line class="cls-2" x1="23.49" y1="200.56" x2="54.67" y2="145.12" />
+			<line class="cls-2" x1="54.67" y1="145.12" x2="84.84" y2="200.56" />
+			<line class="cls-2" x1="84.84" y1="200.56" x2="116.3" y2="145.12" />
+			<line class="cls-2" x1="116.3" y1="145.12" x2="146.19" y2="200.56" />
+			<line class="cls-2" x1="146.19" y1="200.56" x2="177.93" y2="145.12" />
+			<line class="cls-2" x1="177.93" y1="145.12" x2="209.52" y2="200.56" />
+			<line class="cls-2" x1="309.46" y1="196.33" x2="340.64" y2="140.89" />
+			<line class="cls-2" x1="340.64" y1="140.89" x2="370.81" y2="196.33" />
+			<line class="cls-2" x1="370.81" y1="196.33" x2="402.27" y2="140.89" />
+			<line class="cls-2" x1="402.27" y1="140.89" x2="432.16" y2="196.33" />
+			<line class="cls-2" x1="432.16" y1="196.33" x2="463.9" y2="140.89" />
+			<line class="cls-2" x1="463.9" y1="140.89" x2="495.49" y2="196.33" />
+			<line class="cls-2" x1="495.49" y1="196.33" x2="526.35" y2="140.89" />
+			<line class="cls-2" x1="526.35" y1="140.89" x2="559.54" y2="196.33" />
+			<line class="cls-2" x1="112.41" y1="78.94" x2="143.58" y2="23.49" />
+			<line class="cls-2" x1="143.58" y1="23.49" x2="173.76" y2="78.94" />
+			<line class="cls-2" x1="173.76" y1="78.94" x2="205.22" y2="23.49" />
+			<line class="cls-2" x1="205.22" y1="23.49" x2="235.11" y2="78.94" />
+			<line class="cls-2" x1="235.11" y1="78.94" x2="266.85" y2="23.49" />
+			<line class="cls-2" x1="266.85" y1="23.49" x2="298.44" y2="78.94" />
+			<line class="cls-2" x1="298.44" y1="78.94" x2="329.3" y2="23.49" />
+			<line class="cls-2" x1="329.3" y1="23.49" x2="362.49" y2="78.94" />
+			<circle class="cls-1" cx="146.19" cy="200.56" r="23.49" />
+			<circle class="cls-1" cx="209.52" cy="200.56" r="23.49" />
+			<circle class="cls-1" cx="116.3" cy="145.12" r="23.49" />
+			<circle class="cls-1" cx="177.93" cy="145.12" r="23.49" />
+			<circle class="cls-1" cx="84.84" cy="200.56" r="23.49" />
+			<circle class="cls-1" cx="54.67" cy="145.12" r="23.49" />
+			<circle class="cls-1" cx="23.49" cy="200.56" r="23.49" />
+			<circle class="cls-1" cx="432.16" cy="196.33" r="23.49" />
+			<circle class="cls-1" cx="495.49" cy="196.33" r="23.49" />
+			<circle class="cls-1" cx="402.27" cy="140.89" r="23.49" />
+			<circle class="cls-1" cx="463.9" cy="140.89" r="23.49" />
+			<circle class="cls-1" cx="370.81" cy="196.33" r="23.49" />
+			<circle class="cls-1" cx="340.64" cy="140.89" r="23.49" />
+			<circle class="cls-1" cx="309.46" cy="196.33" r="23.49" />
+			<circle class="cls-1" cx="559.54" cy="196.33" r="23.49" />
+			<circle class="cls-1" cx="526.35" cy="140.89" r="23.49" />
+			<circle class="cls-1" cx="235.11" cy="78.94" r="23.49" />
+			<circle class="cls-1" cx="298.44" cy="78.94" r="23.49" />
+			<circle class="cls-1" cx="205.22" cy="23.49" r="23.49" />
+			<circle class="cls-1" cx="266.85" cy="23.49" r="23.49" />
+			<circle class="cls-1" cx="173.76" cy="78.94" r="23.49" />
+			<circle class="cls-1" cx="143.58" cy="23.49" r="23.49" />
+			<circle class="cls-1" cx="112.41" cy="78.94" r="23.49" />
+			<circle class="cls-1" cx="362.49" cy="78.94" r="23.49" />
+			<circle class="cls-1" cx="329.3" cy="23.49" r="23.49" />
+			<circle class="cls-3" cx="146.11" cy="200.71" r="14.91" />
+			<circle class="cls-3" cx="209.44" cy="200.71" r="14.91" />
+			<circle class="cls-3" cx="116.31" cy="145.1" r="14.91" />
+			<circle class="cls-3" cx="177.93" cy="145.12" r="14.91" />
+			<circle class="cls-3" cx="84.92" cy="200.71" r="14.91" />
+			<circle class="cls-3" cx="54.67" cy="145.12" r="14.91" />
+			<circle class="cls-3" cx="23.5" cy="200.71" r="14.91" />
+			<circle class="cls-3" cx="432.08" cy="196.48" r="14.91" />
+			<circle class="cls-3" cx="495.41" cy="196.48" r="14.91" />
+			<circle class="cls-3" cx="402.28" cy="140.87" r="14.91" />
+			<circle class="cls-3" cx="463.9" cy="140.89" r="14.91" />
+			<circle class="cls-3" cx="370.89" cy="196.48" r="14.91" />
+			<circle class="cls-3" cx="340.64" cy="140.89" r="14.91" />
+			<circle class="cls-3" cx="309.47" cy="196.48" r="14.91" />
+			<circle class="cls-3" cx="559.54" cy="196.48" r="14.91" />
+			<circle class="cls-3" cx="526.35" cy="140.89" r="14.91" />
+			<circle class="cls-3" cx="235.03" cy="79.08" r="14.91" />
+			<circle class="cls-3" cx="298.36" cy="79.08" r="14.91" />
+			<circle class="cls-3" cx="205.23" cy="23.48" r="14.91" />
+			<circle class="cls-3" cx="266.85" cy="23.49" r="14.91" />
+			<circle class="cls-3" cx="173.84" cy="79.08" r="14.91" />
+			<circle class="cls-3" cx="143.58" cy="23.49" r="14.91" />
+			<circle class="cls-3" cx="112.42" cy="79.08" r="14.91" />
+			<circle class="cls-3" cx="362.49" cy="79.08" r="14.91" />
+			<circle class="cls-3" cx="329.3" cy="23.49" r="14.91" />
+			<path class="cls-4" d="M190.1,399.59H142.9q0-2.29.16-16.32t.16-40.78q0-10.33,0-26.85t-.28-32.48h47.2v7.72H154.62q-.17,16.1-.21,28.75t0,22.2q0,20.28.16,32t.17,18h35.4Z" />
+			<path class="cls-4" d="M259.28,399.59H212.07q0-2.29.17-16.32t.16-40.78q0-10.33,0-26.85t-.29-32.48h47.21v7.72H223.79q-.16,16.1-.2,28.75t0,22.2q0,20.28.16,32t.16,18h35.41Z" />
+			<path class="cls-4" d="M272.28,373.42c0-8.15,5.51-13.88,13.22-13.88s13,5.73,13,13.88c0,7.93-5.07,13.87-13.22,13.87C277.57,387.29,272.28,381.35,272.28,373.42Z" />
+			<path class="cls-4" d="M359.86,399.59h-47.2v-7.72h35.4q0-6.93.17-19.95t.16-30.09q0-8.62,0-23.09t-.2-27.86H312.66v-7.72h47.2q-.24,15.9-.28,32.7t0,26.63q0,18.31.16,36.56T359.86,399.59Z" />
+			<path class="cls-4" d="M429,399.59h-47.2v-7.72h35.4q0-6.93.16-19.95t.17-30.09q0-8.62-.05-23.09t-.2-27.86H381.84v-7.72H429q-.24,15.9-.28,32.7t0,26.63q0,18.31.16,36.56T429,399.59Z" />
+		</g>
+	</g>
+</svg>

data/assets/img/bonsai-light.svg

@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.03 399.59">
+	<defs>
+		<style>
+		.cls-1 {
+			fill: #8c6239;
+		}
+		
+		.cls-2 {
+			fill: none;
+			stroke: #8c6239;
+			stroke-miterlimit: 10;
+			stroke-width: 10px;
+		}
+		
+		.cls-3 {
+			fill: #31af31;
+		}
+		
+		.cls-4 {
+			fill: #5c5962;
+		}
+		</style>
+	</defs>
+	<g id="Layer_2" data-name="Layer 2">
+		<g id="Layer_1-2" data-name="Layer 1">
+			<path class="cls-1" d="M155.05,219.83a41.35,41.35,0,0,0,1,6.4,47.68,47.68,0,0,0,2.16,6.47,56.53,56.53,0,0,0,6.91,12.22,71.84,71.84,0,0,0,9.63,10.67l2.76,2.38c.94.78,1.94,1.49,2.9,2.25,2,1.48,4,2.89,6.09,4.21a105.38,105.38,0,0,0,13.25,7.05,117.12,117.12,0,0,0,14.31,5.34c4.92,1.46,10,2.67,15.08,3.66,2.57.42,5.14.93,7.74,1.21l3.9.5,3.93.36c2.6.27,5.27.34,7.91.52l4.18.25c.72.07,1.43.06,2.15.18l2.15.34a51.45,51.45,0,0,1,16.25,5.64,53.43,53.43,0,0,1,13.41,10.41A50.61,50.61,0,0,1,300,314a43.63,43.63,0,0,1,3.66,16.26,53.33,53.33,0,0,1-1.87,16.33,60.27,60.27,0,0,1-6.42,14.95,62.45,62.45,0,0,1-9.93,12.73l-.06-.06a61.81,61.81,0,0,0,9.1-13.16,57.91,57.91,0,0,0,5.41-14.92,51.19,51.19,0,0,0,.79-15.65,40.32,40.32,0,0,0-4.33-14.75,46.28,46.28,0,0,0-21.84-20.57,44.53,44.53,0,0,0-14.37-3.87l-1.84-.16c-.61-.07-1.25,0-1.87,0-1.28,0-2.43,0-3.89.06-2.72,0-5.43.19-8.19.13-5.49.07-11-.24-16.54-.61a165.09,165.09,0,0,1-16.59-2.24,131,131,0,0,1-16.4-4.37,101,101,0,0,1-15.74-7,90.35,90.35,0,0,1-14.43-9.87,77.76,77.76,0,0,1-12.19-13c-.91-1.19-1.7-2.48-2.55-3.71s-1.56-2.59-2.33-3.88-1.41-2.69-2.05-4.06-1.27-2.77-1.76-4.23l-.78-2.17c-.24-.73-.44-1.48-.66-2.22-.47-1.46-.76-3-1.11-4.53a46.53,46.53,0,0,1-.78-9.59Z" />
+			<line class="cls-2" x1="112.41" y1="78.94" x2="143.58" y2="23.49" />
+			<line class="cls-2" x1="143.58" y1="23.49" x2="173.76" y2="78.94" />
+			<line class="cls-2" x1="173.76" y1="78.94" x2="205.22" y2="23.49" />
+			<line class="cls-2" x1="205.22" y1="23.49" x2="235.11" y2="78.94" />
+			<line class="cls-2" x1="235.11" y1="78.94" x2="266.85" y2="23.49" />
+			<line class="cls-2" x1="266.85" y1="23.49" x2="298.44" y2="78.94" />
+			<line class="cls-2" x1="298.44" y1="78.94" x2="329.3" y2="23.49" />
+			<line class="cls-2" x1="329.3" y1="23.49" x2="362.49" y2="78.94" />
+			<line class="cls-2" x1="309.46" y1="196.33" x2="340.64" y2="140.89" />
+			<line class="cls-2" x1="340.64" y1="140.89" x2="370.81" y2="196.33" />
+			<line class="cls-2" x1="370.81" y1="196.33" x2="402.27" y2="140.89" />
+			<line class="cls-2" x1="402.27" y1="140.89" x2="432.16" y2="196.33" />
+			<line class="cls-2" x1="432.16" y1="196.33" x2="463.9" y2="140.89" />
+			<line class="cls-2" x1="463.9" y1="140.89" x2="495.49" y2="196.33" />
+			<line class="cls-2" x1="495.49" y1="196.33" x2="526.35" y2="140.89" />
+			<line class="cls-2" x1="526.35" y1="140.89" x2="559.54" y2="196.33" />
+			<line class="cls-2" x1="54.67" y1="145.12" x2="84.84" y2="200.56" />
+			<line class="cls-2" x1="146.19" y1="200.56" x2="176.63" y2="145.12" />
+			<line class="cls-2" x1="176.63" y1="145.12" x2="209.2" y2="200.56" />
+			<line class="cls-2" x1="146.19" y1="200.56" x2="116.3" y2="145.12" />
+			<line class="cls-2" x1="84.84" y1="200.56" x2="116.3" y2="145.12" />
+			<line class="cls-2" x1="23.49" y1="200.56" x2="54.67" y2="145.12" />
+			<circle class="cls-3" cx="146.19" cy="200.56" r="23.49" />
+			<circle class="cls-3" cx="209.52" cy="200.56" r="23.49" transform="translate(-58.76 90.34) rotate(-21.41)" />
+			<circle class="cls-3" cx="116.3" cy="145.12" r="23.49" />
+			<circle class="cls-3" cx="177.93" cy="145.12" r="23.49" />
+			<circle class="cls-3" cx="84.84" cy="200.56" r="23.49" />
+			<circle class="cls-3" cx="54.67" cy="145.12" r="23.49" />
+			<circle class="cls-3" cx="23.49" cy="200.56" r="23.49" />
+			<circle class="cls-3" cx="235.11" cy="78.94" r="23.49" />
+			<circle class="cls-3" cx="298.44" cy="78.94" r="23.49" />
+			<circle class="cls-3" cx="205.22" cy="23.49" r="23.49" />
+			<circle class="cls-3" cx="266.85" cy="23.49" r="23.49" />
+			<circle class="cls-3" cx="173.76" cy="78.94" r="23.49" />
+			<circle class="cls-3" cx="143.58" cy="23.49" r="23.49" />
+			<circle class="cls-3" cx="112.41" cy="78.94" r="23.49" />
+			<circle class="cls-3" cx="362.49" cy="78.94" r="23.49" />
+			<circle class="cls-3" cx="329.3" cy="23.49" r="23.49" />
+			<circle class="cls-3" cx="432.16" cy="196.33" r="23.49" />
+			<circle class="cls-3" cx="495.49" cy="196.33" r="23.49" />
+			<circle class="cls-3" cx="402.27" cy="140.89" r="23.49" />
+			<circle class="cls-3" cx="463.9" cy="140.89" r="23.49" />
+			<circle class="cls-3" cx="370.81" cy="196.33" r="23.49" />
+			<circle class="cls-3" cx="340.64" cy="140.89" r="23.49" />
+			<circle class="cls-3" cx="309.46" cy="196.33" r="23.49" />
+			<circle class="cls-3" cx="559.54" cy="196.33" r="23.49" />
+			<circle class="cls-3" cx="526.35" cy="140.89" r="23.49" />
+			<path class="cls-4" d="M190.1,399.59H142.9q0-2.29.16-16.32t.16-40.78q0-10.33,0-26.85t-.28-32.48h47.2v7.72H154.62q-.17,16.1-.21,28.75t0,22.2q0,20.28.16,32t.17,18h35.4Z" />
+			<path class="cls-4" d="M259.28,399.59H212.07q0-2.29.17-16.32t.16-40.78q0-10.33,0-26.85t-.29-32.48h47.21v7.72H223.79q-.16,16.1-.2,28.75t0,22.2q0,20.28.16,32t.16,18h35.41Z" />
+			<path class="cls-4" d="M272.12,373.41c0-8.14,5.5-13.87,13.21-13.87s13,5.73,13,13.87c0,7.93-5.06,13.88-13.21,13.88C277.4,387.29,272.12,381.34,272.12,373.41Z" />
+			<path class="cls-4" d="M359.86,399.59h-47.2v-7.72h35.4q0-6.93.17-19.95t.16-30.09q0-8.62,0-23.09t-.2-27.86H312.66v-7.72h47.2q-.24,15.9-.28,32.7t0,26.63q0,18.31.16,36.56T359.86,399.59Z" />
+			<path class="cls-4" d="M429,399.59h-47.2v-7.72h35.4q0-6.93.16-19.95t.17-30.09q0-8.62-.05-23.09t-.2-27.86H381.84v-7.72H429q-.24,15.9-.28,32.7t0,26.63q0,18.31.16,36.56T429,399.59Z" />
+		</g>
+	</g>
+</svg>

data/assets/img/nav-base-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.14 116.43"><defs><style>.cls-1{fill:#e6e1e8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.2,116.43H0q0-2.3.16-16.32T.33,59.33q0-10.33,0-26.85T0,0H47.2V7.72H11.72q-.17,16.1-.2,28.74t0,22.21q0,20.28.16,32t.16,18H47.2Z"/><path class="cls-1" d="M116.38,116.43H69.18q0-2.3.16-16.32t.16-40.78q0-10.33,0-26.85T69.18,0h47.2V7.72H80.9q-.16,16.1-.21,28.74t0,22.21q0,20.28.16,32t.17,18h35.4Z"/><path class="cls-1" d="M217,116.43h-47.2v-7.72h35.4q0-6.93.16-19.95t.16-30.09q0-8.62,0-23.09t-.2-27.86H169.77V0H217q-.25,15.9-.29,32.7t0,26.63q0,18.32.16,36.56T217,116.43Z"/><path class="cls-1" d="M286.14,116.43h-47.2v-7.72h35.4q0-6.93.17-19.95t.16-30.09q0-8.62,0-23.09t-.21-27.86H238.94V0h47.2q-.24,15.9-.28,32.7t0,26.63q0,18.32.16,36.56T286.14,116.43Z"/><path class="cls-1" d="M129.38,90.26c0-8.15,5.51-13.88,13.22-13.88s13,5.73,13,13.88c0,7.93-5.06,13.87-13.21,13.87C134.67,104.13,129.38,98.19,129.38,90.26Z"/></g></g></svg>

data/assets/img/nav-base-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.14 116.43"><defs><style>.cls-1{fill:#5c5962;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.2,116.43H0q0-2.3.16-16.32T.33,59.33q0-10.33,0-26.85T0,0H47.2V7.72H11.72q-.17,16.1-.2,28.74t0,22.21q0,20.28.16,32t.16,18H47.2Z"/><path class="cls-1" d="M116.38,116.43H69.18q0-2.3.16-16.32t.16-40.78q0-10.33,0-26.85T69.18,0h47.2V7.72H80.9q-.16,16.1-.21,28.74t0,22.21q0,20.28.16,32t.17,18h35.4Z"/><path class="cls-1" d="M217,116.43h-47.2v-7.72h35.4q0-6.93.16-19.95t.16-30.09q0-8.62,0-23.09t-.2-27.86H169.77V0H217q-.25,15.9-.29,32.7t0,26.63q0,18.32.16,36.56T217,116.43Z"/><path class="cls-1" d="M286.14,116.43h-47.2v-7.72h35.4q0-6.93.17-19.95t.16-30.09q0-8.62,0-23.09t-.21-27.86H238.94V0h47.2q-.24,15.9-.28,32.7t0,26.63q0,18.32.16,36.56T286.14,116.43Z"/><path class="cls-1" d="M129.22,90.25c0-8.15,5.5-13.87,13.21-13.87s13,5.72,13,13.87c0,7.93-5.07,13.88-13.22,13.88C134.5,104.13,129.22,98.18,129.22,90.25Z"/></g></g></svg>

data/assets/img/nav-bonsai-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.03 374.23"><defs><style>.cls-1{fill:#54535b;}.cls-2{fill:none;stroke:#54535b;stroke-miterlimit:10;stroke-width:10px;}.cls-3{fill:#31af31;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.05,219.83a41.35,41.35,0,0,0,1,6.4,47.68,47.68,0,0,0,2.16,6.47,56.53,56.53,0,0,0,6.91,12.22,71.84,71.84,0,0,0,9.63,10.67l2.76,2.38c.94.78,1.94,1.49,2.9,2.25,2,1.48,4,2.89,6.09,4.21a105.38,105.38,0,0,0,13.25,7.05,117.12,117.12,0,0,0,14.31,5.34c4.92,1.46,10,2.67,15.08,3.66,2.57.42,5.14.93,7.74,1.21l3.9.5,3.93.36c2.6.27,5.27.34,7.91.52l4.18.25c.72.07,1.43.06,2.15.18l2.15.34a51.45,51.45,0,0,1,16.25,5.64,53.43,53.43,0,0,1,13.41,10.41A50.61,50.61,0,0,1,300,314a43.63,43.63,0,0,1,3.66,16.26,53.33,53.33,0,0,1-1.87,16.33,60.27,60.27,0,0,1-6.42,14.95,62.45,62.45,0,0,1-9.93,12.73l-.06-.06a61.81,61.81,0,0,0,9.1-13.16,57.91,57.91,0,0,0,5.41-14.92,51.19,51.19,0,0,0,.79-15.65,40.32,40.32,0,0,0-4.33-14.75,46.28,46.28,0,0,0-21.84-20.57,44.53,44.53,0,0,0-14.37-3.87l-1.84-.16c-.61-.07-1.25,0-1.87,0-1.28,0-2.43,0-3.89.06-2.72,0-5.43.19-8.19.13-5.49.07-11-.24-16.54-.61a165.09,165.09,0,0,1-16.59-2.24,131,131,0,0,1-16.4-4.37,101,101,0,0,1-15.74-7,90.35,90.35,0,0,1-14.43-9.87,77.76,77.76,0,0,1-12.19-13c-.91-1.19-1.7-2.48-2.55-3.71s-1.56-2.59-2.33-3.88-1.41-2.69-2.05-4.06-1.27-2.77-1.76-4.23l-.78-2.17c-.24-.73-.44-1.48-.66-2.22-.47-1.46-.76-3-1.11-4.53a46.53,46.53,0,0,1-.78-9.59Z"/><line class="cls-2" x1="23.49" y1="200.56" x2="54.67" y2="145.12"/><line class="cls-2" x1="54.67" y1="145.12" x2="84.84" y2="200.56"/><line class="cls-2" x1="84.84" y1="200.56" x2="116.3" y2="145.12"/><line class="cls-2" x1="116.3" y1="145.12" x2="146.19" y2="200.56"/><line class="cls-2" x1="146.19" y1="200.56" x2="177.93" y2="145.12"/><line class="cls-2" x1="177.93" y1="145.12" x2="209.52" y2="200.56"/><line class="cls-2" x1="309.46" y1="196.33" x2="340.64" y2="140.89"/><line class="cls-2" x1="340.64" y1="140.89" x2="370.81" y2="196.33"/><line class="cls-2" x1="370.81" y1="196.33" x2="402.27" y2="140.89"/><line class="cls-2" x1="402.27" y1="140.89" x2="432.16" y2="196.33"/><line class="cls-2" x1="432.16" y1="196.33" x2="463.9" y2="140.89"/><line class="cls-2" x1="463.9" y1="140.89" x2="495.49" y2="196.33"/><line class="cls-2" x1="495.49" y1="196.33" x2="526.35" y2="140.89"/><line class="cls-2" x1="526.35" y1="140.89" x2="559.54" y2="196.33"/><line class="cls-2" x1="112.41" y1="78.94" x2="143.58" y2="23.49"/><line class="cls-2" x1="143.58" y1="23.49" x2="173.76" y2="78.94"/><line class="cls-2" x1="173.76" y1="78.94" x2="205.22" y2="23.49"/><line class="cls-2" x1="205.22" y1="23.49" x2="235.11" y2="78.94"/><line class="cls-2" x1="235.11" y1="78.94" x2="266.85" y2="23.49"/><line class="cls-2" x1="266.85" y1="23.49" x2="298.44" y2="78.94"/><line class="cls-2" x1="298.44" y1="78.94" x2="329.3" y2="23.49"/><line class="cls-2" x1="329.3" y1="23.49" x2="362.49" y2="78.94"/><circle class="cls-1" cx="146.19" cy="200.56" r="23.49"/><circle class="cls-1" cx="209.52" cy="200.56" r="23.49"/><circle class="cls-1" cx="116.3" cy="145.12" r="23.49"/><circle class="cls-1" cx="177.93" cy="145.12" r="23.49"/><circle class="cls-1" cx="84.84" cy="200.56" r="23.49"/><circle class="cls-1" cx="54.67" cy="145.12" r="23.49"/><circle class="cls-1" cx="23.49" cy="200.56" r="23.49"/><circle class="cls-1" cx="432.16" cy="196.33" r="23.49"/><circle class="cls-1" cx="495.49" cy="196.33" r="23.49"/><circle class="cls-1" cx="402.27" cy="140.89" r="23.49"/><circle class="cls-1" cx="463.9" cy="140.89" r="23.49"/><circle class="cls-1" cx="370.81" cy="196.33" r="23.49"/><circle class="cls-1" cx="340.64" cy="140.89" r="23.49"/><circle class="cls-1" cx="309.46" cy="196.33" r="23.49"/><circle class="cls-1" cx="559.54" cy="196.33" r="23.49"/><circle class="cls-1" cx="526.35" cy="140.89" r="23.49"/><circle class="cls-1" cx="235.11" cy="78.94" r="23.49"/><circle class="cls-1" cx="298.44" cy="78.94" r="23.49"/><circle class="cls-1" cx="205.22" cy="23.49" r="23.49"/><circle class="cls-1" cx="266.85" cy="23.49" r="23.49"/><circle class="cls-1" cx="173.76" cy="78.94" r="23.49"/><circle class="cls-1" cx="143.58" cy="23.49" r="23.49"/><circle class="cls-1" cx="112.41" cy="78.94" r="23.49"/><circle class="cls-1" cx="362.49" cy="78.94" r="23.49"/><circle class="cls-1" cx="329.3" cy="23.49" r="23.49"/><circle class="cls-3" cx="146.11" cy="200.71" r="14.91"/><circle class="cls-3" cx="209.44" cy="200.71" r="14.91"/><circle class="cls-3" cx="116.31" cy="145.1" r="14.91"/><circle class="cls-3" cx="177.93" cy="145.12" r="14.91"/><circle class="cls-3" cx="84.92" cy="200.71" r="14.91"/><circle class="cls-3" cx="54.67" cy="145.12" r="14.91"/><circle class="cls-3" cx="23.5" cy="200.71" r="14.91"/><circle class="cls-3" cx="432.08" cy="196.48" r="14.91"/><circle class="cls-3" cx="495.41" cy="196.48" r="14.91"/><circle class="cls-3" cx="402.28" cy="140.87" r="14.91"/><circle class="cls-3" cx="463.9" cy="140.89" r="14.91"/><circle class="cls-3" cx="370.89" cy="196.48" r="14.91"/><circle class="cls-3" cx="340.64" cy="140.89" r="14.91"/><circle class="cls-3" cx="309.47" cy="196.48" r="14.91"/><circle class="cls-3" cx="559.54" cy="196.48" r="14.91"/><circle class="cls-3" cx="526.35" cy="140.89" r="14.91"/><circle class="cls-3" cx="235.03" cy="79.08" r="14.91"/><circle class="cls-3" cx="298.36" cy="79.08" r="14.91"/><circle class="cls-3" cx="205.23" cy="23.48" r="14.91"/><circle class="cls-3" cx="266.85" cy="23.49" r="14.91"/><circle class="cls-3" cx="173.84" cy="79.08" r="14.91"/><circle class="cls-3" cx="143.58" cy="23.49" r="14.91"/><circle class="cls-3" cx="112.42" cy="79.08" r="14.91"/><circle class="cls-3" cx="362.49" cy="79.08" r="14.91"/><circle class="cls-3" cx="329.3" cy="23.49" r="14.91"/></g></g></svg>

data/assets/img/nav-bonsai-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583.03 374.23"><defs><style>.cls-1{fill:#8c6239;}.cls-2{fill:none;stroke:#8c6239;stroke-miterlimit:10;stroke-width:10px;}.cls-3{fill:#31af31;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.05,219.83a41.35,41.35,0,0,0,1,6.4,47.68,47.68,0,0,0,2.16,6.47,56.53,56.53,0,0,0,6.91,12.22,71.84,71.84,0,0,0,9.63,10.67l2.76,2.38c.94.78,1.94,1.49,2.9,2.25,2,1.48,4,2.89,6.09,4.21a105.38,105.38,0,0,0,13.25,7.05,117.12,117.12,0,0,0,14.31,5.34c4.92,1.46,10,2.67,15.08,3.66,2.57.42,5.14.93,7.74,1.21l3.9.5,3.93.36c2.6.27,5.27.34,7.91.52l4.18.25c.72.07,1.43.06,2.15.18l2.15.34a51.45,51.45,0,0,1,16.25,5.64,53.43,53.43,0,0,1,13.41,10.41A50.61,50.61,0,0,1,300,314a43.63,43.63,0,0,1,3.66,16.26,53.33,53.33,0,0,1-1.87,16.33,60.27,60.27,0,0,1-6.42,14.95,62.45,62.45,0,0,1-9.93,12.73l-.06-.06a61.81,61.81,0,0,0,9.1-13.16,57.91,57.91,0,0,0,5.41-14.92,51.19,51.19,0,0,0,.79-15.65,40.32,40.32,0,0,0-4.33-14.75,46.28,46.28,0,0,0-21.84-20.57,44.53,44.53,0,0,0-14.37-3.87l-1.84-.16c-.61-.07-1.25,0-1.87,0-1.28,0-2.43,0-3.89.06-2.72,0-5.43.19-8.19.13-5.49.07-11-.24-16.54-.61a165.09,165.09,0,0,1-16.59-2.24,131,131,0,0,1-16.4-4.37,101,101,0,0,1-15.74-7,90.35,90.35,0,0,1-14.43-9.87,77.76,77.76,0,0,1-12.19-13c-.91-1.19-1.7-2.48-2.55-3.71s-1.56-2.59-2.33-3.88-1.41-2.69-2.05-4.06-1.27-2.77-1.76-4.23l-.78-2.17c-.24-.73-.44-1.48-.66-2.22-.47-1.46-.76-3-1.11-4.53a46.53,46.53,0,0,1-.78-9.59Z"/><line class="cls-2" x1="112.41" y1="78.94" x2="143.58" y2="23.49"/><line class="cls-2" x1="143.58" y1="23.49" x2="173.76" y2="78.94"/><line class="cls-2" x1="173.76" y1="78.94" x2="205.22" y2="23.49"/><line class="cls-2" x1="205.22" y1="23.49" x2="235.11" y2="78.94"/><line class="cls-2" x1="235.11" y1="78.94" x2="266.85" y2="23.49"/><line class="cls-2" x1="266.85" y1="23.49" x2="298.44" y2="78.94"/><line class="cls-2" x1="298.44" y1="78.94" x2="329.3" y2="23.49"/><line class="cls-2" x1="329.3" y1="23.49" x2="362.49" y2="78.94"/><line class="cls-2" x1="309.46" y1="196.33" x2="340.64" y2="140.89"/><line class="cls-2" x1="340.64" y1="140.89" x2="370.81" y2="196.33"/><line class="cls-2" x1="370.81" y1="196.33" x2="402.27" y2="140.89"/><line class="cls-2" x1="402.27" y1="140.89" x2="432.16" y2="196.33"/><line class="cls-2" x1="432.16" y1="196.33" x2="463.9" y2="140.89"/><line class="cls-2" x1="463.9" y1="140.89" x2="495.49" y2="196.33"/><line class="cls-2" x1="495.49" y1="196.33" x2="526.35" y2="140.89"/><line class="cls-2" x1="526.35" y1="140.89" x2="559.54" y2="196.33"/><line class="cls-2" x1="54.67" y1="145.12" x2="84.84" y2="200.56"/><line class="cls-2" x1="146.19" y1="200.56" x2="176.63" y2="145.12"/><line class="cls-2" x1="176.63" y1="145.12" x2="209.2" y2="200.56"/><line class="cls-2" x1="146.19" y1="200.56" x2="116.3" y2="145.12"/><line class="cls-2" x1="84.84" y1="200.56" x2="116.3" y2="145.12"/><line class="cls-2" x1="23.49" y1="200.56" x2="54.67" y2="145.12"/><circle class="cls-3" cx="146.19" cy="200.56" r="23.49"/><circle class="cls-3" cx="209.52" cy="200.56" r="23.49" transform="translate(-58.76 90.34) rotate(-21.41)"/><circle class="cls-3" cx="116.3" cy="145.12" r="23.49"/><circle class="cls-3" cx="177.93" cy="145.12" r="23.49"/><circle class="cls-3" cx="84.84" cy="200.56" r="23.49"/><circle class="cls-3" cx="54.67" cy="145.12" r="23.49"/><circle class="cls-3" cx="23.49" cy="200.56" r="23.49"/><circle class="cls-3" cx="235.11" cy="78.94" r="23.49"/><circle class="cls-3" cx="298.44" cy="78.94" r="23.49"/><circle class="cls-3" cx="205.22" cy="23.49" r="23.49"/><circle class="cls-3" cx="266.85" cy="23.49" r="23.49"/><circle class="cls-3" cx="173.76" cy="78.94" r="23.49"/><circle class="cls-3" cx="143.58" cy="23.49" r="23.49"/><circle class="cls-3" cx="112.41" cy="78.94" r="23.49"/><circle class="cls-3" cx="362.49" cy="78.94" r="23.49"/><circle class="cls-3" cx="329.3" cy="23.49" r="23.49"/><circle class="cls-3" cx="432.16" cy="196.33" r="23.49"/><circle class="cls-3" cx="495.49" cy="196.33" r="23.49"/><circle class="cls-3" cx="402.27" cy="140.89" r="23.49"/><circle class="cls-3" cx="463.9" cy="140.89" r="23.49"/><circle class="cls-3" cx="370.81" cy="196.33" r="23.49"/><circle class="cls-3" cx="340.64" cy="140.89" r="23.49"/><circle class="cls-3" cx="309.46" cy="196.33" r="23.49"/><circle class="cls-3" cx="559.54" cy="196.33" r="23.49"/><circle class="cls-3" cx="526.35" cy="140.89" r="23.49"/></g></g></svg>

data/assets/img/nav-dot-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.21 27.75"><defs><style>.cls-1{fill:#e6e1e8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,13.88C0,5.73,5.51,0,13.21,0s13,5.73,13,13.88c0,7.92-5.07,13.87-13.22,13.87C5.29,27.75,0,21.8,0,13.88Z"/></g></g></svg>

data/assets/img/nav-dot-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.21 27.75"><defs><style>.cls-1{fill:#5c5962;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,13.88C0,5.73,5.51,0,13.21,0s13,5.73,13,13.88c0,7.92-5.07,13.87-13.22,13.87C5.29,27.75,0,21.8,0,13.88Z"/></g></g></svg>

data/assets/img/nav-wiki-links-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.14 116.43"><defs><style>.cls-1{fill:#e6e1e8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.2,116.43H0q0-2.3.16-16.32T.33,59.33q0-10.33,0-26.85T0,0H47.2V7.72H11.72q-.17,16.1-.2,28.74t0,22.21q0,20.28.16,32t.16,18H47.2Z"/><path class="cls-1" d="M116.38,116.43H69.18q0-2.3.16-16.32t.16-40.78q0-10.33,0-26.85T69.18,0h47.2V7.72H80.9q-.16,16.1-.21,28.74t0,22.21q0,20.28.16,32t.17,18h35.4Z"/><path class="cls-1" d="M217,116.43h-47.2v-7.72h35.4q0-6.93.16-19.95t.16-30.09q0-8.62,0-23.09t-.2-27.86H169.77V0H217q-.25,15.9-.29,32.7t0,26.63q0,18.32.16,36.56T217,116.43Z"/><path class="cls-1" d="M286.14,116.43h-47.2v-7.72h35.4q0-6.93.17-19.95t.16-30.09q0-8.62,0-23.09t-.21-27.86H238.94V0h47.2q-.24,15.9-.28,32.7t0,26.63q0,18.32.16,36.56T286.14,116.43Z"/></g></g></svg>

data/assets/img/nav-wiki-links-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.14 116.43"><defs><style>.cls-1{fill:#5c5962;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M47.2,116.43H0q0-2.3.16-16.32T.33,59.33q0-10.33,0-26.85T0,0H47.2V7.72H11.72q-.17,16.1-.2,28.74t0,22.21q0,20.28.16,32t.16,18H47.2Z"/><path class="cls-1" d="M116.38,116.43H69.18q0-2.3.16-16.32t.16-40.78q0-10.33,0-26.85T69.18,0h47.2V7.72H80.9q-.16,16.1-.21,28.74t0,22.21q0,20.28.16,32t.17,18h35.4Z"/><path class="cls-1" d="M217,116.43h-47.2v-7.72h35.4q0-6.93.16-19.95t.16-30.09q0-8.62,0-23.09t-.2-27.86H169.77V0H217q-.25,15.9-.29,32.7t0,26.63q0,18.32.16,36.56T217,116.43Z"/><path class="cls-1" d="M286.14,116.43h-47.2v-7.72h35.4q0-6.93.17-19.95t.16-30.09q0-8.62,0-23.09t-.21-27.86H238.94V0h47.2q-.24,15.9-.28,32.7t0,26.63q0,18.32.16,36.56T286.14,116.43Z"/></g></g></svg>

data/assets/js/entry.js

@@ -0,0 +1,102 @@
+---
+---
+
+// this file is a monstrosity!
+export default class Entry {
+  constructor() {
+    // head
+    // this.entryHeadStatus set in initEntryStatus();
+    this.entryHeadCheckbox = document.getElementById('entry-head-checkbox');
+    
+    // foot
+    // this.entryFootLinksStatus set in initEntryStatus();
+    this.entryFootLinksCheckbox = document.getElementById('entry-foot-links-checkbox');
+    // this.entryFootPostsStatus set in initEntryStatus();
+    this.entryFootPostsCheckbox = document.getElementById('entry-foot-posts-checkbox');
+
+    this.init();
+  }
+
+  init() {
+    this.initEntryStatus();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    // head
+    this.entryHeadCheckbox.addEventListener('click', () => {
+      this.toggleEntryHeadCollapse();
+    });
+    // foot
+    this.entryFootLinksCheckbox.addEventListener('click', () => {
+      this.toggleEntryFootLinksCollapse();
+    });
+    this.entryFootPostsCheckbox.addEventListener('click', () => {
+      this.toggleEntryFootPostsCollapse();
+    });
+  }
+
+  initEntryStatus() {
+    // head
+    this.entryHeadStatus = localStorage.getItem('entry-head-status');
+    if (this.entryHeadStatus !== "open" && this.entryHeadStatus !== "closed") {
+      this.entryHeadStatus = '{{ site.state_head_status }}';	
+    }
+    this.entryHeadCheckbox.checked = (this.entryHeadStatus === "closed"); 
+    this.toggleEntryHeadCollapse();
+
+    // foot
+    this.entryFootLinksStatus = localStorage.getItem('entry-foot-links-status');
+    if (this.entryFootLinksStatus !== "open" && this.entryFootLinksStatus !== "closed") {
+      this.entryFootLinksStatus = '{{ site.state_foot_links_status }}';	
+    }
+    this.entryFootLinksCheckbox.checked = (this.entryFootLinksStatus === "closed"); 
+    this.toggleEntryFootLinksCollapse();
+
+    this.entryFootPostsStatus = localStorage.getItem('entry-foot-posts-status');
+    if (this.entryFootPostsStatus !== "open" && this.entryFootPostsStatus !== "closed") {
+      this.entryFootPostsStatus = '{{ site.state_foot_posts_status }}';	
+    }
+    this.entryFootPostsCheckbox.checked = (this.entryFootPostsStatus === "closed"); 
+    this.toggleEntryFootPostsCollapse();
+  }
+
+  toggleEntryHeadCollapse () {
+    // from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible
+    var collapsibleEl = document.getElementsByClassName('entry-head-breadcrumbs')[0];
+    if (this.entryHeadCheckbox.checked) {
+      collapsibleEl.style.display = "none";
+      this.entryHeadStatus = "closed";
+    } else {
+      collapsibleEl.style.display = "flex";
+      this.entryHeadStatus = "open";
+    }
+    localStorage.setItem('entry-head-status', this.entryHeadStatus);
+  } 
+
+  toggleEntryFootLinksCollapse () {
+    // from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible
+    var collapsibleEl = document.getElementById('entry-foot-links-nav');
+    if (this.entryFootLinksCheckbox.checked) {
+      collapsibleEl.style.display = "none";
+      this.entryFootLinksStatus = "closed";
+    } else {
+      collapsibleEl.style.display = "flex";
+      this.entryFootLinksStatus = "open";
+    }
+    localStorage.setItem('entry-foot-links-status', this.entryFootLinksStatus);
+  }
+
+  toggleEntryFootPostsCollapse () {
+    // from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible
+    var collapsibleEl = document.getElementById('entry-foot-posts-nav');
+    if (this.entryFootPostsCheckbox.checked) {
+      collapsibleEl.style.display = "none";
+      this.entryFootPostsStatus = "closed";
+    } else {
+      collapsibleEl.style.display = "flex";
+      this.entryFootPostsStatus = "open";
+    }
+    localStorage.setItem('entry-foot-posts-status', this.entryFootPostsStatus);
+  } 
+}

data/assets/js/graph.js

@@ -0,0 +1,552 @@
+---
+---
+
+export default class GraphNav {
+
+  constructor() {
+    // this.graphType set in initGraphType();
+    this.svgWrapper = document.getElementById('svg-graph');
+    this.graphTypeCheckBox = document.getElementById('graph-type-checkbox');
+    this.graphTypeEmojiSpan = document.getElementById('graph-type-emoji-span');
+    this.init();
+  }
+
+  init() {
+    this.initGraphType();
+    this.bindEvents();
+    this.drawD3Nav();
+  }
+  
+  bindEvents() {
+    // listen for draw event (esp. from theme colors)
+    this.svgWrapper.addEventListener('draw', () => {
+      this.updateGraphType();
+      this.drawD3Nav();
+    });
+    this.graphTypeCheckBox.addEventListener('click', () => {
+      this.updateGraphType();
+      this.drawD3Nav();
+    });
+  }
+  
+  // how to checkbox: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_display_checkbox_text
+  drawD3Nav() {   
+    // destroy old chart   
+    d3.select(this.svgWrapper).selectAll('svg > *').remove();
+  
+    let theme_attrs = {};
+    // set theme-dependent graph attributes.
+    if (document.getElementById('theme-colors-checkbox').checked) {
+      theme_attrs = {
+        "name": "dark",
+        "radius": 2.5,
+        "missing-radius": 2.5,
+      }
+    } else {
+        theme_attrs = {
+        "name": "light",
+        "radius": 3,
+        "missing-radius": 1.5,
+      }
+    }
+    // redraw new chart
+    if (this.graphTypeCheckBox.checked) {
+      this.drawTree(theme_attrs);
+    } else {
+      this.drawNetWeb(theme_attrs);
+    }
+  }
+  
+  initGraphType() {
+    this.graphType = localStorage.getItem('graph-type');
+    if (this.graphType !== "tree" && this.graphType !== "net-web") {
+      this.graphType = '{{ site.graph_type }}';	
+    }
+    this.graphTypeCheckBox.checked = (this.graphType === "tree");
+    this.updateGraphType();
+  }
+
+  updateGraphType() {
+    if (this.graphTypeCheckBox.checked) {
+      this.graphTypeEmojiSpan.innerText = "🕸";
+      this.graphType = "tree";
+    } else {
+      this.graphTypeEmojiSpan.innerText = "🌳";
+      this.graphType = "net-web";
+    }
+    localStorage.setItem('graph-type', this.graphType);
+  } 
+
+  // d3
+  drawNetWeb (theme_attrs) {
+    // d3.json has been async'd: https://stackoverflow.com/questions/49768165/code-within-d3-json-callback-is-not-executed 
+    d3.json("{{ site.baseurl }}/assets/graph-net-web.json")
+      .then(function(data) {       
+          // console.log('d3 is building a tree');
+          // console.log(data);      
+          const svgWrapper = document.getElementById('svg-graph');
+          const width = +svgWrapper.getBoundingClientRect().width / 2;
+          const height = +svgWrapper.getBoundingClientRect().height / 2;
+          const svg = d3.select(svgWrapper)
+              .attr("viewBox", [-width / 2, -height / 2, width, height]);
+
+          const simulation = d3.forceSimulation()
+              .nodes(data.nodes)
+              .force("link", d3.forceLink()
+                  .id(function(d) {return d.id;})
+                  .distance(30)
+                  .iterations(1)
+                  .links(data.links))
+              .force("charge", d3.forceManyBody().strength(-50))
+              .force("collide", d3.forceCollide())
+              .force("center", d3.forceCenter())
+              // see: https://stackoverflow.com/questions/9573178/d3-force-directed-layout-with-bounding-box?answertab=votes#tab-top
+              // 'center of gravity'
+              .force("forceX", d3.forceX()
+                  .strength(.3)
+                  .x(.75))
+              .force("forceY", d3.forceY()
+                  .strength(.1)
+                  .y(.9));
+  
+          const link = svg.append("g")
+                          .attr("class", "links")
+                          .selectAll("line")
+                          .data(data.links)
+                          .enter().append("line");
+
+          const node = svg.append('g')
+                          .attr('class', 'nodes')
+                          .selectAll('g')
+                          .data(data.nodes)
+                          .join("g");
+          // .attr("active", (d) => isCurrentEntryInNetWeb(d) ? true : null)
+
+          node.append('circle')
+              //svg 2.0 not well-supported: https://stackoverflow.com/questions/47381187/svg-not-working-in-firefox
+              // add attributes in javascript instead of css.
+              .attr("r", (d) => isMissingEntryInNetWeb(d) ? theme_attrs["missing-radius"] : theme_attrs["radius"])
+              .attr("class", nodeTypeInNetWeb)
+              .on("click", goToEntryFromNetWeb)
+              .on("mouseover", onMouseover)
+              .on("mouseout", onMouseout)
+              .call(d3.drag()
+                      .on("start", dragstarted)
+                      .on("drag", dragged)
+                      .on("end", dragended)
+                      .touchable(true));
+
+          // from: https://stackoverflow.com/questions/28415005/d3-js-selection-conditional-rendering
+          // use filtering to deal with specific nodes
+          // from: https://codepen.io/blackjacques/pen/BaaqKpO
+          // add node pulse on the current node
+          node.filter( function(d,i) { return isCurrentEntryInNetWeb(d); })
+              .append("circle")
+              .attr("r", theme_attrs["radius"])
+              .classed("pulse", (d) => isCurrentEntryInNetWeb(d) ? true : null)
+              .on("mouseover", onMouseover)
+              .on("mouseout", onMouseout)
+              .call(d3.drag()
+                  .on("start", dragstarted)
+                  .on("drag", dragged)
+                  .on("end", dragended)
+                  .touchable(true));
+  
+          node.filter( function(d,i) { return isPostTaggedInNetWeb(d); })
+              .append("circle")
+              .attr("r", theme_attrs["radius"])
+              .classed("pulse-sem-tag", (d) => isPostTaggedInNetWeb(d) ? true : null)
+              .on("mouseover", onMouseover)
+              .on("mouseout", onMouseout)
+              .call(d3.drag()
+                  .on("start", dragstarted)
+                  .on("drag", dragged)
+                  .on("end", dragended)
+                  .touchable(true));        
+
+          const text = svg.append('g')
+                          .attr('class', 'text')
+                          .selectAll('text')
+                          .data(data.nodes)
+                          .join("text")
+                            .attr("font-size", "20%")
+                            .attr("dx", 5)
+                            .attr("dy", ".05em")
+                            .text((d) => isMissingEntryInNetWeb(d) ? "Missing Entry" : d.label)
+                            .on("mouseover", onMouseover)
+                            .on("mouseout", onMouseout);
+    
+          simulation.on("tick", () => {
+              link
+                .attr("x1", function(d) { return d.source.x; })
+                .attr("y1", function(d) { return d.source.y; })
+                .attr("x2", function(d) { return d.target.x; })
+                .attr("y2", function(d) { return d.target.y; });
+              node
+                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+              text
+                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });  
+          });
+  
+           //
+          // helpers
+           //
+
+          function isCurrentEntryInNetWeb(node) {
+            return !isMissingEntryInNetWeb(node) && window.location.pathname.includes(node.url);
+          }
+
+          function isPostTaggedInNetWeb(node) {
+            // const isPostPage = window.location.pathname.includes("post");
+            // if (!isPostPage) return false;
+            const semTags = Array.from(document.getElementsByClassName("sem-tag"));
+            const tagged = semTags.filter((semTag) => 
+              !isMissingEntryInNetWeb(node) && semTag.href.includes(node.url)
+            );
+            return tagged.length !== 0;
+          }
+
+          function nodeTypeInNetWeb(node) {
+            const isVisited = isVisitedEntryInNetWeb(node);
+            const isMissing = isMissingEntryInNetWeb(node);            
+            if (isVisited) {
+              return "visited";
+            } else if (!isVisited && !isMissing) {
+              return "unvisited";
+            } else if (isMissing) {
+              return "missing";
+            } else {
+              console.log("WARN: Not a valid node type.");
+              return null;
+            }
+          }
+
+          function isVisitedEntryInNetWeb(node) {
+            if (!isMissingEntryInNetWeb(node)) {
+              var visited = JSON.parse(localStorage.getItem('visited'));
+              for (let i = 0; i < visited.length; i++) {
+                if (visited[i]['url'] === node.url) return true;
+              }
+            }
+            return false;
+          }
+          
+          function isMissingEntryInNetWeb(node) {
+            return node.url === '';
+          }
+  
+          // from: https://stackoverflow.com/questions/63693132/unable-to-get-node-datum-on-mouseover-in-d3-v6
+          // d6 now passes events in vanilla javascript fashion
+          function goToEntryFromNetWeb (e, d) {
+            if (!isMissingEntryInNetWeb(d)) {
+              window.location.href = d.url;
+            } else {
+              return null;
+            }
+          };
+
+          function onMouseover(e, d) {
+            const linkedNodesSet = new Set();
+            data.links
+              .filter((n) => n.target.id == d.id || n.source.id == d.id)
+              .forEach((n) => {
+                linkedNodesSet.add(n.target.id);
+                linkedNodesSet.add(n.source.id);
+              });
+      
+            node.attr("class", (node_d) => {
+              if (node_d.id !== d.id && !linkedNodesSet.has(node_d.id)) {
+                return "inactive";
+              }
+              return "active";
+            });
+      
+            link.attr("class", (link_d) => {
+              if (link_d.source.id !== d.id && link_d.target.id !== d.id) {
+                return "inactive";
+              }
+              return "active";
+            });
+      
+            text.attr("class", (text_d) => {
+              if (text_d.id !== d.id) {
+                return "inactive";
+              }
+              return "active";
+            });
+          };
+      
+          function onMouseout(d) {
+            node.attr("class", "");
+            link.attr("class", "");
+            text.attr("class", "");
+          };
+
+          function dragstarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+          }
+
+          function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+          }
+
+          function dragended(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+          }
+      })
+      .catch(function(error) {
+          console.log(error);
+      });
+  }
+  
+  drawTree (theme_attrs) { 
+    // d3.json has been async'd: https://stackoverflow.com/questions/49768165/code-within-d3-json-callback-is-not-executed 
+    d3.json("{{ site.baseurl }}/assets/graph-tree.json")
+      .then(function(data) {
+          // console.log('d3 is building a tree');
+          // console.log(data);
+          const svgWrapper = document.getElementById('svg-graph');
+          const width = +svgWrapper.getBoundingClientRect().width / 2;
+          const height = +svgWrapper.getBoundingClientRect().height / 2;
+          const svg = d3.select(svgWrapper)
+              .attr("viewBox", [-width / 2, -height / 2, width, height]);
+
+          const root = d3.hierarchy(data);
+          const links = root.links();
+          flatten(root);
+          const nodes = root.descendants();
+  
+          const simulation = d3.forceSimulation(nodes)
+              .force("link", d3.forceLink(links).id(d => d.id).distance(0).strength(1))
+              .force("charge", d3.forceManyBody().strength(-50))
+              .force("collide", d3.forceCollide())
+              .force("center", d3.forceCenter())
+              // see: https://stackoverflow.com/questions/9573178/d3-force-directed-layout-with-bounding-box?answertab=votes#tab-top
+              // 'center of gravity'            
+              .force("forceX", d3.forceX()
+                  .strength(.3)
+                  .x(.9))
+              .force("forceY", d3.forceY()
+                  .strength(.1)
+                  .y(.9));
+
+          const link = svg.append("g")
+              .attr("class", "links")
+              .selectAll("line")
+              .data(links)
+              .join("line");
+        
+          const node = svg.append('g')
+              .attr('class', 'nodes')
+              .selectAll('g')
+              .data(nodes)
+              .join("g");
+
+          node.append('circle')
+                //svg 2.0 not well-supported: https://stackoverflow.com/questions/47381187/svg-not-working-in-firefox
+                // add attributes in javascript instead of css.
+                .attr("r",  (d) => isMissingEntryInTree(d.data.id) ? theme_attrs["missing-radius"] : theme_attrs["radius"])
+                .attr("class", nodeTypeInTree)
+                .on("click", goToEntryFromTree)
+                .on("mouseover", onMouseover)
+                .on("mouseout", onMouseout)
+                // 🐛 bug: this does not work -- it overtakes clicks (extra lines in "tick" are related).
+                .call(d3.drag()
+                    .on("start", dragstarted)
+                    .on("drag", dragged)
+                    .on("end", dragended)
+                    .touchable(true));
+          
+          // from: https://stackoverflow.com/questions/28415005/d3-js-selection-conditional-rendering
+          // use filtering to deal with specific nodes
+          // from: https://codepen.io/blackjacques/pen/BaaqKpO
+          // add node pulse on the current node
+          node.filter( function(d,i) { return isCurrentEntryInTree(d); })
+              .append("circle")
+              .attr("r",  (d) => theme_attrs["radius"])
+              .classed("pulse", true)
+              .on("mouseover", onMouseover)
+              .on("mouseout", onMouseout)
+              .call(d3.drag()
+                .on("start", dragstarted)
+                .on("drag", dragged)
+                .on("end", dragended)
+                .touchable(true));
+  
+          node.filter( function(d,i) { return isPostTaggedInTree(d); })
+              .append("circle")
+              .attr("r", theme_attrs["radius"])
+              .classed("pulse-sem-tag", (d) => isPostTaggedInTree(d) ? true : null)
+              .on("click", goToEntryFromTree)
+              .on("mouseover", onMouseover)
+              .on("mouseout", onMouseout)
+              .call(d3.drag()
+                  .on("start", dragstarted)
+                  .on("drag", dragged)
+                  .on("end", dragended)
+                  .touchable(true));  
+
+          const text = svg.append('g')
+                          .attr('class', 'text')
+                          .selectAll('text')
+                          .data(nodes)
+                          .join("text")
+                            .attr("font-size", "20%")
+                            .attr("dx", 5)
+                            .attr("dy", ".05em")
+                            .text((d) => isMissingEntryInTree(d.data.id) ? "Missing Entry" : d.data.label)
+                            .on("mouseover", onMouseover)
+                            .on("mouseout", onMouseout);
+
+          simulation.on("tick", () => {
+              // from: https://mbostock.github.io/d3/talk/20110921/parent-foci.html
+              // preserve hierarchical shape via link positioning
+              var kx = .2 * simulation.alpha();
+              var ky = 1.3 * simulation.alpha();
+              links.forEach(function(d, i) {
+                d.target.x += (d.source.x - d.target.x) * kx;
+                d.target.y += (d.source.y + (height * .35) - d.target.y) * ky;
+              });
+
+              link
+                .attr("x1", d => d.source.x)
+                .attr("y1", d => d.source.y)
+                .attr("x2", d => d.target.x)
+                .attr("y2", d => d.target.y);
+              node
+                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });  
+              text
+                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+          });
+  
+           //
+          // helpers
+           //
+          function isCurrentEntryInTree(node) {
+            return !isMissingEntryInTree(node.data.id) && window.location.pathname.includes(node.data.url);
+          }
+
+          function isPostTaggedInTree(node) {
+            // const isPostPage = window.location.pathname.includes("post");
+            // if (!isPostPage) return false;
+            const semTags = Array.from(document.getElementsByClassName("sem-tag"));
+            const tagged = semTags.filter((semTag) => 
+              !isMissingEntryInTree(node.data.id) && semTag.href.includes(node.data.url)
+            );
+            return tagged.length !== 0;
+          }
+
+          function nodeTypeInTree(node) {
+            const isVisited = isVisitedEntryInTree(node);
+            const isMissing = isMissingEntryInTree(node.data.id);            
+            if (isVisited) {
+              return "visited";
+            } else if (!isVisited && !isMissing) {
+              return "unvisited";
+            } else if (isMissing) {
+              return "missing";
+            } else {
+              console.log("WARN: Not a valid node type.");
+              return null;
+            }
+          }
+
+          function isVisitedEntryInTree(node) {
+            var visited = JSON.parse(localStorage.getItem('visited'));
+            for (let i = 0; i < visited.length; i++) {
+              if (visited[i]['url'] === node.data.url) {
+                return true;
+              }
+            }
+            return false;
+          }
+  
+          function isMissingEntryInTree(nodeId) {
+            return nodeId === "";
+          }
+  
+          // from: https://stackoverflow.com/questions/63693132/unable-to-get-node-datum-on-mouseover-in-d3-v6
+          // d6 now passes events in vanilla javascript fashion
+          function goToEntryFromTree(e, d) {
+            if (!isMissingEntryInTree(d.data.id)) {
+              window.location.href = d.data.url;
+              return true;
+            } else {
+              return false;
+            }
+          };    
+
+          function onMouseover(e, d) {
+            const linkedNodesSet = new Set();
+            links
+              .filter((n) => n.target.data.id == d.data.id || n.source.data.id == d.data.id)
+              .forEach((n) => {
+                linkedNodesSet.add(n.target.data.id);
+                linkedNodesSet.add(n.source.data.id);
+              });
+      
+            node.attr("class", (node_d) => {
+              if (node_d.data.id !== d.data.id && !linkedNodesSet.has(node_d.data.id)) {
+                return "inactive";
+              }
+              return "active";
+            });
+      
+            link.attr("class", (link_d) => {
+              if (link_d.source.data.id !== d.data.id && link_d.target.data.id !== d.data.id) {
+                return "inactive";
+              }
+              return "active";
+            });
+      
+            text.attr("class", (text_d) => {
+              if (text_d.data.id !== d.data.id) {
+                return "inactive";
+              }
+              return "active";
+            });
+          };
+      
+          function onMouseout(d) {
+            node.attr("class", "");
+            link.attr("class", "");
+            text.attr("class", "");
+          };
+
+          function dragstarted(event, d) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            d.fx = d.x;
+            d.fy = d.y;
+          }
+  
+          function dragged(event, d) {
+            d.fx = event.x;
+            d.fy = event.y;
+          }
+  
+          function dragended(event, d) {
+            if (!event.active) simulation.alphaTarget(0);
+            d.fx = null;
+            d.fy = null;
+          }
+                            
+          function flatten(root) {
+            var nodes = [];
+            function recurse(node) {
+              if (node.descendents) node.descendents.forEach(recurse);
+              nodes.push(node);
+            }
+            recurse(root);
+            return nodes;
+          }
+      })
+      .catch(function(error) {
+          console.log(error);
+      });
+  }
+}