create-tateru-cli 0.1.0

package/templates/template-gulp-vanilla/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "tateru-cli-gulp-vanilla",
+  "version": "0.0.0",
+  "description": "Tateru CLI Website Starter",
+  "scripts": {
+    "lint": "eslint . --ext .js --fix",
+    "tateru": "tateru-cli tateru.config.json",
+    "build": "gulp build",
+    "build:prod": "gulp prod",
+    "watch": "gulp",
+    "clean:dist": "gulp clean"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:danielsitek/tateru-starter.git"
+  },
+  "author": "Daniel Sitek <dan.sitek@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/danielsitek/tateru-starter/issues"
+  },
+  "homepage": "https://github.com/danielsitek/tateru-starter#readme",
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/preset-env": "^7.16.11",
+    "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.3",
+    "browser-sync": "^2.27.10",
+    "cssnano": "^5.0.17",
+    "del": "^6.0.0",
+    "eslint": "^8.9.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.4.1",
+    "fancy-log": "^2.0.0",
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^9.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "postcss": "^8.4.6",
+    "sass": "^1.49.7",
+    "tateru-cli": "^1.5.0",
+    "webpack": "^5.68.0"
+  },
+  "dependencies": {},
+  "private": true,
+  "engines": {
+    "node": ">=14"
+  }
+}

package/templates/template-gulp-vanilla/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};

package/templates/template-gulp-vanilla/src/assets/js/homepage.js

@@ -0,0 +1 @@
+console.log('Hello there!');

package/templates/template-gulp-vanilla/src/assets/js/services/analyticsServices.js

@@ -0,0 +1,18 @@
+
+const analyticsEvent = (event, eventContent = undefined) => {
+  if (!gtag) {
+    return;
+  }
+
+  gtag('event', event, eventContent);
+}
+
+export class AnalyticsServices {
+  static customEvent() {
+    analyticsEvent('custom_event_name', {
+      'event_category': 'custom_event_category',
+      'event_label': `Custom Event Label`,
+      'value': 1,
+    });
+  }
+}

package/templates/template-gulp-vanilla/src/assets/js/utils/asyncForLoop.js

@@ -0,0 +1,21 @@
+/**
+ * Create truly async loop over the collection of items.
+ * @param {array} collection Array of items.
+ * @param {function} cb Callback function.
+ */
+
+export const asyncForLoop = async (collection, cb) => {
+  const _this = this;
+  for (let item of collection) {
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        try {
+          cb.call(_this, item);
+          resolve();
+        } catch (e) {
+          reject(e);
+        }
+      }, 0);
+    });
+  }
+};

package/templates/template-gulp-vanilla/src/assets/js/utils/sleep.js

@@ -0,0 +1,7 @@
+/**
+ * Simple promise wait.
+ *
+ * @param time [number]
+ */
+
+export const sleep = (time) => new Promise(resolve => setTimeout(resolve, time));

package/templates/template-gulp-vanilla/src/assets/scss/main.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import "src/variables";
+@import "src/functions";
+@import "src/mixins";
+@import "src/core";

package/templates/template-gulp-vanilla/src/assets/scss/src/_core.scss

@@ -0,0 +1,63 @@
+// Core Styles
+@use "sass:math";
+
+html {
+    font-size: ($base-font-size * 1px);
+    line-height: math.div(28, $base-font-size);
+    font-family: "Georgia", serif;
+    font-weight: 400;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    color: #808080;
+    text-size-adjust: 100%;
+    scroll-behavior: smooth;
+
+    *,
+    *:before,
+    *:after {
+        box-sizing: inherit;
+    }
+}
+
+body {
+    padding: 0;
+    margin: 0;
+}
+
+a {
+    color: $color-primary;
+}
+
+strong {
+    font-weight: 700;
+}
+
+svg {
+    display: block;
+}
+
+h1, h2, h3, h4 {
+    font-family: "Montserrat";
+    font-weight: 700;
+    color: #cfa33a;
+    text-transform: uppercase;
+    line-height: 1.1;
+    margin: 0;
+    margin-bottom: rem-calc($base-font-size);
+}
+
+h1 {
+    font-size: rem-calc(70);
+}
+
+h2 {
+    font-size: rem-calc(36);
+}
+
+h3 {
+    font-size: rem-calc(24);
+    font-weight: 500;
+    color: #324742;
+    margin: 0;
+}

