docs: add examples to homepage

ordbokapi · Feb 1, 2024 · 3e1ec55 · 3e1ec55
1 parent b99a0f1
commit 3e1ec55
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 5 deletions.
diff --git a/highlighting.js b/highlighting.js
@@ -0,0 +1,9 @@
+import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/es/highlight.min.js';
+import graphql from 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/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
@@ -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
@@ -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;