-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.astro
177 lines (156 loc) · 4.47 KB
/
index.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
---
import fetch from "node-fetch";
import { JSDOM } from "jsdom";
// Import the getAllArticles function from the newsArchive.js file
import getAllArticles from "../lib/newsArchive.js";
// Initialize articles variable and error flag
let articles;
let errorOccurred = false;
try {
// Try to fetch all articles
articles = await getAllArticles();
} catch (error) {
// If an error occurs, log it and set the error flag
console.error("Failed to get articles:", error);
articles = [];
errorOccurred = true;
}
// This function fetches Open Graph (OG) data from a given URL.
// Open Graph is a protocol that allows a webpage to become a "rich" object in a social graph.
// It is used by social platforms like Facebook, LinkedIn, and Twitter to preview the content of a webpage.
async function fetchOGData(url) {
try {
// Fetch the webpage content
const response = await fetch(url);
// Parse the response to text
const html = await response.text();
// Use JSDOM to create a DOM from the HTML string
const dom = new JSDOM(html);
// Get the document object from the DOM
const doc = dom.window.document;
// Try to get the Open Graph title from the meta tags, if it doesn't exist, use the URL as the title
let ogTitle =
doc.querySelector('meta[property="og:title"]')?.content || url;
// Try to get the Open Graph image from the meta tags
const ogImage = doc.querySelector('meta[property="og:image"]')?.content;
// Return the Open Graph data
return { ogTitle, ogImage, url };
} catch (error) {
// If an error occurs, log it and return default values
console.error("Error fetching OG data:", error);
return { ogTitle: "No title", ogImage: "No image", url };
}
}
async function articlesWithOGData(articles) {
return await Promise.all(articles.map(fetchOGData));
}
let allArticles = await articlesWithOGData(articles);
let preferences = "";
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cepotr World</title>
<!-- Ethers.js CDN for Blockchain functionality -->
<script src="https://cdn.jsdelivr.net/npm/ethers/dist/ethers.min.js"></script>
</head>
<body>
<nav>
<form id="preferenceForm">
<label for="preferences">Enter your preferences:</label>
<input id="preferences" name="preferences" type="text">
<button type="submit">Submit</button>
</form>
<p>Ceptor Games</p>
<button id="fetchButton">Fetch More, Chainlink</button>
</nav>
<h1>News Articles</h1>
<script type="module">
import { sendRequest } from '/newsArchive.js'; // Adjust path as necessary
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('preferenceForm').addEventListener('submit', function(event) {
event.preventDefault();
const preferences = document.getElementById('preferences').value;
console.log('Preferences: ', preferences);
});
document.getElementById('fetchButton').addEventListener('click', async function() {
console.log('Fetching more articles...');
try {
const newArticles = await sendRequest();
console.log('New articles fetched:', newArticles);
} catch (error) {
console.error('Error fetching new articles:', error);
}
});
});
</script>
</body>
</html>
<style>
body {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
margin: 0;
padding: 24px;
}
h1 {
text-align: center;
font-size: 64px;
}
ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
article {
background-color: #f4f4f4;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
article:hover {
transform: translateY(-5px);
}
article a {
text-decoration: none;
color: #333;
}
article h2 {
font-size: 16px;
margin-top: 0;
}
article img {
width: 100%;
height: auto;
border-radius: 4px;
margin-top: 10px;
}
nav {
background-color: #1a1a1a;
color: white;
padding: 16px;
margin-top: 8px;
display: flex;
flex-direction: row;
justify-content: center;
}
form {
position: absolute;
left: 32px;
}
button {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin-left: 10px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>