Plugins updated with actual plugin info

haslo · Sep 24, 2024 · 322a334 · 322a334
1 parent f8f2383
commit 322a334
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 36 deletions.
diff --git a/src/pages/music/MusicPostCard.jsx b/src/pages/music/MusicPostCard.jsx
@@ -21,7 +21,7 @@ import HeadphonesIcon from '@mui/icons-material/Headphones';
 export function MusicPostCard({newsPost}) {
   return (
     <Grid item xs={12} sm={12} md={6} lg={4}>
-      <Card sx={{paddingX: 1}}>
+      <Card sx={{paddingX: 1, marginBottom: '15px'}}>
         <CardHeader
           avatar={
             <a href={newsPost.type.channelUrl} name={newsPost.type.channelDescription}>

diff --git a/src/pages/plugins/Destruktor.jsx b/src/pages/plugins/Destruktor.jsx
@@ -1,19 +1,47 @@
 import * as React from "react";
 
-import {CardMedia} from "@mui/material";
+import {Box, CardMedia, Typography} from "@mui/material";
 
 export function Destruktor({plugin_link}) {
   return (
     <>
-      <a href={plugin_link}>
-        <CardMedia
-          component="img"
-          height="300"
-          image={"/assets/destruktor.png"}
-          alt={"Destruktor Screenshot"}
-          sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
-        />
-      </a>
+      <Box sx={{position: 'relative', marginBottom: '30px'}}>
+        <a href={plugin_link}>
+          <CardMedia
+            component="img"
+            height="300"
+            image={"/assets/destruktor.png"}
+            alt={"Destruktor Screenshot"}
+            sx={{padding: "1em 1em 0 1em", objectFit: "contain"}}
+          />
+        </a>
+      </Box>
+      <Typography variant="body" color="text.secondary">
+        A distortion module that works as a...
+      </Typography>
+      <ul>
+        <li>
+          <Typography variant="body" color="text.secondary">
+            Waveshaper
+          </Typography>
+        </li>
+        <li>
+          <Typography variant="body" color="text.secondary">
+            Wavefolder
+          </Typography>
+        </li>
+        <li>
+          <Typography variant="body" color="text.secondary">
+            Hard Clipper (if required)
+          </Typography>
+        </li>
+      </ul>
+      <Typography variant="body" color="text.secondary">
+        ...with lots of possibilities for modulation. It allows for anything from subtle saturation to making white
+        noise out of almost any input, but is more comfortable at the extremes of its sonic possibilities.
+        <br/><br/>
+        <strong>No oversampling</strong>, so be prepared for aliasing.
+      </Typography>
     </>
   );
 }
diff --git a/src/pages/plugins/FreeStamp.jsx b/src/pages/plugins/FreeStamp.jsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import {Box, Typography} from "@mui/material";
+
+export function FreeStamp() {
+  return (
+    <>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 10,
+          right: 10,
+          backgroundColor: '#f50057',
+          color: 'white',
+          borderRadius: '50%',
+          width: 80,
+          height: 80,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          transform: 'rotate(15deg)',
+          boxShadow: '0 0 0 5px #f50057',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: -5,
+            left: -5,
+            right: -5,
+            bottom: -5,
+            borderRadius: '50%',
+            border: '2px dashed white',
+          },
+        }}
+      >
+        <Typography variant="subtitle1" fontWeight="bold">
+          FREE
+        </Typography>
+      </Box>
+    </>
+  );
+}
diff --git a/src/pages/plugins/Haaschen.jsx b/src/pages/plugins/Haaschen.jsx
@@ -1,18 +1,32 @@
-import {CardMedia} from "@mui/material";
 import * as React from "react";
 
+import {Box, CardMedia, Typography} from "@mui/material";
+
+import {FreeStamp} from "./FreeStamp";
+
 export function Haaschen({plugin_link}) {
   return (
     <>
-      <a href={plugin_link}>
-        <CardMedia
-          component="img"
-          height="300"
-          image={"/assets/haaschen.png"}
-          alt={"Hääschen Screenshot"}
-          sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
-        />
-      </a>
+      <Box sx={{position: 'relative', marginBottom: '30px'}}>
+        <FreeStamp/>
+        <a href={plugin_link}>
+          <CardMedia
+            component="img"
+            height="300"
+            image={"/assets/haaschen.png"}
+            alt={"Hääschen Screenshot"}
+            sx={{padding: "1em 1em 0 1em", objectFit: "contain"}}
+          />
+        </a>
+      </Box>
+      <Typography variant="body2" color="text.secondary">
+        The Haas effect is a stereo effect where one of the channels is delayed by a very short delay time. The two
+        sounds that reach the listener's ears are then perceived as one binaural auditory event. The position of the
+        sound in the stereo field as well as the width of the sound are influenced by the delay time used.
+        <br/><br/>
+        This free module allows you to use the effect on any mono or stereo signal, and also has a CV input for any kind
+        of modulations.
+      </Typography>
     </>
   );
 }
