Experimental Workload: Responsive Design

.eslintignore

@@ -46,3 +46,5 @@ package-lock.json
 /resources/perf.webkit.org
 
 /resources/react-stockcharts
+
+/experimental/responsive-design/build-dev/

.gitignore

@@ -35,3 +35,5 @@
 
 /resources/charts/node_modules/
 /resources/todomvc/big-dom-generator/node_modules/
+/experimental/responsive-design/node_modules/
+/experimental/responsive-design/build-dev/

.prettierignore

@@ -46,3 +46,5 @@ package-lock.json
 /resources/perf.webkit.org
 
 /resources/react-stockcharts
+/experimental/responsive-design/build-dev/
+/experimental/responsive-design/**/*.generated.css

.prettierrc

@@ -8,5 +8,6 @@
     "singleQuote": false,
     "tabWidth": 4,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "plugins": ["prettier-plugin-tailwindcss"]
 }

experimental/responsive-design/README.md

@@ -0,0 +1,114 @@
+# Cooking With Lit and TailwindCSS
+
+A single-page cooking website built with [Lit](https://lit.dev/) and [Tailwind CSS](https://tailwindcss.com/).
+
+## Table of Contents
+
+-   [Introduction](#introduction)
+-   [Installation](#installation)
+-   [Usage](#usage)
+-   [Production](#production)
+-   [Project Structure](#project-structure)
+-   [Components](#components)
+-   [Data Sources](#data-sources)
+
+## Introduction
+
+This project is a responsive cooking website that showcases recipes, articles, and cooking videos. It is built using Lit for efficient web components and Tailwind CSS for styling. The app features interactive components like a chat window, recipe cards, and a video grid, providing users with an engaging experience.
+
+## Installation
+
+Ensure you have [Node.js](https://nodejs.org/en) installed.
+
+```bash
+npm install
+```
+
+## Usage
+
+To run the app in development mode with live reloading:
+
+```bash
+npm run dev
+```
+
+The script above runs the following commands concurrently, scanning your template files for classes, build your CSS, and launch the development server:
+
+-   Tailwind CSS for Main Styles:
+
+    ```bash
+    npm run dev:main-css
+    ```
+
+    Compiles input.css into tailwind.generated.css and watches for changes.
+
+-   Tailwind CSS for Chat Window Styles:
+
+    ```bash
+    npm run dev:chat-window-css
+    ```
+
+    Compiles styles specific to the chat window into tailwind.chat-window.generated.css.
+
+-   Rollup watch
+
+    ```bash
+    npm run dev:rollup
+    ```
+
+    Bundles the JavaScript files using Rollup and watches for changes.
+
+-   Development Server
+    ```bash
+    npm run dev:serve
+    ```
+    Runs a development server with live reloading
+
+Access the app at http://localhost:8000 (default port).
+
+## Production
+
+To build and serve the production version of the app, run the following command:
+
+```bash
+npm run build
+npm run serve
+```
+
+The command will:
+
+-   Compile and minify the CSS files.
+-   Bundle and minify JavaScript files using Rollup.
+-   Copy necessary assets to the `dist/` directory.
+
+## Project Structure
+
+```
+├── dist/                               # Production build output
+├── public/                             # Public assets like images
+├── src/
+│   ├── data/                           # Data files (recipes, articles, etc.)
+│   ├── lib/
+│   │   └── components/                 # Lit components
+│   ├── input.css                       # Tailwind CSS input file
+│   └── app.js                          # Main JavaScript entry point
+├── index.html                          # Main HTML file
+├── package.json                        # NPM configuration
+├── tailwind.chat-window.config.js      # Tailwind CSS configuration
+├── tailwind.config.js                  # Tailwind CSS configuration
+└── rollup.config.js                    # Rollup bundler configuration
+```
+
+## Components
+
+#### CookingApp (cooking-app.js)
+
+The root component that composes all other components to build the app interface.
+
+## Data Sources
+
+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).

experimental/responsive-design/dist/iframe.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Cooking iframe</title>
+        <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">
+        <link rel="preload" as="image" href="./public/images/week-night-dinners.webp">
+    </head>
+    <body>
+        <cooking-app></cooking-app>
+    </body>
+</html>

experimental/responsive-design/dist/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Cooking with Lit and Tailwind</title>
+        <style>
+            body,
+            html {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            #content-iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html"></iframe>
+    </body>
+</html>

experimental/responsive-design/iframe.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Cooking iframe</title>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+        <cooking-app></cooking-app>
+    </body>
+</html>

experimental/responsive-design/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Cooking with Lit and Tailwind</title>
+        <style>
+            body,
+            html {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            #content-iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html"></iframe>
+    </body>
+</html>