From e9fc737ce353a4a3defe921c46f57f7b42763cf4 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 11 May 2023 16:42:15 +0200
Subject: [PATCH] feat: article component for extracted content

---
 src/components/article.astro | 14 ++++++++++++++
 src/pages/index.astro        |  7 ++++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/article.astro

diff --git a/src/components/article.astro b/src/components/article.astro
new file mode 100644
index 0000000..ff809e1
--- /dev/null
+++ b/src/components/article.astro
@@ -0,0 +1,14 @@
+---
+import { ArticleData } from "@extractus/article-extractor";
+
+const article = Astro.props.article;
+
+export interface Props {
+  article: ArticleData;
+}
+---
+
+<h2>{article.title}</h2>
+<p>by <em>{article.author}</em></p>
+
+<span set:html={article.content} />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cb8821b..65c634e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,13 @@
 ---
 import Form, { FormGroup } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
-import { extract } from "@extractus/article-extractor";
 import getParams from "../utils/get-params";
+import { extract } from "@extractus/article-extractor";
+import Article from "../components/article.astro";
 
 const params = getParams(Astro.url);
 const url = params?.url;
-const article = extract(url);
+const article = await extract(url);
 
 const form = new FormGroup([
   {
@@ -29,4 +30,4 @@ const form = new FormGroup([
   }}
 />
 
-{article ? <p>{JSON.stringify(article)}</p> : "<hr />"}
+<Article article={article} />