<!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://sangigi-fuchsia.fr" 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://twitter.com/Asso_Camelia" class="icon brands fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
							<li><a href="https://discord.gg/0TAUHO2ghNKQnmCt" 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 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 () {
  let url = "https://sangigi-fuchsia.fr/category/camelia-studio/annonces-nouvelles/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>