This commit is contained in:
parent
a8aebebbc7
commit
cc0f68bd49
@ -1,177 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Massively by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Actualités - Camélia Studio</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta property="og:title" content="Camélia Studio">
|
||||
<meta property="og:image" content="https://camelia-studio.org/v5/images/logo2_mini.png">
|
||||
<meta property="og:description" content="Camélia Studio est une association de loi 1901 (n° J.O. 20150013). Son objectif est de promouvoir les Arts et la Culture au sens large en France.">
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
|
||||
<style type="text/css">
|
||||
.main .news-card {
|
||||
width: 100%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
.main .card-row {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.div-image-container {
|
||||
height: 150px;
|
||||
flex: 20%;
|
||||
min-width: 120px;
|
||||
min-height: 100px;
|
||||
margin-right: 1%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
/* For mobile phones: */
|
||||
body {
|
||||
margin: 0px;
|
||||
font-size: 90%;
|
||||
}
|
||||
.main .serieA {
|
||||
margin: 4em 0.5em;
|
||||
}
|
||||
}</style>
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<a href="index.html" class="logo">Camélia Studio</a>
|
||||
</header>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul class="links">
|
||||
<li><a href="index.html">Présentation</a></li>
|
||||
<li><a href="../branches/index.html" target="_blank">Nos branches ↗</a></li>
|
||||
<li><a href="https://tsubakimono.camelia-studio.org" target="_blank">Site web ↗</a></li>
|
||||
<li class="active"><a href="actualites.html">Actualités</a></li>
|
||||
</ul>
|
||||
<ul class="icons">
|
||||
<li><a href="https://tsubakimono.camelia-studio.org/" class="icon brands fa-wordpress" target="_blank"><span class="label">Site</span></a></li>
|
||||
<li><a href="https://shelter.moe/@Camelia" class="icon brands fa-mastodon" target="_blank"><span class="label">Mastodon</span></a></li>
|
||||
<li><a href="https://discord.gg/nBuZ9vJ" class="icon brands fa-discord" target="_blank"><span class="label">Instagram</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
|
||||
<!-- Post -->
|
||||
<section class="post">
|
||||
<header class="major">
|
||||
<span class="date">Quoi de neuf ?</span>
|
||||
<p>Découvrez nos derniers articles publiés sur notre site « Tsubakimono ».</p>
|
||||
</header>
|
||||
<main class="main"> </main>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div id="copyright">
|
||||
<p>© Untitled - Design: <a href="https://html5up.net" target="_blank">HTML5 UP</a> | Illustration : <a href="https://pellichi.fr" target="_blank">Pellichi</a> | Logo : <a href="https://esenjin.xyz" target="_blank">Esenjin Asakha</a> | Lecteur RSS : <a href="https://codepen.io/maxdesimone/pen/NWWamMw" target="_blank">Massimiliano De Simone</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.scrollex.min.js"></script>
|
||||
<script src="assets/js/jquery.scrolly.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script type="text/javascript">
|
||||
const buildHTML = (data) => {
|
||||
console.log("data", data);
|
||||
|
||||
let article = document.createElement("article");
|
||||
article.setAttribute("class", "serieA");
|
||||
|
||||
let header = document.createElement("header");
|
||||
let h2 = document.createElement("h2");
|
||||
h2.appendChild(document.createTextNode(data.feed.description));
|
||||
header.setAttribute("class", "serieA__header");
|
||||
header.appendChild(h2);
|
||||
|
||||
let articleBody = document.createElement("div");
|
||||
articleBody.setAttribute("class", "serieA__content");
|
||||
articleBody.setAttribute("itemprop", "articleBody");
|
||||
|
||||
article.appendChild(header);
|
||||
article.appendChild(articleBody);
|
||||
|
||||
// for each RSS item create a div.news-card and append it to the article
|
||||
data.items.forEach((item) => {
|
||||
let divEl = document.createElement("div");
|
||||
divEl.setAttribute("class", "news-card");
|
||||
|
||||
let anchor = document.createElement("a");
|
||||
anchor.setAttribute("href", item.link);
|
||||
anchor.setAttribute("target", "_blank");
|
||||
anchor.setAttribute("class", "card-row");
|
||||
|
||||
let imageContainerDiv = document.createElement("div");
|
||||
imageContainerDiv.setAttribute("style",`background-image:url(${item.enclosure.link})`);
|
||||
imageContainerDiv.setAttribute("class", "div-image-container");
|
||||
|
||||
let textContainerDiv = document.createElement("div");
|
||||
textContainerDiv.setAttribute("class", "div-text-container");
|
||||
|
||||
let header = document.createElement("h5");
|
||||
let textBody = document.createElement("div");
|
||||
header.appendChild(document.createTextNode(item.title));
|
||||
textBody.appendChild(document.createTextNode(item.content));
|
||||
textContainerDiv.appendChild(header);
|
||||
textContainerDiv.appendChild(textBody);
|
||||
|
||||
anchor.appendChild(imageContainerDiv);
|
||||
anchor.appendChild(textContainerDiv);
|
||||
|
||||
divEl.appendChild(anchor);
|
||||
articleBody.appendChild(divEl);
|
||||
});
|
||||
const main = document.querySelector(".main");
|
||||
main.firstChild.remove();
|
||||
main.appendChild(article);
|
||||
};
|
||||
|
||||
|
||||
// fetch RSS
|
||||
const getRSS = async function () {
|
||||
let url = "https://tsubakimono.camelia-studio.org/feed/";
|
||||
//url ="https://theathletic.com/serie-a/?rss=1";
|
||||
try {
|
||||
let response = await fetch("https://api.rss2json.com/v1/api.json?rss_url=" + url,
|
||||
{ cache: "no-cache" });
|
||||
let json = await response.json();
|
||||
buildHTML(json);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", getRSS, false);
|
||||
// https://feed.mikle.com/support/rss-feed-sources-online-news-sites/
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -41,7 +41,6 @@
|
||||
<li class="active"><a href="index.html">Présentation</a></li>
|
||||
<li><a href="../branches/index.html" target="_blank">Nos branches ↗</a></li>
|
||||
<li><a href="https://tsubakimono.camelia-studio.org" target="_blank">Site web ↗</a></li>
|
||||
<li><a href="actualites.html">Actualités</a></li>
|
||||
</ul>
|
||||
<ul class="icons">
|
||||
<li><a href="https://tsubakimono.camelia-studio.org/" class="icon brands fa-wordpress" target="_blank"><span class="label">Site</span></a></li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user