feat: add initial add article command

components/RecipeHero.tsx

@@ -52,11 +52,15 @@ export function RecipeHero(
           </div>
         )}
 
-      <div class="absolute inset-x-0 bottom-0 py-4 px-8 py-8 ">
+      <div
+        class={`absolute inset-x-0 bottom-0 py-4 px-8 ${
+          imageUrl ? "py-8" : ""
+        } `}
+      >
         <div
-          class={`${
-            imageUrl ? "noisy-gradient" : ""
-          } flex gap-4 items-center pt-12`}
+          class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${
+            imageUrl ? "pt-12" : ""
+          }`}
         >
           <h2
             class="relative text-4xl font-bold z-10"
@@ -73,7 +77,7 @@ export function RecipeHero(
               class="relative z-50 flex gap-5 font-sm text-light mt-3"
               style={{ color: imageUrl ? "#1F1F1F" : "white" }}
             >
-              {subline.map((s) => {
+              {subline.filter((s) => s && s?.length > 1).map((s) => {
                 return <span>{s}</span>;
               })}
             </div>

components/layouts/main.tsx

@@ -22,6 +22,10 @@ export const MainLayout = ({ children, url }: Props) => {
       name: "🍿 Movies",
       link: "/movies",
     },
+    {
+      name: "📝 Articles",
+      link: "/articles",
+    },
   ];
 
   return (