Skip to content

Commit 34a545e

Browse files
issackjohnissackjohn
committed
workload
1 parent e70778f commit 34a545e

File tree

103 files changed

+7827
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+7827
-3
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@
3535

3636
/resources/charts/node_modules/
3737
/resources/todomvc/big-dom-generator/node_modules/
38+
/experimental/responsive-design/node_modules/

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,5 @@ package-lock.json
4646
/resources/perf.webkit.org
4747

4848
/resources/react-stockcharts
49+
50+
/experimental/responsive-design/

‎experimental/responsive-design/.prettierignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
src/tailwind.generated.css
2+
src/tailwind.chat-window.generated.css
3+
dist/
4+

‎experimental/responsive-design/.prettierrc

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSameLine": false,
4+
"bracketSpacing": true,
5+
"htmlWhitespaceSensitivity": "css",
6+
"printWidth": 250,
7+
"semi": true,
8+
"singleQuote": false,
9+
"tabWidth": 4,
10+
"trailingComma": "es5",
11+
"useTabs": false,
12+
"plugins": ["prettier-plugin-tailwindcss"]
13+
}

‎experimental/responsive-design/README.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Cooking With Lit and TailwindCSS
2+
3+
A single-page cooking website built with [Lit](https://lit.dev/) and [Tailwind CSS](https://tailwindcss.com/).
4+
5+
## Table of Contents
6+
7+
- [Introduction](#introduction)
8+
- [Installation](#installation)
9+
- [Usage](#usage)
10+
- [Production](#production)
11+
- [Project Structure](#project-structure)
12+
- [Components](#components)
13+
- [Data Sources](#data-sources)
14+
15+
## Introduction
16+
17+
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.
18+
19+
## Installation
20+
21+
Ensure you have [Node.js](https://nodejs.org/en) installed.
22+
23+
```bash
24+
npm install
25+
```
26+
27+
## Usage
28+
29+
To run the app in development mode with live reloading:
30+
31+
```bash
32+
npm run dev
33+
```
34+
35+
The script above runs the following commands concurrently, scanning your template files for classes, build your CSS, and launch the development server:
36+
37+
- Tailwind CSS for Main Styles:
38+
39+
```bash
40+
npm run dev:main-css
41+
```
42+
43+
Compiles input.css into tailwind.generated.css and watches for changes.
44+
45+
- Tailwind CSS for Chat Window Styles:
46+
47+
```bash
48+
npm run dev:chat-window-css
49+
```
50+
51+
Compiles styles specific to the chat window into tailwind.chat-window.generated.css.
52+
53+
- Rollup watch
54+
55+
```bash
56+
npm run dev:rollup
57+
```
58+
59+
Bundles the JavaScript files using Rollup and watches for changes.
60+
61+
- Development Server
62+
```bash
63+
npm run dev:serve
64+
```
65+
Runs a development server with live reloading
66+
67+
Access the app at http://localhost:8000 (default port).
68+
69+
## Production
70+
71+
To build and serve the production version of the app, run the following command:
72+
73+
```bash
74+
npm run build
75+
npm run serve
76+
```
77+
78+
The command will:
79+
80+
- Compile and minify the CSS files.
81+
- Bundle and minify JavaScript files using Rollup.
82+
- Copy necessary assets to the `dist/` directory.
83+
84+
## Project Structure
85+
86+
```
87+
├── dist/ # Production build output
88+
├── public/ # Public assets like images
89+
├── src/
90+
│ ├── data/ # Data files (recipes, articles, etc.)
91+
│ ├── lib/
92+
│ │ └── components/ # Lit components
93+
│ ├── input.css # Tailwind CSS input file
94+
│ └── app.js # Main JavaScript entry point
95+
├── index.html # Main HTML file
96+
├── package.json # NPM configuration
97+
├── tailwind.chat-window.config.js # Tailwind CSS configuration
98+
├── tailwind.config.js # Tailwind CSS configuration
99+
└── rollup.config.js # Rollup bundler configuration
100+
```
101+
102+
## Components
103+
104+
#### CookingApp (cooking-app.js)
105+
106+
The root component that composes all other components to build the app interface.
107+
108+
## Data Sources
109+
110+
The app uses static data files located in the `src/data/` directory:

‎experimental/responsive-design/dist/app.js

Lines changed: 298 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎experimental/responsive-design/dist/iframe.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Cooking iframe</title>
7+
<script type="module" src="app.js"></script>
8+
<!-- Preload links autogenerated by Rollup -->
9+
<link rel="preload" as="image" href="./public/images/5-healthy-smoothie.webp">
10+
<link rel="preload" as="image" href="./public/images/beef-tacos.webp">
11+
<link rel="preload" as="image" href="./public/images/best-comfort-food.webp">
12+
<link rel="preload" as="image" href="./public/images/bread-at-home.webp">
13+
<link rel="preload" as="image" href="./public/images/caesar-salad.webp">
14+
<link rel="preload" as="image" href="./public/images/chicken-alfredo.webp">
15+
<link rel="preload" as="image" href="./public/images/chocolate-cake.webp">
16+
<link rel="preload" as="image" href="./public/images/chocolate-chip-cookies.webp">
17+
<link rel="preload" as="image" href="./public/images/garlic-bread.webp">
18+
<link rel="preload" as="image" href="./public/images/greek-salad.webp">
19+
<link rel="preload" as="image" href="./public/images/homemade-pizza.webp">
20+
<link rel="preload" as="image" href="./public/images/icons-outline.webp">
21+
<link rel="preload" as="image" href="./public/images/lemon-drizzle-cake.webp">
22+
<link rel="preload" as="image" href="./public/images/margherita-pizza.webp">
23+
<link rel="preload" as="image" href="./public/images/mastering-art-of-french-cooking.webp">
24+
<link rel="preload" as="image" href="./public/images/meal-prepping.webp">
25+
<link rel="preload" as="image" href="./public/images/mediterranean-cuisine.webp">
26+
<link rel="preload" as="image" href="./public/images/pancakes.webp">
27+
<link rel="preload" as="image" href="./public/images/spaghetti-carbonara.webp">
28+
<link rel="preload" as="image" href="./public/images/superfoods-you-should-include.webp">
29+
<link rel="preload" as="image" href="./public/images/tomato-soup.webp">
30+
<link rel="preload" as="image" href="./public/images/vegan-desserts.webp">
31+
<link rel="preload" as="image" href="./public/images/vegetable-stir-fry.webp">
32+
<link rel="preload" as="image" href="./public/images/vegetarian-stir-fry.webp">
33+
<link rel="preload" as="image" href="./public/images/week-night-dinners.webp">
34+
</head>
35+
<body>
36+
<cooking-app></cooking-app>
37+
</body>
38+
</html>

‎experimental/responsive-design/dist/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Cooking with Lit and Tailwind</title>
7+
</head>
8+
<body style="overflow: hidden; margin: 0">
9+
<iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html" width="800px" height="600px" style="border: none"></iframe>
10+
</body>
11+
</html>

‎experimental/responsive-design/dist/public/images/5-healthy-smoothie.webp

45.9 KB
Binary file not shown.

‎experimental/responsive-design/dist/public/images/beef-tacos.webp

42.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)