clean-up tailwind build

Shaun Prince · Shaun Prince · commit 094701d5c695 · 2024-09-20T12:22:18.000-07:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -13,7 +13,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '22'
 
@@ -27,4 +27,7 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages
-          folder: build
+          folder: build
+          clean: true
+          clean-exclude: |
+            CNAME
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+WORKFLOW.md
diff --git a/README.md b/README.md
@@ -68,3 +68,12 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+
+
+```bash
+rm -rf node_modules
+rm -rf build
+npm cache clean --force
+npm install
+```
diff --git a/craco.config.js b/craco.config.js
@@ -4,10 +4,15 @@ const autoprefixer = require('autoprefixer');
 module.exports = {
   style: {
     postcss: {
-      plugins: [
-        tailwindcss('./tailwind.config.js'),
-        autoprefixer,
-      ],
+      loaderOptions: (postcssLoaderOptions) => {
+        postcssLoaderOptions.postcssOptions = {
+          plugins: [
+            tailwindcss('./tailwind.config.js'),
+            autoprefixer,
+          ],
+        };
+        return postcssLoaderOptions;
+      },
     },
   },
-}
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,8 +20,7 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build --dotfiles",
-    "postinstall": "tailwindcss build -i ./src/index.css -o ./src/tailwind.output.css"
+    "deploy": "gh-pages -d build --dotfiles"
   },
   "eslintConfig": {
     "extends": [
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ],
+}
diff --git a/public/index.html b/public/index.html
@@ -4,41 +4,17 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline';">
+    <meta name="theme-color" content="#1a7830" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Technical Fusion Canada: A community focused on information technology, 3D printing, automotive modification, and innovative technical challenges."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Technical Fusion Canada</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
-</html>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "TechFusion",
+  "name": "Technical Fusion Canada",
   "icons": [
     {
       "src": "favicon.ico",
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#1a7830",
   "background_color": "#ffffff"
 }
diff --git a/src/Home.js b/src/Home.js
@@ -1,14 +1,31 @@
 import React from 'react';
 import { Github, Zap, Printer, Car, Code } from 'lucide-react';
 
+const FeatureCard = ({ icon: Icon, title, description, color }) => (
+  <div className="bg-tech-green-700 p-6 rounded-lg shadow-lg flex items-start">
+    <Icon className={`${color} mr-4 flex-shrink-0`} size={48} aria-hidden="true" />
+    <div>
+      <h3 className="text-2xl font-semibold mb-2">{title}</h3>
+      <p>{description}</p>
+    </div>
+  </div>
+);
+
 const Home = () => {
+  const features = [
+    { icon: Zap, title: "Information Technology", description: "Exploring the latest in tech innovations and solutions.", color: "text-yellow-400" },
+    { icon: Printer, title: "3D Printing", description: "Bringing ideas to life with cutting-edge 3D printing technology.", color: "text-blue-400" },
+    { icon: Car, title: "Automotive Modification", description: "Pushing the boundaries of vehicle performance and customization.", color: "text-red-400" },
+    { icon: Code, title: "And More...", description: "Diving into any technical challenge that comes our way.", color: "text-purple-400" },
+  ];
+
   return (
-    <div className="min-h-screen bg-gradient-to-b from-green-800 to-green-600 text-white">
-      <header className="bg-green-900 p-4 flex justify-between items-center">
+    <div className="min-h-screen bg-gradient-to-b from-tech-green-800 to-tech-green-600 text-white">
+      <header className="bg-tech-green-900 p-4 flex justify-between items-center">
         <h1 className="text-2xl font-bold">Technical Fusion Canada</h1>
         <nav>
-          <a href="https://github.com/SolidRusT/techfusion.github.io" className="ml-4 hover:text-green-300 flex items-center">
-            <Github className="mr-1" size={24} />
+          <a href="https://github.com/SolidRusT/techfusion.github.io" className="ml-4 hover:text-tech-green-300 flex items-center" target="_blank" rel="noopener noreferrer">
+            <Github className="mr-1" size={24} aria-hidden="true" />
             <span>GitHub</span>
           </a>
         </nav>
@@ -18,45 +35,35 @@ const Home = () => {
         <section className="mb-12 text-center">
           <h2 className="text-4xl font-bold mb-4">Welcome to the Canadian Technical Community</h2>
           <p className="text-xl max-w-2xl mx-auto">
-            Focused on information technology, 3D printing, automotive modification, and anything else that sparks our interest.
+            Focused on information technology, 3D printing, automotive modification,
+            and anything else that sparks our interest.
           </p>
         </section>
         
         <section className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
-          {[
-            { icon: Zap, title: "Information Technology", description: "Exploring the latest in tech innovations and solutions.", color: "text-yellow-400" },
-            { icon: Printer, title: "3D Printing", description: "Bringing ideas to life with cutting-edge 3D printing technology.", color: "text-blue-400" },
-            { icon: Car, title: "Automotive Modification", description: "Pushing the boundaries of vehicle performance and customization.", color: "text-red-400" },
-            { icon: Code, title: "And More...", description: "Diving into any technical challenge that comes our way.", color: "text-purple-400" },
-          ].map((item, index) => (
-            <div key={index} className="bg-green-700 p-6 rounded-lg shadow-lg flex items-start">
-              <item.icon className={`${item.color} mr-4 flex-shrink-0`} size={48} />
-              <div>
-                <h3 className="text-2xl font-semibold mb-2">{item.title}</h3>
-                <p>{item.description}</p>
-              </div>
-            </div>
+          {features.map((feature, index) => (
+            <FeatureCard key={index} {...feature} />
           ))}
         </section>
         
-        <section className="bg-green-800 p-8 rounded-lg shadow-lg">
+        <section className="bg-tech-green-800 p-8 rounded-lg shadow-lg">
           <h2 className="text-3xl font-bold mb-4">Our Roots</h2>
           <p className="mb-4">
             Technical Fusion Canada is proudly incubated by SolidRusT Networks, 
             an innovator in disruptive technology solutions.
           </p>
           <div className="flex flex-wrap gap-4">
-            <a href="https://solidrust.net" className="text-green-300 hover:underline">SolidRusT Networks</a>
-            <a href="https://github.com/SolidRusT/" className="text-green-300 hover:underline flex items-center">
-              <Github className="mr-1" size={24} />
+            <a href="https://solidrust.net" className="text-tech-green-300 hover:underline" target="_blank" rel="noopener noreferrer">SolidRusT Networks</a>
+            <a href="https://github.com/SolidRusT/" className="text-tech-green-300 hover:underline flex items-center" target="_blank" rel="noopener noreferrer">
+              <Github className="mr-1" size={24} aria-hidden="true" />
               <span>GitHub Organization</span>
             </a>
           </div>
         </section>
       </main>
       
-      <footer className="bg-green-900 p-4 text-center mt-12">
-        <p>&copy; 2024 Technical Fusion Canada. All rights reserved.</p>
+      <footer className="bg-tech-green-900 p-4 text-center mt-12">
+        <p>&copy; {new Date().getFullYear()} Technical Fusion Canada. All rights reserved.</p>
       </footer>
     </div>
   );
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import './tailwind.output.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
diff --git a/src/tailwind.output.css b/src/tailwind.output.css
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/update_llm_files.sh b/update_llm_files.sh

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "short_name": "React App",`
`3`		`- "name": "Create React App Sample",`
	`2`	`+ "short_name": "TechFusion",`
	`3`	`+ "name": "Technical Fusion Canada",`
`4`	`4`	`"icons": [`
`5`	`5`	`{`
`6`	`6`	`"src": "favicon.ico",`
`@@ -20,6 +20,6 @@`
`20`	`20`	`],`
`21`	`21`	`"start_url": ".",`
`22`	`22`	`"display": "standalone",`
`23`		`- "theme_color": "#000000",`
	`23`	`+ "theme_color": "#1a7830",`
`24`	`24`	`"background_color": "#ffffff"`
`25`	`25`	`}`