-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
113 lines (96 loc) · 4.27 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ctrl Alt Tec | Blog</title>
<meta property="og:type" content="website" />
<meta property="og:title" content="Watermelon 🍉"/>
<meta property="og:description" content="Blog y recursos del grupo estudiantil de programación del Tec CSF" />
<link rel="stylesheet" href="style.css">
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v7.0&appId=1190445321316803&autoLogAppEvents=1" nonce="BUb9bUSz"></script>
</head>
<body>
<nav>
<a href="?">
<img src="https://ctrl-alt-tec.hackclub.com/img/logo-block.png" alt="CtrlAltTec" srcset="">
</a>
<input type="search" name="" id="">
</nav>
<div id="container"></div>
<script>
const blogBaseURL = 'https://blog.ctrl-alt-tec.hackclub.com?post=';
const apiPosts = 'https://ctrl-alt-tec.herokuapp.com/contenido/posts';
const LikeButton = (url)=>{
let div = document.createElement('div');
div.className = 'fb-like';
div.setAttribute('data-href', url);
div.setAttribute('data-width', '');
div.setAttribute('data-layout', 'button_count');
div.setAttribute('data-action', 'like');
div.setAttribute('data-size', 'large');
div.setAttribute('data-share', 'false');
return div;
}
const Comments = (url) => {
let div = document.createElement('div');
div.className = 'fb-comments';
div.setAttribute('data-href', url);
div.setAttribute('data-numposts', '5');
div.setAttribute('data-width', '');
return div;
}
const Card = (post, options) => {
let postElement = document.createElement('a');
postElement.className = 'card';
postElement.href = '?post='+post.slug;
//
let postElement_category = document.createElement('span');
postElement_category.className = 'card_category';
postElement_category.innerHTML = post.category;
//
let postElement_title = document.createElement('h2');
postElement_title.className = 'card_title'
postElement_title.innerText = post.title;
//
let postElement_author = document.createElement('div');
postElement_author.className = 'card_author';
postElement_author.innerText = post.author;
//
postElement.append(postElement_category, postElement_title, postElement_author)
postElement.addEventListener('click', ()=>{
window.history.pushState('',document.title,'')
openPost(post.slug)
})
return postElement
}
let searchPosts = async ( cond = ()=>true )=>{
document.querySelector('#container').innerHTML = ''
let posts_raw = await fetch('https://ctrl-alt-tec.herokuapp.com/contenido/posts');
let posts = await posts_raw.json();
posts.filter(cond).forEach(post => {
document.querySelector('#container').append(Card(post))
});
}
let openPost = async (slug) => {
document.querySelector('#container').innerHTML = ''
let post_raw = await fetch('https://ctrl-alt-tec.herokuapp.com/contenido/posts/'+slug);
let post = await post_raw.text();
document.querySelector('#container').innerHTML = post
let social = document.createElement('section');
social.className = 'social';
social.append(
LikeButton('https://ctrl-alt-tec.hackclub.com/watermelon?post='+slug),
Comments('https://ctrl-alt-tec.hackclub.com/watermelon?post='+slug)
)
document.querySelector('#container').append(social)
FB.XFBML.parse(social)
}
if(new URLSearchParams(window.location.search).get('post')){
openPost(new URLSearchParams(window.location.search).get('post'))
} else {
searchPosts()
}
</script>
</body>
</html>