@hashtagcms/themes 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Marghoob Suleman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+# @hashtagcms/themes
+
+> Beautiful, customizable themes for HashtagCMS with shared core logic
+
+[![npm version](https://img.shields.io/npm/v/@hashtagcms/themes.svg)](https://www.npmjs.com/package/@hashtagcms/themes)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+This package contains frontend themes and core JavaScript logic for the HashtagCMS ecosystem. Switch between themes while sharing the same underlying functionality.
+
+## ✨ Features
+
+- 🎨 **Multiple Themes** - Choose from Basic or Elegant themes
+- 🔧 **Customizable** - Override variables and extend styles
+- 📦 **Modular** - Use source files or pre-compiled assets
+- 🚀 **Framework Agnostic** - Works with any JavaScript framework
+- 📱 **Responsive** - Mobile-first design
+- ♿ **Accessible** - WCAG compliant
+
+## 📦 Quick Start
+
+### Installation
+
+```bash
+npm install @hashtagcms/themes
+```
+
+### Basic Usage
+
+**Import in your SCSS:**
+```scss
+@import "~@hashtagcms/themes/src/themes/basic/sass/app";
+```
+
+**Import in your JavaScript:**
+```javascript
+import '@hashtagcms/themes/src/themes/basic/js/app';
+```
+
+### Using Pre-compiled Assets
+
+```html
+<link rel="stylesheet" href="node_modules/@hashtagcms/themes/dist/themes/basic/app.css">
+<script src="node_modules/@hashtagcms/themes/dist/themes/basic/app.js"></script>
+```
+
+## 🎨 Available Themes
+
+### Basic Theme
+Clean, traditional design perfect for content-focused websites.
+- ✅ FontAwesome icons
+- ✅ Bootstrap 5 styling
+- ✅ Neutral color palette
+- ✅ Subscribe form component
+
+### Elegant Theme
+Modern, sophisticated design with smooth animations.
+- ✅ Glass morphism effects
+- ✅ Parallax scrolling
+- ✅ Gradient text and buttons
+- ✅ Card animations
+- ✅ Dark color scheme
+
+## 📚 Documentation
+
+- **[Getting Started](./docs/GETTING_STARTED.md)** - Installation and basic usage
+- **[Creating Themes](./docs/CREATING_THEMES.md)** - Step-by-step guide to create custom themes
+- **[Theme Structure](./docs/THEME_STRUCTURE.md)** - Package organization and architecture
+- **[API Reference](./docs/API_REFERENCE.md)** - Complete API documentation
+- **[FAQ](./docs/FAQ.md)** - Frequently asked questions
+
+## 🚀 Creating a Custom Theme
+
+```bash
+# 1. Create theme directory
+mkdir -p src/themes/my-theme/{js,sass,img}
+
+# 2. Create entry files
+touch src/themes/my-theme/js/app.js
+touch src/themes/my-theme/sass/app.scss
+
+# 3. Build
+npm run build
+```
+
+See the [Creating Themes Guide](./docs/CREATING_THEMES.md) for detailed instructions.
+
+## 🛠️ Development
+
+### Build Commands
+
+```bash
+# Development build
+npm run dev
+
+# Production build
+npm run build
+
+# Watch mode
+npm run watch
+```
+
+### Project Structure
+
+```
+@hashtagcms/themes/
+├── src/
+│   ├── core/          # Shared JavaScript logic
+│   └── themes/        # Individual themes
+│       ├── basic/
+│       └── elegant/
+├── dist/              # Compiled assets
+├── docs/              # Documentation
+└── package.json
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+
+### How to Contribute
+
+1. Fork the repository
+2. Create your theme or feature
+3. Test thoroughly
+4. Submit a pull request
+
+## 📄 License
+
+[MIT](LICENSE) © Marghoob Suleman
+
+## 🆘 Support
+
+- 📖 [Documentation](./docs/GETTING_STARTED.md)
+- 💬 [GitHub Discussions](https://github.com/marghoobsuleman/hashtagcms-themes/discussions)
+- 🐛 [Report Issues](https://github.com/marghoobsuleman/hashtagcms-themes/issues)
+
+## 🌟 Showcase
+
+Using @hashtagcms/themes in your project? We'd love to feature it! Open an issue to share your work.
+
+---
+
+Made with ❤️ by the HashtagCMS team

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@hashtagcms/themes",
+  "version": "1.0.0",
+  "author": {
+    "name": "Marghoob Suleman",
+    "email": "marghoobsuleman@gmail.com",
+    "url": "https://github.com/marghoobsuleman"
+  },
+  "description": "Frontend Themes and Core Logic for HashtagCMS",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marghoobsuleman/cms-frontend-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/marghoobsuleman/cms-frontend-kit/issues"
+  },
+  "homepage": "https://github.com/marghoobsuleman/cms-frontend-kit#readme",
+  "main": "src/core/js/index.js",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development --progress --color",
+    "prod": "webpack --mode production --progress --color",
+    "build": "npm run prod",
+    "watch": "webpack --mode development --watch --progress --color"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "babel-loader": "^9.1.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",
+    "webpack-cli": "^5.1.0"
+  },
+  "dependencies": {
+    "axios": "^1.8.0",
+    "bootstrap": "^5.3.3"
+  }
+}

package/src/core/js/bootstrap.js

@@ -0,0 +1,36 @@
+import axios from "axios";
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+let token = document.head.querySelector('meta[name="csrf-token"]');
+if (token) {
+    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+    axios.defaults.headers.common['Authorization'] = 'Bearer '+token.content;
+    axios.defaults.withCredentials = true;
+} else {
+    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
+window.axios = axios;
+
+
+import Analytics from "./utils/analytics";
+import Subscribe from "./components/subscribe";
+
+window.HashtagCms = {};
+window.HashtagCms.Subscribe = new Subscribe();
+window.HashtagCms.Analytics = new Analytics();
+
+/**
+ * Echo exposes an expressive Api for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo'
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     encrypted: true
+// });

package/src/core/js/components/subscribe.js

@@ -0,0 +1,54 @@
+export default class Subscribe {
+    constructor() {
+        this.elements = {
+            close: "span[data-class='subscribe-close']",
+            message: "span[data-class='subscribe-message']", form: "form[data-form='subscribe-form']",
+            messageHolder: "div[data-message-holder='subscribe-message-holder']"
+        };
+        this.init();
+    }
+
+    init() {
+
+        if (document.querySelector(this.elements.close)) {
+            document.querySelector(this.elements.close).addEventListener('click', (ele) => {
+                document.querySelector(this.elements.messageHolder).style.display = "none";
+            });
+        }
+    }
+
+    subscribeNow() {
+        let showMessage = function (message) {
+            document.querySelector($this.elements.message).innerText = message;
+        }
+        let $this = this;
+        let afterSave = function (data) {
+            console.log("data ", data);
+            document.querySelector($this.elements.messageHolder).style.display = "";
+            if (data.success == true) {
+                showMessage(data.message);
+                document.querySelector($this.elements.message).innerText = data.message;
+                document.querySelector($this.elements.form + " input[type='email']").value = '';
+                document.querySelector($this.elements.message).classList.remove("text-danger");
+                document.querySelector($this.elements.message).classList.add("text-success");
+            } else {
+                showMessage(data.message.email[0] || "There is some error.");
+                document.querySelector($this.elements.message).classList.remove("text-success");
+                document.querySelector($this.elements.message).classList.add("text-danger");
+            }
+        }
+
+        let email = document.querySelector(this.elements.form + " input[type='email']");
+        let url = "/common/subscribe";
+        let data = { email: email.value };
+        axios.post(url, data)
+            .then(response => {
+                afterSave(response.data);
+            }).catch((error) => {
+                afterSave(error.response.data);
+            });
+
+        return false;
+    }
+
+}

package/src/core/js/helpers/common.js

@@ -0,0 +1,20 @@
+export class AppConfig {
+    constructor(data) {
+        this.configData = data;
+    }
+
+    setConfigData(data) {
+        this.configData = data;
+    }
+
+    getValue(key, defaultVal) {
+        return this.configData[key] || defaultVal;
+    }
+
+    getMedia(path) {
+        let media = this.getValue("media");
+        return media.http_path+"/"+path;
+    }
+};
+
+//create a function to call an api using ajax

package/src/core/js/helpers/form.js

@@ -0,0 +1,192 @@
+export class Errors {
+    /**
+     * Create a new Errors instance.
+     */
+    constructor() {
+        this.errors = {};
+    }
+
+
+    /**
+     * Determine if an errors exists for the given field.
+     *
+     * @param {string} field
+     */
+    has(field) {
+        return this.errors.hasOwnProperty(field);
+    }
+
+
+    /**
+     * Determine if we have any errors.
+     */
+    any() {
+        return Object.keys(this.errors).length > 0;
+    }
+
+
+    /**
+     * Retrieve the error message for a field.
+     *
+     * @param {string} field
+     */
+    get(field) {
+        if (this.errors[field]) {
+            return this.errors[field][0];
+        }
+    }
+
+
+    /**
+     * Record the new errors.
+     *
+     * @param {object} errors
+     */
+    record(errors) {
+        this.errors = errors;
+    }
+
+
+    /**
+     * Clear one or all error fields.
+     *
+     * @param {string|null} field
+     */
+    clear(field) {
+        if (field) {
+            delete this.errors[field];
+
+            return;
+        }
+
+        this.errors = {};
+    }
+}
+
+
+export default class Form {
+    /**
+     * Create a new Form instance.
+     *
+     * @param {object} data
+     */
+    constructor(data) {
+        this.originalData = data;
+
+        for (let field in data) {
+            this[field] = data[field];
+        }
+
+        this.errors = new Errors();
+    }
+
+
+    /**
+     * Fetch all relevant data for the form.
+     */
+    data() {
+        let data = {};
+
+        for (let property in this.originalData) {
+            data[property] = this[property];
+        }
+
+        return data;
+    }
+
+
+    /**
+     * Reset the form fields.
+     */
+    reset() {
+        for (let field in this.originalData) {
+            this[field] = '';
+        }
+
+        this.errors.clear();
+    }
+
+
+    /**
+     * Send a POST request to the given URL.
+     * .
+     * @param {string} url
+     */
+    post(url, resetAfterSubmit=true) {
+        return this.submit('post', url, resetAfterSubmit);
+    }
+
+
+    /**
+     * Send a PUT request to the given URL.
+     * .
+     * @param {string} url
+     */
+    put(url, resetAfterSubmit=true) {
+        return this.submit('put', url, resetAfterSubmit);
+    }
+
+
+    /**
+     * Send a PATCH request to the given URL.
+     * .
+     * @param {string} url
+     */
+    patch(url, resetAfterSubmit=true) {
+        return this.submit('patch', url, resetAfterSubmit);
+    }
+
+
+    /**
+     * Send a DELETE request to the given URL.
+     * .
+     * @param {string} url
+     */
+    delete(url, resetAfterSubmit=true) {
+        return this.submit('delete', url, resetAfterSubmit);
+    }
+
+
+    /**
+     * Submit the form.
+     *
+     * @param {string} requestType
+     * @param {string} url
+     */
+    submit(requestType, url, resetAfterSubmit=true) {
+        return new Promise((resolve, reject) => {
+                axios[requestType](url, this.data())
+                    .then(response => {
+                                    resolve(response.data);
+                                    this.onSuccess(response.data, resetAfterSubmit);
+                    }).catch(error => {
+                                    this.onFail(error.response.data);
+                                    reject(error.response.data);
+                    });
+                });
+    }
+
+
+    /**
+     * Handle a successful form submission.
+     *
+     * @param {object} data
+     */
+    onSuccess(data, resetAfterSubmit=true) {
+       // alert(data.message); // temporary
+        if(resetAfterSubmit==true) {
+            this.reset();
+        }
+
+    }
+
+
+    /**
+     * Handle a failed form submission.
+     *
+     * @param {object} errors
+     */
+    onFail(errors) {
+        this.errors.record(errors);
+    }
+}

package/src/core/js/utils/analytics.js

@@ -0,0 +1,85 @@
+export default class Analytics {
+
+    constructor() {
+
+    }
+
+    init(data) {
+        this.readCounter(data);
+    }
+    readCounter(data) {
+
+        this.submit("post", "/analytics/publish", data);
+    }
+
+    /**
+     * Submit request.
+     *
+     * @param {string} requestType
+     * @param {string} url
+     * @param data
+     */
+    submit(requestType, url, data) {
+        /*data = new Blob([JSON.stringify(data)], {type : 'application/json'});
+        data.csrfToken = window.Laravel.csrfToken;
+        console.log("data",data);
+        navigator.sendBeacon(url, data);*/
+        return new Promise((resolve, reject) => {
+            axios[requestType](url, data)
+                .then(response => {
+                    resolve(response.data);
+                }).catch(error => {
+                    reject(error.response.data);
+            });
+        });
+    }
+
+    trackEventView (category, action ,value, cb) {
+        try {
+            //very very old ga
+            _gaq.push(['_trackEvent', category, action, value]);
+        } catch(e) {
+        }
+        if ( typeof ga != "undefined") {
+            try {
+                ga('send', {
+                    hitType : 'event',
+                    eventCategory : category,
+                    eventAction : action,
+                    eventLabel : value
+                });
+            } catch(e) {
+            }
+        }
+        if (cb) {
+            cb.apply(this, arguments);
+        }
+    }
+
+    /**
+     * Track Page view
+     * @param value
+     * @param cb
+     */
+    trackPageView (value, cb) {
+        try {
+            //Very very old ga
+            _gaq.push(['_trackPageview', value]);
+        } catch(e) {
+        }
+
+        if ( typeof ga != "undefined") {
+            try {
+                ga('send',
+                    {hitType: 'pageview',
+                        page: value
+                    });
+            } catch(e) {}
+        }
+
+        if (cb) {
+            cb.apply(this, arguments);
+        }
+    }
+
+}