Copyable text, PNGs to SVGs

website/_includes/lunar/deployed-in-minutes.html

@@ -5,5 +5,5 @@ <h2 class="text-center lg:text-left">Deployed In Minutes</h2>
     <p class="lg:leading-8 lg:mr-2 mt-5 lg:mt-10 text-center lg:text-left text-slate-600 text-lg lg:text-xl">Installing Lunar is as easy as running our agent in your CI/CD runners</p>
   </div>
 
-  <img width="692" height="476" class="lg:max-w-xl xl:max-w-full" src="assets/img/deployed-in-minutes.png" alt="Deployed in Minutes" />
+  {% svg assets/svg/deployed-in-minutes.svg class="h-auto max-w-full lg:max-w-xl xl:max-w-full" %}
 </div>

website/_includes/lunar/governance-as-code.html

@@ -1,9 +1,76 @@
 <div class="bg-[#E8F7FE] mt-16 pt-16">
+  <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=Source+Code+Pro:ital,wght@0,600;1,600&display=swap" rel="stylesheet" />
+
   <div class="flex flex-col items-center max-w-7xl mx-auto px-6 lg:px-10">
     <h2>Governance-As-Code</h2>
 
     <p class="font-semibold mt-5 text-[#6b7280] text-center lg:text-left text-lg lg:text-2xl">Define custom policies with a few lines of Python</p>
   </div>
 
-  <img width="1440" height="403" class="mx-auto mt-8" src="assets/img/governance-as-code.png" alt="Governance-as-code" />
+  {% svg assets/svg/governance-as-code.svg class="h-auto max-w-full mx-auto mt-8" %}
 </div>
+
+<script>
+  const getIndicesFromOriginalText = (text, copiedText) => {
+    const textArr = text.split('')
+    const copiedArr = copiedText.split('')
+
+    let startIndex = 0
+    let endIndex = -1
+
+    const checkSubsequentChars = startIndex => {
+      let lineBreaks = 0
+
+      for (let i = 0; i < copiedArr.length; i++) {
+        const currentChar = textArr[startIndex + i + lineBreaks]
+
+        if (
+          !currentChar ||
+          currentChar === copiedArr[i] ||
+          (currentChar === ' ' && new DOMParser().parseFromString(copiedArr[i], 'text/html').body.innerHTML === '&nbsp;')
+        ) {
+          // If the characters match, continue
+          continue
+        } else if (currentChar === '\n') {
+          // If current character is a line break, increase lineBreaks count
+          lineBreaks++
+        } else {
+          // If characters don't match, return new start index
+          return textArr.indexOf(copiedArr[0], startIndex + 1)
+        }
+      }
+
+      // If subsequent characters match, set endIndex
+      endIndex = startIndex + copiedArr.length + lineBreaks
+      return startIndex
+    }
+
+    if (checkSubsequentChars(startIndex)) {
+      while (endIndex === -1) {
+        startIndex = checkSubsequentChars(startIndex)
+      }
+    }
+
+    return { startIndex, endIndex }
+  }
+
+  document.getElementById('code-collectors').addEventListener('copy', e => {
+    const text =
+      'collectors:\n- runBash: lunar collect “hasTests” true\n  hook:\n    type: before-command\n    patterns:\n    - ^go test.*\n    - ^npm test.*\n    - ^python -m .unittest.*'
+
+    const { startIndex, endIndex } = getIndicesFromOriginalText(text, document.getSelection().toString())
+    event.clipboardData.setData('text/plain', text.substring(startIndex, endIndex))
+    event.preventDefault()
+  })
+
+  document.getElementById('code-policies').addEventListener('copy', e => {
+    const text =
+      'policies:\n- name: "Should have unit tests"\n  runPython: |-\n  import lunar\n  hasTests = lunar.get(“hasTests”)\n  lunar.assertTrue(hasTests)'
+
+    const { startIndex, endIndex } = getIndicesFromOriginalText(text, document.getSelection().toString())
+    event.clipboardData.setData('text/plain', text.substring(startIndex, endIndex))
+    event.preventDefault()
+  })
+</script>

website/_includes/lunar/hero.html

@@ -22,7 +22,7 @@ <h1 class="font-medium leading-none text-center lg:text-left text-slate-900">
       </a>
     </div>
 
-    <img width="488" height="488" src="assets/img/lunar.png" alt="Hero" />
+    {% svg assets/svg/lunar.svg class="h-auto max-w-full" %}
   </div>
 </div>
 

website/_includes/lunar/problem-statement.html

@@ -4,6 +4,6 @@ <h2 class="text-center lg:text-left">Every Service Is A Unique Snowflake</h2>
 
     <p class="font-semibold mt-5 text-[#6b7280] text-center lg:text-left text-lg lg:text-2xl">Supporting infinitely diverse CI/CD setups is overwhelming</p>
 
-    <img width="1200" height="434" class="mt-12 sm:mt-8 scale-125 sm:scale-100" src="assets/img/lunar-problem-statement.png" alt="Lunar problem statement" />
+    {% svg assets/svg/lunar-problem-statement.svg class="problem-statement-image h-auto max-w-full" %}
   </div>
 </div>

website/_includes/lunar/take-control.html

@@ -1,7 +1,7 @@
 <div class="flex flex-col items-center max-w-7xl mt-16 mx-auto px-6 lg:px-10">
   <h2 class="text-center lg:text-left">Take Control Of The Development Lifecycle</h2>
 
-  <img width="100%" height="434" class="mt-8" src="assets/img/take-control.png" alt="Take control of the development lifecycle" />
+  {% svg assets/svg/take-control.svg class="h-auto max-w-full mt-8" %}
 
   <div class="w-full gap-6 lg:gap-12 grid md:grid-cols-2 lg:grid-cols-3 mt-16">
     {% for item in site.data.lunar-features %}

website/assets/css/lunar.css

@@ -39,6 +39,11 @@ h2 {
   line-height: 40px;
 }
 
+.problem-statement-image {
+  margin: 48px -60px 0;
+  max-width: calc(100% + 120px);
+}
+
 .feature h3 {
   font-size: 24px;
   letter-spacing: -0.045em;
@@ -49,6 +54,13 @@ h2 {
   letter-spacing: -0.045em;
 }
 
+@media only screen and (min-width: 640px) {
+  .problem-statement-image {
+    margin: 32px 0 0;
+    max-width: 100%;
+  }
+}
+
 @media only screen and (min-width: 1024px) {
   .hero h1 {
     font-size: 56px;