Merge pull request #126 from ollama4j/docs-updates

Updated docs

docs/docs/intro.md

@@ -1,7 +1,12 @@
 ---
 sidebar_position: 1
+
+title: Introduction
 ---
 
+import LatestRelease from '@site/src/components/LatestRelease';
+import AddToYourProject from '@site/src/components/AddToYourProject';
+
 # Introduction
 
 Let's get started with **Ollama4j**.
@@ -71,20 +76,16 @@ The command runs the Ollama server locally at **http://localhost:11434/**.
 
 ### Setup your project
 
-Get started by **creating a new Maven project** on your favorite IDE.
 
 Add the dependency to your project's `pom.xml`.
 
-```xml
+<AddToYourProject/>
 
-<dependency>
+<div style={{ marginTop: '2rem', marginBottom: '2rem', fontSize: '1em', textAlign: 'left', display: 'flex', justifyContent: 'left'}}>
-    <groupId>io.github.ollama4j</groupId>
+    <LatestRelease style={{textAlign: 'left', fontWeight: 'normal'}}/>
-    <artifactId>ollama4j</artifactId>
+</div>
-    <version>1.0.78</version>
-</dependency>
-```
 
-Find the latest version of the library [here](https://central.sonatype.com/artifact/io.github.ollama4j/ollama4j).
+Find the latest version of the library from [Maven Central Repository](https://central.sonatype.com/artifact/io.github.ollama4j/ollama4j).
 
 You might want to include an implementation of [SL4J](https://www.slf4j.org/) logger in your `pom.xml` file. For
 example,

docs/src/components/AddToYourProject/index.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+const AddToYourProject = () => {
+    const [releaseInfo, setReleaseInfo] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchLatestRelease = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const response = await fetch('https://api.github.com/repos/ollama4j/ollama4j/releases/latest');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                setReleaseInfo(data);
+            } catch (err) {
+                console.error('Failed to fetch release info:', err);
+                setError(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchLatestRelease();
+    }, []);
+
+    return (
+        <div style={{ width: '100%' }}>
+            {loading ? (
+                <div>Loading latest release info...</div>
+            ) : error ? (
+                <div>Error: {error.message}</div>
+            ) : releaseInfo ? (
+                <>
+                    <h3>Using Maven <code>pom.xml</code></h3>
+                    <CodeBlock className="language-xml">
+                        {`<dependency>
+    <groupId>io.github.ollama4j</groupId>
+    <artifactId>ollama4j</artifactId>
+    <version>${releaseInfo.name}</version>
+</dependency>`}
+                    </CodeBlock>
+                    <h3>Using Groovy-based <code>build.gradle</code></h3>
+                    <CodeBlock className="language-groovy">
+                        {`dependencies {
+    implementation 'io.github.ollama4j:ollama4j:${releaseInfo.name}'
+}`}
+                    </CodeBlock>
+                    <h3>For Kotlin-based <code>build.gradle.kts</code></h3>
+                    <CodeBlock className="language-kotlin">
+                        {`dependencies {
+    implementation("io.github.ollama4j:ollama4j:${releaseInfo.name}")
+}`}
+                    </CodeBlock>
+                </>
+            ) : null}
+        </div>
+    );
+};
+
+export default AddToYourProject;

docs/src/components/LatestRelease/index.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+
+const LatestRelease = () => {
+    const [releaseInfo, setReleaseInfo] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchLatestRelease = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                const response = await fetch('https://api.github.com/repos/ollama4j/ollama4j/releases/latest');
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                setReleaseInfo(data);
+            } catch (err) {
+                console.error('Failed to fetch release info:', err);
+                setError(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchLatestRelease();
+    }, []);
+
+    return (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+            {loading ? (
+                <div>Loading latest release info...</div>
+            ) : error ? (
+                <div>Error: {error.message}</div>
+            ) : releaseInfo ? (
+                <div>
+                    {/* <h4 style={{ display: 'flex', justifyContent: 'center'}}>Latest Release</h4> */}
+                    <div>
+                        <span style={{ fontWeight: 'bold'}}>Latest Version</span>: <a href={releaseInfo.html_url} target='_blank' rel="noopener noreferrer"><span style={{color: 'white', fontWeight: 'bold', backgroundColor:'#11bc11', borderRadius: '15px', padding: '5px'}}>{releaseInfo.name}</span></a> released on {new Date(releaseInfo.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.
+                    </div>
+                    {/* <pre style={{ whiteSpace: 'pre-wrap' }}>
+                        {JSON.stringify(releaseInfo, null, 2)}
+                    </pre> */}
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+export default LatestRelease;

docs/src/pages/index.js

@@ -7,39 +7,51 @@ import BuyMeACoffee from '@site/src/components/BuyMeACoffee';
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
 import BrowserOnly from '@docusaurus/BrowserOnly';
+import LatestRelease from '@site/src/components/LatestRelease';
+
+
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
-  return (<header className={clsx('hero hero--primary', styles.heroBanner)}>
+  return (
-    <div className="container">
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <Heading as="h1" className="hero__title">
+      <div className="container">
-        {siteConfig.title}
+        <Heading as="h1" className="hero__title">
-      </Heading>
+          {siteConfig.title}
-      <img src="img/logo.svg" alt="Ollama4j Logo" className={styles.logo}
+        </Heading>
-           style={{maxWidth: '20vh'}}/>
+        <img
-      <p className="hero__subtitle">{siteConfig.tagline}</p>
+          src="img/logo.svg"
-      <div className={styles.buttons}>
+          alt="Ollama4j Logo"
-        <Link
+          className={styles.logo}
-            className="button button--secondary button--lg"
+          style={{ maxWidth: '20vh' }}
-            to="/intro">
+        />
-          Getting Started
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        </Link>
+        <div className={styles.buttons}>
+          <Link className="button button--secondary button--lg" to="/intro">
+            Getting Started
+          </Link>
+        </div>
+        <div style={{ marginTop: '3rem' }}>
+          <LatestRelease />
+        </div>
       </div>
-    </div>
+    </header>
-  </header>);
+  );
 }
 
 export default function Home() {
   const {siteConfig} = useDocusaurusContext();
-  return (<Layout
+  return (
+    <Layout
       title={`${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
-    <HomepageHeader/>
+      <HomepageHeader />
-    <main>
+      <main>
-      <HomepageFeatures/>
+        <HomepageFeatures />
-      <BrowserOnly>
+        <BrowserOnly>
-        {() => <BuyMeACoffee />}
+          {() => <BuyMeACoffee />}
-      </BrowserOnly>
+        </BrowserOnly>
-    </main>
+      </main>
-  </Layout>);
+    </Layout>
+  );
 }