spoko-design-system 0.0.1

package/public/make-scrollable-code-focusable.js

@@ -0,0 +1,3 @@
+Array.from(document.getElementsByTagName('pre')).forEach((element) => {
+	element.setAttribute('tabindex', '0');
+});

package/public/twitter.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 231.104 231.104" style="enable-background:new 0 0 231.104 231.104;" xml:space="preserve">
+<g>
+	<path style="fill:#3FA9F5;" d="M4.453,173.33c9.763-1.192,19.663,0.092,29.426-1.512c4.904-0.779,9.396-2.429,13.842-4.171
+		c-11-7.058-20.901-15.125-30.113-24.796c-3.3-3.438-0.917-9.213,3.896-9.35c3.942,0.183,7.792-0.137,11.55-0.917
+		c-9.58-12.146-17.005-25.209-22.78-39.876c-1.558-3.942,3.025-7.929,6.738-6.738c2.154,0.871,4.354,1.467,6.6,1.925
+		c-6.829-16.409-8.25-32.955-4.446-51.106c0.871-4.171,6.371-5.179,9.167-2.429c21.909,21.541,49.593,31.9,79.202,36.85
+		c-2.613-20.259,11.78-41.801,30.663-48.86c15.676-5.821,36.714-1.833,47.256,11.367c7.059-4.446,16.821-5.913,24.659-7.288
+		c4.125-0.688,8.113,3.346,5.684,7.425c-2.842,4.767-5.546,9.854-8.525,14.713c6.05-1.788,12.284-2.888,18.517-3.667
+		c4.492-0.596,7.196,6.325,3.759,9.075c-7.288,5.821-14.53,12.467-22.276,17.784c-0.229,51.472-15.263,94.649-61.235,123.937
+		c-38.319,24.477-109.546,20.352-142.867-12.97H3.124c-1.467-0.367-2.246-1.467-2.521-2.658c-1.283-1.925-0.367-4.308,1.329-5.225
+		C2.574,174.063,3.399,173.467,4.453,173.33z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/sandbox.config.json

@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}

package/src/MyComponent.astro

@@ -0,0 +1,8 @@
+---
+// Write your component code in this file!
+interface Props {
+	prefix?: string;
+}
+---
+
+<div>{Astro.props.prefix} My special component</div>

