Compare commits
No commits in common. "04448b979ff867b850f53f15c55fd1ae3b4cb66b" and "8a5b4479d57bf5523b8a34efaecef05c7b988023" have entirely different histories.
04448b979f
...
8a5b4479d5
7 changed files with 239 additions and 120 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
||||||
scss/*.map
|
assets/css/*.css
|
||||||
|
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
|
||||||
- PHP to fetch RSS Feed using php-xml & php-intl
|
- Vanilla JS to Fetch the podcast (using [rss2json](https://rss2json.com) to bypass CORS)
|
||||||
|
|
||||||
## Assets sources :
|
## Assets sources :
|
||||||
|
|
||||||
|
|
|
||||||
146
assets/css/styles.scss
Normal file
146
assets/css/styles.scss
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
29
assets/script.js
Normal file
29
assets/script.js
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
"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
Normal file
61
index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
<!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
56
index.php
|
|
@ -1,56 +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 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
62
podcast.php
|
|
@ -1,62 +0,0 @@
|
||||||
<?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