From 2b036c8a6287f3971986a6ea3b4bf1df41caa0b4 Mon Sep 17 00:00:00 2001
From: amithkoujalgi <koujalgi.amith@gmail.com>
Date: Thu, 17 Apr 2025 20:31:01 +0530
Subject: [PATCH] Added `CodeEmbed` component to embed code snippets in
 markdowns

---
 .../list-library-models.md                    | 18 ++---
 docs/src/components/CodeEmbed/index.js        | 72 +++++++++++++++++++
 2 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 docs/src/components/CodeEmbed/index.js

diff --git a/docs/docs/apis-model-management/list-library-models.md b/docs/docs/apis-model-management/list-library-models.md
index cdb9525..fd222bb 100644
--- a/docs/docs/apis-model-management/list-library-models.md
+++ b/docs/docs/apis-model-management/list-library-models.md
@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import CodeEmbed from '@site/src/components/CodeEmbed';
+
 # Models from Ollama Library
 
 These API retrieves a list of models directly from the Ollama library.
@@ -11,17 +13,15 @@ These API retrieves a list of models directly from the Ollama library.
 This API fetches available models from the Ollama library page, including details such as the model's name, pull count,
 popular tags, tag count, and the last update time.
 
-<iframe style={{ width: '100%', height: '919px', border: 'none' }} allow="clipboard-write" src="https://emgithub.com/iframe.html?target=https%3A%2F%2Fgithub.com%2Follama4j%2Follama4j-examples%2Fblob%2Fmain%2Fsrc%2Fmain%2Fjava%2Fio%2Fgithub%2Follama4j%2Fexamples%2FListLibraryModels.java&style=default&type=code&showBorder=on&showLineNumbers=on&showFileMeta=on&showFullPath=on&showCopy=on" />
-
-<a href="https://github.com/ollama4j/ollama4j-examples/blob/main/src/main/java/io/github/ollama4j/examples/ListLibraryModels.java" target="_blank">
-  View ListLibraryModels.java on GitHub
-</a>
+<CodeEmbed
+    src='https://raw.githubusercontent.com/ollama4j/ollama4j-examples/refs/heads/main/src/main/java/io/github/ollama4j/examples/ListLibraryModels.java'>
+</CodeEmbed>
 
 The following is the sample output:
 
 ```
 [
-    LibraryModel(name=llama3.2-vision, description=Llama 3.2 Vision is a collection of instruction-tuned image reasoning generative models in 11B and 90B sizes., pullCount=21.1K, totalTags=9, popularTags=[vision, 11b, 90b], lastUpdated=yesterday), 
+    LibraryModel(name=llama3.2-vision, description=Llama 3.2 Vision is a collection of instruction-tuned image reasoning generative models in 11B and 90B sizes., pullCount=21.1K, totalTags=9, popularTags=[vision, 11b, 90b], lastUpdated=yesterday),
     LibraryModel(name=llama3.2, description=Meta's Llama 3.2 goes small with 1B and 3B models., pullCount=2.4M, totalTags=63, popularTags=[tools, 1b, 3b], lastUpdated=6 weeks ago)
 ]
 ```
@@ -56,10 +56,10 @@ The following is the sample output:
 
 ```
 LibraryModelDetail(
-  model=LibraryModel(name=llama3.2-vision, description=Llama 3.2 Vision is a collection of instruction-tuned image reasoning generative models in 11B and 90B sizes., pullCount=21.1K, totalTags=9, popularTags=[vision, 11b, 90b], lastUpdated=yesterday), 
+  model=LibraryModel(name=llama3.2-vision, description=Llama 3.2 Vision is a collection of instruction-tuned image reasoning generative models in 11B and 90B sizes., pullCount=21.1K, totalTags=9, popularTags=[vision, 11b, 90b], lastUpdated=yesterday),
   tags=[
-        LibraryModelTag(name=llama3.2-vision, tag=latest, size=7.9GB, lastUpdated=yesterday), 
-        LibraryModelTag(name=llama3.2-vision, tag=11b, size=7.9GB, lastUpdated=yesterday), 
+        LibraryModelTag(name=llama3.2-vision, tag=latest, size=7.9GB, lastUpdated=yesterday),
+        LibraryModelTag(name=llama3.2-vision, tag=11b, size=7.9GB, lastUpdated=yesterday),
         LibraryModelTag(name=llama3.2-vision, tag=90b, size=55GB, lastUpdated=yesterday)
     ]
 )
diff --git a/docs/src/components/CodeEmbed/index.js b/docs/src/components/CodeEmbed/index.js
new file mode 100644
index 0000000..c21b6f7
--- /dev/null
+++ b/docs/src/components/CodeEmbed/index.js
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+const CodeEmbed = ({ src }) => {
+    const [code, setCode] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const fetchCodeFromUrl = async (url) => {
+            if (!isMounted) return;
+
+            setLoading(true);
+            setError(null);
+
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.text();
+                if (isMounted) {
+                    setCode(data);
+                }
+            } catch (err) {
+                console.error('Failed to fetch code:', err);
+                if (isMounted) {
+                    setError(err);
+                    setCode(`// Failed to load code from ${url}\n// ${err.message}`);
+                }
+            } finally {
+                if (isMounted) {
+                    setLoading(false);
+                }
+            }
+        };
+
+        if (src) {
+            fetchCodeFromUrl(src);
+        }
+
+        return () => {
+            isMounted = false;
+        };
+    }, [src]);
+
+    const githubUrl = src ? src.replace('https://raw.githubusercontent.com', 'https://github.com').replace('/refs/heads/', '/blob/') : null;
+    const fileName = src ? src.substring(src.lastIndexOf('/') + 1) : null;
+
+    return (
+        loading ? (
+            <div>Loading code...</div>
+        ) : error ? (
+            <div>Error: {error.message}</div>
+        ) : (
+            <div style={{ backgroundColor: '#f5f5f5', padding: '0px', borderRadius: '5px' }}>
+                <div style={{ textAlign: 'right' }}>
+                    {githubUrl && (
+                        <a href={githubUrl} target="_blank" rel="noopener noreferrer" style={{ paddingRight: '15px', color: 'gray', fontSize: '0.8em', fontStyle: 'italic', display: 'inline-flex', alignItems: 'center' }}>
+                            View on GitHub
+                        </a>
+                    )}
+                </div>
+                <CodeBlock title={fileName} className="language-java">{code}</CodeBlock>
+            </div>
+        )
+    );
+};
+
+export default CodeEmbed;