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
|
||||
assets/css/*.map
|
||||
scss/*.map
|
||||
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/)
|
||||
- [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 :
|
||||
|
||||
|
|
|
|||
|
|
@ -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