hackathon announcement (#279)

* hackathon announcement

* retrigger ci

* retrigger ci

* update 🍪 blogpost

* Update 2024-10-10-most-annoying-cookie-banner-contest.md

* add announcement to landing page

* add video, new banner and title

* add plausible to docs

---------

Co-authored-by: vincanger <70215737+vincanger@users.noreply.github.com>

.gitignore

@@ -1,3 +1,6 @@
 /template/app/migrations
 /template/app/package-lock.json
 .DS_Store
+
+# Local Netlify folder
+.netlify

opensaas-sh/app_diff/src/landing-page/components/Header.tsx.diff

@@ -6,7 +6,7 @@
  import { HiBars3 } from 'react-icons/hi2';
  import { BiLogIn } from 'react-icons/bi';
  import { AiFillCloseCircle } from 'react-icons/ai';
-@@ -20,7 +20,7 @@
+@@ -20,18 +20,19 @@
  
    const { data: user, isLoading: isUserLoading } = useAuth();
  
@@ -15,7 +15,8 @@
  
    return (
      <header className='absolute inset-x-0 top-0 z-50 dark:bg-boxdark-2'>
-@@ -28,10 +28,10 @@
++      <Announcement />
+       <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
          <div className='flex items-center lg:flex-1'>
            <a
              href='/'
@@ -28,7 +29,7 @@
            </a>
          </div>
          <div className='flex lg:hidden'>
-@@ -57,14 +57,14 @@
+@@ -57,14 +58,14 @@
          </div>
          <div className='hidden lg:flex lg:flex-1 lg:justify-end lg:align-end'>
            {/* <!-- Dark Mode Toggler --> */}
@@ -46,7 +47,7 @@
                  </div>
                </Link>
              ) : (
-@@ -107,8 +107,8 @@
+@@ -107,8 +108,8 @@
                <div className='py-6'>
                  {isUserLoading ? null : !user ? (
                    <Link to='/login'>
@@ -57,3 +58,31 @@
                      </div>
                    </Link>
                  ) : (
+@@ -125,3 +126,27 @@
+     </header>
+   )
+ }
++
++const ContestURL =
++  'https://docs.opensaas.sh/blog/';
++
++function Announcement() {
++  return (
++    <div className='flex justify-center items-center gap-3 p-3 w-full bg-gradient-to-r from-[#d946ef] to-[#fc0] font-semibold text-white text-center z-49'>
++      <p onClick={() => window.open(ContestURL, '_blank')} className='hidden lg:block cursor-pointer hover:opacity-90 hover:drop-shadow'>🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬</p>
++      <div className='hidden lg:block self-stretch w-0.5 bg-white'></div>
++      <div
++        onClick={() => window.open(ContestURL, '_blank')}
++        className='hidden lg:block cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
++      >
++        Enter here and win prizes! →
++      </div>
++      <div
++        onClick={() => window.open(ContestURL, '_blank')}
++        className='lg:hidden cursor-pointer rounded-full bg-neutral-700 px-2.5 py-1 text-xs hover:bg-neutral-600 tracking-wider'
++      >
++        🍪 The Most Annoying Cookie Banner Contest! 🤬 →
++      </div>
++    </div>
++  );
++}

opensaas-sh/blog/astro.config.mjs

@@ -18,6 +18,14 @@ export default defineConfig({
         alt: 'Open SaaS',
       },
       head: [
+        {
+          tag: 'script',
+          attrs: {
+            defer: true,
+            'data-domain': 'docs.opensaas.sh',
+            src: 'https://plausible.apps.twoducks.dev/js/script.js',
+          },
+        },
         {
           tag: 'script',
           attrs: {

opensaas-sh/blog/src/content/docs/blog/2024-10-10-most-annoying-cookie-banner-contest.md

@@ -0,0 +1,79 @@
+---
+title: 🍪 THE MOST ANNOYING COOKIE BANNER EVER HACKATHON 🤬
+date: 2024-10-10
+tags: ["cookie consent", "saas", "sideproject", "hackathon"] 
+image: "/cookie-consent/annoying-cookie-banners.jpg"
+---
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
+  <iframe 
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+    src="https://www.youtube.com/embed/tLEEk8Q5jo4?si=U-nROtawDHrjJ4k0" 
+    title="YouTube video player" 
+    frameborder="0" 
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+    referrerpolicy="strict-origin-when-cross-origin" 
+    allowfullscreen>
+  </iframe>
+</div>
+
+## What kind of hackathon is this?
+
+The goal here is simple. Make **THE MOST ANNOYING COOKIE BANNER** you can think of.
+
+Cookie consent banners annoy us all. So we thought, why not have some fun with them? Here are a couple examples of what that might look like:
+
+1. *The Cookie Consent Wheel of Fortune:*
+
+![Consent wheel](/cookie-consent/wheel.gif)
+
+2. *The “Hit Enter When the Red Ball is Over the Accept Button to Consent” Banner:* 
+    
+![Enter to win](/cookie-consent/enter.gif)
+    
+
+Now it’s time for you to get creative. Btw, if you’re looking for some inspiration, check out these [Ridiculous Volume Slider UI’s](https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950).
+
+## Prizes
+
+2 winners will receive a nice mechanical keyboard, an additional *annoying* gift, as well as a shoutout on our socials.
+
+The 2 winners will be selected by:
+
+- The Wasp team
+- Our Community (Discord & Twitter)
+
+The community will get a chance to vote in a battle royale style elimination tournament, where two banners will go head-to-head and the winner will advance to the next round.
+
+![Keyboard](/cookie-consent/keyboard.jpg)
+
+(The brand/style will depend on the winner's location, but we'll do our best to find one with a Wasp look and feel 😃)
+
+## How to participate
+
+- Fork the [Annoying Cookie Banner Stackblitz Template](https://stackblitz.com/edit/vitejs-vite-uiyjag?file=src%2Flanding-page%2Fcomponents%2FCookieConsentBanner.tsx)
+    - If you prefer to work in your own editor, just click on the `Create a repository` button after you fork the template
+- When finished with your banner, click on `Share` in the top left, and in the `Embed` tab, click `Copy URL` with the following settings:
+    
+![image.png](/cookie-consent/image.png)
+    
+- Next, [edit the `MOST-ANNOYING-COOKIE-BANNER.md` file](https://github.com/wasp-lang/open-saas/edit/main/MOST-ANNOYING-COOKIE-BANNER.md) on the Open SaaS repo.
+    - Enter your GitHub username followed by the embed link you copied from Stackblitz
+- When you create a PR, make sure you select the `ANNOYING COOKIE BANNER` label:
+    
+![image.png](/cookie-consent/image1.png)
+    
+- Make sure you also ⭐️ [star the Open Saas repository](https://github.com/wasp-lang/open-saas) to be eligible to win!
+
+## Deadline & Results
+
+Submit your PR before the 21st of October to be eligible to win!
+
+Be sure to join our [Discord](https://discord.gg/rzdnErX) or follow us on [Twitter/X](https://twitter.com/wasplang) for updates and the final results!
+
+## Let's annoy our users! 🚀
+
+Let's create the most annoying cookie consent banner and have some fun! This hackathon is your chance to show off your creativity and tech skills. We're super excited to see what wild ideas you come up with. 
+
+Remember, this is all about having fun and pushing the boundaries of user interface design!
+
+Let the annoyance games begin! 🎉