package/src/assets/hand-drive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1672.041" height="1177.211" class="h-auto w-12 hidden sm:block" viewBox="0 0 442.394 311.47"><path fill="#3b82f6" d="M118.895 7.98c22.235-.001 41.301 14.012 48.826 33.657h-14.78a38.653 38.653 0 0 0-34.046-20.158A38.652 38.652 0 0 0 84.85 41.637H70.071c7.525-19.644 26.59-33.657 48.824-33.658" style="paint-order:markers fill stroke" transform="translate(184.585 55.56)"/><path fill="#9CA3AF" d="M542.7-27.883c8.087.031 13.125.097 15.439.198 34.122 1.484 57.076 7.308 66.111 16.144 2.048 2.003 4.224 4.928 8.979 12.153 4.644 7.055 10.959 17.385 18.037 29.458a1610.988 1610.988 0 0 1 16.902 29.584 499.851 499.851 0 0 0 2.856 5.055c.383.666.703 1.218.941 1.619.12.2.217.363.295.488.079.126.028.115.254.358.23.247.384.296.547.369.163.073.328.131.51.185.362.108.779.196 1.209.253l2.486.324.115-11.014c.09-8.614.174-9.956.53-11.043 1.84-5.625 5.655-9.194 10.925-10.31 2.042-.433 6.373-.498 11.073-.196s9.836.946 13.742 1.815a45.86 45.86 0 0 1 5.16 1.455c10.043 3.506 15.43 9.741 15.955 18.347.432 7.09-3.678 13.064-12.033 17.09-4.877 2.351-13.481 4.571-21.873 5.584-1.63.197-2.562.315-3.194.469-.315.076-.571.115-.912.42-.17.152-.35.43-.388.719-.04.287.036.513.1.658a55.621 55.621 0 0 1 1.717 4.57c.056.183.1.337.126.442.027.104.027.209.024.058.011.481.23 1.21.714 1.635.485.426 1.073.708 2.094 1.215 6.838 3.397 11.549 8.76 13.29 14.99.382 1.37.443 4.061.443 54.764 0 28.238.01 41.86-.135 49.072-.145 7.213-.416 7.876-1.043 10.635-1.094 4.807-3.173 9.945-5.291 13.17l-1.202 1.83-.144 16.83-.14 16.39-.678 2.19c-1.985 6.417-5.524 10.3-11.147 12.328-1.646.594-2.604.87-5.982 1.021-3.378.152-9.072.145-19.8.098l-19.96-.088-2.185-.682c-5.72-1.78-9.34-4.74-11.522-9.321-.929-1.952-1.333-2.816-1.574-4.63-.241-1.813-.286-4.616-.344-10.1l-.115-10.843H393.588l-.115 10.844c-.058 5.483-.102 8.286-.344 10.1-.24 1.813-.645 2.677-1.574 4.629-2.181 4.581-5.8 7.54-11.521 9.321l-2.186.682-20.486.053c-8.163.02-13.418.016-16.803-.03-3.385-.044-4.945-.148-5.498-.253-7.135-1.366-11.793-5.68-14.103-13.13l-.68-2.19-.139-16.39-.143-16.83-1.2-1.83c-2.119-3.224-4.198-8.362-5.292-13.17-.627-2.758-.898-3.421-1.042-10.634-.145-7.213-.135-20.834-.135-49.072 0-50.703.06-53.394.443-54.764 1.74-6.23 6.439-11.576 13.309-14.998l1.312-.65.41-.203.115-.055c.025-.012.148-.056-.033.012l.172-.085s.083-.055.114-.08a.97.97 0 0 0 .232-.267 1.742 1.742 0 0 0 .136-.305 7.66 7.66 0 0 0 .123-.385c.091-.302.202-.7.315-1.135.301-1.155 1.047-3.182 1.81-4.88.111-.247.104-.616.004-.844a1.026 1.026 0 0 0-.318-.418c-.188-.152-.31-.19-.433-.237a5.284 5.284 0 0 0-.835-.222c-.667-.137-1.616-.278-2.863-.43-17.774-2.164-28.547-7.335-32.262-14.822-1.309-2.639-1.813-5.07-1.644-7.846.476-7.795 4.927-13.628 13.375-17.326 6.182-2.705 13.915-4.074 25.123-4.379 4.508-.122 5.784-.073 7.295.25 5.438 1.165 9.203 4.661 11.063 10.344.356 1.089.437 2.425.527 11.102l.115 11.152 2.683-.53 1.952-.384 3.234-5.684c12-21.076 22.107-38.262 29.873-50.836 7.766-12.573 13.3-20.62 15.74-23.06 6.93-6.93 22.6-11.937 46.39-14.358 13.694-1.393 14.028-1.4 59.169-1.521 14.506-.039 25.64-.043 33.727-.012m-29.629 13.951c-49.809 0-49.577-.002-64.073 1.608-16.726 1.858-29.154 5.04-34.822 9.3-1.128.849-2.51 2.672-4.61 5.68-2.099 3.008-4.79 7.139-8.02 12.313-6.463 10.348-15.092 24.865-25.436 42.832a823.06 823.06 0 0 0-2.979 5.213 72.249 72.249 0 0 1-1.785 4.05s3.21.02 5.528.06c3.358.054 9.15.092 18.896.12 19.49.056-38.301.066 117.945.066h142.916l-1.494-2.619-7.193-12.632c-7.842-13.77-15.226-26.237-21.102-35.71-2.937-4.735-5.497-8.722-7.554-11.755-2.057-3.033-3.56-5.074-4.602-6.096-2.791-2.74-8.066-4.99-15.289-6.914-7.223-1.925-16.387-3.458-26.834-4.432-11.4-1.061-12.56-1.084-59.492-1.084m181.847 63.367h-3.724v17.799l2.012-.308c.385-.06 1.699-.198 2.773-.285 2.976-.243 8.623-1.094 11.557-1.74 2.845-.628 5.505-1.43 7.674-2.29 2.168-.859 3.828-1.71 4.816-2.742.637-.665.983-1.554.879-2.418-.105-.864-.583-1.622-1.254-2.295-1.344-1.345-3.553-2.477-6.514-3.41-4.36-1.374-11.9-2.31-18.219-2.31m-358.912 0h-3.725c-8.483 0-17.353 1.432-21.878 3.72-1.63.822-2.853 1.81-3.551 2.943-.349.566-.567 1.188-.557 1.84.011.651.283 1.305.748 1.8 1.75 1.863 5.152 3.232 9.885 4.457 4.733 1.225 10.783 2.205 17.658 2.817.291.026.62-.11.791-.258.172-.15.241-.283.291-.389.1-.212.124-.36.153-.531.058-.342.089-.762.115-1.373.052-1.223.07-3.175.07-6.22zM513.6 81.203c-84.776 0-124.23-.026-143.082.14-9.426.084-13.688.21-15.967.424s-2.67.574-3.705.919c-2.803.933-4.928 2.177-6.402 3.947-1.475 1.77-2.238 4.016-2.477 6.76-.213 2.448-.647 3.93-1.494 5.002-.847 1.072-2.222 1.87-4.605 2.7-4.478 1.56-7.998 3.79-9.213 6.463-.678 1.494-.574 3.583-.578 52.415-.004 43.967.016 51.143.404 53.716 1.482 9.835 5.882 16.59 12.787 19.108.666.243 1.144.552 3.754.71 2.61.16 7.588.258 18.064.321 20.954.126 63.865.103 153.307.08 81.228-.02 123.744-.036 146.146-.103 22.403-.068 24.53-.1 25.723-.455 3.75-1.118 6.76-3.024 9.069-5.895 2.308-2.871 3.918-6.664 5.068-11.558.14-.596.265-1.166.347-2.366.083-1.2.138-3.068.178-6.482.08-6.827.1-19.825.14-45.752.047-29.365.124-42.659-.116-48.967-.12-3.154-.27-4.556-.719-5.559a2.95 2.95 0 0 0-.877-1.105c-.296-.227-.5-.342-.726-.545-1.85-1.663-4.222-2.955-7.294-4.025-2.383-.83-3.758-1.63-4.605-2.701-.847-1.072-1.281-2.554-1.494-5.003-.238-2.743-1.003-4.99-2.477-6.76-1.474-1.77-3.6-3.013-6.404-3.946-1.034-.345-1.425-.705-3.703-.918-2.279-.214-6.54-.341-15.967-.424-18.853-.167-58.306-.141-143.082-.141M366.658 97.234c.472.006.956.03 1.454.074 1.992.177 4.214.666 6.79 1.49.26.084 1.343.518 2.837 1.157 1.494.64 3.463 1.5 5.744 2.51a1944.587 1944.587 0 0 1 16.11 7.236 1835.336 1835.336 0 0 1 15.75 7.23 432.464 432.464 0 0 1 5.298 2.506c.657.319 1.189.58 1.566.774.378.194.708.419.549.293-.01-.008.684.785 1.495 1.994.81 1.21 1.88 2.912 3.183 5.069l4.277 7.08h59.184l.701-2.737c1.56-6.08 6.18-11.7 11.994-14.558 3.629-1.785 5.79-2.264 10.139-2.247 4.322.018 6.262.457 9.88 2.231 5.735 2.81 10.497 8.604 12.007 14.572l.693 2.739h59.177l4.28-7.08c1.312-2.172 2.382-3.873 3.19-5.077.807-1.203 1.49-1.982 1.484-1.978-.096.074-.01.007.09-.047.099-.055.245-.131.43-.225.367-.187.888-.442 1.533-.754a475.42 475.42 0 0 1 5.212-2.462 2055.44 2055.44 0 0 1 15.561-7.16c5.681-2.59 11.427-5.186 15.951-7.202 2.262-1.008 4.22-1.87 5.707-2.513 1.488-.644 2.555-1.083 2.846-1.182 5.096-1.739 9.404-2.128 12.728-1.278 3.596.92 6.357 2.845 8.672 6.227 2.315 3.382 4.135 8.252 5.588 14.916 2.355 10.802 1.978 18.769-.978 24.736-1.737 3.507-5.294 6.817-8.557 8.037.11-.04-.235.063-.644.153-.41.09-.977.208-1.676.35-1.398.283-3.323.66-5.596 1.095-4.546.871-10.488 1.98-16.432 3.072a2368.808 2368.808 0 0 1-16.441 2.97c-2.276.4-4.205.733-5.607.964-.702.116-1.272.207-1.684.268-.363.053-.585.069-.566.074a2.692 2.692 0 0 1-.286-.051 28.66 28.66 0 0 1-.904-.246c-.763-.219-1.822-.538-3.092-.934a535.23 535.23 0 0 1-9.539-3.085c-6.776-2.255-10.422-3.496-12.45-4.356-2.03-.86-2.302-1.175-2.882-1.988l-.88-1.237h-57.131l-.539 1.18c-.177.388-1.019 1.561-2.007 2.678-.989 1.117-2.156 2.273-3.036 2.976-6.109 4.884-14.142 6.304-21.494 3.803-4.93-1.676-8.735-4.63-11.994-9.345l-.893-1.292h-56.794l-.883 1.237c-.58.813-.85 1.128-2.879 1.988-2.03.86-5.677 2.1-12.453 4.356-4.803 1.598-8.166 2.69-10.422 3.375a55.99 55.99 0 0 1-2.584.732c-.604.15-1.015.193-.986.193.135.003-.203-.023-.579-.08-.376-.057-.9-.14-1.552-.248-1.304-.215-3.12-.525-5.31-.908a2335.3 2335.3 0 0 1-16.595-2.975 1566.72 1566.72 0 0 1-16.824-3.156c-2.2-.428-4.019-.793-5.338-1.068a82.437 82.437 0 0 1-1.581-.344c-.39-.09-.69-.179-.649-.164-4.865-1.812-8.64-6.355-10.32-12.66-.63-2.364-.669-2.84-.682-7.404-.015-5.317.145-6.738 1.441-12.753 2.068-9.591 5.16-15.728 8.948-18.517 2.11-1.554 2.98-1.977 5.292-2.569a15.084 15.084 0 0 1 3.957-.455m293.626 13.85c-1.24 0-2.83.578-6.631 2.168-3.802 1.59-9.72 4.24-19.11 8.514l-20.875 9.502-2.928 4.87a221.117 221.117 0 0 0-1.94 3.284c-.247.427-.446.775-.585 1.03-.07.127-.123.228-.168.32a1.743 1.743 0 0 0-.068.154c-.014.034-.03.069-.05.168-.012.05-.029.113-.024.252.001.035.011.123.011.123l.041.168.106.219.211.236c.163.133.179.118.213.135l.08.037c.047.02.094.036.148.057.11.04.248.092.422.154.348.123.829.29 1.4.484a572.226 572.226 0 0 0 8.35 2.765c.58.188 1.071.344 1.432.456a23.731 23.731 0 0 0 .598.176c.048.012.023.029.246.042.266.017.192-.005.23-.01l.123-.017a26.2 26.2 0 0 0 .371-.059c.311-.05.752-.125 1.313-.222 1.12-.194 2.718-.475 4.673-.822 3.91-.695 9.256-1.658 15.094-2.718 8.051-1.461 13.379-2.45 16.738-3.119 1.68-.334 2.865-.585 3.668-.781.402-.098.707-.18.952-.262.122-.04.228-.078.343-.132.116-.055.243-.068.473-.368 1.137-1.481 1.357-3.84 1.274-6.91-.084-3.07-.606-6.821-1.551-10.793-.64-2.684-1.29-4.806-1.946-6.32-.327-.757-.65-1.362-1.025-1.842-.376-.48-.862-.94-1.61-.94zm-293.37 0c-.747 0-1.231.46-1.607.94-.376.479-.7 1.084-1.027 1.841-.656 1.515-1.305 3.636-1.944 6.32-.945 3.972-1.467 7.723-1.55 10.793-.084 3.07.135 5.429 1.27 6.91.228.297.357.311.472.366.115.054.22.094.341.135.243.08.543.161.94.26.794.194 1.964.446 3.62.778 3.31.664 8.559 1.646 16.478 3.094a5280.66 5280.66 0 0 0 14.92 2.71c1.943.348 3.535.634 4.662.832a218.717 218.717 0 0 0 1.71.292c.096.015.075.023.263.034.339.019.356-.026.497-.057.142-.03.305-.071.5-.123.39-.104.903-.251 1.508-.434 1.212-.364 2.8-.867 4.48-1.425a881.827 881.827 0 0 0 4.325-1.448c.56-.19 1.018-.345 1.34-.457a20.086 20.086 0 0 0 .502-.178l.062-.025.055-.025.058-.032c.027-.015.137-.093.137-.093l.211-.236.106-.22.04-.167s.011-.089.012-.123c.005-.14-.012-.202-.023-.252-.022-.1-.04-.133-.053-.168a1.825 1.825 0 0 0-.068-.154 8.078 8.078 0 0 0-.168-.323c-.14-.255-.337-.603-.584-1.03-.494-.857-1.182-2.02-1.947-3.294l-2.936-4.883-20.867-9.488c-9.389-4.269-15.307-6.915-19.108-8.504-3.8-1.588-5.387-2.166-6.627-2.166m146.622 17.754c-3.169.016-6.17 1.763-7.836 4.77-.72 1.298-.904 2.116-.904 4.14 0 2.028.184 2.841.91 4.15 2.214 3.999 6.826 5.742 11.062 4.157 3.377-1.264 5.77-4.706 5.77-8.307 0-3.621-2.4-7.04-5.823-8.332a8.867 8.867 0 0 0-3.18-.578m134.468 45.761 2.432.67c7.963 2.2 13.341 7.05 15.64 13.991 2.814 8.494.891 18.117-4.626 23.751-2.991 3.055-6.355 4.975-11.065 6.286l-2.38.662-133.48.035c-36.743.01-70.316-.007-94.806-.04a16012.67 16012.67 0 0 1-29.182-.063c-3.481-.013-6.21-.026-8.093-.04a511.42 511.42 0 0 1-2.176-.02 47.873 47.873 0 0 1-.582-.013c-.134-.004-.323-.028-.133 0-8.961-1.32-15.886-6.806-18.408-14.451-1.76-5.336-1.76-10.842 0-16.177 2.303-6.981 7.969-11.947 16.178-14.048l2.127-.543h134.283zM513.6 188.342c-65.493 0-98.489 0-115.328.066-8.42.033-12.796.084-15.198.158-1.2.038-1.908.079-2.404.135a5.428 5.428 0 0 0-1.041.21c-2.422.749-4.156 2.012-5.07 3.868-.292.593-.504 1.153-.61 1.834-.106.681-.123 1.458-.123 2.666 0 1.204.017 1.98.122 2.66.104.68.315 1.24.603 1.825.89 1.806 2.432 2.976 4.814 3.788l1.909.651 132.232.006c65.545.003 98.562.005 115.412-.06 8.425-.033 12.804-.082 15.207-.156 1.201-.038 1.909-.08 2.404-.135a5.426 5.426 0 0 0 1.042-.211l.705-.219v-.127c2.006-.767 3.555-1.877 4.365-3.522.292-.592.503-1.152.609-1.834.106-.68.124-1.457.124-2.666 0-1.208-.018-1.984-.124-2.666-.106-.68-.317-1.24-.61-1.834-.913-1.856-2.648-3.119-5.07-3.867a5.428 5.428 0 0 0-1.04-.21c-.496-.056-1.204-.098-2.405-.135-2.402-.075-6.78-.125-15.2-.158-16.838-.067-49.832-.067-115.325-.067m179.629 57.379-3.086.884c-1.976.568-3.536.874-6.936 1.053-3.4.179-8.594.215-17.629.215h-18.07l.086 9.996c.037 4.358.057 6.6.143 7.896.042.649.095 1.068.222 1.458.128.389.393.725.557.888.325.325.766.735 1.438.977.671.242 1.504.357 2.892.441 2.776.167 7.825.168 17.916.172 7.262.003 12.031-.015 15.059-.065a86.315 86.315 0 0 0 3.34-.099c.375-.022.667-.046.907-.078.24-.031.382-.02.71-.185.745-.377 1.202-.959 1.601-1.64.149-.252.314-.587.414-1 .101-.412.157-.896.2-1.613.084-1.433.109-3.831.146-8.386zm-359.258 0 .09 10.914c.037 4.555.062 6.953.146 8.386.043.717.099 1.2.2 1.614.1.412.265.747.413 1 .4.68.855 1.261 1.6 1.638.352.178.375.122.502.14.127.016.268.03.438.042.339.025.787.047 1.34.068 1.104.042 2.623.078 4.425.108 3.604.059 8.338.09 13.094.097a970.19 970.19 0 0 0 13.222-.06c1.845-.024 3.417-.055 4.585-.094l2.586-.172c.634-.042 1.475-.01 2.242-.777.648-.649.672-1.634.672-1.634l.08-9.09.086-10.028h-18.073c-9.034 0-14.23-.036-17.629-.215-3.4-.179-4.96-.483-6.935-1.05z" class="inline" style="paint-order:markers fill stroke" transform="translate(-292.403 27.903)"/></svg>

