Add Podcasts (Apple Podcasts, Google Podcasts, Pocket Casts & Overcast) (#507)

* Add Apple Podcasts

* Add Google Podcasts

* Add Pocket Casts

* Add Overcast

* Fixing Typos

* Reorder new Buttons at the end

* fix SNAKE_CASE

* Add Apple Podcasts

* Add Google Podcasts

* Add Pocket Casts

* Add Overcast

* Fixing Typos

* Reorder new Buttons at the end

* fix SNAKE_CASE
This commit is contained in:
Sebastian Thiele 2023-10-25 21:35:17 +02:00 committed by GitHub
parent f41213a133
commit d0044133db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 154 additions and 1 deletions

View File

@ -129,6 +129,10 @@ services:
- VRCHAT=https://vrchat.com
- X=https://x.com
- CODEWARS=https://www.codewars.com
- APPLE_PODCASTS=https://podcasts.apple.com/de/podcast/NAME/id000000000
- GOOGLE_PODCASTS=https://podcasts.google.com/feed/XYZ
- POCKET_CASTS=https://pca.st/XYZ
- OVERCAST=https://overcast.fm/itunes00000000
ports:
- 8080:3000
restart: unless-stopped

View File

@ -604,3 +604,43 @@ button {
color: #df605c;
background-color: #222327;
}
/* Apple Podcasts */
.button.button-apple-podcasts {
color: #ffffff;
background-color: #000000;
border: 1px solid #FFFFFF;
}
.button.button-apple-podcasts:hover,
.button.button-apple-podcasts:focus {
filter: brightness(90%);
}
/* Google Podcasts */
.button.button-google-podcasts {
color: #000000;
background-color: #FFFFFF;
border: 1px solid #212121;
}
.button.button-google-podcasts:hover,
.button.button-google-podcasts:focus {
filter: brightness(90%);
}
/* Pocket Casts */
.button.button-pocket-casts {
color: #000000;
border-style: solid;
border-color: #b8c3c9;
border-width: 1px;
background-color: #ffffff;
}
/* Overcast */
.button.button-overcast {
color: #000000;
border-style: solid;
border-color: #b8c3c9;
border-width: 1px;
background-color: #ffffff;
}

View File

@ -91,6 +91,10 @@ import pixelfedLogo from '../../icons/pixelfed.svg';
import vrchatLogo from '../../icons/vrchat.svg';
import xLogo from '../../icons/x.svg';
import codewarsLogo from '../../icons/codewars.svg';
import applePodcastsLogo from '../../icons/apple-podcasts.svg';
import googlePodcastsLogo from '../../icons/google-podcasts.svg';
import pocketCastsLogo from '../../icons/pocketcasts.svg';
import overcastLogo from '../../icons/overcast.svg';
function Home(props) {
let order = [];
@ -204,7 +208,6 @@ function Home(props) {
order={buttonOrder('GITHUB')}
/>
)}
{runtimeConfig.DISCORD && (
<Button
name="discord"
@ -959,6 +962,42 @@ function Home(props) {
order={buttonOrder('CODEWARS')}
/>
)}
{runtimeConfig.APPLE_PODCASTS && (
<Button
name="apple-podcasts"
href={runtimeConfig.APPLE_PODCASTS}
displayName="Apple Podcasts"
logo={applePodcastsLogo}
order={buttonOrder('APPLE_PODCASTS')}
/>
)}
{runtimeConfig.GOOGLE_PODCASTS && (
<Button
name="google-podcasts"
href={runtimeConfig.GOOGLE_PODCASTS}
displayName="Google Podcasts"
logo={googlePodcastsLogo}
order={buttonOrder('GOOGLE_PODCASTS')}
/>
)}
{runtimeConfig.POCKET_CASTS && (
<Button
name="pocket-casts"
href={runtimeConfig.POCKET_CASTS}
displayName="Pocket Casts"
logo={pocketCastsLogo}
order={buttonOrder('POCKET_CASTS')}
/>
)}
{runtimeConfig.OVERCAST && (
<Button
name="overcast"
href={runtimeConfig.OVERCAST}
displayName="Overcast"
logo={overcastLogo}
order={buttonOrder('OVERCAST')}
/>
)}
</Sort>
<div>
<p className="footer">

View File

@ -143,6 +143,10 @@ export const runtimeConfig =
VRCHAT: window?.env?.VRCHAT,
X: window?.env?.X,
CODEWARS: window?.env?.CODEWARS,
APPLE_PODCASTS: window?.env?.APPLE_PODCASTS,
GOOGLE_PODCASTS: window?.env?.GOOGLE_PODCASTS,
POCKET_CASTS: window?.env?.POCKET_CASTS,
OVERCAST: window?.env?.OVERCAST,
}
: {
// server
@ -515,4 +519,16 @@ export const runtimeConfig =
CODEWARS: nodeIsProduction
? process.env.CODEWARS
: process.env.RAZZLE_CODEWARS,
APPLE_PODCASTS: nodeIsProduction
? process.env.APPLE_PODCASTS
: process.env.RAZZLE_APPLE_PODCASTS,
GOOGLE_PODCASTS: nodeIsProduction
? process.env.GOOGLE_PODCASTS
: process.env.RAZZLE_GOOGLE_PODCASTS,
POCKET_CASTS: nodeIsProduction
? process.env.POCKET_CASTS
: process.env.RAZZLE_POCKET_CASTS,
OVERCAST: nodeIsProduction
? process.env.OVERCAST
: process.env.RAZZLE_OVERCAST,
};

View File

@ -0,0 +1,18 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1432_8541)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.528 20.8C23.296 21.392 22.76 22.224 21.992 22.816C21.552 23.152 21.024 23.48 20.304 23.696C19.536 23.928 18.584 24 17.4 24H6.6C5.416 24 4.472 23.92 3.696 23.696C2.976 23.48 2.448 23.16 2.008 22.816C1.248 22.232 0.704 21.392 0.472 20.8C0.00799999 19.608 0 18.256 0 17.4V6.6C0 5.744 0.00799999 4.392 0.472 3.2C0.704 2.608 1.24 1.776 2.008 1.184C2.448 0.848 2.976 0.52 3.696 0.304C4.472 0.08 5.416 0 6.6 0H17.4C18.584 0 19.528 0.08 20.304 0.304C21.024 0.52 21.552 0.84 21.992 1.184C22.752 1.768 23.296 2.608 23.528 3.2C24 4.392 24 5.752 24 6.6V17.4C24 18.256 23.992 19.608 23.528 20.8Z" fill="url(#paint0_linear_1432_8541)"/>
<path d="M14.056 14.488C14.024 14.2 13.928 13.992 13.736 13.8C13.376 13.424 12.744 13.176 12 13.176C11.256 13.176 10.624 13.416 10.264 13.8C10.08 14 9.97604 14.2 9.94404 14.488C9.88004 15.048 9.92004 15.528 9.98404 16.304C10.048 17.04 10.168 18.024 10.32 19.016C10.432 19.728 10.52 20.112 10.6 20.384C10.736 20.832 11.224 21.216 12 21.216C12.776 21.216 13.272 20.824 13.4 20.384C13.48 20.112 13.568 19.728 13.68 19.016C13.832 18.016 13.952 17.04 14.016 16.304C14.088 15.528 14.12 15.048 14.056 14.488Z" fill="white"/>
<path d="M13.968 10.408C13.968 11.496 13.088 12.376 12 12.376C10.912 12.376 10.032 11.496 10.032 10.408C10.032 9.32 10.912 8.44 12 8.44C13.088 8.44 13.968 9.328 13.968 10.408Z" fill="white"/>
<path d="M11.976 2.65599C7.38404 2.67199 3.62404 6.39999 3.56004 10.992C3.51204 14.712 5.88804 17.896 9.20804 19.064C9.28804 19.096 9.36804 19.024 9.36004 18.944C9.32004 18.656 9.27204 18.368 9.24004 18.08C9.22404 17.976 9.16004 17.896 9.07204 17.848C6.44804 16.704 4.61604 14.072 4.64804 11.024C4.68804 7.02399 7.95204 3.76799 11.944 3.73599C16.032 3.70399 19.368 7.01599 19.368 11.096C19.368 14.112 17.544 16.704 14.944 17.848C14.848 17.888 14.784 17.976 14.776 18.08C14.736 18.368 14.696 18.656 14.656 18.944C14.64 19.032 14.728 19.096 14.808 19.064C18.096 17.912 20.456 14.776 20.456 11.096C20.44 6.43999 16.64 2.64799 11.976 2.65599Z" fill="white"/>
<path d="M11.784 5.45598C8.79199 5.56798 6.39199 8.03997 6.35199 11.032C6.32799 13 7.31199 14.744 8.82399 15.776C8.89599 15.824 8.99999 15.768 8.99999 15.68C8.97599 15.336 8.97599 15.032 8.99199 14.712C8.99999 14.608 8.95999 14.512 8.87999 14.44C7.95999 13.576 7.39999 12.344 7.43199 10.984C7.49599 8.58398 9.42399 6.63198 11.824 6.53598C14.432 6.43198 16.576 8.52798 16.576 11.104C16.576 12.416 16.016 13.6 15.128 14.44C15.056 14.512 15.016 14.608 15.016 14.712C15.032 15.024 15.024 15.328 15.008 15.672C15 15.76 15.104 15.824 15.184 15.768C16.672 14.752 17.656 13.032 17.656 11.096C17.664 7.91198 15 5.32798 11.784 5.45598Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_1432_8541" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse">
<stop stop-color="#F452FF"/>
<stop offset="1" stop-color="#832BC1"/>
</linearGradient>
<clipPath id="clip0_1432_8541">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -0,0 +1,19 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1432_8647)">
<path d="M1.45557 11.1792V12.8203Z" fill="black"/>
<path d="M1.45557 11.1792V12.8203" stroke="#0066D9" stroke-width="2.91" stroke-linecap="round"/>
<path d="M22.5443 11.1792V12.8203Z" fill="black"/>
<path d="M22.5443 11.1792V12.8203" stroke="#4285F4" stroke-width="2.91" stroke-linecap="round"/>
<path d="M6.72778 6.2561V11.6237ZM6.72778 16.1024V17.7435Z" fill="black"/>
<path d="M6.72778 6.2561V11.6237M6.72778 16.1024V17.7435" stroke="#EA4335" stroke-width="2.91" stroke-linecap="round"/>
<path d="M17.2722 12.3756V17.7432ZM17.2722 6.25562V7.89667Z" fill="black"/>
<path d="M17.2722 12.3756V17.7432M17.2722 6.25562V7.89667" stroke="#34A853" stroke-width="2.91" stroke-linecap="round"/>
<path d="M12 7.62356V16.3758ZM12 1.45496V3.09602ZM12 20.9028V22.5439Z" fill="black"/>
<path d="M12 7.62356V16.3758M12 1.45496V3.09602M12 20.9028V22.5439" stroke="#FAB908" stroke-width="2.91" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0_1432_8647">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

