Merge pull request bewildergeist#1 from kattata/Issue#3

Tailwind styling

lesson-04/remix-site/.gitignore

@@ -4,3 +4,4 @@ node_modules
 /build
 /public/build
 .env
+/app/tailwind.css

lesson-04/remix-site/app/db/db.json

@@ -1,19 +1,91 @@
 {
-  "posts": [
+  "recipes": [
     {
       "id": "1",
-      "title": "Post 1",
-      "body": "This is test post #1"
+      "title": "Spaghetti",
+      "body": "This is test post #1",
+      "seperatedIngredients": [
+        "apples",
+        " cinamon",
+        " dough"
+      ],
+      "author": "Kasia",
+      "img": "https://ocdn.eu/pulscms-transforms/1/iGxk9kpTURBXy8wYTQ2YmY1M2NlYTVlMTM2NWU2MjdiMmRjODExZTUxZi5qcGeTlQMAH80D6M0CMpMJpjA2NTMzYgaTBc0EsM0CdoGhMAE/spaghetti-puttanesca.jpg"
     },
     {
       "id": "2",
-      "title": "Post 2",
-      "body": "This is test post #2"
+      "title": "Muffins",
+      "body": "This is test post #2",
+      "seperatedIngredients": [
+        "flour",
+        " eggs",
+        " milk",
+        "chocolate"
+      ],
+      "author": "Kasia",
+      "img": "https://www.valdemarsro.dk/wp-content/2021/01/vaniljemuffins.jpg"
     },
     {
       "id": "3",
-      "title": "Post 3",
-      "body": "This is test post #3"
+      "title": "Tomato Soup",
+      "body": "This soup is everything I want tomato soup to be! It’s rich and creamy, yet doesn’t weigh me down. It’s bursting with amazing tomato flavor, yet it’s made from canned tomatoes.",
+      "seperatedIngredients": [
+        "tomatos",
+        " peper",
+        " salt",
+        "onion",
+        "olive oil"
+      ],
+      "author": "Kasia",
+      "img": "https://images.unsplash.com/photo-1547592166-23ac45744acd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"
+    },
+    {
+      "id": "17f259f2ef0",
+      "title": "Lasagne",
+      "body": "This is lasagne",
+      "seperatedIngredients": [
+        "tomatos",
+        " lasagne pasta",
+        " meat"
+      ],
+      "author": "Magda",
+      "img": "https://images.unsplash.com/photo-1614961909013-1e2212a2ca87?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80"
+    },
+    {
+      "id": "17f25a5e53a",
+      "title": "Apple pie",
+      "body": "Apple pie",
+      "seperatedIngredients": [
+        "apples",
+        " cinamon",
+        " dough"
+      ],
+      "author": "Magda",
+      "img": "https://images.unsplash.com/photo-1587248720327-8eb72564be1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80"
+    },
+    {
+      "id": "17f25e97ee3",
+      "title": "Curry Ramen",
+      "body": "Curry",
+      "seperatedIngredients": [
+        "ramen pasta",
+        " curry",
+        " coconut milk"
+      ],
+      "author": "Magda",
+      "img": "https://www.kwestiasmaku.com/sites/v123.kwestiasmaku.com/files/curry_ramen_01.jpg"
+    },
+    {
+      "id": "17f2653bdd0",
+      "title": "Sandwich",
+      "body": "This is a sandwich hihihihiihihi",
+      "seperatedIngredients": [
+        "bread",
+        " lettuce",
+        " cheese"
+      ],
+      "author": "Kasia",
+      "img": "https://assets.epicurious.com/photos/5d3770225c5cb8000935d1db/6:4/w_3272,h_2181,c_limit/crispy-green-goddess-sandwich-recipe-BA-071119.jpg"
     }
   ]
-}
+}

lesson-04/remix-site/app/db/db.server.js

@@ -6,5 +6,5 @@ const adapter = new JSONFileSync(file);
 const db = new LowSync(adapter);
 
 db.read();
-db.data = db.data || { posts: [] };
+db.data = db.data || { recipes: [] };
 export default db;

lesson-04/remix-site/app/root.jsx