package/templates/template-gulp-vanilla/src/assets/scss/src/_functions.scss

@@ -0,0 +1,21 @@
+// Functions
+@use "sass:math";
+
+@function rem-calc($num, $base: $base-font-size) {
+    @return math.div($num, $base) * 1rem;
+}
+
+@function row-height($num, $base: $base-font-size, $base-row: $base-line-height) {
+    @if type-of($num) == "string" {
+        @error "Parameter $num must be a number.";
+    }
+
+    @if $num == 0 {
+        @return $num;
+    }
+
+    $row-height: rem-calc($base-row, $base);
+    $result: $num * $row-height;
+
+    @return $result;
+}

package/templates/template-gulp-vanilla/src/assets/scss/src/_mixins.scss

@@ -0,0 +1 @@
+// Mixins

package/templates/template-gulp-vanilla/src/assets/scss/src/_variables.scss

@@ -0,0 +1,13 @@
+// Variables
+
+$base-font-size: 20;
+
+$base-line-height: 24;
+
+// Colors
+$color-white: #fff;
+
+$color-primary: #cfa33a;
+
+$color-facebook: #3c5a99;
+$color-instagram: #cb397b;

package/templates/template-gulp-vanilla/src/assets/svg/heart-solid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-icon="heart" data-prefix="fas" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
+</svg>

package/templates/template-gulp-vanilla/src/assets/svg/source.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M20.59 12l-3.3-3.3a1 1 0 111.42-1.4l4 4a1 1 0 010 1.4l-4 4a1 1 0 01-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 01-1.42 1.4l-4-4a1 1 0 010-1.4l4-4A1 1 0 016.7 8.7L3.4 12zm7.56 8.24a1 1 0 01-1.94-.48l4-16a1 1 0 111.94.48l-4 16z" />
+</svg>

package/templates/template-gulp-vanilla/src/translations/cs.json

@@ -0,0 +1,8 @@
+{
+  "index": {
+    "header": "Tateru CLI Starter Kit"
+  },
+  "homepage": {
+    "title": "Tateru CLI Starter Kit"
+  }
+}

package/templates/template-gulp-vanilla/src/twig/layouts/layout.html.twig