7
src/icons/overcast.svg Normal file
View File

@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Overcast" role="img" viewBox="0 0 512 512" stroke-linecap="round" stroke-width="23" width="64px" height="64px" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <rect width="512" height="512" rx="15%" fill="#ffffff"/> <g fill="none" stroke="#fc7e0f"> <circle cx="255" cy="255" r="175"/> <path d="m160 181.1s-24.2 27.3-24.2 75 24.2 73.9 24.2 73.9"/> <path d="m352.8 181.1s24.2 27.3 24.2 75-24.2 73.9-24.2 73.9"/> <path d="m314.2 213s16.3 20.3 15.9 43c-.5 27.3-15.7 42.3-15.7 42.3"/> <path d="m197.8 213s-16.3 20.3-15.9 43c.5 27.3 15.7 42.3 15.7 42.3"/> </g> <g fill="#fc7e0f"> <circle cx="255" cy="255" r="32"/> <path d="m260.4 284.9-22.7-6.1-37.8 141.2 22.7 6.1z"/> <path d="m251.6 284.7 22.6-6 37.6 141.3-22.6 6z"/> <path d="m230.6 360.9 8.4-8.6 58.2 56.7-8.4 8.6z"/> <path d="m279.9 361.2-7.6-7.7-57.7 57.3 7.6 7.7z"/> </g> </g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

10
src/icons/pocketcasts.svg Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Pocket Casts" role="img" viewBox="0 0 512 512" width="64px" height="64px" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<rect width="512" height="512" rx="15%" fill="#f43e37"/>
<path fill="#ffffff" d="M256 400a144 144 0 11144-144h48a192 192 0 10-192 192v-48zm0-71a73 73 0 1173-73h42a115 115 0 10-115 115v-42z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 691 B