feat: Add ListenToPlayer component to content pages

Author: corwintines

public/content/smart-contracts/index.md

@@ -7,6 +7,10 @@ lang: en
 
 # Introduction to smart contracts {#introduction-to-smart-contracts}
 
+<div className="mt-4">
+<ListenToPlayer slug="/smart-contracts/" />
+</div>
+
 Smart contracts are the fundamental building blocks of Ethereum's application layer. They are computer programs stored on the [blockchain](/glossary/#blockchain) that follow "if this then that" logic, and are guaranteed to execute according to the rules defined by its code, which cannot be changed once created.
 
 Nick Szabo coined the term "smart contract". In 1994, he wrote [an introduction to the concept](https://www.fon.hum.uva.nl/rob/Courses/InformationInSpeech/CDROM/Literature/LOTwinterschool2006/szabo.best.vwh.net/smart.contracts.html), and in 1996 he wrote [an exploration of what smart contracts could do](https://www.fon.hum.uva.nl/rob/Courses/InformationInSpeech/CDROM/Literature/LOTwinterschool2006/szabo.best.vwh.net/smart_contracts_2.html).

public/content/web3/index.md

@@ -6,6 +6,10 @@ lang: en
 
 # Introduction to Web3 {#introduction}
 
+<div className="mt-4">
+<ListenToPlayer slug="/web3/" />
+</div>
+
 Centralization has helped onboard billions of people to the World Wide Web and created the stable, robust infrastructure on which it lives. At the same time, a handful of centralized entities have a stronghold on large swathes of the World Wide Web, unilaterally deciding what should and should not be allowed.
 
 Web3 is the answer to this dilemma. Instead of a Web monopolized by large technology companies, Web3 embraces decentralization and is being built, operated, and owned by its users. Web3 puts power in the hands of individuals rather than corporations.

src/components/ListenToPlayer/TopOfPagePlayer/index.tsx

@@ -18,7 +18,7 @@ const TopOfPagePlayer = ({
   handlePlayPause,
 }: TopOfPagePlayerProps) => {
   return (
-    <div className="inline-block rounded-lg bg-background-low p-2">
+    <div className="inline-block w-full rounded-lg bg-background-low p-2 lg:w-auto">
       <div
         className="flex cursor-pointer flex-row items-center gap-2 text-primary hover:text-primary-hover"
         onClick={() => {

src/layouts/Static.tsx

@@ -71,6 +71,7 @@ export const staticComponents = {
   SocialListItem,
   TranslationChartImage,
   UpcomingEventsList,
+  ListenToPlayer,
 }
 
 type StaticLayoutProps = ChildOnlyProp &
@@ -121,9 +122,6 @@ export const StaticLayout = ({
                   {lastEditLocaleTimestamp}
                 </p>
               )}
-              <div>
-                <ListenToPlayer slug={pathname} />
-              </div>
             </Stack>
           )}