Compare commits
3 commits
8a5b4479d5
...
04448b979f
| Author | SHA1 | Date | |
|---|---|---|---|
| 04448b979f | |||
| c947e3bac7 | |||
| 92742d6d09 |
7 changed files with 120 additions and 239 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,3 +1,2 @@
|
||||||
assets/css/*.css
|
scss/*.map
|
||||||
assets/css/*.map
|
|
||||||
feed.json
|
feed.json
|
||||||
|
|
@ -16,7 +16,7 @@ Disponible à l'écoute sur :
|
||||||
|
|
||||||
- SCSS compiled with [Live Sass Compiler Vscode extension](https://github.com/glenn2223/vscode-live-sass-compiler/)
|
- SCSS compiled with [Live Sass Compiler Vscode extension](https://github.com/glenn2223/vscode-live-sass-compiler/)
|
||||||
- [Bootstrap](https://getbootstrap.com/) for SCSS/CSS
|
- [Bootstrap](https://getbootstrap.com/) for SCSS/CSS
|
||||||
- Vanilla JS to Fetch the podcast (using [rss2json](https://rss2json.com) to bypass CORS)
|
- PHP to fetch RSS Feed using php-xml & php-intl
|
||||||
|
|
||||||
## Assets sources :
|
## Assets sources :
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,146 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: "Cursive";
|
|
||||||
src: url("/assets/fonts/Cursive\ standard.woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "Cursive-bold";
|
|
||||||
src: url("/assets/fonts/Cursive\ standard\ Bold.woff2");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--title-color: #63BAEE;
|
|
||||||
--bgd-color: #F7F6EE;
|
|
||||||
--text-color: #2A2A2A;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--bgd-color: #2A2A2A;
|
|
||||||
--text-color: #F7F6EE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: "Cursive";
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: var(--bgd-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-left: 10%;
|
|
||||||
margin-right: 10%;
|
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: "Cursive-bold";
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
font-size: xxx-large;
|
|
||||||
color: var(--title-color);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FeedDesc {
|
|
||||||
font-size: x-large;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.FollowMe {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
height: 10vh;
|
|
||||||
|
|
||||||
font-size: x-large;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
a {
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
text-decoration: none;
|
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.listen-on {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
font-size: x-large;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
height: 10vh;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textRSS {
|
|
||||||
margin-left: 5%;
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rss-listen {
|
|
||||||
padding-left: 1%;
|
|
||||||
padding-right: 1%;
|
|
||||||
|
|
||||||
border-radius: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.Podcasts {
|
|
||||||
.podcast {
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: xx-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
audio {
|
|
||||||
width: 90%;
|
|
||||||
background-color: #F7F6EE;
|
|
||||||
margin-left: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.podcast-desc {
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
"use strict";
|
|
||||||
|
|
||||||
function removeAcastBranding(description,removeBR) { // Retire la mention "hébergé par Acast"
|
|
||||||
let desc = description.replace(/(<br><hr>\n<p>).+(<\/p>)/g,"");
|
|
||||||
if (removeBR) { desc = desc.replace(/<br>/g,"") }
|
|
||||||
return desc
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchRSSfeed() {
|
|
||||||
const RSS_URL = "https://feeds.acast.com/public/shows/le-plus-beau-des-voyages";
|
|
||||||
const RSS_API = "https://api.rss2json.com/v1/api.json?rss_url="
|
|
||||||
const response = await fetch( RSS_API + RSS_URL);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", function () {
|
|
||||||
console.log(
|
|
||||||
"Hewo, c'est renarde 🦊, la créatrice de ce site.\nSi tu veux trouver le code source du site c'est par ici -> "
|
|
||||||
+ 'https://forgejo.la-taniere-solidaire.gay/Renarde/site-web-le-plus-beau-des-voyages'
|
|
||||||
);
|
|
||||||
|
|
||||||
// fetchRSSfeed().then( rssData => {
|
|
||||||
// document.getElementById("FeedDesc").innerHTML = removeAcastBranding(rssData.feed.description,false);
|
|
||||||
// for (const episode of rssData.items) {
|
|
||||||
// const formatedEp = formatEpisodeIntoHTML(episode)
|
|
||||||
// this.document.getElementById("Podcasts").append(formatedEp)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
})
|
|
||||||
61
index.html
61
index.html
|
|
@ -1,61 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<!-- favicons -->
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
|
|
||||||
<link rel="manifest" href="assets/favicons/site.webmanifest">
|
|
||||||
<link rel="mask-icon" href="assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
|
||||||
<meta name="theme-color" content="#ffffff">
|
|
||||||
<link rel="favicon" type="ico" href="assets/favicons/favicon.ico">
|
|
||||||
<!-- head info -->
|
|
||||||
<title>Le plus beau des voyages</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<script type="text/javascript" src="assets/script.js"></script>
|
|
||||||
<!-- bootstrap css -->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
||||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- Title -->
|
|
||||||
<div class="Title">
|
|
||||||
<h1>Le plus beau des voyages</h1>
|
|
||||||
<p>Animé par Pauline</p>
|
|
||||||
</div>
|
|
||||||
<p class="Podcast-desc"></p>
|
|
||||||
|
|
||||||
<!-- Last episode -->
|
|
||||||
<div class="Last-episode">
|
|
||||||
<h2>Le dernier épisode :</h2>
|
|
||||||
<h3 class="Last-episode-title"></h3>
|
|
||||||
<audio class="Last-episode-audio"></audio>
|
|
||||||
<p class="Last-episode-desc"></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Listen on -->
|
|
||||||
<div class="Listen-on">
|
|
||||||
<a href="https://feeds.acast.com/public/shows/le-plus-beau-des-voyages">
|
|
||||||
<img src="assets/img/rss-logo.svg" alt="RSS">
|
|
||||||
</a>
|
|
||||||
<a href="https://podcasts.apple.com/fr/podcast/le-plus-beau-des-voyages/id1690552189">
|
|
||||||
<img src="assets/img/apple-logo.svg" alt="Apple podcast">
|
|
||||||
</a>
|
|
||||||
<a href="https://music.amazon.com/podcasts/2328ada5-4c12-4ecc-afcb-5153156fc437/le-plus-beau-des-voyages">
|
|
||||||
<img src="assets/img/amazon-logo.svg" alt="Amazon Music">
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5hY2FzdC5jb20vcHVibGljL3Nob3dzL2xlLXBsdXMtYmVhdS1kZXMtdm95YWdlcw">
|
|
||||||
<img src="assets/img/google-logo.svg" alt="Google podcast">
|
|
||||||
</a>
|
|
||||||
<a href="https://open.spotify.com/show/0QYpt8IEKlvQCVCHnOR9eo">
|
|
||||||
<img src="assets/img/spotify-logo.svg" alt="Spotify">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
56
index.php
Normal file
56
index.php
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<!-- favicons -->
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180"
|
||||||
|
href="assets/favicons/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32"
|
||||||
|
href="assets/favicons/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16"
|
||||||
|
href="assets/favicons/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="assets/favicons/site.webmanifest">
|
||||||
|
<link rel="mask-icon"
|
||||||
|
href="assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||||
|
<meta name="msapplication-TileColor" content="#da532c">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
<link rel="favicon" type="ico" href="assets/favicons/favicon.ico">
|
||||||
|
<!-- head data -->
|
||||||
|
<title>Le plus beau des voyages</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="scss/styles.css" />
|
||||||
|
<!-- bootstrap css -->
|
||||||
|
<link
|
||||||
|
href=
|
||||||
|
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity=
|
||||||
|
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||||
|
crossorigin="anonymous">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php // phpcs:ignoreFile
|
||||||
|
require_once "podcast.php";
|
||||||
|
$podcast = new Podcast(
|
||||||
|
"https://feeds.acast.com/public/shows/le-plus-beau-des-voyages"
|
||||||
|
);
|
||||||
|
?>
|
||||||
|
<div class="Title">
|
||||||
|
<h1><?php echo $podcast->title ?></h1>
|
||||||
|
<p>Animé par Pauline</p>
|
||||||
|
</div>
|
||||||
|
<p class="Podcast-desc">
|
||||||
|
<?php echo $podcast->description ?>
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<!-- Last episode -->
|
||||||
|
<div class="Last-episode">
|
||||||
|
<h2>Le dernier épisode :</h2>
|
||||||
|
<h3 class="Last-episode-title"><?php echo $podcast->latestEpTitle ?></h3>
|
||||||
|
<?php echo $podcast->latestEpPublicationDate ?>
|
||||||
|
<audio controls=true <?php echo $podcast->latestEpAudioData ?>></audio>
|
||||||
|
<p class="Last-episode-desc"><?php echo $podcast->latestEpDescription ?></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
62
podcast.php
Normal file
62
podcast.php
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?php
|
||||||
|
// phpcs:ignoreFile
|
||||||
|
/**
|
||||||
|
* This file parse Podcast RSS Feed
|
||||||
|
*
|
||||||
|
* Parse RSS Feed and return HTML elements
|
||||||
|
*
|
||||||
|
* php version 8.1+
|
||||||
|
* php extensions php-xml php-intl
|
||||||
|
*
|
||||||
|
* @author Renarde-Dev <Renarde-Dev@la-taniere-solidaire.fr>
|
||||||
|
* @link https://forgejo.la-taniere-solidaire.gay/Renarde/site-web-le-plus-beau-des-voyages
|
||||||
|
*/
|
||||||
|
|
||||||
|
class Podcast
|
||||||
|
{
|
||||||
|
public string $title;
|
||||||
|
public string $description;
|
||||||
|
|
||||||
|
public string $latestEpTitle;
|
||||||
|
public string $latestEpDescription;
|
||||||
|
public string $latestEpPublicationDate;
|
||||||
|
public string $latestEpAudioData;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param string $url RSS feed URL
|
||||||
|
*/
|
||||||
|
function __construct($url) {
|
||||||
|
$data = file_get_contents($url);
|
||||||
|
/**
|
||||||
|
* TODO : Implement caching system
|
||||||
|
*
|
||||||
|
* file_put_contents("feed.rss", $FeedData);
|
||||||
|
*/
|
||||||
|
|
||||||
|
$xml = simplexml_load_string($data,'SimpleXMLElement', LIBXML_NOCDATA);
|
||||||
|
$this->title = ucfirst(strtolower($xml->channel->title));
|
||||||
|
// Remove acast branding
|
||||||
|
$this->description = preg_replace(
|
||||||
|
"/<br \/>.+<\/p>/", "", $xml->channel->description
|
||||||
|
);
|
||||||
|
$this->latestEpTitle = $xml->channel->item[0]->title;
|
||||||
|
// Remove acast branding
|
||||||
|
$this->latestEpDescription = preg_replace(
|
||||||
|
"/<br \/>.+<\/p>/", "", $xml->channel->item[0]->description
|
||||||
|
);
|
||||||
|
// Localize the date
|
||||||
|
$fmt = new \IntlDateFormatter('fr_FR', null, null);
|
||||||
|
$fmt->setPattern('d MMMM yyyy HH:mm');
|
||||||
|
$cff = DateTime::createFromFormat(
|
||||||
|
DateTime::RFC7231,
|
||||||
|
$xml->channel->item[0]->pubDate
|
||||||
|
);
|
||||||
|
$this->latestEpPublicationDate = $fmt->format($cff);
|
||||||
|
// Generate audio tags
|
||||||
|
$rawAudioData = $xml->channel->item[0]->enclosure->attributes();
|
||||||
|
$this->latestEpAudioData = "src={$rawAudioData->url} " .
|
||||||
|
"type={$rawAudioData->type} " .
|
||||||
|
"length={$rawAudioData->length}";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
Loading…
Reference in a new issue