EpubKit Connect

src/pages/blog/how-to-read-blog-on-kindle.md

@@ -24,7 +24,7 @@ EpubKit makes it simple to add individual web pages to your collection. Just cli
 
 If you aim to include several articles from a website—such as a list of blog posts, news articles, or a series from platforms like Substack—navigate to the 'Multiple Pages' tab. EpubKit will analyze the page and list all detectable links. Simply check the boxes next to the articles you want to include in your collection, and EpubKit will handle the rest.
 
-![import multiple web pages](/images/epubkit-multi-pages.png)
+![import multiple web pages](/images/epubkit-multi-pages.jpg)
 
 ### Option: Accessing content from login-required sites
 

src/pages/doc/connect.md

@@ -0,0 +1,62 @@
+---
+title: EpubKit Connect API Documentation
+layout: ../../layouts/blog.astro
+---
+
+**EpubKit Connect** is a feature that allows you to connect your EpubKit App through HTTP API. 
+
+When EpubKit starts, it also launches an HTTP service at http://localhost:6143. 
+
+![](/images/epubkit-connect.png)
+
+## API
+
+### Save article
+
+POST http://localhost:6143/save
+
+Body:
+
+- `url (required)` - URL of the article
+- `html (required)` - HTML of the article
+- `collectionId (required)` - Collection ID to save the article to
+- `title` - Title of the article
+
+Example:
+
+```ts
+const response = await fetch('http://localhost:6143/save', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    url: 'https://example.com/article',
+    html: '<h1>Hello World</h1>',
+    collectionId: 'xxxx-xxxx-xxxx-xxxx',
+    title: 'Article Title',
+  }),
+});
+
+```
+
+### Get collections
+
+GET http://localhost:6143/collections
+
+Return:
+
+```ts
+{
+  data: [
+    {
+      id: 'xxxx',
+      title: 'Collection Name',
+    },
+    {
+      // ...
+    }
+  ]
+}
+```
+

src/pages/index.astro

@@ -58,13 +58,56 @@ const downloads = {
         </p>
       </div>
 
-      <div class="flex items-start">
+      <div class="flex items-center gap-6">
         <button
           class="bg-black/80 inline-block text-center text-white/90 px-6 py-3 font-medium rounded-xl"
           onclick="document.getElementById('download_modal').showModal()"
         >
-          <div class="text-md">Download</div>
+          <div class="text-md">Download <strong>EpubKit</strong></div>
         </button>
+
+        <div class="flex gap-3 items-center">
+          <div>
+            <a
+              href="https://chromewebstore.google.com/detail/epubkit-connect/kolfkabggcnighackpbmmdolojkffapk"
+              target="_blank"
+            >
+              <img
+                src="/images/chrome.png"
+                class="w-[40px]"
+                title="Chrome Extension"
+                alt="chrome extension"
+              /></a
+            >
+          </div>
+          <div>
+            <a
+              href="https://addons.mozilla.org/en-US/firefox/addon/epubkit-connect/"
+              target="_blank"
+            >
+              <img
+                src="/images/firefox.png"
+                class="w-[40px]"
+                title="Firefox Addon"
+                alt="firefox extension"
+              /></a
+            >
+          </div>
+
+          <div>
+            <a
+              href="https://chromewebstore.google.com/detail/epubkit-connect/kolfkabggcnighackpbmmdolojkffapk"
+              target="_blank"
+            >
+              <img
+                src="/images/edge.png"
+                class="w-[32px]"
+                title="Edge Addon"
+                alt="Edge Addon"
+              /></a
+            >
+          </div>
+        </div>
       </div>
 
       <div>
@@ -108,6 +151,20 @@ const downloads = {
           <h3 class="font-bold mb-2">Import sub-pages</h3>
           <p class="text-black/60">One click import all sub pages of a page</p>
         </div>
+
+        <div class="bg-white rounded-lg p-8">
+          <div class="text-4xl mb-2">🔗</div>
+          <h3 class="font-bold mb-2">Connect</h3>
+          <p class="text-black/60">
+            <strong>EpubKit Connect</strong> feature allows you to save web page
+            through HTTP API and browser extension.
+          </p>
+          <p class="mt-3">
+            See <a class="underline text-sm" target="_blank" href="/doc/connect"
+              >API document</a
+            >
+          </p>
+        </div>
       </div>
 
       <h3 class="font-black text-center text-4xl mt-12">Pricing</h3>
@@ -176,6 +233,21 @@ const downloads = {
           >
         </div>
       </div>
+
+      <div class="space-y-3">
+        <div>
+          <a class="" target="_blank" href="/doc/connect">EpubKit Connect</a>
+        </div>
+        <div>
+          <a class="" target="_blank" href="/doc/connect">Edge Extension</a>
+        </div>
+        <div>
+          <a class="" target="_blank" href="/doc/connect">Chrome Extension</a>
+        </div>
+        <div>
+          <a class="" target="_blank" href="/doc/connect">Firefox Extension</a>
+        </div>
+      </div>
     </div>
   </footer>
 </Main>