Experimental Workload: Responsive Design

.gitignore

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

.prettierignore

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

experimental/responsive-design/.prettierignore

@@ -0,0 +1,4 @@
+src/tailwind.generated.css
+src/tailwind.chat-window.generated.css
+dist/
+

experimental/responsive-design/.prettierrc

@@ -0,0 +1,13 @@
+{
+    "arrowParens": "always",
+    "bracketSameLine": false,
+    "bracketSpacing": true,
+    "htmlWhitespaceSensitivity": "css",
+    "printWidth": 250,
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "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/eslint.config.js

@@ -0,0 +1,74 @@
+export default [
+    {
+        rules: {
+            "array-bracket-spacing": [2, "never"],
+            "block-spacing": [2, "always"],
+            "brace-style": 2,
+            "comma-dangle": [2, "only-multiline"],
+            "comma-spacing": [2, { before: false, after: true }],
+            "comma-style": [2, "last"],
+            "consistent-return": 2,
+            curly: ["error", "multi-or-nest", "consistent"],
+            "dot-notation": 0,
+            "eol-last": 2,
+            eqeqeq: 2,
+            indent: ["error", 4, { SwitchCase: 1 }],
+            "func-call-spacing": [2, "never"],
+            "key-spacing": [2, { beforeColon: false, afterColon: true }],
+            "keyword-spacing": [2, { before: true, after: true }],
+            "new-cap": 0,
+            "new-parens": 0,
+            "no-console": 0,
+            "no-constant-condition": 0,
+            "no-extra-bind": 2,
+            "no-extra-parens": [2, "all", { nestedBinaryExpressions: false }],
+            "no-extra-semi": 2,
+            "no-global-assign": 2,
+            "no-inner-declarations": 0,
+            "no-multi-spaces": 2,
+            "no-multiple-empty-lines": ["error", { max: 1 }],
+            "no-new": 0,
+            "no-proto": 0,
+            "no-redeclare": 0,
+            "no-return-assign": 2,
+            "no-return-await": 2,
+            "no-self-compare": 2,
+            "no-shadow": 0,
+            "no-trailing-spaces": 2,
+            "no-undef": 2,
+            "no-underscore-dangle": 0,
+            "no-unused-expressions": 2,
+            "no-unused-vars": [2, { vars: "all", args: "none" }],
+            "no-use-before-define": 0,
+            "nonblock-statement-body-position": ["error", "below"],
+            "object-curly-spacing": ["error", "always"],
+            "operator-linebreak": ["error", "before"],
+            "prefer-template": 2,
+            quotes: [2, "double", { avoidEscape: true }],
+            semi: 2,
+            "semi-spacing": [2, { before: false, after: true }],
+            "space-infix-ops": 2,
+            "spaced-comment": [2, "always"],
+            strict: 0,
+            "valid-typeof": 2,
+        },
+        languageOptions: {
+            globals: {
+                browser: true,
+                node: true,
+                worker: true,
+                es2022: true,
+                // new globals
+                customElements: true,
+                CSSStyleSheet: true,
+                ResizeObserver: true,
+                CustomEvent: true,
+                Event: true,
+            },
+            parserOptions: {
+                sourceType: "module",
+            },
+        },
+        ignores: ["dist/**/*", "src/tailwind.generated.css", "src/tailwind.chat-window.generated.css"],
+    },
+];

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>