afront 1.0.2

package/install.js

@@ -0,0 +1,91 @@
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const { exec } = require('child_process');
+const tmp = require('tmp');
+const extract = require('extract-zip');
+
+// Configuration
+const GITHUB_ZIP_URL = 'https://github.com/Asggen/afront/archive/refs/tags/v1.0.2.zip'; // Updated URL
+const DEFAULT_DEST_DIR = path.join(process.cwd(), 'extracted-folder');
+
+// Download file from GitHub
+const downloadFile = (url, destination) => {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(destination);
+    https.get(url, (response) => {
+      response.pipe(file);
+      file.on('finish', () => {
+        file.close(resolve);
+      });
+    }).on('error', (err) => {
+      fs.unlink(destination, () => reject(err));
+    });
+  });
+};
+
+// Extract zip file
+const extractZip = (zipPath, extractTo) => {
+  return new Promise((resolve, reject) => {
+    extract(zipPath, { dir: extractTo }, (err) => {
+      if (err) reject(err);
+      else resolve();
+    });
+  });
+};
+
+// Run npm install
+const runNpmInstall = (directory) => {
+  return new Promise((resolve, reject) => {
+    exec('npm install', { cwd: directory }, (err, stdout, stderr) => {
+      if (err) {
+        console.error('Error running npm install:', stderr);
+        reject(err);
+      } else {
+        console.log('npm install output:', stdout);
+        resolve();
+      }
+    });
+  });
+};
+
+// Main function
+const main = async () => {
+  try {
+    // Create a temporary directory
+    const tmpDir = tmp.dirSync({ unsafeCleanup: true });
+    const zipPath = path.join(tmpDir.name, 'archive.zip');
+    const destDir = process.argv[2] || DEFAULT_DEST_DIR;
+
+    console.log('Downloading zip file...');
+    await downloadFile(GITHUB_ZIP_URL, zipPath);
+    console.log('Downloaded successfully.');
+
+    console.log('Extracting zip file...');
+    await extractZip(zipPath, tmpDir.name);
+    console.log('Extraction complete.');
+
+    // Determine the extracted folder name
+    const extractedFolderName = fs.readdirSync(tmpDir.name)[0];
+    const extractedFolderPath = path.join(tmpDir.name, extractedFolderName);
+
+    // Move extracted contents to the destination directory
+    fs.readdirSync(extractedFolderPath).forEach((file) => {
+      fs.renameSync(path.join(extractedFolderPath, file), path.join(destDir, file));
+    });
+
+    console.log(`Files have been extracted to ${destDir}`);
+
+    // Run npm install in the destination directory
+    console.log('Running npm install...');
+    await runNpmInstall(destDir);
+    console.log('npm install completed.');
+
+    // Clean up
+    tmpDir.removeCallback();
+  } catch (err) {
+    console.error('Error:', err);
+  }
+};
+
+main();

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "afront",
+  "version": "1.0.2",
+  "description": "AFront is a front-end JavaScript library designed to create seamless server-side rendered (SSSR) websites.",
+  "main": "webpack.dev.js",
+  "scripts": {
+    "build": "webpack --config webpack.prod.js",
+    "build:ssr": "webpack --config webpack.ssr.prod.js",
+    "build:alt": "webpack --config webpack.build-prod.js",
+    "prod:ssr": "node build-prod-ssr/ssr.prod.js",
+    "start": "webpack serve --config webpack.dev.js",
+    "static": "node server.js"
+  },
+  "keywords": [
+    "afront",
+    "ssr",
+    "web"
+  ],
+  "author": "imarksea - Piyush Nishad",
+  "files": [
+    "install.js",
+    "server.js",
+    "webpack.build-prod.js",
+    "webpack.dev.js",
+    "webpack.prod.js",
+    "webpack.ssr.prod.js",
+    ".babelrc",
+    ".env",
+    "src/**/*",
+    "build-prod/**/*",
+    "build-prod-static/**/*",
+    "build-prod-ssr/**/*"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "asggen-headtags": "^1.0.3",
+    "babel-plugin-css-modules-transform": "^1.6.2",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "dotenv": "^16.4.5",
+    "fs-extra": "^11.2.0",
+    "ignore-styles": "^5.0.1",
+    "react-router-dom": "^6.26.0",
+    "readline-sync": "^1.4.10",
+    "styled-components": "^6.1.12",
+    "terser-webpack-plugin": "^5.3.10"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/register": "^7.24.6",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.1",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "express": "^4.19.2",
+    "html-webpack-plugin": "^5.6.0",
+    "ignore-styles": "^5.0.1",
+    "mini-css-extract-plugin": "^2.9.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "bin": {
+    "afront": "./install.js"
+  }
+}

