Listen to feature

next.config.js

@@ -59,6 +59,14 @@ module.exports = (phase, { defaultConfig }) => {
       // Modify the file loader rule to ignore *.svg, since we have it handled now.
       fileLoaderRule.exclude = /\.svg$/i
 
+      config.module.rules.push({
+        test: /\.(mp3)$/,
+        type: "asset/resource",
+        generator: {
+          filename: "static/media/[name][ext]",
+        },
+      })
+
       return config
     },
     trailingSlash: true,

package.json

@@ -57,6 +57,7 @@
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",
+    "howler": "^2.2.4",
     "htmr": "^1.0.2",
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",

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/ListenToPlayer.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { langViewportModes } from "../../../.storybook/modes"
+import { BaseLayout as BaseLayoutComponent } from "../../layouts/BaseLayout"
+
+import ListenToPlayer from "."
+
+const meta = {
+  title: "Atoms / Media & Icons / ListenToPlayer / ListenToPlayer",
+  component: BaseLayoutComponent,
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+    lastDeployLocaleTimestamp: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof BaseLayoutComponent>
+
+export default meta
+
+export const BaseLayout: StoryObj<typeof meta> = {
+  args: {
+    children: (
+      <div className="flex w-full flex-col items-center gap-4 px-8 py-9 md:flex-row">
+        <ListenToPlayer slug="/eth" />
+      </div>
+    ),
+    contentIsOutdated: false,
+    contentNotTranslated: false,
+    lastDeployLocaleTimestamp: "May 14, 2021",
+  },
+}