Improve code

.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/.eslintignore

@@ -0,0 +1 @@
+dist/

experimental/responsive-design/.eslintrc

@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+ {
+    "root": true,
+    "extends": ["eslint:recommended", "plugin:lit/recommended"],
+    "env": {
+        "browser": true,
+        "node": true,
+        "worker": true,
+        "es2022": true,
+        "mocha": true
+    },
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "globals": {
+        // unit test specific
+        "sinon": true,
+        "expect": true,
+        // injected dependencies
+        "testRunner": true,
+        "startBenchmark": true,
+        "PerfTestRunner": true,
+        "deltas": true
+    },
+    "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
+    }
+}

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).