@hashtagcms/themes 1.0.0 → 1.0.2

package/README.md

@@ -43,6 +43,21 @@ import '@hashtagcms/themes/src/themes/basic/js/app';
 <script src="node_modules/@hashtagcms/themes/dist/themes/basic/app.js"></script>
 ```
 
+### 💻 CLI Usage
+
+You can interactive copy assets (fonts, images, vendor files) from a theme to your project using the CLI.
+
+```bash
+# Run the interactive setup
+npx @hashtagcms/themes init
+```
+
+The CLI will ask you:
+1. Which theme you want to install
+2. Where to copy the assets (default: `./resources/assets/fe`)
+
+The assets will be copied to `<destination>/<theme-name>/`.
+
 ## 🎨 Available Themes
 
 ### Basic Theme

package/bin/cli.js

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+
+const inquirer = require('inquirer');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+
+async function run() {
+    try {
+        // Resolve the source path (the themes folder inside this package)
+        const sourcePath = path.resolve(__dirname, '../src/themes');
+
+        if (!fs.existsSync(sourcePath)) {
+            console.error(chalk.red(`Error: Source themes directory not found at ${sourcePath}`));
+            process.exit(1);
+        }
+
+        // Get all available themes
+        const themes = await fs.readdir(sourcePath);
+        const validThemes = [];
+
+        for (const theme of themes) {
+            if ((await fs.stat(path.join(sourcePath, theme))).isDirectory()) {
+                validThemes.push(theme);
+            }
+        }
+
+        if (validThemes.length === 0) {
+            console.error(chalk.red('Error: No themes found in the package.'));
+            process.exit(1);
+        }
+
+        const questions = [
+            {
+                type: 'list',
+                name: 'theme',
+                message: 'Which theme would you like to install?',
+                choices: validThemes,
+            },
+            {
+                type: 'input',
+                name: 'destination',
+                message: 'Where would you like to copy the assets?',
+                default: './resources/assets/fe',
+            },
+        ];
+
+        const answers = await inquirer.prompt(questions);
+
+        // Resolve the destination path based on the user's input (relative to their project root)
+        const destinationPath = path.resolve(process.cwd(), answers.destination);
+
+        // Selected theme path
+        const selectedThemePath = path.join(sourcePath, answers.theme);
+
+        console.log(chalk.blue(`Copying assets for theme '${answers.theme}'...`));
+
+        // Copy only specific asset folders
+        const assets = ['img', 'fonts', 'images', 'vendor'];
+        let copiedCount = 0;
+
+        for (const asset of assets) {
+            const assetSrc = path.join(selectedThemePath, asset);
+            // Destination structure: destination/themeName/assetFolder
+            // Example: ./resources/assets/fe/basic/img
+            const assetDest = path.join(destinationPath, answers.theme, asset);
+
+            if (await fs.pathExists(assetSrc)) {
+                // Copy the files recursively
+                await fs.copy(assetSrc, assetDest);
+                console.log(chalk.gray(`✓ Copied ${answers.theme}/${asset}`));
+                copiedCount++;
+            }
+        }
+
+        if (copiedCount === 0) {
+            console.warn(chalk.yellow(`No assets (${assets.join(', ')}) were found to copy for theme '${answers.theme}'.`));
+        } else {
+            // Log a success message in green
+            console.log(chalk.green(`\nSuccess! Assets for '${answers.theme}' copied to ${answers.destination}/${answers.theme}`));
+        }
+
+        // Ask about copying views
+        const viewQuestions = [
+            {
+                type: 'confirm',
+                name: 'copyViews',
+                message: 'Do you also want to publish the theme templates (views)?',
+                default: false,
+            },
+            {
+                type: 'input',
+                name: 'viewDestination',
+                message: 'Where should the views be stored?',
+                default: './resources/views/fe',
+                when: (answers) => answers.copyViews,
+            },
+        ];
+
+        const viewAnswers = await inquirer.prompt(viewQuestions);
+
+        if (viewAnswers.copyViews) {
+            const viewsSrc = path.join(selectedThemePath, 'views');
+            const viewsDest = path.resolve(process.cwd(), viewAnswers.viewDestination, answers.theme);
+
+            if (await fs.pathExists(viewsSrc)) {
+
+                // Check for overwrite
+                let shouldCopy = true;
+                if (await fs.pathExists(viewsDest)) {
+                    const overwriteAnswer = await inquirer.prompt([{
+                        type: 'confirm',
+                        name: 'overwrite',
+                        message: `Views folder already exists at ${viewsDest}. Overwrite?`,
+                        default: false,
+                    }]);
+                    shouldCopy = overwriteAnswer.overwrite;
+                }
+
+                if (shouldCopy) {
+                    console.log(chalk.blue(`Copying views...`));
+                    await fs.copy(viewsSrc, viewsDest);
+                    console.log(chalk.green(`\nSuccess! Views copied to ${viewAnswers.viewDestination}/${answers.theme}`));
+                } else {
+                    console.log(chalk.yellow('Skipped copying views.'));
+                }
+
+            } else {
+                console.warn(chalk.yellow(`No 'views' folder found in theme '${answers.theme}'.`));
+            }
+        }
+
+    } catch (error) {
+        console.error(chalk.red('Error copying assets:'), error);
+        process.exit(1);
+    }
+}
+
+run();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashtagcms/themes",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": {
     "name": "Marghoob Suleman",
     "email": "marghoobsuleman@gmail.com",
@@ -16,8 +16,10 @@
   },
   "homepage": "https://github.com/marghoobsuleman/cms-frontend-kit#readme",
   "main": "src/core/js/index.js",
+  "bin": "./bin/cli.js",
   "files": [
-    "src"
+    "src",
+    "bin"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -30,9 +32,9 @@
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.23.0",
     "babel-loader": "^9.1.0",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.0",
     "mini-css-extract-plugin": "^2.7.0",
-    "copy-webpack-plugin": "^11.0.0",
     "sass": "^1.69.0",
     "sass-loader": "^13.3.0",
     "webpack": "^5.89.0",
@@ -40,6 +42,9 @@
   },
   "dependencies": {
     "axios": "^1.8.0",
-    "bootstrap": "^5.3.3"
+    "bootstrap": "^5.3.3",
+    "chalk": "^4.1.2",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^8.2.7"
   }
 }

package/src/themes/basic/views/_layout_/index.blade.php

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    {!! app()->HashtagCms->layoutManager()->getHeaderContent(); !!}
+    {!! app()->HashtagCms->layoutManager()->getMetaContent(); !!}
+    <title>{!! app()->HashtagCms->layoutManager()->getTitle(); !!}</title>
+    @php
+        $lottieFile = app()->HashtagCms->layoutManager()->getViewThemeFolder()."._layout_.lottie";
+        $bodyCss = app()->HashtagCms->layoutManager()->getFestivalCss();
+        $bodyBackground = "";
+        if (!empty(app()->HashtagCms->layoutManager()->getBodyBackgroundImage())) {
+            $bodyBackground = app()->HashtagCms->layoutManager()->getBodyBackgroundImage(). ";background-repeat: no-repeat;background-attachment: fixed;background-position: center;";
+        }
+    @endphp
+
+    <script>
+        window.Laravel = {!! json_encode([
+            'csrfToken' => csrf_token()
+        ]) !!};
+        let _siteProps_ = <?php echo htcms_get_site_props(true); ?>;
+        window.Laravel.configData = {};
+        window.Laravel.configData.media = <?php echo json_encode(config('hashtagcms.media')) ?>;
+    </script>
+</head>
+<body class="{!!$bodyCss!!}"
+      style="{!!$bodyBackground!!}">
+@include($lottieFile)
+{!! app()->HashtagCms->layoutManager()->getBodyContent(); !!}
+<form id="logout-form" action="/login/doLogout" method="POST" style="display: none;">
+    @csrf
+    <input type="submit" value="Logout">
+</form>
+<div class="small" style="padding:10px; text-align: center;">
+    <a title="#CMS" href="https://www.hashtagcms.org/">Powered by HashtagCms.org</a>
+</div>
+
+{!! app()->HashtagCms->layoutManager()->getFooterContent(); !!}
+
+{!! app()->HashtagCms->layoutManager()->renderStack('scripts') !!}
+
+@if(env('GOOGLE_TAG_MANAGER_KEY') != '')
+    <script async
+            src="https://www.googletagmanager.com/gtag/js?id=<?php echo env('GOOGLE_TAG_MANAGER_KEY'); ?>"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+
+        function gtag() {
+            dataLayer.push(arguments);
+        }
+
+        gtag('js', new Date());
+        gtag('config', "<?php echo env('GOOGLE_TAG_MANAGER_KEY'); ?>");
+
+        gtag('event', 'pageView', {
+            'pageName': (_siteProps_.pageId === -1) ? _siteProps_.categoryName : _siteProps_.pageName
+        });
+    </script>
+@endif
+<script>
+    try {
+        HashtagCms.Analytics.init(_siteProps_);
+        HashtagCms.AppConfig.setConfigData(window.Laravel.configData);
+        //HashtagCms.Analytics.trackPageView(_siteProps_.categoryName + ""+_siteProps_.pageName)
+    } catch (e) {
+        console.error(e.message, "@", e.fileName);
+    }
+</script>
+</body>
+</html>

package/src/themes/basic/views/_layout_/lottie.blade.php

@@ -0,0 +1,50 @@
+@php
+    $lottieObj = app()->HashtagCms->layoutManager()->getFestivalObject();
+    $hasLottie = is_array($lottieObj) && sizeof($lottieObj) >= 1;
+@endphp
+<script>
+    let LottieHandler = {
+        hideOnComplete: function (lottieRef, lottieObj) {
+            if (lottieObj?.lottieHideOnComplete === true) {
+                document.getElementById(lottieRef).addEventListener('frame', (frame)=> {
+                    if(Math.round(frame.detail.seeker) === 100) {
+                        frame.target.remove();
+                    }
+                });
+            }
+
+        }
+    }
+</script>
+@if($hasLottie)
+    <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
+    @foreach($lottieObj as $lottieO)
+        @php
+            $attributes = '';
+            $styles = '';
+            //loop controls autoplay
+            foreach ($lottieO['lottieAttributes'] as $key => $value) {
+                //$value = is_bool($value) ? ($value ? 'true' : 'false') : $value;
+                if (is_bool($value)) {
+                    $attributes .= ($value === true) ? $key ." " : "";
+                } else {
+                    $attributes .= "$key=$value ";
+                }
+
+            }
+            //loop through lottieStyles
+             foreach ($lottieO['lottieStyles'] as $key => $value) {
+                $value = is_bool($value) ? ($value ? 'true' : 'false') : $value;
+                $styles .= $key.':'.$value.';';
+            }
+            $styles = "style=$styles";
+             $lottiePlayer = "lottiePlayer_".$lottieO['id'];
+        @endphp
+        <dotlottie-player id="{{$lottiePlayer}}" src="{{htcms_get_media($lottieO['lottie'])}}"
+                {{$attributes}}
+                {{$styles}}></dotlottie-player>
+        <script>
+            LottieHandler.hideOnComplete("{!! $lottiePlayer !!}", {!! json_encode($lottieO) !!});
+        </script>
+    @endforeach
+@endif

package/src/themes/basic/views/_services_/index.blade.php

@@ -0,0 +1,10 @@
+@if($withCss)
+    <link rel="stylesheet" href="{{app()->HashtagCms->layoutManager()->parseStringForPath('%{css_path}%/app.css')}}" />
+@endif
+@if($withJs)
+    <script>
+        let _siteProps_ = <?php echo htcms_get_site_props(true); ?>;
+    </script>
+    <script src="{{app()->HashtagCms->layoutManager()->parseStringForPath('%{js_path}%/app.js')}}"></script>
+@endif
+{!! $data !!}

package/src/themes/basic/views/auth/login.blade.php

@@ -0,0 +1,90 @@
+@php
+    $error_code = (int) request()->get("error_code");
+@endphp
+
+<div class="container" style="margin-top: 100px;margin-bottom: 100px">
+
+    @if($error_code > 0)
+        <div class="row justify-content-center">
+            @php
+                $error_message = request()->get("error_message");
+            @endphp
+            <div class="alert-danger alert">
+                {!! $error_message !!}
+            </div>
+        </div>
+    @else
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">{{____('hashtagcms::auth.Login')}}</div>
+                    <div class="card-body">
+                        <form method="POST" action="/login">
+                            @csrf
+
+                            @if(isset($redirect))
+                                <input id="redirect" type="hidden" name="redirect" value="{{ $redirect }}">
+                            @endif
+                            @if(old('redirect'))
+                                <input id="redirect" type="hidden" name="redirect" value="{{ old('redirect') }}">
+                            @endif
+
+                            <div class="form-group row mt-2">
+                                <label for="email" class="col-sm-4 col-form-label text-md-right">{{ ____('hashtagcms::auth.Email Address') }}</label>
+
+                                <div class="col-md-6">
+                                    <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
+
+                                    @if ($errors->has('email'))
+                                        <span class="invalid-feedback" role="alert">
+                                            <strong>{{ $errors->first('email') }}</strong>
+                                        </span>
+                                    @endif
+                                </div>
+                            </div>
+
+                            <div class="form-group row mt-2">
+                                <label for="password" class="col-md-4 col-form-label text-md-right">{{ ____('hashtagcms::auth.Password') }}</label>
+
+                                <div class="col-md-6">
+                                    <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
+
+                                    @if ($errors->has('password'))
+                                        <span class="invalid-feedback" role="alert">
+                                            <strong>{{ $errors->first('password') }}</strong>
+                                        </span>
+                                    @endif
+                                </div>
+                            </div>
+
+                            <div class="form-group row mt-2">
+                                <div class="col-md-6 offset-md-4">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
+
+                                        <label class="form-check-label" for="remember">
+                                            {{ ____('hashtagcms::auth.Remember Me') }}
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="form-group row mb-0">
+                                <div class="col-md-8 offset-md-4">
+                                    <button type="submit" class="btn btn-primary">
+                                        {{ ____('hashtagcms::auth.Login') }}
+                                    </button>
+
+                                    <a class="btn btn-link" href="{{ route('password.request') }}">
+                                        {{ ____('hashtagcms::auth.Forgot Your Password?') }}
+                                    </a>
+
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endif
+</div>

package/src/themes/basic/views/auth/passwords/email.blade.php

@@ -0,0 +1,112 @@
+@if (session('errorMessage'))
+    <div class="alert alert-danger" role="alert" id="errorFlashMessage" style="margin-bottom: 0;">
+      {{session('errorMessage')}} <span title="Close" class="fa fa-close" style="float:right; cursor: pointer" onclick="document.getElementById('errorFlashMessage').style.display = 'none'">&nbsp;</span>
+    </div>
+@endif
+@if(isset($token))
+<div class="container" style="margin-top: 50px; margin-bottom: 50px">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Reset Password') }}</div>
+
+                <div class="card-body">
+                    <form method="POST" action="/password/update">
+                        @csrf
+                        <input type="hidden" name="token" value="{{ $token }}">
+                        <div class="form-group row">
+                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" required autofocus>
+
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
+
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
+                            </div>
+                        </div>
+
+                        <div class="form-group row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Reset Password') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@else
+
+    <div class="container" style="margin-top: 50px; margin-bottom: 50px">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">{{ __('Reset Password') }}</div>
+
+                    <div class="card-body">
+                        @if (session('status'))
+                            <div class="alert alert-success" role="alert">
+                                {{ session('status') }}
+                            </div>
+                        @endif
+
+                        <form method="POST" action="/password/email">
+                            @csrf
+
+                            <div class="form-group row">
+                                <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+
+                                <div class="col-md-6">
+                                    <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
+
+                                    @if ($errors->has('email'))
+                                        <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                    @endif
+                                </div>
+                            </div>
+
+                            <div class="form-group row mb-0">
+                                <div class="col-md-6 offset-md-4">
+                                    <button type="submit" class="btn btn-primary">
+                                        {{ __('Send Password Reset Link') }}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endif

package/src/themes/basic/views/auth/passwords/reset.blade.php

@@ -0,0 +1,63 @@
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Reset Password') }}</div>
+
+                <div class="card-body">
+                    <form method="POST" action="/password/update">
+                        @csrf
+                        @isset($token)
+                            <input type="hidden" name="token" value="{{ $token }}">
+                        @endisset
+
+                        <div class="form-group row">
+                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" required autofocus>
+
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
+
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback" role="alert">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
+                            </div>
+                        </div>
+
+                        <div class="form-group row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Reset Password') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+