@@ -1,21 +1,18 @@
 import { Link, Outlet, LiveReload, Links, Meta, Scripts } from "remix";
-import globalStylesUrl from "~/styles/global.css";
+import styles from "./tailwind.css";
 
-export const links = () => [
-  {
-    rel: "stylesheet",
-    href: globalStylesUrl,
-  },
-];
+export function links() {
+  return [{ rel: "stylesheet", href: styles }];
+}
 
 export const meta = () => ({
-  description: "An example blog",
-  keywords: "remix, javascript",
+  description: "A recipe blog",
+  keywords: "recipes, food, jummy",
 });
 
 export default function App() {
   return (
-    <Document title="Remix Blog">
+    <Document title="Recipes Blog">
       <Layout>
         <Outlet />
       </Layout>
@@ -33,7 +30,7 @@ function Document({ children, title }) {
         <Links />
         <title>{title}</title>
       </head>
-      <body>
+      <body className="bg-stone-800 text-white mx-36 my-8">
         {children}
         {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
         <Scripts />
@@ -45,12 +42,12 @@ function Document({ children, title }) {
 function Layout({ children }) {
   return (
     <>
-      <nav className="navbar">
-        <Link to="/" className="logo">
-          Remix Blog
+      <nav className="flex justify-between items-center mb-8">
+        <Link to="/" className="text-xl">
+          Recipes Blog
         </Link>
         <ul className="nav">
-          <Link to="/posts">Posts</Link>
+          <Link to="/recipes">Recipes</Link>
         </ul>
       </nav>
       <div className="container">{children}</div>

lesson-04/remix-site/app/routes/index.jsx

@@ -1,8 +1,8 @@
 export default function Home() {
   return (
     <div>
-      <h1>Welcome</h1>
-      <p>This site is full of great posts. Enjoy!</p>
+      <h1>Welcome to our Recipes Blog</h1>
+      <p>This site is full of great recipes. Enjoy! By Kasia&Magda</p>
     </div>
   );
 }

lesson-04/remix-site/app/routes/posts.jsx → lesson-04/remix-site/app/routes/recipes.jsx

@@ -1,6 +1,8 @@
 import { Outlet } from "remix";
 
-export default function Posts() {
+
+
+export default function Recipes() {
   return (
     <>
       <Outlet />

lesson-04/remix-site/app/routes/recipes/$recipeId.jsx

@@ -0,0 +1,74 @@
+import { Link, redirect } from "remix";
+import { useLoaderData } from "remix";
+import db from "~/db/db.server";
+import RecipeStylesUrl from "~/styles/Recipe.css";
+
+export const loader = async function ({ params }) {
+  const recipe = db.data.recipes.find((p) => p.id === params.recipeId);
+
+  if (!recipe) {
+    throw new Error("recipe not found");
+  }
+  return {
+    recipe,
+  };
+};
+
+export const action = async function ({ request, params }) {
+  const form = await request.formData();
+  if (form.get("_method") === "delete") {
+    db.data.recipes = db.data.recipes.filter((p) => p.id !== params.recipeId);
+    db.write();
+    return redirect("/recipes");
+  }
+};
+
+export function links() {
+  return [
+    {
+      rel: "stylesheet",
+      href: RecipeStylesUrl,
+    },
+  ];
+}
+
+export default function Recipe() {
+  const { recipe } = useLoaderData();
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1>{recipe.title}</h1>
+        <Link to=".." className="btn btn-reverse">
+          Back
+        </Link>
+      </div>
+      <div className="recipe-content">
+        <img src={recipe.img} ></img>
+        <div className="recipe-info">
+          <h2>Description</h2>
+          <p className="page-content">{recipe.body}</p>
+          <h2>Ingredients</h2>
+          <ul className="page-content">
+            {recipe.seperatedIngredients.map((ingredient) => {
+                return (
+                  <li>
+                    {ingredient}
+                  </li>
+              )
+            })}</ul>
+            <h2>Author</h2>
+            <p className="page-content">{recipe.author}</p>
+        </div>
+        </div>
+      <div className="page-footer">
+        <form method="post">
+          <input type="hidden" name="_method" value="delete" />
+          <button type="submit" className="btn btn-delete">
+            Delete
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}