package/src/components/Badge.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+  badge: {
+    type: String,
+    required: true,
+    default: '',
+  },
+  class: {
+    type: String,
+    required: true,
+    default: 'bg-gray',
+  },
+})
+</script>
+
+<template>
+  <div class="px-1.5 py-px text-white text-xs" :class="props.class">
+    {{ props.badge }}
+  </div>
+</template>

package/src/components/Badges.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import Badge from "./Badge.vue"
+const props = defineProps({
+  badges: {
+    type: Array as PropType<String[]>,
+    required: false,
+    default() {
+      return []
+    },
+  },
+})
+</script>
+
+<template>
+  <div v-if="(props.badges && props.badges.length > 0)" class="absolute z-2">
+    <Badge
+      v-for="(badge, index) in props.badges" :key="index"
+      :badge="badge"
+      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : '') || (badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-600' : '')"
+    />
+  </div>
+</template>

package/src/components/Breadcrumbs.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+
+export interface Breadcrumb {
+  name: string,
+  path: string
+}
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+  showBack: {
+    type: Boolean,
+    required: false,
+  },
+  textBack: {
+    type: String,
+    required: false,
+    default: 'Back'
+  },
+  showHome: {
+    type: Boolean,
+    required: false,
+  },
+  breadcrumbs: {
+    type: Object as PropType<Breadcrumb[]>,
+    required: true
+  },
+  locale: {
+    type: String,
+    required: false,
+    default: 'en'
+  },
+  productNumber: {
+    type: String,
+    required: false,
+    default: null
+  }
+
+})
+
+const isLast = (index: Number) => {
+  return index === props.breadcrumbs.length - 1
+}
+</script>
+
+<template>
+  <nav>
+    <ul class="breadcrumbs flex items-center p-0 leading-none	">
+      <li v-if="props.showBack" class="breadcrumb-item flex">
+        <button class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap px-3 my-auto"
+          :title="props.textBack" onclick="history.back()"
+          i-bx-bx-arrow-back />
+      </li>
+    </ul>
+    <ul class="breadcrumbs flex items-center p-0 overflow-x-auto overflow-y-hidden sm:mr-12 leading-none	" itemscope
+      itemtype="https://schema.org/BreadcrumbList">
+      <li v-if="props.showHome" class="breadcrumb-item flex">
+        <a href="/" class="breadcrumb-link flex items-center px-0 py-2 sm:py-1 hover:text-lightBlue-400 whitespace-nowrap translate-y-0 text-sm my-auto px-3"
+          title="t('button.home')" itemprop="item" i-carbon-home>
+        </a>
+        <meta itemprop="position" content="1">
+      </li>
+      <li v-for="(crumb, index) in  breadcrumbs" :key="index" class="breadcrumb-item flex" itemprop="itemListElement"
+        itemscope itemtype="https://schema.org/ListItem">
+        <a v-if="!isLast(index)" :href="crumb.path" class="breadcrumb-link whitespace-nowrap py-2 sm:py-1 px-1" itemprop="item" :title="`Polo 6R ${crumb.name}`">
+          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
+        </a>
+        <a v-else :href="crumb.path"
+          class="breadcrumb-link breadcrumb-link--disabled whitespace-nowrap pointer-events-none py-2 sm:py-1 px-1" :title="`Polo 6R ${crumb.name} ${productNumber}`">
+          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> <b>{{ productNumber }}</b>
+        </a>
+        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumbs {
+  list-style: none;
+  font-size: 0.875rem;
+}
+
+.breadcrumb-item {
+
+  &+.breadcrumb-item:before {
+    @apply py-2 sm:py-1 px-1;
+    display: inline-block;
+    padding-right: .5rem;
+    color: #bdbdbd;
+    content: "/";
+  }
+
+  b {
+    @apply hidden sm:inline font-normal;
+  }
+}
+
+.breadcrumb-link {
+  border: 0;
+  cursor: pointer;
+
+  &--disabled {
+    cursor: default;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+</style>

package/src/components/Copyright.astro

@@ -0,0 +1,12 @@
+---
+    const { class: className } = Astro.props
+---
+
+      <div class="bg-vw h-11 flex items-center font-headlight justify-between px-4" class:list={[className]}>
+        <slot name="left-item"/>
+        <slot name="middle-item"/>
+        <slot name="right-item"/>
+      </div>
+
+    
+    

package/src/components/FuckRussia.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="relative" title="FUCK PUTIN! FUCK RUZZIA!">
+    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
+    <div i-mdi:tank class="inline-block bg-ukraine mr-1 mt-0.5" />
+    <div i-mdi:tank class="inline-block bg-ukraine mr-5 mt-0.5" />
+    <div class="relative">
+      <div class="inline-block absolute" i-noto-v1:flag-for-flag-russia />
+      <div i-emojione:fire class="inline-block absolute -mt-1 animate-ping animate-pulseR" />
+    </div>
+    <div class="absolute left-0 animate-bull animate-bull--1 -mt-1">
+      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
+    </div>
+    <div class="absolute left-0 animate-bull animate-bull animate-bull--2 -mt-1">
+      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
+    </div>
+    <div class="absolute left-0 animate-bull animate-bull--3 -mt-1">
+      <div i-mdi:bullet class="rotate-90 inline-block bg-yellow " />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.bg-ukraine {
+  background: linear-gradient(180deg, #0066cc 56%, rgba(255,204,0,1) 44%);
+}
+
+.animate-bull {
+  top: -2px;
+  // @apply rotate-90;
+
+  animation-iteration-count: infinite;
+
+  &--1 {
+    animation-duration: 2s;
+    animation-name: AnimateBull1;
+  }
+
+  &--2 {
+    animation-duration: 1.332s;
+    animation-name: AnimateBull2;
+    animation-delay: 1s;
+  }
+
+  &--3 {
+    animation-duration: 0.666s;
+    animation-name: AnimateBull3;
+    animation-delay: 2s;
+  }
+}
+
+@keyframes AnimateBull1 {
+  0% {transform: translate(14px,0px);}
+  100% {transform: translate(86px,0px);}
+}
+
+@keyframes AnimateBull2 {
+  0% {transform: translate(38px,0px);}
+  100% {transform: translate(80px,0px);}
+}
+
+@keyframes AnimateBull3 {
+  0% {transform: translate(62px,0px);}
+  100% {transform: translate(88px,0px);}
+}
+</style>

package/src/components/HandDrive.astro

@@ -0,0 +1,31 @@
+---
+
+const {  class: className, handDrive, biggerText } = Astro.props;
+// import { t, locale} from "i18next";
+import { t } from "i18next";
+import { Image } from 'astro:assets';
+import handDriveImage from "../assets/hand-drive.svg";
+
+const getHandDriveName  = (value: number) => {
+  if (value === 1)
+    return 'lhd'
+
+  else
+    return 'rhd'
+}
+
+const handDriveName =  getHandDriveName(handDrive)
+---
+<div title={handDriveName.toUpperCase()} class="flex items-center" class:list={className}>
+  <Image src={handDriveImage} alt="infoObject.product.hand_drive" width={48} height={34} class={handDriveName} />
+  <div data-pagefind-filter={`${t('part.sw-position')}:${handDriveName.toUpperCase()}`}
+    class={`sm:ml-2 order-0 ${!biggerText ? 'text-xxs md:text-xs' : 'order-0'}`} 
+    set:html={t(`part.for-${handDriveName}`)} 
+  />
+</div>
+
+<style lang="scss">
+  .rhd {
+          transform: scaleX(-1);
+  }
+  </style>

package/src/components/HeadCommon.astro

@@ -0,0 +1,40 @@
+---
+
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
+<link rel="sitemap" href="/sitemap.xml" />
+
+<!-- Preload Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
+
+<!-- Scrollable a11y code helper -->
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
+
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+	// const root = document.documentElement;
+	// const theme = localStorage.getItem('theme');
+	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	// 	root.classList.add('dark');
+	// } else {
+	// 	root.classList.remove('dark');
+	// }
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '');
+</script> -->

package/src/components/HeadSEO.astro

@@ -0,0 +1,41 @@
+---
+import { SITE, OPEN_GRAPH } from '../config';
+export interface Props {
+	content: any;
+	site: any;
+	canonicalURL: URL | string;
+}
+const { content = {}, canonicalURL } = Astro.props;
+const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
+// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
+// const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+
+<!-- Page Metadata -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- OpenGraph Tags -->
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
+<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
+<meta property="og:image:alt" content={imageAlt} />
+<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
+<meta property="og:site_name" content={SITE.title} />
+
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
+<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
+<meta name="twitter:image:alt" content={imageAlt} />
+
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+-->

package/src/components/Header/AstroLogo.astro

@@ -0,0 +1,27 @@
+---
+const { size } = Astro.props;
+---
+
+<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<style>
+		#flame {
+			fill: var(--theme-text-accent);
+		}
+		#a {
+			fill: var(--theme-text-accent);
+		}
+	</style>
+	<title>Logo</title>
+	<path
+		id="a"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
+	></path>
+	<path
+		id="flame"
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
+	></path>
+</svg>

