diff --git a/.gitignore b/.gitignore index 48549d9..76db87a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,12 @@ +#node modules node_modules/ -<<<<<<< HEAD -======= + +#package lock files +package-lock.json +pnpm-lock.yaml + .idea/ .DS_Store ->>>>>>> master dist .env .idea diff --git a/cli.js b/cli.js index f9c002f..ce91784 100755 --- a/cli.js +++ b/cli.js @@ -1,10 +1,10 @@ #!/usr/bin/env node -import figlet from "figlet" -import { program } from "commander" -import chalk from "chalk" -import useGradient from "./src/utils/useGradient.js" -import { createBackendProject } from "./src/utils/create-backend-project.js" +import figlet from "figlet"; +import { program } from "commander"; +import chalk from "chalk"; +import useGradient from "./src/utils/useGradient.js"; +import { createBackendProject } from "./src/utils/create-backend-project.js"; import { promptBackendFramework, promptDatabase, @@ -14,62 +14,64 @@ import { promptOrm, promptProjectName, promptProjectStack, -} from "./src/utils/prompts.js" -import { createFrontendProject } from "./src/utils/create-frontend-project.js" +} from "./src/utils/prompts.js"; +import { createFrontendProject } from "./src/utils/create-frontend-project.js"; -const toolName = "StartEase" -const jsBackendStacks = ["expressjs", "nestjs"] +const toolName = "StartEase"; +const jsBackendStacks = ["expressjs", "nestjs"]; -program.version("1.0.0").description("StartEase CLI") +program.version("1.0.0").description("StartEase CLI"); program .description("Scaffold a new project with StartEase") .action(async () => { - await startProject() - }) + await startProject(); + }); -program.parse(process.argv) +program.parse(process.argv); async function startProject() { - let framework - let projectName - let projectStack - let initDB - let database - let orm - let language + let framework; + let projectName; + let projectStack; + let initDB; + let database; + let orm; + let language; const initialMsg = `Simplify Project Setup with the. ${chalk.green( toolName - )} CLI Tool.` + )} CLI Tool.`; // render cli title - renderTitle() - console.log(chalk.white(initialMsg)) + renderTitle(); + console.log(chalk.white(initialMsg)); - projectName = await promptProjectName() - projectStack = await promptProjectStack() + projectName = await promptProjectName(); + projectStack = await promptProjectStack(); /** * start prompts */ if (projectStack === "frontend") { - framework = await promptFrontendFramework() - language = await promptFrontendLanguage() + framework = await promptFrontendFramework(); + if (framework !== "html-css-js") { + language = await promptFrontendLanguage(); + } - await createFrontendProject(projectName, framework, language) + await createFrontendProject(projectName, framework, language); } else if (projectStack === "backend") { - framework = await promptBackendFramework() + framework = await promptBackendFramework(); - initDB = await promptInitDatabase() + initDB = await promptInitDatabase(); if (initDB) { - database = await promptDatabase() + database = await promptDatabase(); - orm = await promptOrm(database) + orm = await promptOrm(database); } - await createBackendProject(projectName, framework, database, orm) + await createBackendProject(projectName, framework, database, orm); } } @@ -83,9 +85,9 @@ function renderTitle() { verticalLayout: "default", width: 80, whitespaceBreak: true, - } + }; useGradient({ title: figlet.textSync("StartEase", figletConfig), - }) + }); } diff --git a/package.json b/package.json index a12c6ec..3b3a814 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "./cli.js", "type": "module", "scripts": { - "start": "node ./cli.js" + "start": "node ." }, "keywords": [ "startease", diff --git a/src/functions/filesHandlers.js b/src/functions/filesHandlers.js new file mode 100644 index 0000000..d045975 --- /dev/null +++ b/src/functions/filesHandlers.js @@ -0,0 +1,52 @@ +import ora from "ora"; +import path from "path"; +import { + copyFile, + createAndUpdateFile, + createFolder, + getTemplateDir, + updateFileContent, + writeToFile, +} from "../utils/filemanager.js"; +/** + * + * @param {string} framework + * @param {string?} projectName + * @returns {string} + */ +function setDestinationPath(framework, projectName) { + return path.join( + process.cwd(), + projectName ?? `project-starter-${framework}-template` + ); +} + +/** + * @description Loader + * @param {[{message:string, duration:Number}]} stages + */ +async function startSpinner(stages) { + for (const stage of stages) { + const spinner = ora(stage.message).start(); + await new Promise((resolve) => setTimeout(resolve, stage.duration)); + spinner.succeed(stage.message.replace("...", " completed.")); + } +} + +/** + * + * @param {string} projectName + * @returns {void} + */ +export const vanillaJsHandler = async function (projectName) { + const destinationPath = setDestinationPath("html-css-js", projectName); + const stages = []; + stages.push({ message: "Creating Project ...", duration: 2000 }); + copyFile(getTemplateDir("frontend/html-css-js"), destinationPath); + stages.push({ + message: `html-css-js project created successfully! : ${destinationPath}`, + duration: 1000, + }); + + await startSpinner(stages); +}; diff --git a/src/utils/create-frontend-project.js b/src/utils/create-frontend-project.js index 5ce6277..b2afd15 100644 --- a/src/utils/create-frontend-project.js +++ b/src/utils/create-frontend-project.js @@ -1,20 +1,21 @@ -import { copyFile, getTemplateDir } from "./filemanager.js" -import path from "path" -import ora from "ora" +import { copyFile, getTemplateDir } from "./filemanager.js"; +import path from "path"; +import ora from "ora"; +import { vanillaJsHandler } from "../functions/filesHandlers.js"; /** * loader */ -let stages = [{ message: "Creating Project ...", duration: 2000 }] +let stages = [{ message: "Creating Project ...", duration: 2000 }]; async function startSpinner() { for (const stage of stages) { - const spinner = ora(stage.message).start() - await new Promise((resolve) => setTimeout(resolve, stage.duration)) - spinner.succeed(stage.message.replace("...", " completed.")) + const spinner = ora(stage.message).start(); + await new Promise((resolve) => setTimeout(resolve, stage.duration)); + spinner.succeed(stage.message.replace("...", " completed.")); } - stages = [{ message: "Creating Project ...", duration: 2000 }] + stages = [{ message: "Creating Project ...", duration: 2000 }]; } /** @@ -29,8 +30,10 @@ export async function createFrontendProject(projectName, framework, language) { const destinationPath = path.join( process.cwd(), projectName ?? `project-starter-${framework}-template` - ) - + ); + if (framework === "html-css-js") { + return await vanillaJsHandler(projectName); + } if (framework === "reactjs") { // copy files based on the language chosen switch (language) { @@ -38,16 +41,16 @@ export async function createFrontendProject(projectName, framework, language) { copyFile( getTemplateDir(`frontend/reactjs/react-javascript-temp`), destinationPath - ) - break + ); + break; case "typescript": copyFile( getTemplateDir(`frontend/reactjs/react-typescript-temp`), destinationPath - ) + ); default: - break + break; } // success message @@ -56,11 +59,11 @@ export async function createFrontendProject(projectName, framework, language) { language.charAt(0).toUpperCase() + language.slice(1) } created successfully! : ${destinationPath}`, duration: 1000, - }) + }); - await startSpinner() + await startSpinner(); } } catch (e) { - console.log(`Error Creating Frontend Project: ${e}`) + console.log(`Error Creating Frontend Project: ${e}`); } } diff --git a/src/utils/prompts.js b/src/utils/prompts.js index f220bd3..7bfa1e1 100644 --- a/src/utils/prompts.js +++ b/src/utils/prompts.js @@ -1,4 +1,4 @@ -import inquirer from "inquirer" +import inquirer from "inquirer"; export async function promptProjectName() { const ans = await inquirer.prompt([ @@ -7,9 +7,9 @@ export async function promptProjectName() { name: "projectName", message: "Enter project name:", }, - ]) + ]); - return ans.projectName + return ans.projectName; } export async function promptProjectStack() { @@ -20,9 +20,9 @@ export async function promptProjectStack() { message: "Choose your stack:", choices: ["Frontend", "Backend"], }, - ]) + ]); - return ans.projectStack.toLowerCase() + return ans.projectStack.toLowerCase(); } export async function promptFrontendFramework() { @@ -31,11 +31,12 @@ export async function promptFrontendFramework() { type: "list", name: "framework", message: "Choose a framework:", - choices: ["ReactJs"], + + choices: ["ReactJs", "html-css-js"], }, - ]) + ]); - return ans.framework.toLowerCase().replace(/ /g, "-") + return ans.framework.toLowerCase().replace(/ /g, "-"); } export async function promptFrontendLanguage() { @@ -46,9 +47,9 @@ export async function promptFrontendLanguage() { message: "Choose Your Preferred Language:", choices: ["JavaScript", "TypeScript"], }, - ]) + ]); - return ans.language.toLowerCase().replace(/ /g, "-") + return ans.language.toLowerCase().replace(/ /g, "-"); } export async function promptBackendFramework() { @@ -59,13 +60,13 @@ export async function promptBackendFramework() { message: "Choose a framework:", choices: ["NestJS", "ExpressJs", "Django"], }, - ]) + ]); - return ans.framework.toLowerCase().replace(/ /g, "-") + return ans.framework.toLowerCase().replace(/ /g, "-"); } export async function promptDatabase(framework) { - const choices = framework === "django" ? ["SQLite3"] : ["MongoDB"] + const choices = framework === "django" ? ["SQLite3"] : ["MongoDB"]; const ans = await inquirer.prompt([ { @@ -74,9 +75,9 @@ export async function promptDatabase(framework) { message: "select a database", choices, }, - ]) + ]); - return ans.database.toLowerCase() + return ans.database.toLowerCase(); } export async function promptInitDatabase() { @@ -87,19 +88,19 @@ export async function promptInitDatabase() { message: "Initialize Database?", default: false, }, - ]) + ]); - return ans.initDB + return ans.initDB; } export async function promptOrm(database) { - database = database?.toLowerCase() ?? "" - let ormChoices = [] + database = database?.toLowerCase() ?? ""; + let ormChoices = []; if (database === "mongodb") { - ormChoices = ["Mongoose"] + ormChoices = ["Mongoose"]; } else { - ormChoices = ["Typeorm"] + ormChoices = ["Typeorm"]; } const ans = await inquirer.prompt([ @@ -109,7 +110,6 @@ export async function promptOrm(database) { message: "select your preferred ORM", choices: ormChoices, }, - ]) - - return ans.database.toLowerCase() + ]); + return ans.database.toLowerCase(); } diff --git a/src/utils/stack-options.js b/src/utils/stack-options.js index 9e4f52f..0a34159 100644 --- a/src/utils/stack-options.js +++ b/src/utils/stack-options.js @@ -1,50 +1,54 @@ export const STACK_OPTIONS = { - "stacks": [ + stacks: [ { - "name": "backend", - "frameworks": [ + name: "backend", + frameworks: [ { - "name": "nestjs", - "key": "nestjs" + name: "nestjs", + key: "nestjs", }, { - "name": "expressjs", - "key": "expressjs" - } + name: "expressjs", + key: "expressjs", + }, ], - "databases": [ + databases: [ { - "name": "mongodb", - "key": "-db1" + name: "mongodb", + key: "-db1", }, { - "name": "postgresql", - "key": "-db2" + name: "postgresql", + key: "-db2", }, { - "name": "mysql", - "key": "-db3" - } + name: "mysql", + key: "-db3", + }, ], - "orms": [ + orms: [ { - "name": "mongoose", - "key": "-orm1" + name: "mongoose", + key: "-orm1", }, { - "name": "typeorm", - "key": "-orm2" - } + name: "typeorm", + key: "-orm2", + }, ], }, { - "name": "frontend", - "frameworks": [ - { - "name": "reactjs", - "key": "reactjs" - } - ] - } - ] + name: "frontend", + frameworks: [ + { + name: "reactjs", + key: "reactjs", + }, + { + name: "html-css-js", + key: "html-css-js", + }, + ], + }, + ], }; diff --git a/templates/frontend/html-css-js/app.js b/templates/frontend/html-css-js/app.js new file mode 100644 index 0000000..e69de29 diff --git a/templates/frontend/html-css-js/index.html b/templates/frontend/html-css-js/index.html new file mode 100644 index 0000000..1ccd1be --- /dev/null +++ b/templates/frontend/html-css-js/index.html @@ -0,0 +1,17 @@ + + + + + + + + StartEase Template 🚀 + + +
+ hero_pic +

Welcome to StartEase! 💖

+
+ + + \ No newline at end of file diff --git a/templates/frontend/html-css-js/public/logo.png b/templates/frontend/html-css-js/public/logo.png new file mode 100644 index 0000000..0efb8cd Binary files /dev/null and b/templates/frontend/html-css-js/public/logo.png differ diff --git a/templates/frontend/html-css-js/style.css b/templates/frontend/html-css-js/style.css new file mode 100644 index 0000000..b25a9ab --- /dev/null +++ b/templates/frontend/html-css-js/style.css @@ -0,0 +1,22 @@ +body{ + margin:0; + padding: 0; + min-height: 100vh; + width: 100%; + display:flex; + place-items: center; + justify-content: center; + align-items: center; + background:rgba(0, 0, 0, 0.268); +} + +.main{ + display: flex; + flex-direction: column; + text-align: center; + color: aliceblue; +} + +.main img{ + height: 12em; +} \ No newline at end of file