BuildY +

alexy-os · Nov 25, 2024 · 3ddbae8 · 3ddbae8
1 parent 3f0ba42
commit 3ddbae8
Show file tree

Hide file tree

Showing 29 changed files with 3,152 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,12 @@
 
 A modern approach to building websites using Vue 3 + Shadcn UI in a BunJS environment. This starter kit provides a robust foundation for creating landing pages, multi-page applications, and reusable UI components with a utility-first CSS approach.
 
+## 📦 NEW! Section Collector
+
+This version adds an experimental feature to add sections to the builder. 
+Click on the drop down menu in the top right corner. Click `Get UI Blocks` and add the blocks you like to the site-wide collection. Then click `Go to BuildY` to go into the builder and see the blocks ready to build pages. 
+If you want to continue browsing the site without the collector functionality, just click: `Default State`.
+
 ## Page speed Google Lighthouse score 100%
 
 [Google Lighthouse score](https://pagespeed.web.dev/analysis/https-vue-uikit-shadcn-vercel-app/6a6ivry2d8?form_factor=desktop)

diff --git a/buildy.config.js b/buildy.config.js
@@ -0,0 +1,51 @@
+// Configuration
+const CONFIG = {
+    // Основные настройки
+    storageKey: 'currentState',
+
+    // Визуальные настройки
+    styles: {
+        section: {
+            highlight: 'bg-primary/20', // Подсветка при наведении
+            activeOpacity: '1',
+            inactiveOpacity: '0.5'
+        },
+        menu: {
+            position: { top: '10px', right: '10px' },
+            wrapper: `
+                absolute z-50 p-2 rounded-lg shadow-lg
+                bg-background border border-border
+                dark:bg-slate-800 dark:border-slate-700
+                flex gap-2
+            `,
+            buttons: {
+                base: `
+                    inline-flex items-center justify-center
+                    whitespace-nowrap rounded-md text-sm font-medium
+                    ring-offset-background transition-colors
+                    focus-visible:outline-none focus-visible:ring-2
+                    focus-visible:ring-ring focus-visible:ring-offset-2
+                    disabled:pointer-events-none disabled:opacity-50
+                    h-9 px-4
+                `,
+                html: `
+                    bg-primary text-primary-foreground
+                    hover:bg-primary/90
+                `,
+                save: `
+                    border border-input bg-background
+                    hover:bg-accent hover:text-accent-foreground
+                `
+            }
+        }
+    },
+    formatting: {
+        indentSize: 2,
+        maxLineLength: 1000,
+        preserveClassFormatting: true,
+        removeComments: false,
+        removeEmptyLines: false
+    }
+};
+
+export { CONFIG };
diff --git a/index.html b/index.html
@@ -24,6 +24,32 @@
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="app"></div>
+    <script type="module">
+      import { SectionCollector } from './section-collector.js';
+
+      let collector = null;
+
+      const observer = new MutationObserver((mutations, obs) => {
+        const getStartedBtn = document.getElementById('getStarted');
+        if (getStartedBtn) {
+          console.log('Button found!');
+
+          getStartedBtn.addEventListener('click', async () => {
+            console.log('Button clicked!');
+            if (!collector) {
+              collector = new SectionCollector();
+            }
+          });
+
+          obs.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    </script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "author": "Alexy-OS",
     "repository": "https://github.com/alexy-os/vue-shadcn-starter",
     "license": "MIT",
-    "version": "0.3.2",
+    "version": "0.3.3",
     "private": true,
     "scripts": {
         "dev": "vite",

diff --git a/public/buildy/LICENSE b/public/buildy/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 HinddY Open Source
+
+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.
diff --git a/public/buildy/README.md b/public/buildy/README.md
@@ -0,0 +1,139 @@
+![buildy-min](https://github.com/user-attachments/assets/a51c6318-5cdc-4cd0-8b44-bff692d0782a)
+
+# TailwindCSS Layout Builder
+
+## Table of Contents
+1. [Introduction](#introduction)
+2. [Features](#features)
+3. [Who Is This For?](#who-is-this-for)
+4. [Getting Started](#getting-started)
+5. [Usage Guide](#usage-guide)
+6. [Latest Release Highlights](#latest-release-highlights)
+7. [Roadmap](#roadmap)
+8. [Join Our Community](#join-our-community)
+
+## Introduction
+
+Welcome to TailwindCSS Layout Builder, a powerful web-based tool designed to revolutionise your web development workflow. As part of the HinddY ecosystem, this builder empowers indie hackers, entrepreneurs, and web developers to create stunning, responsive layouts with unprecedented ease and speed.
+
+## Features
+
+- **Intuitive Drag-and-Drop Interface**: Effortlessly arrange and customise layout blocks.
+- **Dark Mode Toggle**: Switch between light and dark themes for comfortable viewing.
+- **Project Import/Export**: Save and load your projects using JSON files.
+- **Clean HTML Export**: Generate deployment-ready HTML with a single click.
+- **Customisable Tailwind Configuration**: Fine-tune your designs with custom Tailwind CSS settings.
+- **In-line Block Editing**: Modify content directly within the layout.
+- **Collapsible Sidebar**: Optimise your workspace for focused design work.
+- **Mobile-Optimised Version**: Create and export designs on-the-go.
+- **Intelligent Editor**: Enjoy element highlighting and automatic formatting removal.
+- **Keyboard Shortcuts**: Boost productivity across Mac, Linux, and Windows platforms.
+- **Unified Project Structure**: Manage all page properties in a single 'skeleton' array.
+- **Reset Functionality**: Quickly revert to default settings for rapid experimentation.
+
+## Who Is This For?
+
+- **Indie Hackers**: Launch MVPs faster than ever before.
+- **Startup Founders**: Test ideas without significant development investments.
+- **Web Designers**: Create stunning layouts with minimal effort.
+- **Entrepreneurs**: Bring your ideas to life, even without deep technical knowledge.
+
+## Getting Started
+
+1. Visit our website at [HinddY.com](https://www.hinddy.com).
+2. Navigate to the TailwindCSS Layout Builder tool.
+3. Start a new project or import an existing one.
+4. Begin dragging and dropping blocks to create your layout.
+
+## Usage Guide
+
+1. **Initialising the Layout Builder**:
+   - On first load, default blocks and configurations are used.
+   - The builder initialises the block list, sidebar, and loads any saved state from localStorage.
+
+2. **Drag-and-Drop Blocks**:
+   - Drag blocks from the block list to the preview area.
+   - Reorder blocks within the preview area using drag-and-drop.
+
+3. **Editing Blocks**:
+   - Click the edit button on a block to open the content editing modal.
+   - Save changes to update the block content in the layout.
+
+4. **Using Dark Mode**:
+   - Toggle dark mode using the dedicated button.
+   - Your preference is saved in localStorage.
+
+5. **Project Import/Export**:
+   - Import a project by selecting a JSON file.
+   - Export your current project to a JSON file for safekeeping or sharing.
+
+6. **HTML Export**:
+   - Export your current layout as a clean HTML file, ready for deployment.
+
+7. **Custom Tailwind Configuration**:
+   - Edit the Tailwind CSS configuration using the provided textarea.
+   - Apply the configuration to update your layout's styling.
+
+## Latest Release Highlights
+
+Our latest release brings significant enhancements to streamline your workflow:
+
+- Fully optimised mobile version with direct HTML export.
+- Revamped user interface for improved usability.
+- Intelligent editor with element highlighting and automatic formatting removal.
+- New keyboard shortcuts for increased productivity.
+- Unified 'skeleton' array for streamlined project structure.
+- Quick reset functionality for rapid prototyping.
+- Comprehensive project import, including custom page skeletons and block sets.
+
+## Roadmap
+
+[BuildY real time](https://github.com/orgs/hinddy/projects/1)
+
+We're committed to continuous improvement. Here's what you can look forward to:
+
+- AI integration for automatic layout generation
+- API for expanded functionality
+- Showcase of ready-made design systems for instant application
+
+## Join Our Community
+
+HinddY isn't just a toolset; it's a thriving community of innovators and creators. We believe in the power of independent development and strive to provide you with everything you need for success.
+
+Join us in revolutionising web development. Your next big idea is just a drag and drop away!
+
+---
+
+"From concept to launch, faster than ever. TailwindCSS Layout Builder: Where indie dreams become digital realities."
+
+[Try It Now](https://buildy-five.vercel.app/) | [Learn More](https://www.hinddy.com/)
+
+#BuildY #IndieHacking #WebDevelopment #TailwindCSS
+
+## Current Shadcn Vue Configuration
+
+We have temporarily hardcoded styles and configuration to work with Shadcn Vue UI Kit components ([@vue-shadcn-starter](https://github.com/alexy-os/vue-shadcn-starter)).
+
+### Component Location
+- UI Kit components are located in: `components/shadcn-uikit.json`
+- Component path is defined in `flow.html`:
+
+## Let's go!
+
+- Step 1: Go to [FlowKit](https://buildy-five.vercel.app/flow.html) and save components you like to local storage;
+- Step 2: Go to [Builder](https://buildy-five.vercel.app/) and use saved components to build your UI;
+- Step 3: Export your project as HTML file and use it as you want.
+
+```js
+const componentsUrl = savedProject?.publicUrl || './components/shadcn-uikit.json';
+```
+
+### Adding Components to Builder
+
+1. Open `/flow.html` page
+2. Browse available components
+3. Click "Save to Local Storage" button for desired components
+4. Components will be saved to browser's local storage
+5. Saved components will become available in the builder
+
+> **Note**: This is a temporary solution for quick start with Shadcn Vue components. Future versions will implement a more flexible system supporting various UI libraries.