package/src/components/Header/Header.astro

@@ -0,0 +1,48 @@
+---
+import { SITE } from '../../config';
+import SkipToContent from './SkipToContent.astro';
+
+const { currentPage } = Astro.props;
+---
+
+<header class="p-3 bg-slate-100 bg-opacity-80 backdrop-blur-md border-b text-slate-900">
+	<SkipToContent />
+	<nav title="Top Navigation" class="max-w-7xl mx-auto flex justify-between items-center px-4">
+		<div>
+			<a class="text-lg font-medium" href="/">
+				<h1>
+					{SITE.title ?? "Documentation"}
+				</h1>
+			</a>
+		</div>
+		<div class="flex gap-2">
+		
+		<!-- <button onclick="toggleDarkMode()">theme</button> -->
+		{ SITE.twitter &&
+			(<a title="Twitter" class="opacity-90 hover:opacity-100 hover:bg-blue-100 p-2 rounded-full transition-colors" href={'https://twitter.com/'+SITE.twitter}>
+				<img class="h-7" src="/twitter.svg" alt="twitter logo">
+			</a>)
+		}
+		{
+			SITE.github &&
+			(<a title="Github" class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors" href={'https://github.com/'+SITE.github}>
+				<img class="h-7" src="/github.svg" alt="github logo">
+			</a>)
+		}
+		{
+			SITE.linkedin &&
+			(<a title="linkedin" class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors" href={'https://linkedin.com/in/'+SITE.linkedin}>
+				<img class="h-7" src="/linkedin.svg" alt="linkedin logo">
+			</a>)
+		}
+		</div>
+	</nav>
+</header>
+
+<script is:inline>
+	// function toggleDarkMode() {
+	// 	const body = document.body;
+	// 	body.classList.toggle('dark');
+	// 	console.log('dark mode toggled');
+	// }
+</script>