@@ -0,0 +1,150 @@
+{%- set versionID = "now"|date("mdYHms") -%}
+{%- set version_suffix = '?v=' ~ versionID -%}
+
+{%- set isHomepage = false -%}
+{%- if page == 'index' -%}
+    {%- set isHomepage = true -%}
+{%- endif -%}
+
+{%- set domainHref = '' -%}
+{%- if not isHomepage -%}
+    {%- set domainHref = href[page][1:] -%}
+{%- endif -%}
+
+<!DOCTYPE html>
+<html class="no-js" lang="{{- lang -}}" itemscope itemtype="http://schema.org/WebPage">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <title>{{- title -}}</title>
+    <meta name="description" content="{{- description -}}">
+    {%- if keywords is not empty -%}
+    <meta name="keywords" content="{{- keywords|join(', ') -}}">
+    {%- endif -%}
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="robots" content="index,follow">
+    <meta name="author" content="{{- owner -}}">
+    <link type="text/plain" rel="author" href="{{- domain -}}humans.txt" />
+    <meta name="creator" content="Daniel Sitek, me/at/danielsitek/dot/cz">
+    <link rel="canonical" href="{{- domain ~ domainHref -}}" />
+
+    {###############################################}
+    {# Open Graph data #}
+    {%- if type is not empty -%}
+    <meta property="og:type" content="{{- type -}}" />
+    {%- endif -%}
+    {%- if title is not empty -%}
+    <meta property="og:title" content="{{- title -}}" />
+    {%- endif -%}
+    {%- if domain is defined and not empty -%}
+    <meta property="og:url" content="{{- domain ~ domainHref -}}" />
+    {%- endif -%}
+    <meta property="og:locale" content="{{- langCode -}}" />
+    {%- if description is not empty -%}
+    <meta property="og:description" content="{{- description -}}" />
+    {%- endif -%}
+    {%- if images is not empty -%}
+    {%- for image in images -%}
+    <meta property="og:image" content="{{- domain ~ image -}}" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    {%- endfor -%}
+    {%- endif -%}
+    {%- if sitename is not empty -%}
+    <meta property="og:site_name" content="{{- sitename -}}" />
+    {%- endif -%}
+    {%- if facebook.appID is not empty -%}
+    <meta property="fb:app_id" content="{{- facebook.appID -}}" />
+    {%- endif -%}
+    {%- if facebook.admins is not empty -%}
+    <meta property="fb:admins" content="{{- facebook.admins -}}" />
+    {%- endif -%}
+
+    {###############################################}
+    {# Twitter Card data #}
+    {%- if twitter.card is not empty -%}
+    <meta name="twitter:card" content="{{- twitter.card -}}">
+    {%- endif -%}
+    {%- if domain is defined and not empty -%}
+    <meta name="twitter:domain" content="{{- domain -}}">
+    {%- endif -%}
+    {%- if twitter.site is not empty -%}
+    <meta name="twitter:site" content="{{- twitter.site -}}">
+    {%- endif -%}
+    {%- if twitter.siteID is not empty -%}
+    <meta name="twitter:site:id" content="{{- twitter.siteID -}}">
+    {%- endif -%}
+    {%- if title is not empty -%}
+    <meta name="twitter:title" content="{{- title -}}">
+    {%- endif -%}
+    {%- if description is not empty -%}
+    <meta name="twitter:description" content="{{- description -}}">
+    {%- endif -%}
+    {%- if twitter.creator is not empty -%}
+    <meta name="twitter:creator" content="{{- twitter.creator -}}">
+    {%- endif -%}
+    {%- if twitter.creatorID is not empty -%}
+    <meta name="twitter:creator:id" content="{{- twitter.creatorID -}}">
+    {%- endif -%}
+    {%- if twitter.image is not empty -%}
+    <meta name="twitter:image:src" content="{{- domain ~ twitter.image -}}">
+    <meta name="twitter:image:width" content="1240">
+    <meta name="twitter:image:height" content="700">
+    {%- elseif images is not empty -%}
+    <meta name="twitter:image:src" content="{{- domain ~ images[0] -}}">
+    <meta name="twitter:image:width" content="1240">
+    <meta name="twitter:image:height" content="700">
+    {%- endif -%}
+
+    {###############################################}
+    {# Google Authorship and Publisher Markup #}
+    {%- if google.author is not empty -%}
+    <link rel="author" href="{{- google.author -}}"/>
+    {%- endif -%}
+    {%- if google.publisher is not empty -%}
+    <link rel="publisher" href="{{- google.publisher -}}"/>
+    {%- endif -%}
+
+    {###############################################}
+    {# Schema.org markup for Google+ #}
+    {%- if title is not empty -%}
+    <meta itemprop="name" content="{{- title -}}">
+    {%- endif -%}
+    {%- if description is not empty -%}
+    <meta itemprop="description" content="{{- description -}}">
+    {%- endif -%}
+    {%- if images is not empty -%}
+    <meta itemprop="image" content="{{- domain ~ images[0] -}}">
+    {%- endif -%}
+    {###############################################}
+
+    <link rel="apple-touch-icon" sizes="180x180" href="{{- app.root -}}assets/favicon/apple-touch-icon.png{{- version_suffix -}}">
+    <link rel="icon" type="image/png" href="{{- app.root -}}assets/favicon/favicon-32x32.png{{- version_suffix -}}" sizes="32x32">
+    <link rel="icon" type="image/png" href="{{- app.root -}}assets/favicon/favicon-16x16.png{{- version_suffix -}}" sizes="16x16">
+    <link rel="shortcut icon" href="{{- app.root -}}assets/favicon/favicon.ico{{- version_suffix -}}">
+    <link rel="manifest" href="{{- app.root -}}site.webmanifest{{- version_suffix -}}" crossorigin="use-credentials">
+    <meta name="theme-color" content="#ffffff">
+
+    {%- if app.environment is defined and app.environment == 'dev' -%}
+    <link rel="stylesheet" href="{{- app.root -}}assets/css/main.css{{- version_suffix -}}">
+    {%- else -%}
+    <link rel="stylesheet" href="{{- app.root -}}assets/css/main.min.css{{- version_suffix -}}">
+    {%- endif -%}
+</head>
+<body data-feedly-mini="no">
+    {%- if app.environment is defined and app.environment == 'prod' -%}
+    {%- include "Main::include/google-tag-manager.html.twig" ignore missing -%}
+    {%- endif -%}
+
+    {%- block body -%}{%- endblock -%}
+
+    {%- block footer -%}
+    {%- include "Main::sections/section-footer.html.twig" ignore missing -%}
+    {%- endblock -%}
+
+    {%- block javascripts -%}{%- endblock -%}
+</body>
+</html>

package/templates/template-gulp-vanilla/src/twig/views/_error-404.html.twig

@@ -0,0 +1,16 @@
+{% extends "Main::layouts/layout.html.twig" %}
+
+{%- block title -%}404 - stránka nenalezena{%- endblock -%}
+
+{% block page_body %}
+
+    <div class="text-center page-row text-white title">
+        <div class="row">
+            <div class="large-10 medium-10 push-1 columns">
+                <h1 class="text-white">404 - stránka nenalezena</h1>
+                <p>Požadovaná stránka nebyla nalezena :(</p>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}

package/templates/template-gulp-vanilla/src/twig/views/homepage.html.twig

@@ -0,0 +1,21 @@
+{% extends "Main::layouts/layout.html.twig" %}
+
+{% block body %}
+    <div>
+        <h1>{{- title -}}</h1>
+        <h2>{{- app.environment }} / {{ trans('homepage.title') }}</h2>
+    </div>
+{% endblock %}
+
+
+{% block footer %}
+    <footer class="page-footer text-right">
+        <div>Created by Tateru-CLI</div>
+    </footer>
+    {{ parent() }}
+{% endblock %}
+
+
+{%- block javascripts -%}
+    <script src="{{- app.root -}}assets/js/homepage.bundle.js{{- version_suffix -}}"></script>
+{%- endblock -%}

package/templates/template-gulp-vanilla/src/twig/views/humans.txt.twig

@@ -0,0 +1,21 @@
+/* TEAM */
+
+    Front-End Dev: Daniel Sitek
+    Twitter: @DanielSitek
+    Location: Ceske Budejovice, Czech Republic
+
+/* SITE */
+
+    Site Name: {{ title }}
+    Site URL: {{ domain }} {{- '\n' -}}
+    {{- '    ' -}} Language: Czech {{- '\n' -}}
+    {%- if twitter.site -%}
+    {{- '    ' -}} Twitter: {{- ' ' ~ twitter.site ~ '\n' -}}
+    {%- endif %}
+
+    {{- '\n' -}}
+
+    {{- '    ' -}} Last Update: {{- ' ' ~ ""|date("Y/m/d") }}
+    Standards: HTML5, CSS3, Responsive
+    Components: VueJS, SCSS
+    Tools: Tateru, VSCode, Adobe Photoshop CC

package/templates/template-gulp-vanilla/src/twig/views/robots.txt.twig

@@ -0,0 +1,4 @@
+User-agent: *
+Disallow:
+
+Sitemap: {{ domain -}}sitemap.xml

package/templates/template-gulp-vanilla/src/twig/views/site.webmanifest.twig

@@ -0,0 +1,23 @@
+{
+    "name": "{{- title -}}",
+    "short_name": "{{- shortTitle -}}",
+    "description": "{{- description -}}",
+    "icons": [
+        {
+            "src": "{{- app.root -}}assets/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "{{- app.root -}}assets/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone",
+    "orientation": "portrait",
+    "start_url": "./?utm_source=web_app_manifest",
+    "scope": "./"
+}

package/templates/template-gulp-vanilla/src/twig/views/sitemap.html.twig

@@ -0,0 +1,22 @@
+{%- set lastmod = "now"|date("Y-m-d") -%}
+
+{%- set pages = [
+    ''
+ ] -%}
+
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:xhtml="http://www.w3.org/1999/xhtml">
+
+    {{- '\n\n    ' -}}
+    {%- for page in pages -%}
+    <url>
+        <loc>{{- domain ~ page -}}</loc>
+        <lastmod>{{- lastmod -}}</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.8</priority>
+    </url>
+    {%- endfor -%}
+    {{- '\n\n' -}}
+
+</urlset>

package/templates/template-gulp-vanilla/tasks/browser-sync.js

@@ -0,0 +1,3 @@
+const browserSync = require('browser-sync').create();
+
+module.exports = browserSync;

package/templates/template-gulp-vanilla/tasks/clean.js

@@ -0,0 +1,10 @@
+const { DIST_FOLDER } = require('./helpers/config');
+const del = require('del');
+
+module.exports = function clean() {
+  return del([
+    `${DIST_FOLDER}`,
+  ], {
+    force: true,
+  });
+};

package/templates/template-gulp-vanilla/tasks/css.js

@@ -0,0 +1,20 @@
+const { DIST_FOLDER } = require('./helpers/config');
+const { src, dest } = require('gulp');
+const autoprefixer = require('autoprefixer');
+const browserSync = require('./browser-sync');
+const postcss = require('gulp-postcss');
+const sass = require('gulp-sass')(require('sass'));
+
+module.exports = function css(cb) {
+  return src([
+    `src/assets/scss/*.scss`,
+  ], {
+    cwd: '.',
+  })
+    .pipe(sass.sync())
+    .pipe(postcss([
+      autoprefixer(),
+    ]))
+    .pipe(dest(`${DIST_FOLDER}assets/css/`))
+    .pipe(browserSync.stream());
+}

package/templates/template-gulp-vanilla/tasks/helpers/config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  DIST_FOLDER: 'dist/',
+  ENV_DEVELOPMENT: 'development',
+  ENV_PRODUCTION: 'production',
+};

package/templates/template-gulp-vanilla/tasks/helpers/logger.js

@@ -0,0 +1,79 @@
+const log = require('fancy-log');
+
+const TYPE_INFO = 'Info';
+const TYPE_ERROR = 'Error';
+const TYPE_WARNING = 'Warning';
+
+class Logger {
+  constructor(options) {
+    this.namespace = options.namespace;
+  }
+
+  /**
+   * 
+   * @param {String} msg 
+   * @returns this
+   */
+  info(msg) {
+    this._log(TYPE_INFO, msg);
+    return this;
+  }
+
+  /**
+   * 
+   * @param {String} msg 
+   * @returns this
+   */
+  error(msg) {
+    this._log(TYPE_ERROR, msg);
+    return this;
+  }
+
+  /**
+   * 
+   * @param {String} msg 
+   * @returns this
+   */
+  warning(msg) {
+    this._log(TYPE_WARNING, msg);
+    return this;
+  }
+
+  /**
+   * 
+   * @param {String} msg 
+   * @returns this
+   */
+  custom(options, msg) {
+    this._log(options.type, msg);
+    return this;
+  }
+
+  /**
+   * @private
+   * @param {String} type 
+   * @param {String} line 
+   */
+  _logLine(type, line) {
+    let logLine = `${type}: ${line}`;
+  
+    if (this.namespace) {
+      logLine = `[${this.namespace}] ${logLine}`;
+    }
+
+    log(logLine);
+  }
+
+  /**
+   * @private
+   * @param {String} type 
+   * @param {String} msg 
+   */
+  _log(type, msg) {
+    msg.split('\n').forEach((line) => {
+      this._logLine(type, line);
+    })
+  }
+}
+
+module.exports = Logger;

package/templates/template-gulp-vanilla/tasks/images.js

@@ -0,0 +1,12 @@
+const { DIST_FOLDER } = require('./helpers/config');
+const { src, dest } = require('gulp');
+
+module.exports = function images(cb) {
+  return src([
+    `**/*`
+  ],
+  {
+    cwd: 'src/assets/images/',
+  })
+    .pipe(dest(`${DIST_FOLDER}assets/images/`))
+}