package/server.js

@@ -0,0 +1,20 @@
+const express = require("express");
+const path = require("path");
+require("dotenv").config();
+
+const app = express();
+const PORT = process.env.PORT;
+const HOST = process.env.HOST;
+
+// Serve static files from the build-prod-static directory
+app.use(express.static(path.join(__dirname, "build-prod-static")));
+
+// Serve index.html for all other routes (except static files)
+app.get("*", (req, res) => {
+  const indexPath = path.join(__dirname, "build-prod-static", "index.html");
+  res.sendFile(indexPath);
+});
+
+app.listen(PORT, HOST, () => {
+  console.log(`Server is running on http://${HOST}:${PORT}`);
+});

package/src/ARoutes/AFRoutes.js

@@ -0,0 +1,11 @@
+import { lazy } from "react";
+
+
+const routes = [
+  { path: "/", element: lazy(() => import("../Pages/Home.js")) },
+  { path: "/support", element: lazy(() => import("../Pages/Support.js")) },
+  { path: "/*", element: lazy(() => import("../PageNotFound.js")) }, // Page Not Found route
+  // Add More Pages
+];
+
+export default routes;

package/src/App.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ARoutes from "./Routes/ARoutes";
+import Header from "./Components/Header/Header.js";
+import Footer from "./Components/Footer/Footer.js";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+const Tail = () => (
+  <asggen
+    style={{ display: "none" }}
+    dangerouslySetInnerHTML={{
+      __html: `Rendering Asggen DOM...</asggen></asggenapp></body></html>`,
+    }}
+  />
+);
+
+function App({ context }) {
+  return (
+    <>
+      <Header />
+      <ARoutes context={context} />
+      <Footer />
+      {isProduction ? <Tail /> : null}
+    </>
+  );
+}
+
+export default App;

package/src/Assets/images/arrow-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" fill="#ffffff"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"/></svg>

package/src/Components/Background/MeshGradient.js