diff --git a/src/pages/plugins/Ploink.jsx b/src/pages/plugins/Ploink.jsx
@@ -1,18 +1,31 @@
-import {CardMedia} from "@mui/material";
 import * as React from "react";
 
+import {Box, CardMedia, Typography} from "@mui/material";
+
+import {FreeStamp} from "./FreeStamp";
+
 export function Ploink({plugin_link}) {
   return (
     <>
-      <a href={plugin_link}>
-        <CardMedia
-          component="img"
-          height="300"
-          image={"/assets/ploink.png"}
-          alt={"Ploink Screenshot"}
-          sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
-        />
-      </a>
+      <Box sx={{position: 'relative', marginBottom: '30px'}}>
+        <FreeStamp/>
+        <a href={plugin_link}>
+          <CardMedia
+            component="img"
+            height="300"
+            image={"/assets/ploink.png"}
+            alt={"Ploink Screenshot"}
+            sx={{padding: "1em 1em 0 1em", objectFit: "contain"}}
+          />
+        </a>
+      </Box>
+      <Typography variant="body2" color="text.secondary">
+        Ploink is a trigger / gate module that generates a series of triggers or gates out of one incoming trigger. Each
+        trigger goes faster and faster, until the minimum length is reached and the sequence of triggers / gates stops.
+        <br/><br/>
+        <strong>This module does not generate sound.</strong> You can use the gates for an envelope, or the triggers for
+        advancing a sequence, as a sync signal for sample&hold modules, that kind of thing.
+      </Typography>
     </>
   );
 }
diff --git a/src/pages/plugins/PluginCard.jsx b/src/pages/plugins/PluginCard.jsx
@@ -9,11 +9,11 @@ import {
 
 import * as React from "react";
 
-export function PluginCard({avatar_name, avatar_image_url, avatar_link, plugin_title, plugin_link, plugin_content}) {
+export function PluginCard({avatar_name, avatar_image_url, avatar_link, plugin_title, card_subheader, plugin_link, plugin_content}) {
   return (
     <>
       <Grid item xs={12} sm={12} md={6} lg={6}>
-        <Card sx={{paddingX: 1}}>
+        <Card sx={{paddingX: 1, marginBottom: '15px'}}>
           <CardHeader
             avatar={
               <a href={avatar_link} name={avatar_name}>
@@ -27,11 +27,10 @@ export function PluginCard({avatar_name, avatar_image_url, avatar_link, plugin_t
                 </Typography>
               </a>
             }
+            subheader={card_subheader}
           />
           <CardContent>
-            <Typography variant="body2" color="text.secondary">
-              {plugin_content}
-            </Typography>
+            {plugin_content}
           </CardContent>
         </Card>
       </Grid>

diff --git a/src/pages/plugins/Plugins.jsx b/src/pages/plugins/Plugins.jsx
@@ -17,6 +17,7 @@ export function Plugins() {
             avatar_image_url={"/assets/voltage_modular.png"}
             avatar_link={"https://cherryaudio.com/products/voltage-modular"}
             plugin_title={"Destruktor"}
+            card_subheader={"for Voltage Modular"}
             plugin_link={"https://store.cherryaudio.com/modules/destruktor"}
             plugin_content={<Destruktor plugin_link={"https://store.cherryaudio.com/modules/destruktor"}/>}
           />
@@ -25,6 +26,7 @@ export function Plugins() {
             avatar_image_url={"/assets/voltage_modular.png"}
             avatar_link={"https://cherryaudio.com/products/voltage-modular"}
             plugin_title={"Hääschen"}
+            card_subheader={"for Voltage Modular"}
             plugin_link={"https://store.cherryaudio.com/modules/haaschen"}
             plugin_content={<Haaschen plugin_link={"https://store.cherryaudio.com/modules/haaschen"}/>}
           />
@@ -33,6 +35,7 @@ export function Plugins() {
             avatar_image_url={"/assets/voltage_modular.png"}
             avatar_link={"https://cherryaudio.com/products/voltage-modular"}
             plugin_title={"Ploink"}
+            card_subheader={"for Voltage Modular"}
             plugin_link={"https://store.cherryaudio.com/modules/ploink"}
             plugin_content={<Ploink plugin_link={"https://store.cherryaudio.com/modules/ploink"}/>}
           />