From 4f0405df33d7740272738c0717642bbe65907557 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 12:56:06 -0500 Subject: [PATCH 01/17] =?UTF-8?q?[UPD]=20Agregar=20exclusi=C3=B3n=20de=20a?= =?UTF-8?q?rchivos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 6704566..7d00a43 100644 --- a/.gitignore +++ b/.gitignore @@ -68,10 +68,13 @@ typings/ # Yarn Integrity file .yarn-integrity -# dotenv environment variables file +# Dotenv environment variables file .env .env.test +# Backups +*.bak + # parcel-bundler cache (https://parceljs.org/) .cache @@ -102,3 +105,6 @@ dist # TernJS port file .tern-port + +# Files lock +*-lock* \ No newline at end of file From ea2d8e428a5de69988d064624e81cc75dbf8c9d0 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 12:56:59 -0500 Subject: [PATCH 02/17] =?UTF-8?q?[ADD]=20Configuraci=C3=B3n=20de=20depende?= =?UTF-8?q?ncias.=20Close=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..45147aa --- /dev/null +++ b/package.json @@ -0,0 +1,47 @@ +{ + "name": "delorean", + "version": "1.0.0", + "description": "Dubijando a delorean con CSS", + "main": "src/app.mjs", + "scripts": { + "build": "npm run clean && webpack --mode=development --watch", + "buildpro": "npm run clean && webpack --mode=production", + "start": "webpack-cli serve --mode development", + "clean": "rimraf ./dist" + }, + "author": "RSR", + "license": "MIT", + "devDependencies": { + "@babel/core": "^7.13.14", + "@babel/preset-env": "^7.13.12", + "@babel/preset-react": "^7.13.13", + "babel-core": "^6.26.3", + "babel-loader": "^8.2.2", + "babel-preset-env": "^1.7.0", + "babel-preset-react": "^6.24.1", + "clean-webpack-plugin": "^3.0.0", + "css-loader": "^5.2.0", + "dat.gui": "^0.7.7", + "file-loader": "^6.2.0", + "html-webpack-plugin": "^5.3.1", + "image-webpack-loader": "^7.0.1", + "mini-css-extract-plugin": "^1.4.0", + "optimize-css-assets-webpack-plugin": "^5.0.4", + "postcss-loader": "^5.2.0", + "pug": "^3.0.2", + "pug-loader": "https://github.com/pugjs/pug-loader/tarball/master", + "rimraf": "^3.0.2", + "sass": "^1.32.8", + "sass-loader": "^11.0.1", + "style-loader": "^2.0.0", + "terser-webpack-plugin": "^5.1.1", + "uglify-js": "^3.13.3", + "uglifyjs-webpack-plugin": "^1.1.2", + "webpack": "^5.30.0", + "webpack-cli": "^4.6.0" + }, + "dependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2" + } +} From bad2e0964b9adfa74235c3d73e12d11220236176 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 13:01:08 -0500 Subject: [PATCH 03/17] =?UTF-8?q?[ADD]=20Configuraci=C3=B3n=20de=20Babel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..a9ccc6d --- /dev/null +++ b/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "10" + } + } + ], + "@babel/preset-react" + ], + "plugins": ["@babel/plugin-proposal-class-properties"] +} \ No newline at end of file From cb441a64a6b83cc607dfc17e01fd8f9b3fab6a5e Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 13:03:42 -0500 Subject: [PATCH 04/17] =?UTF-8?q?[ADD]=20Configuraci=C3=B3n=20de=20Webpack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webpack.config.js | 169 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 webpack.config.js diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..222c8c3 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,169 @@ +const path = require('path'); + +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +const title = 'Base Draw CSS'; +const publicPath = 'draw/css/'; +const portServer = 9000; + +module.exports = function (env) { + var isProd = false; + + if (env != null && env.production) { + isProd = true; + } + + var configUseCssDev = ["style-loader", "css-loader", 'sass-loader']; + var configUseCssProd = [ + { + loader: MiniCssExtractPlugin.loader, + options: { + hmr: process.env.NODE_ENV === 'development', + reloadAll: true, + }, + }, + { + loader: "css-loader", + options: { + sourceMap: true + } + }, + "sass-loader" + ]; + + var configUseCss = isProd ? configUseCssProd : configUseCssDev; + + return { + context: path.resolve(__dirname, "src"), + entry: { + app: './app.mjs' + }, + output: { + path: path.resolve(__dirname, 'dist'), + filename: './[name].[hash].js' + }, + devServer: { + contentBase: path.join(__dirname, 'dist'), + compress: true, + publicPath: '/'+publicPath, + open: { + app: ['chrome', '--incognito', '--other-flag'] + }, + openPage: publicPath, + port: portServer + }, + optimization: { + splitChunks: { + cacheGroups: { + styles: { + name: 'styles', + test: /\.css$/, + chunks: 'all', + enforce: true, + }, + }, + }, + minimizer: [ + new UglifyJsPlugin({ + test: /\.js(\?.*)?$/i, + cache: true, + parallel: true, + sourceMap: false + }) + ] + }, + watch: true, + watchOptions: { + ignored: /node_modules/, + }, + externals: { + gui: ['https://cdn.skypack.dev/dat.gui', 'GUI'], + }, + plugins: [ + new CleanWebpackPlugin({ + cleanAfterEveryBuildPatterns: ['dist'] + }), + new HtmlWebpackPlugin({ + template: './template/index.pug', + title: title, + filename: 'index.html', + minify: true, + hash: true + }), + new MiniCssExtractPlugin({ + filename: isProd ? '[name].[hash:8].css' : '[name].css', + chunkFilename: isProd ? '[id].[hash:8].css' : '[id].css', + }), + new OptimizeCssAssetsPlugin({ + assetNameRegExp: /\.css$/g, + cssProcessor: require('cssnano'), + cssProcessorPluginOptions: { + preset: ['default', { + discardComments: { + removeAll: true + } + }], + }, + canPrint: true + }), + new webpack.HotModuleReplacementPlugin() + ], + module: { + rules: [ + { + test: /\.m?js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'], + plugins: ['@babel/plugin-proposal-object-rest-spread'] + } + } + }, + { + test: /\.pug$/i, + use: ['pug-loader'] + }, + { + test: /\.(sa|sc|c)ss$/i, + use: configUseCss + }, + { + test: /\.(gif|png|jpe?g|svg)$/i, + use: [ + 'file-loader', + { + loader: 'image-webpack-loader', + options: { + mozjpeg: { + progressive: true, + quality: 65 + }, + optipng: { + enabled: false, + }, + pngquant: { + quality: [0.50, 0.80], + speed: 10, + strip: true + }, + gifsicle: { + interlaced: false, + }, + webp: { + quality: 50 + } + } + }, + ], + }, + ], + } + } +} \ No newline at end of file From 94fdb97488effa1a83af57fd64357e2d1257a387 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:47:18 -0500 Subject: [PATCH 05/17] [ADD] Componente index --- src/template/index.pug | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/template/index.pug diff --git a/src/template/index.pug b/src/template/index.pug new file mode 100644 index 0000000..366f858 --- /dev/null +++ b/src/template/index.pug @@ -0,0 +1,8 @@ +doctype 5 + +html(lang="es") + head + include includes/head.pug + body + include ../modules/draw.pug + include includes/foot.pug From df678e98765dc6371b0c8874341cdb3532738ed7 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:47:36 -0500 Subject: [PATCH 06/17] [ADD] Componente header --- src/template/includes/head.pug | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/template/includes/head.pug diff --git a/src/template/includes/head.pug b/src/template/includes/head.pug new file mode 100644 index 0000000..6fb8637 --- /dev/null +++ b/src/template/includes/head.pug @@ -0,0 +1,3 @@ +meta(charset='UTF-8') +meta(name='viewport' content='width=device-width, initial-scale=1.0') +title= htmlWebpackPlugin.options.title From 1008c8f32daf2d22bdf5f86c2d804f78c8a88b55 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:47:51 -0500 Subject: [PATCH 07/17] [ADD] Componente footer --- src/template/includes/foot.pug | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/template/includes/foot.pug diff --git a/src/template/includes/foot.pug b/src/template/includes/foot.pug new file mode 100644 index 0000000..210c129 --- /dev/null +++ b/src/template/includes/foot.pug @@ -0,0 +1 @@ +p © Copyright RSR 2021 \ No newline at end of file From fdeea69aed00e45ca5ae545c3a3385310f2629b3 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:48:09 -0500 Subject: [PATCH 08/17] [ADD] Componente mixins --- src/tools/_mixins.pug | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/tools/_mixins.pug diff --git a/src/tools/_mixins.pug b/src/tools/_mixins.pug new file mode 100644 index 0000000..83ef51b --- /dev/null +++ b/src/tools/_mixins.pug @@ -0,0 +1,9 @@ +mixin nestedComponents(class_name, elements, sons) + each _, i in Array(elements) + div(class=`${class_name} ${class_name}--${i+1}`) + if sons + each son in sons + div(class=`${son}`) + +mixin components(class_name, elements) + +nestedComponents(class_name, elements, null) From d4f3ca0809b8f867f5e43265a912b44b6ffa9d4f Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:48:34 -0500 Subject: [PATCH 09/17] [ADD] Componente draw. Close #7 --- src/modules/draw.pug | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/modules/draw.pug diff --git a/src/modules/draw.pug b/src/modules/draw.pug new file mode 100644 index 0000000..e69de29 From 29727044834fe17badf42b8620b069d9faaa9f44 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:52:33 -0500 Subject: [PATCH 10/17] [ADD] Componente common --- src/styles/common.sass | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/styles/common.sass diff --git a/src/styles/common.sass b/src/styles/common.sass new file mode 100644 index 0000000..9cc7c59 --- /dev/null +++ b/src/styles/common.sass @@ -0,0 +1,10 @@ +* + box-sizing: border-box + +html + height: 100% + display: flex + +body + background: #f2f2f2 + margin: auto From 68f863884828d70c5817c23ddecd0faf3d7674d9 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:52:49 -0500 Subject: [PATCH 11/17] [ADD] Componente colors --- src/styles/tools/_colors.sass | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/styles/tools/_colors.sass diff --git a/src/styles/tools/_colors.sass b/src/styles/tools/_colors.sass new file mode 100644 index 0000000..bc1441f --- /dev/null +++ b/src/styles/tools/_colors.sass @@ -0,0 +1,4 @@ +@charset "utf-8" + +@import 'functions' +@import 'variables' From 233c41a1cbe93f5ca6b23460b9b598c5880b3458 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:53:08 -0500 Subject: [PATCH 12/17] [ADD] Componente functions --- src/styles/tools/_functions.sass | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/styles/tools/_functions.sass diff --git a/src/styles/tools/_functions.sass b/src/styles/tools/_functions.sass new file mode 100644 index 0000000..1866e32 --- /dev/null +++ b/src/styles/tools/_functions.sass @@ -0,0 +1,17 @@ +@charset "utf-8" + +@use 'sass:map' + + + +%position + position: absolute + +%position-content + @extend %position + content: "" + +@function mapGet($map, $list...) + @each $key in $list + $map: map-get($map, $key) + @return $map \ No newline at end of file From 8f26166bca3aca3fd91e496a2498f288a945cb01 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:53:24 -0500 Subject: [PATCH 13/17] [ADD] Componente mixins --- src/styles/tools/_mixins.sass | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/styles/tools/_mixins.sass diff --git a/src/styles/tools/_mixins.sass b/src/styles/tools/_mixins.sass new file mode 100644 index 0000000..0121d34 --- /dev/null +++ b/src/styles/tools/_mixins.sass @@ -0,0 +1,34 @@ +@charset "utf-8" + +@use 'sass:map' + + + +@mixin position() + position: absolute + +@mixin location($top, $left, $width, $height) + @extend %position + top: $top + left: $left + height: $height + width: $width + +@mixin locationTopLeft($top, $left) + top: $top + left: $left + +@mixin locationBottom($bottom, $left, $width, $height) + @extend %position + bottom: $bottom + left: $left + height: $height + width: $width + +@mixin locationColor($top, $left, $width, $height, $color) + @include location($top, $left, $width, $height) + background: $color + +@mixin locationColorCircle($top, $left, $width, $height, $color) + @include locationColor($top, $left, $width, $height, $color) + border-radius: 50% From 9b17090fb0943db408fb01b104819694b624c64b Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:53:50 -0500 Subject: [PATCH 14/17] [ADD] Componente variables. Close #8 --- src/styles/tools/_variables.sass | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/styles/tools/_variables.sass diff --git a/src/styles/tools/_variables.sass b/src/styles/tools/_variables.sass new file mode 100644 index 0000000..d8b0ca1 --- /dev/null +++ b/src/styles/tools/_variables.sass @@ -0,0 +1,5 @@ +@charset "utf-8" + +// General properties +$layer: (one: 1, two: 2, three: 3) +$map: () \ No newline at end of file From 22b149306a2407110dc0a8c55112a1df9459c28c Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:59:12 -0500 Subject: [PATCH 15/17] [ADD] Archivo app --- src/app.mjs | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/app.mjs diff --git a/src/app.mjs b/src/app.mjs new file mode 100644 index 0000000..cb40276 --- /dev/null +++ b/src/app.mjs @@ -0,0 +1,43 @@ +"use strict"; + +import './styles/common.sass'; + +import * as dat from 'dat.gui'; + +const CONFIG = { + 'rotate-x': 0, + 'rotate-y': 0, +} + +const BOUNDS = { + 'rotate-x': [-360, 360, 1], + 'rotate-y': [-360, 360, 1], +} + +const CONTROLLER = new dat.GUI() + +const UPDATE = () => { + for (const KEY of Object.keys(CONFIG)) { + document.documentElement.style.setProperty(`--${KEY}`, CONFIG[KEY]) + } +} + +const digest = (CONFIG_OBJECT, BOUNDS_OBJECT, FOLDER) => { + for (const category in BOUNDS_OBJECT) { + if (Array.isArray(BOUNDS_OBJECT[category])) { + FOLDER.add( + CONFIG_OBJECT, + category, + BOUNDS_OBJECT[category][0], + BOUNDS_OBJECT[category][1], + BOUNDS_OBJECT[category][2] ? BOUNDS_OBJECT[category][2] : 1 + ).onChange(UPDATE) + } else { + const NEW_FOLDER = FOLDER + ? FOLDER.addFolder(category) + : GUI.addFolder(category) + digest(CONFIG_OBJECT[category], BOUNDS_OBJECT[category], NEW_FOLDER) + } + } +} +digest(CONFIG, BOUNDS, CONTROLLER) From f8295cc1ccf44f91bbf511f6e5cb7ec0abc42507 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:59:28 -0500 Subject: [PATCH 16/17] [ADD] Carpeta images --- src/images/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/images/.gitkeep diff --git a/src/images/.gitkeep b/src/images/.gitkeep new file mode 100644 index 0000000..e69de29 From 5e2c2dd2a0b8bb55c061ba543c70c3aa72e1e711 Mon Sep 17 00:00:00 2001 From: Ruben Salgado Ramirez Date: Mon, 5 Apr 2021 20:59:53 -0500 Subject: [PATCH 17/17] [ADD] Carpeta styles/components. Close #11 --- src/styles/components/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/styles/components/.gitkeep diff --git a/src/styles/components/.gitkeep b/src/styles/components/.gitkeep new file mode 100644 index 0000000..e69de29