Sites-Camelia/v5/actualites.html

176 lines
5.8 KiB
HTML
Raw Normal View History

2022-10-14 11:24:04 +00:00
<!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>
2022-10-14 11:24:04 +00:00
<li class="active"><a href="actualites.html">Actualités</a></li>
</ul>
<ul class="icons">
<li><a href="https://shelter.moe/@Camelia" class="icon brands fa-mastodon" target="_blank"><span class="label">Mastodon</span></a></li>
2024-02-11 22:12:58 +00:00
<li><a href="https://discord.gg/nBuZ9vJ" class="icon brands fa-discord" target="_blank"><span class="label">Instagram</span></a></li>
2022-10-14 11:24:04 +00:00
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<header class="major">
<span class="date">Quoi de neuf ?</span>
<p>Découvrez nos dernières actualités.</p>
</header>
<main class="main"> </main>
</div>
<!-- Copyright -->
<div id="copyright">
<p>&copy; 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 () {
2023-02-11 14:21:08 +00:00
let url = "https://tsubakimono.camelia-studio.org/category/camelia-studio/annonces-nouvelles/feed/";
2022-10-14 11:24:04 +00:00
//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>