Merge pull request #3 from haslo/plugin_additions

Plugin additions - coming soon section

src/pages/plugins/BfgCompressor.jsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import {Box, CardMedia, Typography} from "@mui/material";
+
+import {PriceStamp} from "./PriceStamp";
+
+export function BfgCompressor({plugin_link}) {
+  return (
+    <>
+      <Box sx={{position: 'relative', marginBottom: '30px'}}>
+        <PriceStamp
+          top={-60}
+          color={'#243667'}
+          price={null}
+        />
+      </Box>
+      <Typography variant="h5" color="text.secondary" sx={{marginBottom: '10px'}}>
+        Extreme multiband upward compression
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        You've heard this sound before. You've seen similar plugins before. This one will add a unique twist to the
+        "extreme upward compression" game, with added distortion and wavefolding.
+        <br/><br/>
+        I'm using some algorithms from DeSTRuKTor here, but add oversampling and generally better DSP (as enabled by
+        using C++ rather than Java in the background)... 🤓
+      </Typography>
+    </>
+  );
+}

src/pages/plugins/Destruktor.jsx

@@ -8,6 +8,7 @@ export function Destruktor({plugin_link}) {
     <>
       <Box sx={{position: 'relative', marginBottom: '30px'}}>
         <PriceStamp
+          top={10}
           color={'#243667'}
           price={'$10'}
         />

src/pages/plugins/Haaschen.jsx

@@ -9,6 +9,7 @@ export function Haaschen({plugin_link}) {
     <>
       <Box sx={{position: 'relative', marginBottom: '30px'}}>
         <PriceStamp
+          top={10}
           color={'#f50057'}
           price={'FREE'}
         />

src/pages/plugins/Ploink.jsx

@@ -9,6 +9,7 @@ export function Ploink({plugin_link}) {
     <>
       <Box sx={{position: 'relative', marginBottom: '30px'}}>
         <PriceStamp
+          top={10}
           color={'#f50057'}
           price={'FREE'}
         />

src/pages/plugins/PluginCard.jsx

@@ -10,40 +10,58 @@ import {
 
 import * as React from "react";
 
-export function PluginCard({avatar_name, avatar_image_url, avatar_link, plugin_title, card_subheader, 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, marginBottom: '15px'}}>
           <CardHeader
             avatar={
-              <a href={avatar_link} name={avatar_name}>
+              avatar_link ?
+                <a href={avatar_link} name={avatar_name}>
+                  <Avatar variant="rounded" alt={avatar_name} src={avatar_image_url}/>
+                </a> :
                 <Avatar variant="rounded" alt={avatar_name} src={avatar_image_url}/>
-              </a>
             }
             title={
-              <a href={plugin_link} name={plugin_title} className={"plugin_card"}>
+              avatar_link ?
+                <a href={plugin_link} name={plugin_title} className={"plugin_card"}>
+                  <Typography variant='h4'>
+                    {plugin_title}
+                  </Typography>
+                </a> :
                 <Typography variant='h4'>
                   {plugin_title}
                 </Typography>
-              </a>
             }
             subheader={card_subheader}
           />
           <CardContent>
             {plugin_content}
           </CardContent>
-          <Button
-            component="a"
-            href={plugin_link}
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{marginBottom: '15px'}}
-            className={"plugin_card"}
-          >
-            Get {plugin_title} here
-          </Button>
+          {
+            plugin_link ?
+              <Button
+                component="a"
+                href={plugin_link}
+                fullWidth
+                variant="contained"
+                color="primary"
+                sx={{marginBottom: '15px'}}
+                className={"plugin_card"}
+              >
+                Get {plugin_title} here
+              </Button> :
+              <></>
+          }
         </Card>
       </Grid>
     </>

src/pages/plugins/PluginHero.jsx

@@ -11,7 +11,7 @@ export function PluginHero({hero_title, hero_content}) {
   return (
     <>
       <Grid item xs={12} sm={12} md={12} lg={12}>
-        <Card sx={{paddingX: 1, marginBottom: '25px'}}>
+        <Card sx={{paddingX: 1, marginTop: '10px', marginBottom: '25px'}}>
           <CardContent>
             <Typography variant='h4' sx={{textAlign: 'center', marginBottom: '20px'}}>
               {hero_title}

src/pages/plugins/Plugins.jsx

@@ -7,11 +7,48 @@ import {Destruktor} from "./Destruktor";
 import {Haaschen} from "./Haaschen";
 import {Ploink} from "./Ploink";
 import {PluginHero} from "./PluginHero";
+import {TinyHaas} from "./TinyHaas";
+import {BfgCompressor} from "./BfgCompressor";
 
 export function Plugins() {
   return (
     <>
       <Container fixed style={{marginTop: '40px', marginBottom: '100px'}}>
+        <Grid container spacing={1} rowSpacing={1}>
+          <PluginHero
+            hero_title={"Upcoming Plugins"}
+            hero_content={
+              <>
+                When I'm doing something, I'm doing it fanatically. Right now, I'm fanatically going deep with DSP
+                and plugin building. Check out <a href={"https://github.com/haslo/haslo_plugin_refs"}>
+                  the references I'm using in this GitHub repo
+                </a>.
+                <br/><br/>
+                All of this is coming soon! Watch this space 😅
+              </>
+            }
+          />
+        </Grid>
+        <Grid container spacing={3} rowSpacing={2}>
+          <PluginCard
+            avatar_name={"Audio FX Plugin"}
+            avatar_image_url={"/assets/haslo_logo.png"}
+            avatar_link={null}
+            plugin_title={"tinyHaas"}
+            card_subheader={"For all DAWs"}
+            plugin_link={null}
+            plugin_content={<TinyHaas plugin_title={null}/>}
+          />
+          <PluginCard
+            avatar_name={"Audio FX Plugin"}
+            avatar_image_url={"/assets/haslo_logo.png"}
+            avatar_link={null}
+            plugin_title={"BFG Compressor"}
+            card_subheader={"For all DAWs"}
+            plugin_link={null}
+            plugin_content={<BfgCompressor plugin_link={null}/>}
+          />
+        </Grid>
         <Grid container spacing={1} rowSpacing={1}>
           <PluginHero
             hero_title={"Voltage Modular / Legacy"}
@@ -20,10 +57,7 @@ export function Plugins() {
                 I've created these plugins a while ago. Years, in fact.
                 Most of them were finished in December 2020, and released in early 2021.
                 <br/><br/>
-                Consider this page to be a bit of a placeholder. The modules still work of course! But I have many
-                fancier things planned, including a revamped and improved and extended DAW plugin version of DeSTRuKTor.
-                <br/><br/>
-                Watch this space 😅
+                The modules still work of course! So have fun!
               </>
             }
           />

src/pages/plugins/PriceStamp.jsx

@@ -2,13 +2,13 @@ import * as React from "react";
 
 import {Box, Typography} from "@mui/material";
 
-export function PriceStamp({color, price}) {
+export function PriceStamp({color, price, top}) {
   return (
     <>
       <Box
         sx={{
           position: 'absolute',
-          top: 10,
+          top: top,
           right: 10,
           backgroundColor: color,
           color: 'white',
@@ -32,8 +32,13 @@ export function PriceStamp({color, price}) {
           },
         }}
       >
-        <Typography variant="subtitle1" fontWeight="bold">
-          {price}
+        <Typography variant="subtitle1" fontWeight="bold" sx={{textAlign: 'center', lineHeight: 0.8}}>
+          {price ?
+            price :
+            <>
+              coming<br/>soon
+            </>
+          }
         </Typography>
       </Box>
     </>

src/pages/plugins/TinyHaas.jsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import {Box, CardMedia, Typography} from "@mui/material";
+
+import {PriceStamp} from "./PriceStamp";
+
+export function TinyHaas({plugin_link}) {
+  return (
+    <>
+      <Box sx={{position: 'relative', marginBottom: '30px'}}>
+        <PriceStamp
+          top={-60}
+          color={'#f50057'}
+          price={null}
+        />
+      </Box>
+      <Typography variant="h5" color="text.secondary" sx={{marginBottom: '10px'}}>
+        Like HÄÄSchen, but multiband and VST3
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        If you don't know what HÄÄSchen is, it's a Voltage Modular module I built a while ago.
+        It's just a Haas effect, where one of the channels is delayed by a very short delay time
+        and adds the impression of width.
+        <br/><br/>
+        This version will be a bit more ambitious and will add multiband processing (which <em>will</em> lead to
+        phasing effects, that's the whole point of that) and in-plugin modulation.
+      </Typography>
+    </>
+  );
+}