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 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="../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="https://tsubakimono.camelia-studio.org" target="_blank">Site web ↗</a></li>
|
||||||
<li><a href="actualites.html">Actualités</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="icons">
|
<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://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