From 295092f660a811765b17a5f9c79183558d467276 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Fri, 28 Jul 2023 10:31:57 +0200
Subject: [PATCH] Move references to Articles

---
 package-lock.json         | 52 +++++++++++++++++++++++++++++++++++++++
 package.json              |  1 +
 src/routes/+page.svelte   | 26 ++++++++++++--------
 src/routes/article.svelte | 13 ++++++++++
 4 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/article.svelte

diff --git a/package-lock.json b/package-lock.json
index e6e19eb..d6b443d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
 				"cors": "^2.8.5",
 				"detect-browser": "^5.3.0",
 				"express": "^4.18.2",
+				"fetch-opengraph": "^1.0.36",
 				"sass": "^1.64.1"
 			},
 			"devDependencies": {
@@ -1186,6 +1187,14 @@
 				"postcss": "^8.1.0"
 			}
 		},
+		"node_modules/axios": {
+			"version": "0.21.4",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+			"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+			"dependencies": {
+				"follow-redirects": "^1.14.0"
+			}
+		},
 		"node_modules/axobject-query": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -2124,6 +2133,15 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fetch-opengraph": {
+			"version": "1.0.36",
+			"resolved": "https://registry.npmjs.org/fetch-opengraph/-/fetch-opengraph-1.0.36.tgz",
+			"integrity": "sha512-w2Gs64zjL1O86E0I6E26MrxeXpTrR8Y1vWrgupmZN6NXKV8F5I3W0tlh+ZX686jZwxyilWnQjYwgnWpdETdHWw==",
+			"dependencies": {
+				"axios": "^0.21.1",
+				"html-entities": "^2.3.2"
+			}
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2212,6 +2230,25 @@
 			"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
 			"dev": true
 		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.2",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+			"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/forwarded": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -2399,6 +2436,21 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/html-entities": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.4.0.tgz",
+			"integrity": "sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/mdevils"
+				},
+				{
+					"type": "patreon",
+					"url": "https://patreon.com/mdevils"
+				}
+			]
+		},
 		"node_modules/http-errors": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
diff --git a/package.json b/package.json
index 348c695..71c2e50 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
 		"cors": "^2.8.5",
 		"detect-browser": "^5.3.0",
 		"express": "^4.18.2",
+		"fetch-opengraph": "^1.0.36",
 		"sass": "^1.64.1"
 	}
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 48343d9..1be845a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Footer from "./footer.svelte";
+  import Article from "./article.svelte";
 </script>
 
 <header class="banner">
@@ -79,19 +79,25 @@
       <summary>More Info</summary>
       <ul>
         <li>
-          <a href="https://vivaldi.com/blog/googles-new-dangerous-web-environment-integrity-spec/">
-            Julien Picalausa - <i>Unpacking Google’s new “dangerous” Web-Environment-Integrity specification</i>
-          </a>
+          <Article 
+            url="https://vivaldi.com/blog/googles-new-dangerous-web-environment-integrity-spec/" 
+            author="Julien Picalausa" 
+            title = "Unpacking Google’s new &quot;dangerous&quot; Web-Environment-Integrity specification"
+            />
         </li>
         <li>
-          <a href="https://www.theregister.com/2023/07/25/google_web_environment_integrity/">
-            Thomas Claburn - <i>Google's next big idea for browser security looks like another freedom grab to some</i>
-          </a>
+          <Article
+            url="https://www.theregister.com/2023/07/25/google_web_environment_integrity/"
+            author="Thomas Claburn" 
+            title="Google's next big idea for browser security looks like another freedom grab to some"
+          />
         </li>
         <li>
-          <a href="https://github.com/RupertBenWiser/Web-Environment-Integrity/blob/main/explainer.md">
-            Ben Wiser (Google), Borbala Benko (Google), Philipp Pfeiffenberger (Google), Sergey Kataev (Google) - <i>Web Environment Integrity Explainer</i> 
-          </a>
+          <Article 
+            url="https://github.com/RupertBenWiser/Web-Environment-Integrity/blob/main/explainer.md"
+            author= "Ben Wiser (Google), Borbala Benko (Google), Philipp Pfeiffenberger (Google), Sergey Kataev (Google)"
+            title="Web Environment Integrity Explainer" 
+          />
         </li>
       </ul>
     </details>
diff --git a/src/routes/article.svelte b/src/routes/article.svelte
new file mode 100644
index 0000000..a026f2d
--- /dev/null
+++ b/src/routes/article.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+
+export let url: string;
+export let title: string;
+export let author: string;
+
+</script>
+
+<a href="{ url }">
+  <span class="author">{ author }</span>
+  -
+  <i class="title">{ title }</i>
+</a>
\ No newline at end of file