PR comments + support other viewports (#20)

experimental/responsive-design/README.md

@@ -111,4 +111,4 @@ The app uses static data files located in the `src/data/` directory:
 
 ## Icons
 
-The icons used in this project are from [Heroicons](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE).
+The icons used in this project are from [Heroicons](https://github.com/tailwindlabs/heroicons/blob/master/LICENSE).

experimental/responsive-design/dist/iframe.html

@@ -7,26 +7,38 @@
         <script type="module" src="app.js"></script>
         <!-- Preload links autogenerated by Rollup -->
         <link rel="preload" as="image" href="./public/images/5-healthy-smoothie.webp">
+        <link rel="preload" as="image" href="./public/images/beef-stroganoff.webp">
         <link rel="preload" as="image" href="./public/images/beef-tacos.webp">
         <link rel="preload" as="image" href="./public/images/best-comfort-food.webp">
         <link rel="preload" as="image" href="./public/images/bread-at-home.webp">
         <link rel="preload" as="image" href="./public/images/caesar-salad.webp">
         <link rel="preload" as="image" href="./public/images/chicken-alfredo.webp">
         <link rel="preload" as="image" href="./public/images/chocolate-cake.webp">
         <link rel="preload" as="image" href="./public/images/chocolate-chip-cookies.webp">
+        <link rel="preload" as="image" href="./public/images/fruit-salad.webp">
         <link rel="preload" as="image" href="./public/images/garlic-bread.webp">
+        <link rel="preload" as="image" href="./public/images/gluten-free-baking.webp">
         <link rel="preload" as="image" href="./public/images/greek-salad.webp">
         <link rel="preload" as="image" href="./public/images/homemade-pizza.webp">
         <link rel="preload" as="image" href="./public/images/icons-outline.webp">
         <link rel="preload" as="image" href="./public/images/lemon-drizzle-cake.webp">
+        <link rel="preload" as="image" href="./public/images/low-carb-desserts.webp">
         <link rel="preload" as="image" href="./public/images/margherita-pizza.webp">
         <link rel="preload" as="image" href="./public/images/mastering-art-of-french-cooking.webp">
         <link rel="preload" as="image" href="./public/images/meal-prepping.webp">
         <link rel="preload" as="image" href="./public/images/mediterranean-cuisine.webp">
         <link rel="preload" as="image" href="./public/images/pancakes.webp">
+        <link rel="preload" as="image" href="./public/images/plant-based-protein.webp">
+        <link rel="preload" as="image" href="./public/images/quinoa-stuffed-peppers.webp">
+        <link rel="preload" as="image" href="./public/images/ramen-noodles.webp">
+        <link rel="preload" as="image" href="./public/images/seasonal-salads.webp">
+        <link rel="preload" as="image" href="./public/images/shrimp-paella.webp">
         <link rel="preload" as="image" href="./public/images/spaghetti-carbonara.webp">
         <link rel="preload" as="image" href="./public/images/superfoods-you-should-include.webp">
+        <link rel="preload" as="image" href="./public/images/sushi-platter.webp">
+        <link rel="preload" as="image" href="./public/images/thai-green-curry.webp">
         <link rel="preload" as="image" href="./public/images/tomato-soup.webp">
+        <link rel="preload" as="image" href="./public/images/vegan-burger.webp">
         <link rel="preload" as="image" href="./public/images/vegan-desserts.webp">
         <link rel="preload" as="image" href="./public/images/vegetable-stir-fry.webp">
         <link rel="preload" as="image" href="./public/images/vegetarian-stir-fry.webp">

experimental/responsive-design/src/data/articles.js

@@ -71,4 +71,36 @@ export const articles = [
         image: "./public/images/best-comfort-food.webp",
         tags: ["comfort food", "cozy", "recipes"],
     },
+    {
+        title: "Innovative Plant-Based Protein Recipes",
+        description: "Discover creative plant-based protein recipes that are both tasty and nutritious. Perfect for a healthy lifestyle.",
+        author: "Laura Green",
+        date: "2024-06-10",
+        image: "./public/images/plant-based-protein.webp",
+        tags: ["plant-based", "protein", "recipes"],
+    },
+    {
+        title: "Gluten-Free Baking Essentials",
+        description: "Master gluten-free baking with these essential tips and recipes. Enjoy delicious baked goods without the gluten.",
+        author: "Mark Taylor",
+        date: "2024-05-22",
+        image: "./public/images/gluten-free-baking.webp",
+        tags: ["gluten-free", "baking", "essentials"],
+    },
+    {
+        title: "Seasonal Salads for Every Occasion",
+        description: "Refresh your meals with these seasonal salad recipes. Perfect for any occasion and packed with fresh ingredients.",
+        author: "Samantha Lee",
+        date: "2024-04-18",
+        image: "./public/images/seasonal-salads.webp",
+        tags: ["seasonal", "salads", "recipes"],
+    },
+    {
+        title: "Decadent Low-Carb Desserts",
+        description: "Indulge in these delicious low-carb desserts that satisfy your sweet tooth without the extra carbs.",
+        author: "Kevin White",
+        date: "2024-03-30",
+        image: "./public/images/low-carb-desserts.webp",
+        tags: ["low-carb", "desserts", "decadent"],
+    },
 ];

experimental/responsive-design/src/data/carousel-items.js

@@ -47,4 +47,20 @@ export const carouselItems = [
         image: "./public/images/chocolate-chip-cookies.webp",
         alt: "Chocolate Chip Cookies",
     },
+    {
+        image: "./public/images/vegan-burger.webp",
+        alt: "Vegan Burger",
+    },
+    {
+        image: "./public/images/sushi-platter.webp",
+        alt: "Sushi Platter",
+    },
+    {
+        image: "./public/images/ramen-noodles.webp",
+        alt: "Ramen Noodles",
+    },
+    {
+        image: "./public/images/fruit-salad.webp",
+        alt: "Fruit Salad",
+    },
 ];

