From 3e1ec5512978729ad03bb5c76dc9583a9b56ee0b Mon Sep 17 00:00:00 2001
From: Adaline Simonian <adalinesimonian@gmail.com>
Date: Wed, 31 Jan 2024 18:50:03 -0800
Subject: [PATCH] docs: add examples to homepage

---
 highlighting.js |  9 +++++++
 index.html      | 64 +++++++++++++++++++++++++++++++++++++++++++++----
 style.css       | 52 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 120 insertions(+), 5 deletions(-)
 create mode 100644 highlighting.js

diff --git a/highlighting.js b/highlighting.js
new file mode 100644
index 0000000..59dee87
--- /dev/null
+++ b/highlighting.js
@@ -0,0 +1,9 @@
+import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/highlight.min.js';
+import graphql from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/languages/graphql.min.js';
+
+hljs.registerLanguage('graphql', graphql);
+
+document.querySelectorAll('div.code').forEach((div) => {
+  hljs.highlightElement(div);
+  console.log('highlighted', div);
+});
diff --git a/index.html b/index.html
index 5b59957..3f04b06 100644
--- a/index.html
+++ b/index.html
@@ -86,9 +86,35 @@ <h1>Ordbok API</h1>
       </div>
     </section>
 
-    <section id="features" class="jumbotron text-on-right">
+    <section id="features" class="jumbotron">
       <div class="container">
-        <h2>Funksjonar</h2>
+        <div class="image-content">
+          Førespurnad:
+          <!-- prettier-ignore -->
+          <div class="code language-graphql">
+query ($word: String!, $dicts: [Dictionary!]) {
+  word(word: $word, dicts: $dictionaries) {
+    articles {
+      id
+      wordClass
+      definitions {
+        content {
+          textContent
+        }
+      }
+    }
+  }
+}
+          </div>
+          Variabler:
+          <!-- prettier-ignore -->
+          <div class="code language-json">
+{
+  "word": "forstå",
+  "dicts": ["Nynorskordboka"]
+}
+          </div>
+        </div>
         <div class="text-content">
           <p>
             Oppdag krafta i Ordbok API, eit verktøy designa for å forenkla
@@ -113,9 +139,39 @@ <h2>Funksjonar</h2>
       </div>
     </section>
 
-    <section id="usage" class="jumbotron">
+    <section id="usage" class="jumbotron text-on-right">
       <div class="container">
-        <h2>Korleis bruka APIet</h2>
+        <div class="image-content">
+          Respons:
+          <!-- prettier-ignore -->
+          <div class="code language-json">
+{
+  "data": {
+    "word": {
+      "articles": [{
+        "id": 20953,
+        "wordClass": "Verb",
+        "definitions": [
+          {
+            "content": [
+              { "textContent": "skjøne, oppfatte, fatte" },
+              { "textContent": "kunne" }
+            ]
+          },
+          {
+            "content": [
+              { "textContent": "kunne setje seg inn i stoda til" },
+              { "textContent": "ha toleranse og sympati for" }
+            ]
+          }
+        ]
+      }]
+    }
+  }
+}
+          </div>
+          <script type="module" src="highlighting.js"></script>
+        </div>
         <div class="text-content">
           <p>
             Akkurat no er Ordbok API i ein utviklingsfase og kan vera ustabil.
diff --git a/style.css b/style.css
index a6ea67e..6d90686 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Sarala&family=IBM+Plex+Sans&family=Lora&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Sarala&family=IBM+Plex+Sans&family=IBM+Plex+Mono&family=Lora&display=swap');
 
 :root {
   --main-bg-color: #202020;
@@ -152,6 +152,13 @@ word-graph {
   justify-content: center;
 }
 
+div:not(#welcome) .text-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 #welcome .image-content {
   position: absolute;
   top: 84px;
@@ -171,6 +178,49 @@ word-graph {
   height: 100%;
 }
 
+.code {
+  white-space: pre-wrap;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.8rem;
+  color: var(--main-text-color);
+  background-color: #333;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.hljs-keyword {
+  color: #4fd5f7;
+}
+
+.hljs-symbol {
+  color: #f7ca4f;
+}
+
+.hljs-variable,
+.hljs-string,
+.hljs-attr {
+  color: #f78c6c;
+}
+
+.hljs-number {
+  color: #4fd5f7;
+}
+
+.hljs-punctuation {
+  color: #949494;
+}
+
+#features .image-content,
+#usage .image-content {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #333;
+  font-size: 1rem;
+  padding: 2rem 0;
+}
+
 @media (max-width: 1199px) {
   .jumbotron:not(#welcome) .container {
     flex-direction: column;