Esenjin
bccdca2265
All checks were successful
camelia / deploy (push) Successful in 43s
ajout d'un bouton pour accéder à notre site tsubakimono et changement du rss chargé pour les actus du site (prend tous les articles en compte sans restriction de catégorie)
177 lines
6.0 KiB
HTML
177 lines
6.0 KiB
HTML
<!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> |