@myissue/vue-website-page-builder 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +470 -0
  3. package/dist/android-chrome-192x192.png +0 -0
  4. package/dist/android-chrome-512x512.png +0 -0
  5. package/dist/apple-touch-icon.png +0 -0
  6. package/dist/browserconfig.xml +9 -0
  7. package/dist/components.json +36 -0
  8. package/dist/favicon-16x16.png +0 -0
  9. package/dist/favicon-32x32.png +0 -0
  10. package/dist/favicon.ico +0 -0
  11. package/dist/home/features.jpg +0 -0
  12. package/dist/home/page-builder-example.jpg +0 -0
  13. package/dist/logo/logo.svg +49 -0
  14. package/dist/mstile-310x150.png +0 -0
  15. package/dist/mstile-310x310.png +0 -0
  16. package/dist/page-builder/2-images-text-top.png +0 -0
  17. package/dist/page-builder/2-images.png +0 -0
  18. package/dist/page-builder/3-images.png +0 -0
  19. package/dist/page-builder/6-images.png +0 -0
  20. package/dist/page-builder/image.png +0 -0
  21. package/dist/page-builder/placeholder.jpg +0 -0
  22. package/dist/page-builder/two-vertical-images.png +0 -0
  23. package/dist/placeholder_image.jpg +0 -0
  24. package/dist/robots.txt +2 -0
  25. package/dist/vue-website-page-builder.css +1 -0
  26. package/dist/vue-website-page-builder.js +24794 -0
  27. package/dist/vue-website-page-builder.umd.cjs +195 -0
  28. package/package.json +99 -0
  29. package/src/App.vue +122 -0
  30. package/src/Components/Homepage/Footer.vue +42 -0
  31. package/src/Components/Homepage/HomeSection.vue +540 -0
  32. package/src/Components/Homepage/Navbar.vue +30 -0
  33. package/src/Components/Layouts/FullWidthElement.vue +34 -0
  34. package/src/Components/Loaders/FullScreenSpinner.vue +13 -0
  35. package/src/Components/Loaders/SmallUniversalSpinner.vue +26 -0
  36. package/src/Components/MediaLibrary/SidebarUnsplash.vue +40 -0
  37. package/src/Components/MediaLibrary/Unsplash.vue +306 -0
  38. package/src/Components/Modals/DynamicModal.vue +476 -0
  39. package/src/Components/Modals/MediaLibraryModal.vue +418 -0
  40. package/src/Components/Modals/Modal.vue +102 -0
  41. package/src/Components/Modals/PageBuilderModal.vue +233 -0
  42. package/src/Components/Modals/PageBuilderPreviewModal.vue +123 -0
  43. package/src/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue +202 -0
  44. package/src/Components/PageBuilder/DropdownsPlusToggles/SaveDesign.vue +7 -0
  45. package/src/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue +91 -0
  46. package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue +163 -0
  47. package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue +164 -0
  48. package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue +80 -0
  49. package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue +93 -0
  50. package/src/Components/PageBuilder/EditorMenu/Editables/DeleteElement.vue +42 -0
  51. package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +338 -0
  52. package/src/Components/PageBuilder/EditorMenu/Editables/ElementEditor.vue +58 -0
  53. package/src/Components/PageBuilder/EditorMenu/Editables/ImageEditor.vue +82 -0
  54. package/src/Components/PageBuilder/EditorMenu/Editables/LinkEditor.vue +301 -0
  55. package/src/Components/PageBuilder/EditorMenu/Editables/ManageBackgroundOpacity.vue +109 -0
  56. package/src/Components/PageBuilder/EditorMenu/Editables/ManageOpacity.vue +107 -0
  57. package/src/Components/PageBuilder/EditorMenu/Editables/OpacityEditor.vue +16 -0
  58. package/src/Components/PageBuilder/EditorMenu/Editables/PaddingPlusMargin.vue +134 -0
  59. package/src/Components/PageBuilder/EditorMenu/Editables/TextColorEditor.vue +91 -0
  60. package/src/Components/PageBuilder/EditorMenu/Editables/Typography.vue +199 -0
  61. package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue +42 -0
  62. package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue +113 -0
  63. package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue +229 -0
  64. package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue +101 -0
  65. package/src/Components/PageBuilder/Slidebars/SlideOverRight.vue +91 -0
  66. package/src/Components/PageBuilder/Slidebars/SlideOverRightParent.vue +91 -0
  67. package/src/Components/Search/SearchComponents.vue +259 -0
  68. package/src/Components/TipTap/TipTap.vue +32 -0
  69. package/src/Components/TipTap/TipTapInput.vue +325 -0
  70. package/src/PageBuilder/PageBuilder.vue +347 -0
  71. package/src/PageBuilder/Preview.vue +24 -0
  72. package/src/composables/PageBuilder.ts +1483 -0
  73. package/src/composables/delay.ts +5 -0
  74. package/src/composables/extract-text-content-html.ts +34 -0
  75. package/src/composables/isObject.ts +6 -0
  76. package/src/composables/usePromise.ts +10 -0
  77. package/src/composables/vueFetch.ts +278 -0
  78. package/src/css/app.css +614 -0
  79. package/src/index.ts +16 -0
  80. package/src/main.ts +11 -0
  81. package/src/stores/media-library.ts +34 -0
  82. package/src/stores/page-builder-state.ts +461 -0
  83. package/src/stores/unsplash.ts +107 -0
  84. package/src/stores/user.ts +30 -0
  85. package/src/types/global.d.ts +49 -0
  86. package/src/utils/builder/compiledCSS.ts +2205 -0
  87. package/src/utils/builder/html-doc-declaration-with-components.ts +7 -0
  88. package/src/utils/builder/html-elements/componentHelpers.ts +101 -0
  89. package/src/utils/builder/tailwaind-colors.ts +503 -0
  90. package/src/utils/builder/tailwind-border-radius.ts +67 -0
  91. package/src/utils/builder/tailwind-border-style-width-color.ts +272 -0
  92. package/src/utils/builder/tailwind-font-sizes.ts +76 -0
  93. package/src/utils/builder/tailwind-font-styles.ts +24 -0
  94. package/src/utils/builder/tailwind-opacities.ts +45 -0
  95. package/src/utils/builder/tailwind-padding-margin.ts +159 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Qais Wardag
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,470 @@
1
+ # @myissue/vue-website-page-builder
2
+
3
+ ## 🚧 **DEVELOPMENT VERSION - NOT READY FOR PRODUCTION** 🚧
4
+
5
+ > **⚠️ WARNING**: This package is currently in **alpha development stage**.
6
+ >
7
+ > - **DO NOT USE IN PRODUCTION** applications
8
+ > - APIs may change without notice
9
+ > - Features may be incomplete or unstable
10
+ > - Documentation is work in progress
11
+ > - Use only for testing and development purposes
12
+
13
+ ---
14
+
15
+ ## Overview
16
+
17
+ A Vue.js page builder component with drag & drop functionality for creating dynamic web pages.
18
+
19
+ ## Installation
20
+
21
+ ```bash
22
+ npm install @myissue/vue-website-page-builder
23
+ ```
24
+
25
+ ## Quick Start
26
+
27
+ ```vue
28
+ <script setup>
29
+ import { PageBuilder } from '@myissue/vue-website-page-builder'
30
+ import '@myissue/vue-website-page-builder/style.css'
31
+ </script>
32
+
33
+ <template>
34
+ <PageBuilder />
35
+ </template>
36
+ ```
37
+
38
+ ## Features
39
+
40
+ - 🎯 **Zero Configuration** - Just import and use
41
+ - 🔧 **Self-contained** - Manages its own state internally
42
+ - 🎨 **Drag & Drop** - Visual page building experience
43
+ - 📱 **Responsive** - Mobile-friendly interface
44
+ - ⚡ **Vue 3** - Built with modern Vue.js
45
+
46
+ ## Development Status
47
+
48
+ | Feature | Status |
49
+ | ------------------ | -------------- |
50
+ | Basic Page Builder | 🟡 Alpha |
51
+ | Component Library | 🟡 Alpha |
52
+ | State Management | 🟡 Alpha |
53
+ | Documentation | 🔴 In Progress |
54
+ | Testing | 🔴 Not Started |
55
+ | Stable API | 🔴 Not Ready |
56
+
57
+ ## Requirements
58
+
59
+ - Node.js ≥ 18.0.0
60
+ - Vue.js ≥ 3.0.0
61
+ - Modern browser with ES6+ support
62
+
63
+ ## License
64
+
65
+ MIT License - see LICENSE file for details
66
+
67
+ ## Author
68
+
69
+ **qaiswardag**
70
+
71
+ - GitHub: [@qaiswardag](https://github.com/qaiswardag)
72
+
73
+ ---
74
+
75
+ > 🚧 **Remember**: This is a development version. Wait for v1.0.0 for production use!
76
+
77
+ <p align="center" dir="auto">
78
+ <img width="200" style="max-width: 100%;" src="./public/logo/logo.svg" alt="Logo">
79
+ </p>
80
+
81
+ # Free Click & Drop Page Builder
82
+
83
+ [Play around with the page builder](https://www.builder-demo.myissue.dk)
84
+
85
+ This app was born out of my desire to create a minimalist page builder with an elegant and intuitive design.
86
+
87
+ The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free Click & Drop Page Builder.
88
+
89
+ To star the repository, simply click on the **Star** button located at the top-right corner of the GitHub page. Thank you in advance for your support! 🙌
90
+
91
+ ## Demo
92
+
93
+ Introducing the **Free Vue Click & Drop Page Builder**
94
+ create and enhance digital experiences with Vue on any backend.
95
+
96
+ [Play around with the page builder](https://www.builder-demo.myissue.dk)
97
+
98
+ ## About
99
+
100
+ A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.
101
+
102
+ ## Features
103
+
104
+ Includes:
105
+
106
+ - **Page Builder**: Click & Drop Page Builder.
107
+ - **Customizable Design**: Tailor the look to match your brand.
108
+
109
+ The Page Builder is packed with features:
110
+
111
+ - **Click & Drop**: Easily rearrange elements on your page.
112
+ - **Reordering**: Change the order of your content without hassle.
113
+ - **True Visual Editing**: See your changes in real-time as you make them.
114
+ - **Media Library**: Access and manage your media files effortlessly.
115
+ - **Unsplash**: Unsplash Integration.
116
+ - **Responsive Editing**: Ensure your site looks great on all devices.
117
+ - **Text Editing**: Customize your text with ease.
118
+ - **Font Customization**: Choose the perfect fonts to match your style.
119
+ - **Undo & Redo**: Experiment confidently with the ability to revert changes.
120
+ - **Global Styles**: Global Styles for fonts, designs, & colors.
121
+ - **YouTube Videos**: Integrate video content smoothly.
122
+
123
+ Powerful Page Builder for any growing merchants, brands, &
124
+ agencies. Empower users to create the perfect content with the Page Builder.
125
+
126
+ ## Technical details
127
+
128
+ - **Technologies**: This Page Builder is developed using JavaScript, Vue 3, the Composition API, Pinia, CSS, Tailwind CSS, and HTML.
129
+ - **Features**: Click & Drop Page Builder.
130
+
131
+ ## Documentation
132
+
133
+ ### Required software installation
134
+
135
+ Please note that these instructions assume you have Node.js installed.
136
+
137
+ ### Getting started & installation
138
+
139
+ Make sure to install the dependencies:
140
+
141
+ ```bash
142
+ # npm
143
+ npm install
144
+
145
+ # pnpm
146
+ pnpm install
147
+
148
+ # yarn
149
+ yarn install
150
+
151
+ # bun
152
+ bun install
153
+ ```
154
+
155
+ ### Customization
156
+
157
+ I have separated all the logic for manipulating the HTML elements into its own PageBuilder class, which can be found at the path: `src/composables/PageBuilder.js`.
158
+
159
+ Customizing the page builder is made simple since all the logic resides in the PageBuilder Class.
160
+
161
+ ### Example use of Page Builder
162
+
163
+ ```vue
164
+ <script setup>
165
+ const mediaLibraryStore = useMediaLibraryStore();
166
+ const pageBuilderStateStore = usePageBuilderStateStore();
167
+ const userStore = useUserStore();
168
+ const openPageBuilder = ref(false);
169
+
170
+ const pageBuilderPrimaryHandler = ref(null);
171
+ const pageBuilderSecondaryHandler = ref(null);
172
+ const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore);
173
+ const formType = ref('create');
174
+
175
+ const getIsLoading = computed(() => {
176
+ return userStore.getIsLoading;
177
+ });
178
+
179
+ const pathPageBuilderStorageCreate = `page-builder-create-post`;
180
+
181
+ const resourceId = 1;
182
+ const pathPageBuilderStorageUpdate = `page-builder-update-post-id-${resourceId}`;
183
+
184
+ const handlePageBuilder = async function () {
185
+
186
+ userStore.setIsLoading(true);
187
+
188
+ await nextTick();
189
+ openPageBuilder.value = true;
190
+
191
+ if (formType.value === 'create') {
192
+ pageBuilderStateStore.setComponents([]);
193
+ pageBuilder.areComponentsStoredInLocalStorage();
194
+ }
195
+
196
+ // handle click
197
+ pageBuilderPrimaryHandler.value = async function () {
198
+ userStore.setIsLoading(true);
199
+
200
+ if (formType.value === 'update') {
201
+ await nextTick();
202
+ pageBuilder.saveComponentsLocalStorageUpdate();
203
+ }
204
+
205
+
206
+ openPageBuilder.value = false;
207
+ userStore.setIsLoading(false);
208
+ };
209
+
210
+ // handle click
211
+ pageBuilderSecondaryHandler.value = async function () {
212
+ userStore.setIsLoading(true);
213
+
214
+ // save to local storage if new resource
215
+ if (formType.value === 'create') {
216
+ await nextTick();
217
+ pageBuilder.saveComponentsLocalStorage();
218
+ await nextTick();
219
+ }
220
+ // save to local storage if update
221
+ if (formType.value === 'update') {
222
+ await nextTick();
223
+ pageBuilder.synchronizeDOMAndComponents();
224
+ await nextTick();
225
+ }
226
+
227
+ openPageBuilder.value = false;
228
+ userStore.setIsLoading(false);
229
+ };
230
+
231
+ userStore.setIsLoading(false);
232
+
233
+ // end modal
234
+ };
235
+ // Builder # End
236
+ const handleDraftForUpdate = async function () {
237
+ userStore.setIsLoading(true);
238
+
239
+ if (formType.value === 'update') {
240
+ await nextTick();
241
+ pageBuilder.areComponentsStoredInLocalStorageUpdate();
242
+ await nextTick();
243
+ pageBuilder.setEventListenersForElements();****
244
+ userStore.setIsLoading(false);
245
+ }
246
+ };
247
+
248
+ onBeforeMount(() => {
249
+ pageBuilderStateStore.setLocalStorageItemName(pathPageBuilderStorageCreate);
250
+
251
+ pageBuilderStateStore.setLocalStorageItemNameUpdate(
252
+ pathPageBuilderStorageUpdate
253
+ );
254
+ });
255
+ </script>
256
+
257
+ <template>
258
+ <PageBuilderModal
259
+ :show="openPageBuilder"
260
+ updateOrCreate="create"
261
+ @pageBuilderPrimaryHandler="pageBuilderPrimaryHandler"
262
+ @pageBuilderSecondaryHandler="pageBuilderSecondaryHandler"
263
+ @handleDraftForUpdate="handleDraftForUpdate"
264
+ >
265
+ <PageBuilderView></PageBuilderView>
266
+ </PageBuilderModal>
267
+ </template>
268
+ ```
269
+
270
+ ### Saving Page Builder drafts to local storage
271
+
272
+ Each Page Builder draft is automatically saved to local storage, allowing you to resume your work later. This process differs slightly depending on whether you are creating a new resource like a blog post, job ad, or listing, or updating an existing resource.
273
+
274
+ When creating a new resource like a blog post, job ad, or listing, you need to specify a name for the local storage item that will store the draft. This is done as follows:
275
+
276
+ ```js
277
+ const pathPageBuilderStorageCreate = `page-builder-create-post`
278
+
279
+ onBeforeMount(() => {
280
+ // Define local storage key name before on mount
281
+ pageBuilderStateStore.setLocalStorageItemName(pathPageBuilderStorageCreate)
282
+ })
283
+ ```
284
+
285
+ For updating an existing resource like a blog post, job ad, or listing, you must first obtain the blog post ID and then save a name that includes this ID to local storage. This way, the Page Builder can find the exact resource from local storage later on when the user wants to continue editing the resource with the unique ID:
286
+
287
+ ```js
288
+ const resourceId = 1
289
+ const pathPageBuilderStorageUpdate = `page-builder-update-post-id-${resourceId}`
290
+
291
+ onBeforeMount(() => {
292
+ // Define local storage key name before on mount
293
+ pageBuilderStateStore.setLocalStorageItemNameUpdate(pathPageBuilderStorageUpdate)
294
+ })
295
+ ```
296
+
297
+ In both cases, the pageBuilderStateStore is responsible for handling the local storage name, ensuring that the correct draft is stored and retrieved as needed.
298
+
299
+ ### HTML Components
300
+
301
+ If Creating new components, please always add the HTML inside section tags.
302
+
303
+ ```html
304
+ <section>
305
+ <div>
306
+ <p>New components</p>
307
+ </div>
308
+ </section>
309
+ ```
310
+
311
+ HTML components are currently stored in a JSON file named `components.json` in the root directory. HTML components can also be easily stored in the database, resulting in better management. Simply provide the `setLoadComponents` method with the new URL for loading components from the backend.
312
+
313
+ ### Unsplash
314
+
315
+ Please note that if you want to use Unsplash, simply create an .env file in your root folder and enter your Unsplash API key and value.
316
+
317
+ Example: VITE_UNSPLASH_KEY="your-unsplash-api-key-here"
318
+
319
+ [Get your unsplash api key here](https://unsplash.com/developers).
320
+
321
+ ## Use with Backend
322
+
323
+ The Page builder's capabilities become infinite when integrated with a backend.
324
+
325
+ If you're familiar with Laravel, the Page Builder is already integrated with the open-source Laravel Free Listing Directory, Blog & Job Board Theme, which is available at:
326
+ [demo & repo](https://github.com/qaiswardag/laravel_vue_directory_and_job_board_theme).
327
+
328
+ By utilizing a backend Framework, the HTML components, currently stored in a JSON file at `components.json`, can be easily stored in the database, resulting in better management of HTML components.
329
+
330
+ ## Get in touch
331
+
332
+ If you have any questions or if you're looking for customization, feel free to connect with me on LinkedIn and send me a message.
333
+
334
+ - [Email](mailto:qais.wardag@outlook.com)
335
+ - [LinkedIn](https://www.linkedin.com/in/qaiswardag)
336
+
337
+ ## Contributing
338
+
339
+ Thank you for considering contributing to this project!
340
+
341
+ # Vue Website Page Builder
342
+
343
+ A powerful, flexible Vue 3 page builder component for creating dynamic websites.
344
+
345
+ ## Features
346
+
347
+ - 🎨 Drag & drop page builder interface
348
+ - 🧩 Modular component system
349
+ - 📱 Responsive design support
350
+ - 🎯 TypeScript support
351
+ - 🔧 Customizable components
352
+ - 💾 State management with Pinia
353
+ - 🎨 TailwindCSS styling
354
+
355
+ ## Installation
356
+
357
+ ### For Production Use
358
+
359
+ ```bash
360
+ npm install vue-website-page-builder
361
+ ```
362
+
363
+ ### For Local Development
364
+
365
+ If you want to use this package locally in your Laravel project for development:
366
+
367
+ 1. **Clone and build the package:**
368
+
369
+ ```bash
370
+ git clone <repository-url>
371
+ cd vue-website-page-builder
372
+ npm install
373
+ npm run build:lib
374
+ ```
375
+
376
+ 2. **Set up in your Laravel project:**
377
+
378
+ ```bash
379
+ # In your Laravel project's resources/js/package.json
380
+ {
381
+ "dependencies": {
382
+ "vue-website-page-builder": "file:../../../vue-website-page-builder",
383
+ "vue": "^3.5.13",
384
+ "pinia": "^2.1.7"
385
+ }
386
+ }
387
+ ```
388
+
389
+ 3. **Install dependencies:**
390
+ ```bash
391
+ cd your-laravel-project/resources/js
392
+ npm install
393
+ ```
394
+
395
+ For detailed local development setup, see [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md).
396
+
397
+ ## Usage
398
+
399
+ ```vue
400
+ <template>
401
+ <div>
402
+ <PageBuilder />
403
+ </div>
404
+ </template>
405
+
406
+ <script setup>
407
+ import { PageBuilder, usePageBuilderStateStore } from 'vue-website-page-builder'
408
+ import 'vue-website-page-builder/style.css'
409
+
410
+ const pageBuilderStore = usePageBuilderStateStore()
411
+ </script>
412
+ ```
413
+
414
+ ## Available Components
415
+
416
+ - `PageBuilder` - Main page builder interface
417
+ - `Preview` - Preview component for displaying built pages
418
+
419
+ ## Available Stores
420
+
421
+ - `usePageBuilderStateStore` - Main state management store
422
+
423
+ ## Development
424
+
425
+ ### Scripts
426
+
427
+ - `npm run dev` - Start development server
428
+ - `npm run build:lib` - Build library for distribution
429
+ - `npm run build` - Build for production
430
+ - `npm run type-check` - Run TypeScript type checking
431
+ - `npm run lint` - Run ESLint
432
+ - `npm run format` - Format code with Prettier
433
+
434
+ ### Local Development Setup
435
+
436
+ Use the provided setup script:
437
+
438
+ ```bash
439
+ ./setup-local-dev.sh
440
+ ```
441
+
442
+ Or follow the manual steps in [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md).
443
+
444
+ ## Requirements
445
+
446
+ - Vue 3.5+
447
+ - Node.js 18+
448
+ - TypeScript 5+
449
+
450
+ ## Dependencies
451
+
452
+ - Vue 3
453
+ - Pinia (state management)
454
+ - TailwindCSS (styling)
455
+ - TipTap (rich text editing)
456
+ - Headless UI (accessible components)
457
+
458
+ ## License
459
+
460
+ [MIT License](./LICENSE)
461
+
462
+ ## Contributing
463
+
464
+ 1. Fork the repository
465
+ 2. Create your feature branch
466
+ 3. Make your changes
467
+ 4. Build and test locally
468
+ 5. Submit a pull request
469
+
470
+ For local development setup, see [LOCAL_DEVELOPMENT.md](./LOCAL_DEVELOPMENT.md).
Binary file
Binary file
Binary file
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <browserconfig>
3
+ <msapplication>
4
+ <tile>
5
+ <square150x150logo src="/mstile-150x150.png"/>
6
+ <TileColor>#da532c</TileColor>
7
+ </tile>
8
+ </msapplication>
9
+ </browserconfig>
@@ -0,0 +1,36 @@
1
+ {
2
+ "components": {
3
+ "data": [
4
+ {
5
+ "title": "Single Image",
6
+ "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div></div></div>\n</section>",
7
+ "cover_image": "/page-builder/image.png"
8
+ },
9
+ {
10
+ "title": "2 vertical images",
11
+ "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-[9/16] smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> </div> </div> </div>\n</section>",
12
+ "cover_image": "/page-builder/two-vertical-images.png"
13
+ },
14
+ {
15
+ "title": "2 images",
16
+ "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div> </div></div>\n</section>",
17
+ "cover_image": "/page-builder/3-images.png"
18
+ },
19
+ {
20
+ "title": "3 images",
21
+ "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\"><div class=\"myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"></div></div> </div></div>\n</section>",
22
+ "cover_image": "/page-builder/2-images.png"
23
+ },
24
+ {
25
+ "title": "6 Images Grid",
26
+ "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\">\n<div class=\"mx-auto max-w-7xl\">\n<div class=\"grid grid-cols-2 md:grid-cols-3 myPrimaryGap\">\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n<div>\n<img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"image\">\n</div>\n\n</div>\n</div>\n</div>\n</section>",
27
+ "cover_image": "/page-builder/6-images.png"
28
+ },
29
+ {
30
+ "title": "Two Images With Right Text Top",
31
+ "html_code": "<section>\n<div class=\"w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2\"><div class=\"mx-auto max-w-7xl\">\n<div class=\"myPrimaryGap lg:flex lg:justify-center\"><div class=\"flex-1 py-2\">\n<div class=\"grid myPrimaryGap grid-cols-1 lg:grid-cols-2\"> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> <div class=\"flex-1 py-2\"> <img class=\"object-cover w-full object-top aspect-square smooth-transition\" src=\"/page-builder/placeholder.jpg\" alt=\"provider\"> </div> </div> </div>\n\n<div class=\"flex-1 py-2\"> <div class=\"break-words py-2\"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>",
32
+ "cover_image": "/page-builder/2-images-text-top.png"
33
+ }
34
+ ]
35
+ }
36
+ }
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1,49 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ width="175.536px" height="45.842px" viewBox="0 0 175.536 45.842" enable-background="new 0 0 175.536 45.842"
5
+ xml:space="preserve">
6
+ <g>
7
+ <g>
8
+ <polygon points="17.524,24.338 4.084,0.002 0.004,35.282 4.084,35.282 6.58,12.578 17.524,32.162 28.467,12.578 30.963,35.282
9
+ 35.044,35.282 30.963,0.002 "/>
10
+ <polygon points="47.694,28.418 41.524,13.202 36.963,13.202 45.412,32.162 39.363,45.842 43.684,45.842 58.084,13.202
11
+ 53.763,13.202 "/>
12
+ <rect x="61.922" y="1.682" width="4.08" height="33.6"/>
13
+ <path d="M91.083,19.37c-0.849-0.784-1.769-1.432-2.76-1.944c-0.992-0.512-1.937-0.928-2.832-1.248
14
+ c-1.952-0.672-3.497-1.352-4.632-2.04c-1.136-0.688-1.944-1.423-2.424-2.208c-0.48-0.784-0.72-1.64-0.72-2.568
15
+ c0-1.087,0.416-2.072,1.248-2.952c0.832-0.88,2.16-1.32,3.984-1.32c1.312,0,2.424,0.256,3.336,0.768
16
+ c0.912,0.512,1.688,1.168,2.328,1.968c0.64,0.8,1.167,1.616,1.584,2.448l3.504-2.016c-0.544-1.184-1.296-2.312-2.256-3.384
17
+ c-0.96-1.072-2.12-1.951-3.48-2.64c-1.361-0.688-2.952-1.032-4.776-1.032c-1.889,0-3.569,0.376-5.04,1.128
18
+ c-1.473,0.752-2.625,1.784-3.456,3.096c-0.833,1.312-1.248,2.8-1.248,4.464c0,1.536,0.295,2.832,0.888,3.888
19
+ c0.592,1.056,1.352,1.944,2.28,2.664c0.928,0.72,1.903,1.312,2.928,1.776c1.024,0.464,1.952,0.84,2.784,1.128
20
+ c1.279,0.449,2.488,0.953,3.624,1.512c1.135,0.56,2.056,1.288,2.76,2.184c0.704,0.896,1.056,2.097,1.056,3.6
21
+ c0,1.536-0.544,2.801-1.632,3.792c-1.088,0.992-2.528,1.488-4.32,1.488c-1.344,0-2.544-0.288-3.6-0.864
22
+ c-1.056-0.576-2.009-1.375-2.856-2.4c-0.849-1.024-1.656-2.208-2.424-3.552l-3.264,2.208c0.735,1.472,1.688,2.856,2.856,4.152
23
+ c1.167,1.296,2.527,2.336,4.08,3.12c1.552,0.784,3.24,1.176,5.064,1.176c1.344,0,2.631-0.224,3.864-0.672
24
+ c1.231-0.448,2.335-1.087,3.312-1.92c0.976-0.832,1.744-1.84,2.304-3.024c0.559-1.183,0.84-2.512,0.84-3.984
25
+ c0-1.536-0.272-2.856-0.816-3.96C92.626,21.098,91.93,20.155,91.083,19.37z"/>
26
+ <path d="M117.386,19.37c-0.849-0.784-1.769-1.432-2.76-1.944c-0.992-0.512-1.937-0.928-2.832-1.248
27
+ c-1.952-0.672-3.497-1.352-4.632-2.04c-1.136-0.688-1.944-1.423-2.424-2.208c-0.48-0.784-0.72-1.64-0.72-2.568
28
+ c0-1.087,0.416-2.072,1.248-2.952c0.832-0.88,2.16-1.32,3.984-1.32c1.312,0,2.424,0.256,3.336,0.768
29
+ c0.912,0.512,1.688,1.168,2.328,1.968c0.64,0.8,1.167,1.616,1.584,2.448l3.504-2.016c-0.544-1.184-1.296-2.312-2.256-3.384
30
+ c-0.96-1.072-2.12-1.951-3.48-2.64c-1.361-0.688-2.952-1.032-4.776-1.032c-1.889,0-3.569,0.376-5.04,1.128
31
+ c-1.473,0.752-2.625,1.784-3.456,3.096c-0.833,1.312-1.248,2.8-1.248,4.464c0,1.536,0.295,2.832,0.888,3.888
32
+ c0.592,1.056,1.352,1.944,2.28,2.664c0.928,0.72,1.903,1.312,2.928,1.776c1.024,0.464,1.952,0.84,2.784,1.128
33
+ c1.279,0.449,2.488,0.953,3.624,1.512c1.135,0.56,2.056,1.288,2.76,2.184c0.704,0.896,1.056,2.097,1.056,3.6
34
+ c0,1.536-0.544,2.801-1.632,3.792c-1.088,0.992-2.528,1.488-4.32,1.488c-1.344,0-2.544-0.288-3.6-0.864
35
+ c-1.056-0.576-2.009-1.375-2.856-2.4c-0.849-1.024-1.656-2.208-2.424-3.552l-3.264,2.208c0.735,1.472,1.688,2.856,2.856,4.152
36
+ c1.167,1.296,2.527,2.336,4.08,3.12c1.552,0.784,3.24,1.176,5.064,1.176c1.344,0,2.631-0.224,3.864-0.672
37
+ c1.231-0.448,2.335-1.087,3.312-1.92c0.976-0.832,1.744-1.84,2.304-3.024c0.559-1.183,0.84-2.512,0.84-3.984
38
+ c0-1.536-0.272-2.856-0.816-3.96C118.93,21.098,118.233,20.155,117.386,19.37z"/>
39
+ <path d="M144.818,24.242c0,2.304-0.624,4.16-1.872,5.568c-1.248,1.409-3.072,2.112-5.472,2.112s-4.224-0.704-5.472-2.112
40
+ c-1.248-1.408-1.872-3.264-1.872-5.568V1.682h-4.08v22.56c0,1.664,0.264,3.2,0.792,4.608c0.528,1.409,1.296,2.625,2.304,3.648
41
+ c1.008,1.025,2.216,1.824,3.624,2.4c1.408,0.576,2.976,0.864,4.704,0.864s3.295-0.288,4.704-0.864
42
+ c1.408-0.576,2.616-1.375,3.624-2.4c1.008-1.023,1.776-2.239,2.304-3.648c0.528-1.408,0.792-2.944,0.792-4.608V1.682h-4.08V24.242
43
+ z"/>
44
+ <polygon points="175.538,5.522 175.538,1.682 160.418,1.682 158.594,1.682 156.337,1.682 156.337,35.282 158.594,35.282
45
+ 160.418,35.282 175.538,35.282 175.538,31.442 160.418,31.442 160.418,18.962 168.022,18.962 168.022,15.122 160.418,15.122
46
+ 160.418,5.522 "/>
47
+ </g>
48
+ </g>
49
+ </svg>
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1,2 @@
1
+ User-agent: *
2
+ Disallow: /