package/src/components/Header/SkipToContent.astro

@@ -0,0 +1 @@
+    <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>

package/src/components/Jumbatron.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="relative bg-vw md:min-h-md">
+      <div class="max-w-7xl mx-auto">
+        <div
+          class=" pb-8  sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32"
+        >
+          <header
+            class="mx-auto max-w-7xl px-4 sm:pt-12 sm:px-6 md:pt-16 lg:pt-20 lg:px-8 xl:pt-28"
+          >
+            <div class="text-center">
+              <h1
+                class="text-2xl pt-6 sm:pt-0 sm:text-5xl md:text-6xl tracking-tight font-headlight text-white"
+              >
+                <slot name="intro" />
+              <!-- <span v-html="t('home.intro')"></span> -->
+                <!-- <small class="block text-2xl">aaa</small> -->
+              </h1>
+              <slot name="subtitle" />
+              <div
+                class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+              >
+                <div>
+                  <slot name="cta" />
+                </div>
+              </div>
+            </div>
+          </header>
+        </div>
+      </div>
+    </div>
+  </template>

package/src/components/LeftSidebar.astro

@@ -0,0 +1,44 @@
+---
+import { SIDEBAR } from '../config';
+const { currentPage } = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+
+const isCurrentPage = (item) => {
+	if (item.link) {
+		return item.link.includes(currentPageMatch);
+	}
+	return false;
+};
+
+const getLinkClasses = (link) => {
+	const baseClasses = "block py-2 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900"
+
+	if (isCurrentPage(link)) {
+		return baseClasses + " border-slate-500 text-slate-900";
+	} else {
+		return baseClasses;
+	}
+}
+---
+<aside title="Site Navigation">
+	<!-- <Debug content={navigation} /> -->
+	<nav aria-labelledby="grid-left" class="w-64 p-4 border-r">
+		<ul>
+			{SIDEBAR.map(item => (item.header ? 
+				<h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2> : 
+				<li class={getLinkClasses(item)}>
+					<a href={item.link}>{item.text}</a>
+				</li>))}
+		</ul>
+	</nav>
+</aside>
+
+<script is:inline>
+	window.addEventListener('DOMContentLoaded', (event) => {
+		var target = document.querySelector('[aria-current="page"]');
+		if (target && target.offsetTop > window.innerHeight - 100) {
+			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+		}
+	});
+</script>
+

