feat: setup blog

flufferyomada · Jun 23, 2024 · 21250f8 · 21250f8
1 parent d7ef37b
commit 21250f8
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "wrangler": "^3.57.1"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.12.12",
     "cross-env": "^7.0.3",
     "daisyui": "^4.11.1",

diff --git a/src/components/blog-layout.astro b/src/components/blog-layout.astro
@@ -0,0 +1,78 @@
+---
+const { frontmatter } = Astro.props;
+---
+
+<htm lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/ico" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>shibes.lol | blog | {frontmatter.title}</title>
+    <meta name="description" content="best shibe images on the internet" />
+    <meta name="author" content="Alex Chiu" />
+    <meta
+      name="keywords"
+      content="shiba, shibes, dog photos, doge, doggo, dogs"
+    />
+  </head>
+
+  <main>
+    <nav class="navbar bg-base-100 shadow-sm fixed top-0 z-10">
+      <div class="flex-1 rainbow font-extrabold text-2xl">
+        <a href="/">shibes.lol | blog</a>
+      </div>
+    </nav>
+
+    <div class="relative hreo flex flex-col gap-5 pt-32 pb-24">
+      <div class="bg-img"></div>
+      <h1 class="mx-5 text-4xl text-center font-extrabold">
+        {frontmatter.title}
+      </h1>
+      <p class="text-1xl text-center">
+        By, {frontmatter.author} | <span>{frontmatter.date}</span>
+      </p>
+    </div>
+
+    <div class="mt-16 mx-5 md:mx-10">
+      <article class="prose lg:prose-xl mx-auto mt-5">
+        <!-- Markdown content is injected here -->
+        <slot />
+      </article>
+    </div>
+  </main>
+</htm>
+
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+<style>
+  .rainbow {
+    color: black;
+    background: linear-gradient(
+      181deg,
+      red,
+      orange,
+      yellow,
+      green,
+      blue,
+      purple
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+  }
+
+  .rainbow:hover {
+    color: transparent;
+    transition: 200ms ease;
+  }
+  .bg-img {
+    position: absolute;
+    top: 0;
+    background-image: url("/bg.jpg");
+    opacity: 25%;
+
+    filter: blur(2px);
+    height: 100%;
+    width: 100vw;
+  }
+</style>
diff --git a/src/components/navigation.astro b/src/components/navigation.astro
@@ -10,7 +10,7 @@ const greetings = ["sup", "howdy", "gday", "yo"];
 const greeting = greetings[Math.floor(Math.random() * greetings.length)];
 ---
 
-<div class="navbar bg-base-100 shadow-sm fixed top-0 z-10">
+<nav class="navbar bg-base-100 shadow-sm fixed top-0 z-10">
   <div class="flex-1 rainbow font-extrabold text-2xl">shibes.lol</div>
   <div class="flex-none gap-2">
     {
@@ -52,7 +52,7 @@ const greeting = greetings[Math.floor(Math.random() * greetings.length)];
       )
     }
   </div>
-</div>
+</nav>
 
 <style>
   .rainbow {

diff --git a/src/pages/blog/the-future-of-shiba-every-hour.md b/src/pages/blog/the-future-of-shiba-every-hour.md
@@ -0,0 +1,42 @@
+---
+layout: ../../components/blog-layout.astro
+title: The Future of Shiba Every Hour
+author: Alex
+date: "23 Jun 2024"
+description: What's next for Shiba Every Hour
+---
+
+Firstly, big thanks to everyone that that has been contributing to shibes.lol over the last couple of weeks.
+
+We have nearly **900** community shibas submitted. These shiba pics are now being used to power [@ShibaEveryHour](https://twitter.com/ShibaEveryHour) 🎉.
+
+Y'all have saved this account and I am eternally grateful 🙏.
+
+For those of you that missed the drama. For past five years, ShibaEveryHour was powered by a [third party shiba image service](https://web.archive.org/web/20240330190529/https://shibe.online/) which was not under my control. That service went down on the 25th May. I thought that this would be the end of this little project, but I did'nt want it to be!
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/ShibaEveryHour?ref_src=twsrc%5Etfw">@ShibaEveryHour</a> friends, sorry the bot has not been posting for a few days<a href="https://t.co/RSvWRvfWdF">https://t.co/RSvWRvfWdF</a> power this bot, which I don&#39;t own and has been down for a few days. I&#39;ve reached out to the owner and not getting any response back. I&#39;m fearful it might be down for good😢 1/? 🧵</p>&mdash; chiubaca (@chiubaca) <a href="https://twitter.com/chiubaca/status/1795816063835541854?ref_src=twsrc%5Etfw">May 29, 2024</a></blockquote>
+
+I debated building my own shiba image crawler. This would have been a big effort so I decided to build shibes.lol as a first pass to see _if_ a community effort could be viable . I wasn't expecting to see **hundreds** of contributions within the first hours of launching!
+
+The success of shibe.lol is amazing. It guarantee the future of this little bot to bring you hourly shibes for many more years to come!✨
+
+---
+So what's next? 
+
+Firstly I'm building more shiba bots! If you dont want to stick around on X (Twitter). You can find ShibaEveryHour on [Mastodon](https://mas.to/@ShibaEveryHour) and [Bluesky](https://bsky.app/profile/shibaeveryhour.bsky.social). If you want see shibas on more platforms, reach out to me on [X (Twitter)](https://twitter.com/chiubaca)!
+
+
+When I have time I also plan to expose shibes.lol as public API for others to build upon too!
+
+And guess what? All of my work is [open source](https://github.com/chiubaca/shiba-every-hour).
+
+There's so much more I want to do, so watch this space. 
+
+I'm doing this all in my spare time for fun. But if you want to support me, consider dropping me a donation on [kofi](https://ko-fi.com/chiubaca) ☕️ .
+
+
+Finally, a shoutout to these top shiba contributors: 
+
+**TexanDoggo, FrizzleLamb, Rome_401,Alexander, JayAcortado, can, weicchan, MDMA_Enjoyer, ChrisJLynch06, RespectGoats, tiredshiba_, PuppieCh0w, Victarion_Lopez, Wilson, DemShenanigans, DoggoGotYeeted, luxstrouss , ArkRecimpact_, GermanDoge_H, JSR2gamers.**
+
+Y'all rock! 🤘
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,8 +4,8 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [require("daisyui")],
-	daisyui: {
-    themes: ['wireframe']
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
+  daisyui: {
+    themes: ["wireframe"],
   },
 };