initial commit for code examples (#53)

* Show multi code examples
FalkorDB · Dec 8, 2024 · 5252eb4 · 5252eb4
1 parent 9fd30bc
commit 5252eb4
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 10 deletions.
diff --git a/.wordlist.txt b/.wordlist.txt
@@ -117,7 +117,9 @@ codebase
 compton
 conf
 config
+const
 costProp
+cpp
 createNodeIndex
 crflynn
 dbms
@@ -141,6 +143,7 @@ geospatial
 godoc
 hasLabels
 haversin
+html
 https
 hostname
 hydre
@@ -150,6 +153,7 @@ insertListElements
 ioredisgraph
 isEmpty
 javadocs
+javascript
 jedis
 jfalkordb
 jinja
@@ -165,6 +169,9 @@ matchRegEx
 maxCost
 maxLen
 multithreaded
+myGraph
+myPassword
+myUsername
 namespace
 nan
 nav
@@ -179,6 +186,7 @@ outdegree
 pageRank
 pagerank
 parallelizing
+params
 pathCost
 pathCount
 pathNodes
@@ -215,6 +223,7 @@ rueidis
 runtime
 rustis
 sbin
+selectGraph
 schemas
 shortestPath
 signum
@@ -267,6 +276,7 @@ vec
 euclideanDistance
 cosineDistance
 vecf
+
 Dani
 Dovizioso
 Pedrosa
@@ -278,7 +288,6 @@ scalable
 scalability
 falkorDB
 
-
 GraphName
 api
 auth

diff --git a/_config.yml b/_config.yml
@@ -20,4 +20,3 @@ aux_links_new_tab: true
 
 plugins:
   - jekyll-sitemap
-
diff --git a/_includes/code_tabs.html b/_includes/code_tabs.html
@@ -0,0 +1,98 @@
+<style>
+  .tabs input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .tabs label {
+    display: inline-block;
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  .tabs label:hover {
+    background: #31343f;
+  }
+
+  .tabs input[type="radio"]:checked+label {
+    background: #31343f;
+    border-bottom: 1px solid transparent;
+  }
+
+  .tabs .tab-content {
+    background: #31343f;
+    padding: 10px;
+  }
+
+  .tabs .tab-content pre {
+    margin: 0;
+    overflow-x: auto;
+  }
+
+  .tabs .tab-content code {
+    display: block;
+    white-space: pre;
+  }
+
+  .tabs input[type="radio"]:nth-of-type(1):checked~.tab-content:nth-of-type(1),
+  .tabs input[type="radio"]:nth-of-type(2):checked~.tab-content:nth-of-type(2),
+  .tabs input[type="radio"]:nth-of-type(3):checked~.tab-content:nth-of-type(3) 
+  .tabs input[type="radio"]:nth-of-type(4):checked~.tab-content:nth-of-type(4) 
+  .tabs input[type="radio"]:nth-of-type(5):checked~.tab-content:nth-of-type(5) 
+  .tabs input[type="radio"]:nth-of-type(6):checked~.tab-content:nth-of-type(6) {
+    display: block;
+  }
+
+  .tabs .tab-content {
+    display: none;
+  }
+
+  .code-container {
+    position: relative;
+  }
+
+  .copy-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 5px 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    display: none;
+  }
+
+  .code-container:hover .copy-btn {
+    display: inline-block;
+  }
+
+  .copy-btn:hover {
+    background-color: #0056b3;
+  }
+</style>
+
+<div class="tabs">
+  {% assign codes = "python,javascript,cpp,rust" | split: "," %}
+
+  {% for code_name in codes %}
+    {% if include[code_name] %}
+    <input type="radio" id="tab{{ include.id }}{{ forloop.index }}" name="tab" {% if forloop.first %}checked{% endif %}>
+    <label for="tab{{ include.id }}{{ forloop.index }}">{{ code_name }}</label>
+    {% endif %}
+  {% endfor %}
+
+  {% for code_name in codes %}
+    {% if include[code_name] %}
+    <div class="tab-content">
+      <div class="code-container">
+        <button class="copy-btn"
+          onclick="navigator.clipboard.writeText(this.nextElementSibling.firstElementChild.innerText)">Copy</button>
+        <pre><code class="language-{{ code_name }}">{{ include[code_name] | escape }}</code></pre>
+      </div>
+    </div>
+    {% endif %}
+  {% endfor %}
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,6 +6,11 @@
 
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/dark.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
+<script>hljs.highlightAll();</script>
+
 <body>
   <a class="skip-to-main" href="#main-content">Skip to main content</a>
   {% include icons/icons.html %}
@@ -17,26 +22,30 @@
       <div id="main-content" class="main-content">
         <main>
           {% if site.heading_anchors != false %}
-            {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
+          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16
+            16\" aria-hidden=\"true\">
+            <use xlink:href=\"#svg-link\"></use>
+          </svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
           {% else %}
-            {{ content }}
+          {{ content }}
           {% endif %}
 
           {% if page.has_children == true and page.has_toc != false %}
-            {% include components/children_nav.html %}
+          {% include components/children_nav.html %}
           {% endif %}
         </main>
         {% include components/footer.html %}
       </div>
     </div>
     {% if site.search_enabled != false %}
-      {% include components/search_footer.html %}
+    {% include components/search_footer.html %}
     {% endif %}
   </div>
 
   {% if site.mermaid %}
-    {% include components/mermaid.html %}
+  {% include components/mermaid.html %}
   {% endif %}
 
 </body>
-</html>
+
+</html>
diff --git a/index.md b/index.md
@@ -37,7 +37,7 @@ Once loaded you can interact with FalkorDB using any of the supported [client li
 
 Here we'll use [FalkorDB Python client](https://pypi.org/project/FalkorDB/) to create a small graph representing a subset of motorcycle riders and teams taking part in the MotoGP league, once created we'll start querying our data.
 
-```python
+{% capture python_code %}
 from falkordb import FalkorDB
 
 # Connect to FalkorDB
@@ -64,7 +64,41 @@ for row in res.result_set:
 res = g.query("""MATCH (r:Rider)-[:rides]->(t:Team {name:'Ducati'}) RETURN count(r)""")
 
 print(res.result_set[0][0]) # Prints: 1
-```
+{% endcapture %}
+
+{% capture javascript_code %}
+import { FalkorDB } from 'falkordb';
+
+const db = await FalkorDB.connect({
+    username: 'myUsername',
+    password: 'myPassword',
+    socket: {
+        host: 'localhost',
+        port: 6379
+    }
+})
+
+console.log('Connected to FalkorDB')
+
+const graph = db.selectGraph('myGraph')
+
+await graph.query(`CREATE (:Rider {name:'Valentino Rossi'})-[:rides]->(:Team {name:'Yamaha'}),
+        (:Rider {name:'Dani Pedrosa'})-[:rides]->(:Team {name:'Honda'}),
+        (:Rider {name:'Andrea Dovizioso'})-[:rides]->(:Team {name:'Ducati'})`)
+
+result = await graph.query(`MATCH (r:Rider)-[:rides]->(t:Team) 
+                            WHERE t.name = $name RETURN r.name`, 
+                            {params: {name: 'Yamaha'}})
+
+console.log(result) // Valentino Rossi
+
+console.log(await db.list())
+console.log(await db.info())
+
+db.close()
+{% endcapture %}
+
+{% include code_tabs.html id="code_tabs_0" python=python_code javascript=javascript_code %}
 
 For additional demos please see visit [Demos](https://github.com/FalkorDB/demos).
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,4 +20,3 @@ aux_links_new_tab: true

		plugins:
		- jekyll-sitemap