experimental/responsive-design/src/data/recipes.js

@@ -139,4 +139,84 @@ export const recipes = [
         ingredients: ["1 baguette", "100g butter", "4 cloves garlic", "Parsley", "Salt"],
         steps: ["Preheat the oven to 200°C.", "Mix softened butter with minced garlic and parsley.", "Slice the baguette and spread the garlic butter.", "Wrap in foil and bake for 10-12 minutes."],
     },
+    {
+        text: "Thai Green Curry",
+        description: "A spicy and flavorful curry with coconut milk, vegetables, and your choice of protein.",
+        time: "35 mins",
+        calories: "450 cals",
+        servingSize: "4 servs",
+        image: "./public/images/thai-green-curry.webp",
+        tags: ["curry", "Thai", "spicy"],
+        ingredients: ["400ml coconut milk", "2 tbsp green curry paste", "200g chicken breast", "1 bell pepper", "100g snap peas", "1 tbsp fish sauce", "Basil leaves", "Jasmine rice"],
+        steps: [
+            "Cook the jasmine rice.",
+            "Sauté green curry paste until fragrant.",
+            "Add chicken and cook until browned.",
+            "Pour in coconut milk and simmer.",
+            "Add vegetables and cook until tender.",
+            "Stir in fish sauce and basil leaves.",
+            "Serve over jasmine rice.",
+        ],
+    },
+    {
+        text: "Beef Stroganoff",
+        description: "Tender beef strips in a creamy mushroom and onion sauce, served over egg noodles.",
+        time: "40 mins",
+        calories: "550 cals",
+        servingSize: "4 servs",
+        image: "./public/images/beef-stroganoff.webp",
+        tags: ["beef", "Russian", "comfort"],
+        ingredients: ["500g beef sirloin", "200g mushrooms", "1 onion", "2 cloves garlic", "200ml sour cream", "2 tbsp flour", "Beef broth", "Egg noodles", "Parsley"],
+        steps: [
+            "Cook the egg noodles according to package instructions.",
+            "Sauté onions and garlic until translucent.",
+            "Add beef strips and cook until browned.",
+            "Add mushrooms and cook until softened.",
+            "Stir in flour and cook for 1 minute.",
+            "Pour in beef broth and simmer until sauce thickens.",
+            "Stir in sour cream and heat through.",
+            "Serve over egg noodles and garnish with parsley.",
+        ],
+    },
+    {
+        text: "Shrimp Paella",
+        description: "A classic Spanish rice dish with shrimp, saffron, and a mix of fresh vegetables.",
+        time: "50 mins",
+        calories: "600 cals",
+        servingSize: "4 servs",
+        image: "./public/images/shrimp-paella.webp",
+        tags: ["seafood", "Spanish", "rice"],
+        ingredients: ["300g shrimp", "2 cups paella rice", "1 onion", "1 bell pepper", "2 tomatoes", "4 cloves garlic", "1 tsp saffron threads", "4 cups chicken broth", "Peas", "Lemon wedges"],
+        steps: [
+            "Sauté onions and garlic until fragrant.",
+            "Add bell pepper and cook until softened.",
+            "Stir in tomatoes and cook for 5 minutes.",
+            "Add paella rice and saffron, stirring to coat the grains.",
+            "Pour in chicken broth and bring to a boil.",
+            "Reduce heat and simmer until rice is nearly cooked.",
+            "Add shrimp and peas, cooking until shrimp are pink and rice is tender.",
+            "Garnish with lemon wedges and serve.",
+        ],
+    },
+    {
+        text: "Quinoa Stuffed Peppers",
+        description: "Colorful bell peppers filled with a savory mixture of quinoa, vegetables, and cheese.",
+        time: "45 mins",
+        calories: "350 cals",
+        servingSize: "4 servs",
+        image: "./public/images/quinoa-stuffed-peppers.webp",
+        tags: ["vegetarian", "healthy", "baked"],
+        ingredients: ["4 bell peppers", "1 cup quinoa", "2 cups vegetable broth", "1 zucchini", "1 onion", "2 cloves garlic", "1 can black beans", "1 cup corn", "1 tsp cumin", "1 tsp paprika", "1 cup shredded cheese", "Cilantro"],
+        steps: [
+            "Preheat the oven to 375°F (190°C).",
+            "Cook quinoa in vegetable broth according to package instructions.",
+            "Sauté onions and garlic until translucent.",
+            "Add zucchini, black beans, corn, cumin, and paprika, cooking until vegetables are tender.",
+            "Mix cooked quinoa with the vegetable mixture.",
+            "Cut the tops off bell peppers and remove seeds.",
+            "Stuff each pepper with the quinoa mixture and place in a baking dish.",
+            "Top with shredded cheese and bake for 25-30 minutes.",
+            "Garnish with cilantro and serve warm.",
+        ],
+    },
 ];

experimental/responsive-design/src/data/restaurants.js

@@ -11,4 +11,8 @@ export const restaurants = [
     { title: "Feast Fiesta", distance: "2.2", rating: "4.6" },
     { title: "Gastronomy Galore", distance: "1.7", rating: "4.7" },
     { title: "Cuisine Corner", distance: "2.4", rating: "4.8" },
+    { title: "Bistro Bonanza", distance: "1.9", rating: "4.5" },
+    { title: "Palate Pleasures", distance: "2.6", rating: "4.6" },
+    { title: "Gourmet Garden", distance: "1.3", rating: "4.7" },
+    { title: "Savor Station", distance: "2.7", rating: "4.8" },
 ];