package/src/components/MainButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  primary?: boolean;
+  secondary?: boolean;
+  text?: boolean;
+}>();
+
+const classes = {
+  "text-white bg-blue-500 hover:bg-opacity-80": props.primary,
+  "text-blue-600 border-blue-500 border": props.secondary,
+  "text-blue-500 hover:bg-opacity-80 shadow-md": props.text,
+};
+</script>
+
+<style scoped></style>
+
+<template>
+  <button
+    class="px-4 py-2 rounded-md transition-all shadow-sm hover:bg-opacity-80 font-medium"
+    :class="classes"
+  >
+    <slot></slot>
+  </button>
+</template>

package/src/components/MainColors.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col space-y-12">
+    <div v-for="name in colorNames" :key="name">
+      <h3 class="capitalize">{{ name }}</h3>
+      <div class="grid grid-cols-5 md:grid-cols-10">
+        <div v-for="color in COLORS[name]" :key="color">
+          <div
+            class="h-12 transition-all"
+            :style="`background: ${color.value}`"
+          ></div>
+          <div
+            class="text-sm flex flex-col text-center font-mono text-slate-500"
+          >
+            <span>{{ color.name }}</span>
+            <span class="uppercase text-xs">{{ color.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { COLORS } from "../design.config";
+
+const colorNames = Object.keys(COLORS);
+</script>
+
+<style scoped></style>