feat: Add M.A.E.S.T.R.O. blog post and event banner (#62)

Author: Bentroen

bun.lock

@@ -149,7 +149,7 @@
         "gray-matter": "^4.0.3",
         "i": "^0.3.7",
         "js-confetti": "^0.12.0",
-        "next": "14.2.5",
+        "next": "14.2.26",
         "next-recaptcha-v3": "^1.4.1",
         "nextjs-toploader": "^1.6.6",
         "npm": "^10.5.1",
@@ -566,29 +566,29 @@
 
     "@nestjs/throttler": ["@nestjs/[email protected]", "", { "peerDependencies": { "@nestjs/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0", "@nestjs/core": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0", "reflect-metadata": "^0.1.13 || ^0.2.0" } }, "sha512-osL67i0PUuwU5nqSuJjtUJZMkxAnYB4VldgYUMGzvYRJDCqGRFMWbsbzm/CkUtPLRL30I8T74Xgt/OQxnYokiA=="],
 
-    "@next/env": ["@next/[email protected].5", "", {}, "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA=="],
+    "@next/env": ["@next/[email protected].26", "", {}, "sha512-vO//GJ/YBco+H7xdQhzJxF7ub3SUwft76jwaeOyVVQFHCi5DCnkP16WHB+JBylo4vOKPoZBlR94Z8xBxNBdNJA=="],
 
     "@next/eslint-plugin-next": ["@next/[email protected]", "", { "dependencies": { "glob": "7.1.7" } }, "sha512-6rhK9CdxEgj/j1qvXIyLTWEaeFv7zOK8yJMulz3Owel0uek0U9MJCGzmKgYxM3aAUBo3gKeywCZKyQnJKto60A=="],
 
     "@next/mdx": ["@next/[email protected]", "", { "dependencies": { "source-map": "^0.7.0" }, "peerDependencies": { "@mdx-js/loader": ">=0.15.0", "@mdx-js/react": ">=0.15.0" }, "optionalPeers": ["@mdx-js/loader", "@mdx-js/react"] }, "sha512-OfupBYFZXdB+1CypVpRFpIb/V1PgGed20yUbkKTDdssLvlID/emqVfsZ7RVUhI1DGOQPcPwSAy92GHQlEwccdQ=="],
 
-    "@next/swc-darwin-arm64": ["@next/[email protected].5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ=="],
+    "@next/swc-darwin-arm64": ["@next/[email protected].26", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zDJY8gsKEseGAxG+C2hTMT0w9Nk9N1Sk1qV7vXYz9MEiyRoF5ogQX2+vplyUMIfygnjn9/A04I6yrUTRTuRiyQ=="],
 
-    "@next/swc-darwin-x64": ["@next/[email protected].5", "", { "os": "darwin", "cpu": "x64" }, "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA=="],
+    "@next/swc-darwin-x64": ["@next/[email protected].26", "", { "os": "darwin", "cpu": "x64" }, "sha512-U0adH5ryLfmTDkahLwG9sUQG2L0a9rYux8crQeC92rPhi3jGQEY47nByQHrVrt3prZigadwj/2HZ1LUUimuSbg=="],
 
-    "@next/swc-linux-arm64-gnu": ["@next/[email protected].5", "", { "os": "linux", "cpu": "arm64" }, "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA=="],
+    "@next/swc-linux-arm64-gnu": ["@next/[email protected].26", "", { "os": "linux", "cpu": "arm64" }, "sha512-SINMl1I7UhfHGM7SoRiw0AbwnLEMUnJ/3XXVmhyptzriHbWvPPbbm0OEVG24uUKhuS1t0nvN/DBvm5kz6ZIqpg=="],
 
-    "@next/swc-linux-arm64-musl": ["@next/[email protected].5", "", { "os": "linux", "cpu": "arm64" }, "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA=="],
+    "@next/swc-linux-arm64-musl": ["@next/[email protected].26", "", { "os": "linux", "cpu": "arm64" }, "sha512-s6JaezoyJK2DxrwHWxLWtJKlqKqTdi/zaYigDXUJ/gmx/72CrzdVZfMvUc6VqnZ7YEvRijvYo+0o4Z9DencduA=="],
 
-    "@next/swc-linux-x64-gnu": ["@next/[email protected].5", "", { "os": "linux", "cpu": "x64" }, "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ=="],
+    "@next/swc-linux-x64-gnu": ["@next/[email protected].26", "", { "os": "linux", "cpu": "x64" }, "sha512-FEXeUQi8/pLr/XI0hKbe0tgbLmHFRhgXOUiPScz2hk0hSmbGiU8aUqVslj/6C6KA38RzXnWoJXo4FMo6aBxjzg=="],
 
-    "@next/swc-linux-x64-musl": ["@next/[email protected].5", "", { "os": "linux", "cpu": "x64" }, "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ=="],
+    "@next/swc-linux-x64-musl": ["@next/[email protected].26", "", { "os": "linux", "cpu": "x64" }, "sha512-BUsomaO4d2DuXhXhgQCVt2jjX4B4/Thts8nDoIruEJkhE5ifeQFtvW5c9JkdOtYvE5p2G0hcwQ0UbRaQmQwaVg=="],
 
-    "@next/swc-win32-arm64-msvc": ["@next/[email protected].5", "", { "os": "win32", "cpu": "arm64" }, "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw=="],
+    "@next/swc-win32-arm64-msvc": ["@next/[email protected].26", "", { "os": "win32", "cpu": "arm64" }, "sha512-5auwsMVzT7wbB2CZXQxDctpWbdEnEW/e66DyXO1DcgHxIyhP06awu+rHKshZE+lPLIGiwtjo7bsyeuubewwxMw=="],
 
-    "@next/swc-win32-ia32-msvc": ["@next/[email protected].5", "", { "os": "win32", "cpu": "ia32" }, "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg=="],
+    "@next/swc-win32-ia32-msvc": ["@next/[email protected].26", "", { "os": "win32", "cpu": "ia32" }, "sha512-GQWg/Vbz9zUGi9X80lOeGsz1rMH/MtFO/XqigDznhhhTfDlDoynCM6982mPCbSlxJ/aveZcKtTlwfAjwhyxDpg=="],
 
-    "@next/swc-win32-x64-msvc": ["@next/[email protected].5", "", { "os": "win32", "cpu": "x64" }, "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g=="],
+    "@next/swc-win32-x64-msvc": ["@next/[email protected].26", "", { "os": "win32", "cpu": "x64" }, "sha512-2rdB3T1/Gp7bv1eQTTm9d1Y1sv9UuJ2LAwOE0Pe2prHKe32UNscj7YS13fRB37d0GAiGNR+Y7ZcW8YjDI8Ns0w=="],
 
     "@next/third-parties": ["@next/[email protected]", "", { "dependencies": { "third-party-capital": "1.0.20" }, "peerDependencies": { "next": "^13.0.0 || ^14.0.0", "react": "^18.2.0" } }, "sha512-+tpIUOMKCyk4EHCIz6ICJDhfIVBpAtS65eul1iUkwBO1fS0MYCd+7+R2cD2Cm+LVTylw72EpfHjF/bcSAQSBWA=="],
 
@@ -2310,7 +2310,7 @@
 
     "neo-async": ["[email protected]", "", {}, "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="],
 
-    "next": ["[email protected].5", "", { "dependencies": { "@next/env": "14.2.5", "@swc/helpers": "0.5.5", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "graceful-fs": "^4.2.11", "postcss": "8.4.31", "styled-jsx": "5.1.1" }, "optionalDependencies": { "@next/swc-darwin-arm64": "14.2.5", "@next/swc-darwin-x64": "14.2.5", "@next/swc-linux-arm64-gnu": "14.2.5", "@next/swc-linux-arm64-musl": "14.2.5", "@next/swc-linux-x64-gnu": "14.2.5", "@next/swc-linux-x64-musl": "14.2.5", "@next/swc-win32-arm64-msvc": "14.2.5", "@next/swc-win32-ia32-msvc": "14.2.5", "@next/swc-win32-x64-msvc": "14.2.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA=="],
+    "next": ["[email protected].26", "", { "dependencies": { "@next/env": "14.2.26", "@swc/helpers": "0.5.5", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "graceful-fs": "^4.2.11", "postcss": "8.4.31", "styled-jsx": "5.1.1" }, "optionalDependencies": { "@next/swc-darwin-arm64": "14.2.26", "@next/swc-darwin-x64": "14.2.26", "@next/swc-linux-arm64-gnu": "14.2.26", "@next/swc-linux-arm64-musl": "14.2.26", "@next/swc-linux-x64-gnu": "14.2.26", "@next/swc-linux-x64-musl": "14.2.26", "@next/swc-win32-arm64-msvc": "14.2.26", "@next/swc-win32-ia32-msvc": "14.2.26", "@next/swc-win32-x64-msvc": "14.2.26" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-b81XSLihMwCfwiUVRRja3LphLo4uBBMZEzBBWMaISbKTwOmq3wPknIETy/8000tr7Gq4WmbuFYPS7jOYIf+ZJw=="],
 
     "next-recaptcha-v3": ["[email protected]", "", { "peerDependencies": { "next": "^13 || ^14 || ^15", "react": "^18 || ^19" } }, "sha512-CTFQvyWWQLrIuI++NhOFeQKdELUFvTDGfCty+bz6hxU8frS59ycl4TInvWhCn+9eKjAqV6LqQZZGHdwla8t8GQ=="],
 

web/posts/blog/2025-10-13_maestro.md

@@ -0,0 +1,103 @@
+---
+title: 'Announcing the Students of Maestro Jam event!'
+date: '2025-10-14'
+author: 'Bentroen'
+authorImage: 'bentroen.png'
+image: '/img/blog/maestro.png'
+tags: ['news']
+---
+
+Hello all! We have exciting news for the community: **Note Block World** has partnered with [jazziiRed](https://www.youtube.com/@jazziiRed), [mooncatcher](https://www.youtube.com/@mr_mooncatcher), [vladde](www.youtube.com/@vladde) and [Xolixs](https://www.youtube.com/@Xoliks97) to bring you our second **community-wide collaborative event!** 🌐
+
+These four masterminds are behind the _Multi-Aural, Encodable, Synchronous-Tick, Redstone Orchestra_ (**M.A.E.S.T.R.O.**), the first redstone machine to play music at 20 ticks per second in vanilla Minecraft.
+M.A.E.S.T.R.O. is the **ultimate evolution** of jazziiRed and mooncatcher's original music machine, which has been viewed over [two million times](https://www.youtube.com/watch?v=V6X2BHpeLww) on YouTube. It's the result of **many months of arduous work**, and a true redstone engineering masterpiece! ⚡⚙️
+
+[![Maestro](/img/blog/maestro-full.png)](https://www.youtube.com/watch?v=V6X2BHpeLww)
+
+Today, we have partnered with the M.A.E.S.T.R.O. team to give our community a chance to have their music **played live** on the machine in a special event!
+
+We are proud to announce...
+
+...the **Students of Maestro Jam**! A two-week-long event where **you** can create music to be played **live** on the M.A.E.S.T.R.O. machine! Keep reading... 👀
+
+## How does the event work?
+
+The event is taking place on [Note Block World](https://noteblock.world). Submitted songs must be uploaded to the website and tagged with `#maestro`, either in the title or the description, and sent to us in a specially-crafted form.
+
+At the end of the submission period, the creations will be reviewed by us and the M.A.E.S.T.R.O. team.
+The best songs will be played **live** in a **public server** running the M.A.E.S.T.R.O. machine, that anyone will be able to join and watch. The entire performance will be **streamed** to the whole world in a **five-channel multi-stream** on YouTube! 🎬
+
+> The date and time of the streams will be announced in a later blog post.
+
+Later, all songs will be made into a **compilation album** that will be **written forever** in all of our channels. This is an unique opportunity to have your music heard by an audience of **thousands of players!** 💿
+
+## How to participate?
+
+We are already taking submissions! Refer to the rules below in order to submit your song:
+
+### 🕛 Deadline
+
+The submission form closes on **October 26, 2025**. You must submit your songs before then, but we can manually accept late submissions. More on this can be found below!
+
+### ✅ What's allowed?
+
+An original note block song composition
+A cover of an existing song not originally composed by you
+Collaborations with other note block creators
+
+### ❌ Limits
+
+- No notes outside of vanilla's **two-octave** range
+- **No custom instruments** (not even sounds from vanilla!)
+  - Mob head instruments are allowed, excluding Piglin and Wither Skeleton
+  - Refer to the instructions below to import them into your song!
+- A given key under its instrument can only be played once per tick
+  - e.g. a banjo note at key C3 cannot be played more than once on a single tick
+- The song length must not exceed **9½ minutes**
+- Mid-song tempo changes are not supported
+
+### ❔ Recommendations
+
+- The tempo should be a **factor of 20** (4, 5, 10 or 20 t/s) for best results
+- The song should not exceed vanilla's polyphony limit (maximum of 247 simultaneous sounds)
+- The machine does not support velocity and panning, so these elements will not carry over to in-game playback
+  - However, due to how the machine places note blocks, each unique note is played from a predefined position
+- The song should be created entirely during the event's runtime
+  - We can't prevent you from re-purposing existing songs, however we highly encourage creating something new!
+
+### 🧟 Using mob sounds
+
+Although NBS doesn't provide native support for mob head instruments, you can import them from Minecraft for use in your songs. Navigate to `Settings` > `Import sounds from Minecraft`, and follow the on-screen instructions to extract sound files from your Minecraft installation.
+
+#### Supported sound locations
+
+- **Zombie:** `mob/zombie/say<1-4>.ogg`
+- **Skeleton:** `mob/skeleton/say<1-3>.ogg`
+- **Ender Dragon:** `mob/enderdragon/growl<1-4>.ogg`
+- **Creeper:** `random/fuse.ogg`
+
+One of the sounds above will be picked at random for each note played with that instrument.
+e.g. any Zombie notes will play any of `say<1-4>` randomly.
+
+> Keep in mind that Piglin and Wither Skeleton sounds are **not supported** by the machine.
+
+### 🧪 Testing
+
+A mod pack containing everything you'll need can be found [on Modrinth](https://modrinth.com/modpack/maestro)! Instructions regarding how to transfer your note block songs to the machine are included in its description.
+
+### 📝 Submissions
+
+Once your song has been finished and you're ready to submit it for the event, upload it to Note Block World and submit it through the form linked below. You can only submit once, so make sure you're satisfied with your song!
+
+⚠️ **Songs must be uploaded to [Note Block World](https://noteblock.world/) and tagged with `#maestro`, either in the title or description!**
+By submitting a song, you grant us the privilege to showcase it on the M.A.E.S.T.R.O. creators' YouTube channels, as well as our social outlets. Of course, you still maintain all rights to your creation!
+
+The form will be closed on **Sunday, October 26, 2025 10:00 PM UTC**. We can accept late submissions for a short period of time afterwards. This is primarily to account for technical issues, and **should not be used as extra time.**
+
+[[Submit your song here!]](https://forms.gle/zh69sLhTGweSR9Si7)
+
+If you have any questions, please reach out to us! We'll be glad to help you out.
+
+> _Our thoughts are with mooncatcher and everyone affected by the war in Ukraine. If you can, please donate to the Leleka Foundation [here](https://www.leleka.care/en/donate)._ 🇺🇦
+
+We hope the event will be a fun experience for everyone, and we look forward to hearing your submissions! Have fun! 🎶

web/public/img/blog/maestro-full.png

@@ -46,7 +46,7 @@ const HelpPost = ({ params }: HelpPageProps) => {
     <>
       <article className='max-w-screen-md mx-auto mb-36'>
         <Link
-          href='/blog'
+          href='/help'
           className='text-zinc-500 hover:text-zinc-400 text-sm'
         >
           {'< Back to Help'}

web/public/img/blog/maestro.png

@@ -0,0 +1,62 @@
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export const EventBanner = () => {
+  return (
+    <div className='flex flex-row mx-auto w-fit justify-between items-center text-pretty gap-6 py-4 px-2 sm:px-8 text-sm rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-opacity-50 bg-gradient-to-br from-15% from-pink-800 via-rose-900 to-85% to-red-900 relative'>
+      <div
+        className='absolute h-full w-full top-0 left-0 z-[-1] rounded-xl opacity-50 brightness-[0.3]'
+        style={{
+          backgroundImage: "url('/img/event/maestro-banner.png')",
+          backgroundSize: 'contain',
+          backgroundAttachment: 'fixed',
+        }}
+      ></div>
+      <Image src='/img/event/maestro-icon.png' alt='' width={64} height={64} />
+
+      <div className='flex-1 leading-tight max-w-screen-md w-fit'>
+        <p className='uppercase text-sm font-bold tracking-wider text-yellow-300 mb-1 w-fit'>
+          <FontAwesomeIcon icon={faExclamationCircle} /> ends in{' '}
+          {Math.max(
+            0,
+            Math.ceil(
+              (Date.UTC(2025, 9, 26, 22, 0, 0) - Date.now()) /
+                (1000 * 60 * 60 * 24),
+            ),
+          )}{' '}
+          days
+        </p>
+        <p>
+          <span className='font-bold'>An event is underway!</span> Submit a song
+          to be played in the{' '}
+          <Link
+            href='https://www.youtube.com/watch?v=G78AnHpIw5w'
+            className='text-blue-300 hover:text-blue-200'
+          >
+            M.A.E.S.T.R.O. machine
+          </Link>{' '}
+          in the{' '}
+          <span className='font-bold'>
+            Students&nbsp;of&nbsp;Maestro&nbsp;Jam
+          </span>
+          , hosted in collaboration with{' '}
+          <Link href='https://www.youtube.com/@jazziiRed'>jazziiRed</Link>,{' '}
+          <Link href='https://www.youtube.com/@mr_mooncatcher'>
+            mooncatcher
+          </Link>
+          , <Link href='https://www.youtube.com/@vladde'>vladde</Link> and{' '}
+          <Link href='https://www.youtube.com/@Xoliks97'>Xolixs</Link>! Read our{' '}
+          <Link
+            href='/blog/maestro'
+            className='text-blue-300 hover:text-blue-200'
+          >
+            blog post
+          </Link>{' '}
+          to participate.
+        </p>
+      </div>
+    </div>
+  );
+};

web/public/img/event/maestro-banner.png

@@ -23,6 +23,7 @@ import {
   CarouselPrevious,
 } from '../../shared/components/client/Carousel';
 import { WelcomeBanner } from '../WelcomeBanner';
+import { EventBanner } from '../EventBanner';
 
 export const HomePageComponent = () => {
   const { featuredSongsPage } = useFeaturedSongsProvider();
@@ -33,6 +34,7 @@ export const HomePageComponent = () => {
     <>
       {/* Welcome banner/Hero */}
       <WelcomeBanner />
+      <EventBanner />
 
       {/* FEATURED SONGS */}
       {featuredSongsPage.length > 0 && (

web/public/img/event/maestro-icon.png

@@ -24,6 +24,7 @@ export const CustomMarkdown = ({
         pre,
         code,
         a,
+        img,
       }}
     >
       {MarkdownContent}
@@ -82,7 +83,7 @@ const blockquote = ({
   return (
     <blockquote
       {...props}
-      className='border-l-4 border-zinc-600 bg-zinc-800/50 rounded-md [&>p]:text-zinc-400 pl-4 [&>p]:py-2'
+      className='border-l-4 border-zinc-600 bg-zinc-800/50 rounded-md [&>p]:text-zinc-400 pl-4 [&>p]:py-2 my-6'
     />
   );
 };
@@ -103,7 +104,7 @@ const code = ({
   return (
     <code
       {...props}
-      className='bg-zinc-950/50 text-green-400 rounded-md outline outline-1 outline-zinc-600 text-sm font-mono px-1 py-0.5'
+      className='bg-zinc-950/50 text-green-400 rounded-md outline outline-1 outline-zinc-600 text-sm font-mono px-1 py-0.5 mx-0.5'
     />
   );
 };
@@ -122,4 +123,32 @@ const a = ({
   );
 };
 
-export { p, h1, h2, h3, h4, h5, h6, hr, ul, ol, li, blockquote, pre, code, a };
+const img = ({
+  node,
+  alt,
+  src = '',
+  ...props
+}: JSX.IntrinsicElements['img'] & ExtraProps) => {
+  return (
+    <img {...props} alt={alt} src={src} className='my-8 mx-auto rounded-lg' />
+  );
+};
+
+export {
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  ul,
+  ol,
+  li,
+  blockquote,
+  pre,
+  code,
+  a,
+  img,
+};