diff --git a/.gitignore b/.gitignore index 91c9da344..222cb8a31 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,5 @@ # Build directories /bin -/docker/bin \ No newline at end of file +/docker/bin +/website/dist \ No newline at end of file diff --git a/website/Dockerfile b/website/Dockerfile new file mode 100644 index 000000000..142d63fd0 --- /dev/null +++ b/website/Dockerfile @@ -0,0 +1,29 @@ +FROM ubuntu:22.04 +LABEL MAINTAINER="Niraj Tolia" + +ARG DEBIAN_FRONTEND=noninteractive + +WORKDIR /usr/src/ + +RUN apt-get -y update && apt-get -y install curl zip make git emacs \ + && curl -fsSL https://deb.nodesource.com/setup_current.x | bash - \ + && apt-get -y install nodejs \ + && apt-get autoclean \ + && npm install -g gulp \ + && corepack enable \ + && node --version \ + && npm --version \ + && yarn --version \ + && gulp --version + +RUN curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" && \ + unzip awscliv2.zip && /bin/bash /usr/src/aws/install + +WORKDIR /usr/src +COPY package.json yarn.lock ./ +RUN yarn install \ + && yarn cache clean \ + && rm -f package.json yarn.lock +ENV PATH /usr/src/node_modules/.bin:$PATH + +WORKDIR /usr/src/website diff --git a/website/Makefile b/website/Makefile new file mode 100644 index 000000000..117b061c6 --- /dev/null +++ b/website/Makefile @@ -0,0 +1,25 @@ +.PHONY: buildimage dev shell build publish sync + +buildimage: + docker build -t "corso/website:latest" . + +dev: + docker run --rm -it -p 3000:3000 \ + -v ${PWD}:/usr/src/website corso/website gulp + +shell: + docker run --rm -it -p 3000:3000 \ + -v ${PWD}:/usr/src/website corso/website /bin/bash + +build: + docker run --rm -it \ + -v ${PWD}:/usr/src/website corso/website gulp build + +publish: build + docker run -e AWS_ACCESS_KEY_ID -e AWS_SECRET_ACCESS_KEY \ + -e AWS_SESSION_TOKEN --rm -v ${PWD}:/usr/src/website corso/website \ + make sync + +sync: + aws s3 sync /usr/src/website/dist/ s3://corsobackup.io/ --exclude ".git/*" --delete + aws cloudfront create-invalidation --distribution-id ESFSMEIU1TDEN --paths "/*" diff --git a/website/gulpfile.js b/website/gulpfile.js new file mode 100644 index 000000000..f72760567 --- /dev/null +++ b/website/gulpfile.js @@ -0,0 +1,247 @@ +const browsersync = require('browser-sync').create(); +const cached = require('gulp-cached'); +const cleanCSS = require('clean-css'); +const cssnano = require('gulp-cssnano'); +const del = require('del'); +const fileinclude = require('gulp-file-include'); +const gulp = require('gulp'); +const gulpif = require('gulp-if'); +const npmdist = require('gulp-npm-dist'); +const replace = require('gulp-replace'); +const uglify = require('gulp-uglify'); +const useref = require('gulp-useref-plus'); +const rename = require('gulp-rename'); +const sass = require('gulp-sass')(require('sass')); +const sourcemaps = require("gulp-sourcemaps"); +const postcss = require('gulp-postcss'); +const autoprefixer = require("autoprefixer"); +const tailwindcss = require('tailwindcss'); + + +const paths = { + config: { + tailwind: "./tailwind.config.js", + }, + base: { + base: { + dir: './' + }, + node: { + dir: '../node_modules' + }, + packageLock: { + files: './package-lock.json' + } + }, + dist: { + base: { + dir: './dist', + files: './dist/**/*' + }, + libs: { + dir: './dist/assets/libs' + }, + css: { + dir: './dist/assets/css', + }, + js: { + dir: './dist/assets/js', + files: './dist/assets/js/pages', + }, + }, + src: { + base: { + dir: './src', + files: './src/**/*' + }, + css: { + dir: './src/assets/css', + files: './src/assets/css/**/*' + }, + html: { + dir: './src', + files: './src/**/*.html', + }, + img: { + dir: './src/assets/images', + files: './src/assets/images/**/*', + }, + js: { + dir: './src/assets/js', + pages: './src/assets/js/pages', + files: './src/assets/js/pages/*.js', + main: './src/assets/js/*.js', + }, + partials: { + dir: './src/partials', + files: './src/partials/**/*' + }, + scss: { + dir: './src/assets/scss', + files: './src/assets/scss/**/*', + main: './src/assets/scss/*.scss', + icon: './src/assets/scss/icons.scss' + } + } +}; + +gulp.task('browsersync', function (callback) { + browsersync.init({ + server: { + baseDir: [paths.dist.base.dir, paths.src.base.dir, paths.base.base.dir] + }, + }); + callback(); +}); + +gulp.task('browsersyncReload', function (callback) { + browsersync.reload(); + callback(); +}); + +gulp.task('watch', function () { + gulp.watch([paths.src.scss.files, '!' + paths.src.scss.icon], gulp.series('scss', 'browsersyncReload')); + gulp.watch(paths.src.scss.icon, gulp.series('icons', 'browsersyncReload')); + gulp.watch([paths.src.js.dir], gulp.series('js', 'browsersyncReload')); + gulp.watch([paths.src.js.pages], gulp.series('jsPages', 'browsersyncReload')); + gulp.watch([paths.src.html.files, paths.src.partials.files], gulp.series(['fileinclude', 'scss'], 'browsersyncReload')); +}); + +gulp.task('js', function () { + return gulp + .src(paths.src.js.main) + // .pipe(uglify()) + .pipe(gulp.dest(paths.dist.js.dir)); +}); + +gulp.task('jsPages', function () { + return gulp + .src(paths.src.js.files) + // .pipe(uglify()) + .pipe(gulp.dest(paths.dist.js.files)); +}); + +const cssOptions = { + compatibility: "*", // (default) - Internet Explorer 10+ compatibility mode + inline: ["all"], // enables all inlining, same as ['local', 'remote'] + level: 2, // Optimization levels. The level option can be either 0, 1 (default), or 2, e.g. +}; + + +gulp.task('scss', function () { + // generate tailwind + return gulp + .src([paths.src.scss.main, '!' + paths.src.scss.icon]) + .pipe(sourcemaps.init()) + .pipe(sass().on('error', sass.logError)) + + .pipe(postcss([ + tailwindcss(paths.config.tailwind), + autoprefixer() + ])) + .pipe(gulp.dest(paths.dist.css.dir)) + // .pipe(cssnano({ svgo: false })) + .on("data", function (file) { + const buferFile = new cleanCSS(cssOptions).minify(file.contents); + return (file.contents = Buffer.from(buferFile.styles)); + }) + .pipe( + rename({ + suffix: ".min" + }) + ) + .pipe(sourcemaps.write("./")) + .pipe(gulp.dest(paths.dist.css.dir)); +}); + + +gulp.task('icons', function () { + return gulp + .src(paths.src.scss.icon) + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest(paths.dist.css.dir)) + .on("data", function (file) { + const buferFile = new cleanCSS(cssOptions).minify(file.contents); + return (file.contents = Buffer.from(buferFile.styles)); + }) + .pipe( + rename({ + suffix: ".min" + }) + ) + .pipe(gulp.dest(paths.dist.css.dir)); +}); + +gulp.task('fileinclude', function () { + return gulp + .src([ + paths.src.html.files, + '!' + paths.dist.base.files, + '!' + paths.src.partials.files + ]) + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file', + indent: true, + })) + .pipe(cached()) + .pipe(gulp.dest(paths.dist.base.dir)); +}); + +gulp.task('clean:packageLock', function (callback) { + del.sync(paths.base.packageLock.files); + callback(); +}); + +gulp.task('clean:dist', function (callback) { + del.sync(paths.dist.base.dir); + callback(); +}); + +gulp.task('copy:all', function () { + return gulp + .src([ + paths.src.base.files, + '!' + paths.src.partials.dir, '!' + paths.src.partials.files, + '!' + paths.src.scss.dir, '!' + paths.src.scss.files, + '!' + paths.src.js.dir, '!' + paths.src.js.files, '!' + paths.src.js.main, + '!' + paths.src.html.files, + ]) + .pipe(gulp.dest(paths.dist.base.dir)); +}); + +gulp.task('copy:libs', function () { + return gulp + .src(npmdist({ nodeModulesPath: '../' }), { base: paths.base.node.dir }) + .pipe(rename(function (path) { + path.dirname = path.dirname.replace(/\/dist/, '').replace(/\\dist/, ''); + })) + .pipe(gulp.dest(paths.dist.libs.dir)); +}); + +gulp.task('html', function () { + return gulp + .src([ + paths.src.html.files, + '!' + paths.dist.base.files, + '!' + paths.src.partials.files + ]) + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file', + indent: true, + })) + .pipe(replace(/href="(.{0,10})node_modules/g, 'href="$1assets/libs')) + .pipe(replace(/src="(.{0,10})node_modules/g, 'src="$1assets/libs')) + .pipe(useref()) + .pipe(cached()) + .pipe(gulpif('*.js', uglify())) + .pipe(gulpif('*.css', cssnano({ svgo: false }))) + .pipe(gulp.dest(paths.dist.base.dir)); +}); + +// Default(Producation) Task +gulp.task('default', gulp.series(gulp.parallel('clean:packageLock', 'clean:dist', 'copy:all', 'copy:libs', 'fileinclude', 'scss', 'icons', 'js', 'jsPages', 'html'), gulp.parallel('browsersync', 'watch'))); + +// Build(Development) Task +gulp.task('build', gulp.series('clean:packageLock', 'clean:dist', 'copy:all', 'copy:libs', 'fileinclude', 'scss', 'icons', 'js', 'jsPages', 'html')); diff --git a/website/package.json b/website/package.json new file mode 100644 index 000000000..3f27daa47 --- /dev/null +++ b/website/package.json @@ -0,0 +1,52 @@ +{ + "private": true, + "name": "techwind", + "version": "1.4.0", + "description": "Tailwind CSS Saas & Software Multipurpose Template", + "main": "gulpfile.js", + "author": "ShreeThemes", + "browserslist": [ + "last 2 version", + "> 2%" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "devDependencies": { + "autoprefixer": "^10.4.2", + "browser-sync": "^2.26.7", + "clean-css": "^5.3.1", + "del": "4.1.1", + "gulp": "^4.0.2", + "gulp-cached": "1.1.1", + "gulp-cssnano": "2.1.3", + "gulp-file-include": "2.0.1", + "gulp-if": "^3.0.0", + "gulp-npm-dist": "^1.0.3", + "gulp-postcss": "^9.0.1", + "gulp-rename": "^1.4.0", + "gulp-replace": "1.0.0", + "gulp-sass": "^5.1.0", + "gulp-sourcemaps": "^2.6.5", + "gulp-uglify": "3.0.2", + "gulp-useref-plus": "0.0.8", + "postcss": "^8.4.14", + "sass": "1.32.12", + "tailwindcss": "^3.1.8" + }, + "dependencies": { + "@iconscout/unicons": "^4.0.1", + "@midzer/tobii": "^2.3.3", + "animate.css": "^4.1.1", + "choices.js": "^10.1.0", + "feather-icons": "^4.28.0", + "gumshoejs": "^5.1.2", + "jarallax": "^2.0.3", + "js-datepicker": "^5.18.0", + "shufflejs": "^6.0.0", + "swiper": "4.5.0", + "tiny-slider": "^2.9.4", + "tobii": "^2.0.0-alpha", + "wow.js": "^1.2.2" + } +} diff --git a/website/src/_.html b/website/src/_.html new file mode 100644 index 000000000..3dbba4800 --- /dev/null +++ b/website/src/_.html @@ -0,0 +1,62 @@ +@@include("partials/main.html") +
+ @@include("partials/title-meta.html", {"title": "Techwind"}) + + + + + @@include("partials/head-css.html") + + + @@include("partials/body.html") + + + + + +Launch your campaign and benefit from our expertise + on designing and managing conversion centered Tailwind CSS v3.x html page.
+ +No credit card required. Free 14-days trial
+