Note: This is not an official plugin by the Pinegrow team, rather a personal contribution for the community. Follow me on twitter - @techakayy
Pinegrow plugins can be used only with Pinegrow desktop apps like Pinegrow Web Editor or Vue Designer. So, this plugin is not for Pinegrow Online or Pinegrow WP Plugin. Also, Vue Designer already includes this feature.
This plugin is free to use, open-sourced with MIT license. Feel free to fork and improve. PRs, improvements to documentation, text/video tutorials are welcomed.
Frameworks via cdn can be used with other Pinegrow Pro features like components, master pages, and also with Wordpress. Any contribution to the documentation showcasing such usage are welcomed.
For more details, usage, customziation, check out the repo here -
For issues/discussion, use the github repo features, or post in this thread. Welcome all feedback, contributions & educational contents using the plugin.
@TechAkayy Very neat addition to the Pinegrow editor. I’m wondering how long it will be before users of it begin to think along the lines I started to as soon as I looked seriously at Vue Designer.
Ability to use the plugin on both single HTML page (free version of Pinegrow) and projects (requires Pinegrow pro).
Via Frameworks menu, add CDN scripts of different flavours either as Global App (or) Islands easily to your page.
Via Frameworks menu, enable “Auto reload on update” to automatically refresh page when adding/updating a directive.
v-* and x-* tags are now displayed in the page tree, so that it’s easy to identify them.
Search option - when clicking ‘Add directive’ button, directives can be easily searched.
Alpinejs - when adding x-for or x-if, the content is automatically wrapped inside a template tag, as required by alpinejs design.
If you want to subscribe to future updates to the plugin, follow this link.
Also, the plugin is free & open-sourced, so if you are up for an adventure to explore extending Pinegrow with your own custom plugin/ideas, feel free to explore this repo, and let me know if you require any help with it!
Please share your feedback, star the github repo, and join as contributors if you are interested! Thank you!
The readme now includes step-by-step instructions with annotated screenshots for quick-start. Please refer to the repo for the full set of instructions.
Frameworks Lite v1.2.0 is out now. Here is the release notes. If you want to subscribe to future updates to the plugin, follow this link .
The v-cloak or x-cloak inline style tag can be added to the <head> tag via the Frameworks menu.
Directives and page templates have been refreshed.
Directives input box now includes both a clear icon and a delete icon. Previously, truthy directives were displayed as true in the control, but not anymore. It will always be in sync with the actual attribute key-value pairs. This also fixes #2.
Progressive Enhancement → Progressive Hydration (how/when to hydrate islands to improve performance)
Progressive hydration (islands architecture) using the Eleventy is-land package (@llty/is-land) can be added via the Frameworks menu.
This includes a sample Pikaday datepicker integration that gets added to the end of the <body> tag and partially hydrates when entering the viewport (uses an on:visible directive similar to Iles/Astro’s client:visible directive).
While Iles/Astro supports only certain frameworks and requires a build tool (Vite), the Eleventy is-land solution is framework-independent and can be used on islands in static/server-rendered HTML files.
Well, thank you for this @TechAkayy …ive had a look but I must admit …>I had…
NO IDEA
what most of this terminology means…islands…hydration…etc I’ve. checked the Eleventy site and there is a part there explaining the arcitecture which Ill check out, but is there also other useful info and readable info sites for this sort of topic and, do other newer technologies use this/or similar approaches as obviously the web has moved on… since I last dabbled.
So just wondering.
Ive heard oif React/Vue etc, but had no need/inclination to overly complicate my learning with technologies and build tools I didnt require and since I have no client missions to meet I could just avoid all that and keep it simple.
SO I thought this might be an ok technology youve provided , to tinker with and up my gane but thhen when looking into the basic eleventy stuff, I noticed node and package managers again and I was like really?… so
yea, when you do some docs with some low level help/instructions (or simply links to already existing good docs to check out) then I’ll explore this great offering.
But, ive no idea of the benefits it brings to the talbe yet, but am curious so , if maybe someone could point me to some good use case scenarios or sources fo beginner friendly docs, that would be good.
You have made good points, @schpengle. I completely agree with them.
This plugin offers more than basic coverage. I’m working on a tutorial to cover the various concepts like islands & partial hydration.
Btw, hydration is the process of javascipt (script tag) making the page interactive (carousel, navbars, etc) by setting up the necessary state & event listeners to the html elements. It has always been there, just that some new patterns aimed at increasing performance brought that term into the limelight.
Users don’t have to feel pressured or obligated to use all the features. Simply add a Global App (the simplest) and use the props panel to add directives to your markup.
Obviously, like other existing CSS frameworks such as Bootstrap and Tailwind, users are expected to be proficient with the activated JS framework (Petite-Vue, Alpine.js, or Standard-Vue) to use it efficiently.
@schpengle
This is a plugin offered to the community by @TechAkayy and which is currently / primarily intended for an informed audience, I mean, an audience that already knows what it’s about and wants to make their life easier by enjoying the benefits of Pinegrow Web Editor.
However, I understand that curiosity can arise because novelty is always exciting. In that case, reading the links provided at the beginning seems like an excellent starter to better understand what it’s all about
Frameworks Lite v2.0.0 is out now. Here is the release notes. If you want to subscribe to future updates to the plugin, follow this link .
Menu labels & helper texts are re-worded, to make them easy to understand. Use the simplest menu options for basic usage. Always refer to framework’s documentation to learn proper usage.
Delete action is now moved under a dropdown as “remove” at the end of the directive input field. Only clear icon is the floating one.
Directives section is now displayed just above the Attributes Editor section so that it’s easy to use both sections together. For eg, to bind an image source to a state variable,
v-bind:attr is first selected.
value/state is added.
then, the attr is edited to src via the Attributes editor to make it v-bind:src="imageUrl".
This technique is required only when there is a need to edit the LHS (left-hand-side), such as when v-bind’ing an attribute (like above), or when adding event modifiers (prevent, once, etc) to event handlers, for eg, <a @click.stop.prevent="doThat()"></a>. For more details, refer to the official documentation of the frameworks. (Vue.js - docs)
For Alpinejs, replaced jsdelivr cdn links with unpkg ones.
[Not active] When using one of the page templates of a framework, the framework is auto-selected in the Frameworks menu. This feature is currently not active as it requires backporting an event on_file_created_from_master_page from Vue Designer to Pinegrow.
Note: This is not an official plugin by the Pinegrow team, rather a personal contribution for the community. Follow me on twitter - @techakayy
Pinegrow plugins can be used only with Pinegrow desktop apps like Pinegrow Web Editor or Vue Designer. So, this plugin is not for Pinegrow Online or Pinegrow WP Plugin. Also, Vue Designer already includes this feature.
This plugin is free to use, open-sourced with MIT license. Feel free to fork and improve. PRs, improvements to documentation, text/video tutorials are welcomed.
Frameworks via cdn can be used with other Pinegrow Pro features like components, master pages, and also with Wordpress. Any contribution to the documentation showcasing such usage are welcomed.
.
I completely agree with them.
!