From 0fa91e4f3f33c51cbe7096ef7c003e7d6456648e Mon Sep 17 00:00:00 2001 From: Vic Date: Sat, 13 Jul 2024 19:14:43 -0500 Subject: [PATCH] add tailwindcss and nextui --- client/.babelrc | 11 ++++++++ client/package.json | 24 ++++++++++------ client/postcss.config.js | 6 ++++ client/public/onedot-logo.svg | 53 +++++++++++++++++++++++++++++++++++ client/src/App.jsx | 37 +++++------------------- client/src/globals.css | 3 ++ client/src/main.js | 1 + client/src/pages/Home.jsx | 41 +++++++++++++++++++++++++++ client/src/routers/handler.js | 3 ++ client/tailwind.config.js | 15 ++++++++++ client/webpack.config.js | 4 +-- 11 files changed, 158 insertions(+), 40 deletions(-) create mode 100644 client/.babelrc create mode 100644 client/postcss.config.js create mode 100644 client/public/onedot-logo.svg create mode 100644 client/src/globals.css create mode 100644 client/src/pages/Home.jsx create mode 100644 client/tailwind.config.js diff --git a/client/.babelrc b/client/.babelrc new file mode 100644 index 0000000..04ccccb --- /dev/null +++ b/client/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": ["@babel/preset-env"], + "plugins": [ + [ + "@babel/plugin-transform-react-jsx", + { + "runtime": "automatic" + } + ] + ] +} diff --git a/client/package.json b/client/package.json index a527f1f..5b4e259 100644 --- a/client/package.json +++ b/client/package.json @@ -12,23 +12,31 @@ }, "author": "", "license": "ISC", + "dependencies": { + "@cloudflare/kv-asset-handler": "^0.3.4", + "@nextui-org/react": "^2.4.2", + "buffer": "^6.0.3", + "framer-motion": "^11.3.2", + "itty-router": "^2.6.6", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "serverless-cloudflare-workers": "^1.2.0" + }, "devDependencies": { "@babel/core": "^7.24.8", "@babel/preset-env": "^7.24.8", "@babel/preset-react": "^7.24.7", + "autoprefixer": "^10.4.19", "babel-loader": "^9.1.3", "css-loader": "^7.1.2", "file-loader": "^6.2.0", + "postcss": "^8.4.39", + "postcss-loader": "^8.1.1", + "sass": "^1.62.0", + "sass-loader": "^13.2.2", "style-loader": "^4.0.0", + "tailwindcss": "^3.4.4", "webpack": "^5.93.0", "webpack-cli": "^5.1.4" - }, - "dependencies": { - "@cloudflare/kv-asset-handler": "^0.3.4", - "buffer": "^6.0.3", - "itty-router": "^2.6.6", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "serverless-cloudflare-workers": "^1.2.0" } } diff --git a/client/postcss.config.js b/client/postcss.config.js new file mode 100644 index 0000000..33ad091 --- /dev/null +++ b/client/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/client/public/onedot-logo.svg b/client/public/onedot-logo.svg new file mode 100644 index 0000000..9993931 --- /dev/null +++ b/client/public/onedot-logo.svg @@ -0,0 +1,53 @@ + + + +Created with Fabric.js 4.4.0 + + + + + + + + \ No newline at end of file diff --git a/client/src/App.jsx b/client/src/App.jsx index 969bc67..e309259 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,34 +1,11 @@ -import React, { useState } from 'react'; -import logo from '../public/cloudflare.svg' -import { Header } from "./components/Header/Header"; -import { Footer } from "./components/Footer/Footer"; +import * as React from "react"; +import { NextUIProvider } from "@nextui-org/react"; +import { Home } from "./pages/Home"; export const App = () => { - const [count, setCount] = useState(0); - const tester = "Victor E"; - return ( -
-
-
-
-
-
- -
-
-

Hello, Cloudflare Workers!

-

This is a basic React page deployed on Cloudflare Workers.

-

- Your name: { tester } -

- 
{ tester }
- -

Count: { count }

- -
-
-
-
+ + + ); -}; \ No newline at end of file +} \ No newline at end of file diff --git a/client/src/globals.css b/client/src/globals.css new file mode 100644 index 0000000..04b35af --- /dev/null +++ b/client/src/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/client/src/main.js b/client/src/main.js index 25392e3..1bec7b3 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,5 +1,6 @@ import { App } from './App'; import { createRoot } from 'react-dom/client'; +import './globals.css'; // Render your React component instead const root = createRoot(document.getElementById('root')); diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx new file mode 100644 index 0000000..5d3ebe2 --- /dev/null +++ b/client/src/pages/Home.jsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import logo from '../../public/cloudflare.svg' +import { Header } from "../components/Header/Header"; +import { Footer } from "../components/Footer/Footer"; +import {Button} from "@nextui-org/react"; + +export const Home = () => { + const [count, setCount] = useState(0); + const tester = "Victor E"; + + return ( +
+
+
+
+
+
+ +
+
+

Hello, Cloudflare Workers!

+

This is a basic React page deployed on Cloudflare Workers.

+

+ Your name: { tester } +

+ 
{ tester }
+ +

Count: { count }

+ +
+
+
+ ); +}; \ No newline at end of file diff --git a/client/src/routers/handler.js b/client/src/routers/handler.js index b510595..07549c2 100644 --- a/client/src/routers/handler.js +++ b/client/src/routers/handler.js @@ -9,6 +9,9 @@ export const routesAndAssetsHandler = async (event, router) => { request.url.endsWith('/bundle.js') || request.url.endsWith('/favicon.ico') || request.url.endsWith('.svg') + || request.url.endsWith('.jpg') + || request.url.endsWith('.png') + || request.url.endsWith('.css') ) { // Serve the bundle.js file from KV storage try { diff --git a/client/tailwind.config.js b/client/tailwind.config.js new file mode 100644 index 0000000..ca66ecb --- /dev/null +++ b/client/tailwind.config.js @@ -0,0 +1,15 @@ +/** @type {import('tailwindcss').Config} */ +const { nextui } = require("@nextui-org/react"); + +module.exports = { + content: [ + "./src/components/**/*.{html,js,jsx}", + "./src/pages/**/*.{html,js,jsx}", + "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: {}, + }, + darkMode: "class", + plugins: [nextui()], +}; \ No newline at end of file diff --git a/client/webpack.config.js b/client/webpack.config.js index 2b717a7..4014f76 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -15,13 +15,13 @@ module.exports = { use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env', '@babel/preset-react'], + configFile: './.babelrc', }, }, }, { test: /\.css$/, - use: ['style-loader', 'css-loader'], + use: ['style-loader', 'css-loader', 'postcss-loader', "sass-loader"], }, { test: /\.(png|jpg|svg)$/,