@@ -0,0 +1,18 @@
+import React from "react";
+import * as styles from "../../Style/MeshGradient.module.css";
+
+const MeshGradient = ({ children }) => {
+  return (
+    <div className={styles.gradientWrap}>
+      <div className={styles.meshgradient}>
+        <div className={`${styles.color} ${styles.c1}`}></div>
+        <div className={`${styles.color} ${styles.c2}`}></div>
+        <div className={`${styles.color} ${styles.c3}`}></div>
+        <div className={`${styles.color} ${styles.c4}`}></div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default MeshGradient;

package/src/Components/Footer/Footer.js

@@ -0,0 +1,108 @@
+import React from "react";
+import * as styles from "../../Style/Style.module.css";
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.footerContainer}>
+        <div className={styles.footerBrand}>
+          <a href="/" className={styles.footerLogo}>
+            AFront
+          </a>
+          <p className={styles.footerDescription}>
+            Empowering front-end development with cutting-edge tools and
+            services.
+          </p>
+        </div>
+
+        <div className={styles.footerLinks}>
+          <div className={styles.linkColumn}>
+            <h4 className={styles.footerTitle}>Company</h4>
+            <ul className={styles.linkList}>
+              <li>
+                <a href="/about" className={styles.link}>
+                  About Us
+                </a>
+              </li>
+              <li>
+                <a href="/careers" className={styles.link}>
+                  Careers
+                </a>
+              </li>
+              <li>
+                <a href="/contact" className={styles.link}>
+                  Contact Us
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className={styles.linkColumn}>
+            <h4 className={styles.footerTitle}>Resources</h4>
+            <ul className={styles.linkList}>
+              <li>
+                <a href="/blog" className={styles.link}>
+                  Blog
+                </a>
+              </li>
+              <li>
+                <a href="/docs" className={styles.link}>
+                  Documentation
+                </a>
+              </li>
+              <li>
+                <a href="/community" className={styles.link}>
+                  Community
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className={styles.linkColumn}>
+            <h4 className={styles.footerTitle}>Products</h4>
+            <ul className={styles.linkList}>
+              <li>
+                <a href="/features" className={styles.link}>
+                  Features
+                </a>
+              </li>
+              <li>
+                <a href="/pricing" className={styles.link}>
+                  Pricing
+                </a>
+              </li>
+              <li>
+                <a href="/support" className={styles.link}>
+                  Support
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.footerBottom}>
+        <p className={styles.footerCopy}>
+          © {new Date().getFullYear()} AFront by Asggen Inc. All rights
+          reserved.
+        </p>
+        <div className={styles.socialLinks}>
+          <a href="https://twitter.com" className={styles.socialLink}>
+            Twitter
+          </a>
+          <a href="https://facebook.com" className={styles.socialLink}>
+            Facebook
+          </a>
+          <a
+            href="https://www.linkedin.com/showcase/asggenchat/"
+            className={styles.socialLink}
+          >
+            LinkedIn
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/Components/Header/Header.js

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from "react";
+import * as styles from "../../Style/Style.module.css";
+
+const Header = () => {
+  const [isBurgerActive, setBurgerActive] = useState(false);
+  const [isScrolled, setScrolled] = useState(false);
+
+  // Toggle burger and menu
+  const toggleMenu = () => {
+    setBurgerActive(!isBurgerActive);
+  };
+
+  // Handle click on menu links
+  const closeMenu = () => {
+    setBurgerActive(false);
+  };
+
+  // Change header background on scrolling
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY >= 5);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  // Fixed Navbar Menu on Window Resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth > 768 && isBurgerActive) {
+        setBurgerActive(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isBurgerActive]);
+
+  useEffect(() => {
+    if (isBurgerActive) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
+    return () => {
+      document.body.style.overflow = "auto"; // Reset to default on unmount
+    };
+  }, [isBurgerActive]);
+  return (
+    <header
+      className={`header  ${
+        isBurgerActive ? "off-scroll" : `${isScrolled ? "on-scroll" : ""}`
+      } `}
+      id="header"
+    >
+      <nav className="navbar container">
+        <a href="/" className="brand">
+          AFront
+        </a>
+        <div
+          className={`burger ${isBurgerActive ? "is-active" : ""}`}
+          id="burger"
+          onClick={toggleMenu}
+        >
+          <span className="burger-line"></span>
+          <span className="burger-line"></span>
+          <span className="burger-line"></span>
+        </div>
+        <div
+          className={`menu ${isBurgerActive ? "is-active " : "is-inactive"}`}
+          id="menu"
+        >
+          <ul className="menu-inner">
+            <li className="menu-item">
+              <a
+                href="#"
+                className={`menu-link ${
+                  isBurgerActive ? "menu-link-mobile" : ""
+                }`}
+                onClick={closeMenu}
+              >
+                Learn
+              </a>
+            </li>
+            <li className="menu-item">
+              <a
+                href="#"
+                className={`menu-link ${
+                  isBurgerActive ? "menu-link-mobile" : ""
+                }`}
+                onClick={closeMenu}
+              >
+                Feature
+              </a>
+            </li>
+            <li className="menu-item">
+              <a
+                href="#"
+                className={`menu-link ${
+                  isBurgerActive ? "menu-link-mobile" : ""
+                }`}
+                onClick={closeMenu}
+              >
+                Blog
+              </a>
+            </li>
+            <li className="menu-item">
+              <a
+                href="/support"
+                className={`menu-link ${
+                  isBurgerActive ? "menu-link-mobile" : ""
+                }`}
+                onClick={closeMenu}
+              >
+                Support
+              </a>
+            </li>
+            {isBurgerActive && (
+              <>
+                <li className="menu-item">
+                  <a
+                    href="#"
+                    className={`menu-link ${
+                      isBurgerActive ? "menu-link-mobile" : ""
+                    }`}
+                    onClick={closeMenu}
+                  >
+                    demo
+                  </a>
+                </li>
+              </>
+            )}
+          </ul>
+        </div>
+        <a href="/" className="menu-block">
+          Get Started
+        </a>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

package/src/LoadingFallback.js

@@ -0,0 +1,13 @@
+import React from "react";
+import * as appStyles from "./style/App.module.css";
+import logo from "../dev/logo512.png";
+
+const LoadingFallback = () => {
+  return (
+    <div className={appStyles.loadingContainer}>
+      <img src={logo} alt="Loading..." className={appStyles.loadingLogo} />
+    </div>
+  );
+};
+
+export default LoadingFallback;

package/src/PageNotFound.js

@@ -0,0 +1,20 @@
+import React from "react";
+import * as styles from "./Style/PageNotFound.module.css";
+
+const PageNotFound = () => {
+  return (
+    <div className={styles.pageNotFoundContainer}>
+      <h2 className={styles.heading}>
+        Oops! The page you're looking for doesn't exist.
+      </h2>
+      <p className={styles.subText}>
+        It seems you’ve taken a wrong turn. Let’s get you back on track!
+      </p>
+      <a href="/" className={styles.homeLink}>
+        Go to Homepage
+      </a>
+    </div>
+  );
+};
+
+export default PageNotFound;

package/src/Pages/Home.js

@@ -0,0 +1,43 @@
+import React from "react";
+import MeshGradient from "../Components/Background/MeshGradient";
+import tensorlabLogo from "../Assets/images/afront.png";
+import arrowright from "../Assets/images/arrow-right.svg";
+import HeadTags from "asggen-headtags";
+import * as styles from "../Style/Style.module.css";
+
+const Home = ({ context }) => {
+  const title = "AFront by Asggen Inc.";
+  const description = "Home for all AFront products and services.";
+  const keywords = "Home, Afront, help";
+  HeadTags({ title, description, keywords, context });
+
+  return (
+      <MeshGradient>
+        <main className="main">
+          <section className="section banner banner-section">
+            <div className="container banner-column">
+              <img className="banner-image" src={tensorlabLogo} alt="banner" />
+              <div className="banner-inner">
+                <h1 className="heading-xl">
+                  Empower Your Front-End with AFront
+                </h1>
+                <p className="paragraph">
+                  AFront streamlines front-end development with robust tools and
+                  <b> seamless server-side rendering (SSSR)</b>. Build dynamic,
+                  high-performance web experiences effortlessly.
+                </p>
+                <div className="btn-darken-block">
+                  <a href="/" className="btn-darken menu-block">
+                    Get Started{" "}
+                    <img className="btn-darken-arrow" src={arrowright} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+      </MeshGradient>
+  );
+};
+
+export default Home;

package/src/Pages/Support.js

@@ -0,0 +1,68 @@
+import React from "react";
+import HeadTags from "asggen-headtags";
+import * as styles from "../Style/Support.module.css";
+import MeshGradient from "../Components/Background/MeshGradient";
+
+const Support = ({ context }) => {
+  const title = "Support - AFront";
+  const description =
+    "Get support for AFront, a front-end JavaScript library for seamless server-side rendering.";
+  const keywords = "support, AFront, server-side rendering, JavaScript";
+  HeadTags({ title, description, keywords, context });
+
+  return (
+    <MeshGradient>
+      <div className={styles.supportContainer}>
+        <h1 className={styles.supportTitle}>Need Assistance?</h1>
+        <p className={styles.supportDescription}>
+          AFront is a cutting-edge front-end JavaScript library designed for
+          seamless server-side rendering (SSR). We're committed to providing you
+          with top-notch support to ensure your experience is smooth and
+          productive.
+        </p>
+        <div className={styles.supportContent}>
+          <div className={styles.supportCard}>
+            <h2 className={styles.supportCardTitle}>Technical Assistance</h2>
+            <p className={styles.supportCardContent}>
+              Our dedicated technical support team is available around the clock
+              to resolve any issues you may face with AFront. Connect with us
+              through email or our support portal for prompt assistance.
+            </p>
+          </div>
+          <div className={styles.supportCard}>
+            <h2 className={styles.supportCardTitle}>Product Information</h2>
+            <p className={styles.supportCardContent}>
+              Curious about AFront’s capabilities? Reach out to our sales team
+              for detailed insights on features, benefits, and how our library
+              can enhance your web development projects.
+            </p>
+          </div>
+          <div className={styles.supportCard}>
+            <h2 className={styles.supportCardTitle}>Community and Forums</h2>
+            <p className={styles.supportCardContent}>
+              Join our vibrant community forums to discuss AFront with fellow
+              developers, exchange tips, and troubleshoot common issues
+              collaboratively.
+            </p>
+          </div>
+        </div>
+        <div className={styles.supportFAQ}>
+          <h2 className={styles.supportCardTitle}>
+            Frequently Asked Questions
+          </h2>
+          <ul className={styles.faqList}>
+            <li>What is AFront and how does it work?</li>
+            <li>How do I get started with AFront?</li>
+            <li>Where can I find documentation and tutorials?</li>
+            <li>How can I report a bug or request a feature?</li>
+          </ul>
+        </div>
+        <a href="/" className={styles.footerLink}>
+          Back to Homepage
+        </a>
+      </div>
+    </MeshGradient>
+  );
+};
+
+export default Support;

package/src/Routes/ARoutes.js

@@ -0,0 +1,25 @@
+import React, { Suspense } from "react";
+import { Route, Routes } from "react-router-dom";
+import routes from "../ARoutes/AFRoutes.js";
+import LoadingFallback from "../LoadingFallback.js";
+
+
+const ARoutes = ({ context }) => {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <Routes>
+        {/* Pages Routes */}
+        {routes.map(({ path, element: Element }, index) => (
+          <Route
+            key={index}
+            path={path}
+            element={<Element context={context} />}
+          />
+        ))}
+        {/* Pages Routes */}
+      </Routes>
+    </Suspense>
+  );
+};
+
+export default ARoutes;