mavoweb / plugins Goto Github PK

Nice feature to have, it will broaden your community since lots of users have Google and Facebook accounts.

Both provide OAuth2 API for logins.

You can even write on Google Drive as a backend.

From @mxuribe on May 17, 2017 13:31

This is an awesome project, kudos and congrats to you!

Beyond supporting localStorage, github, and dropbox, please consider supporting other common and standard data back-ends that would allow for self-hosting, such as for example remoteStorage (https://wiki.remotestorage.io/Protocol), Standard File (https://standardfile.org/#protocol-specification), etc.

Again, kudos and congrats; I look forward to using this!

Copied from original issue: mavoweb/mavo#187

From @attiks on May 17, 2017 13:21

Add support for gitlab.com and self hosted gitlab.

Copied from original issue: mavoweb/mavo#186

Hi

Sorry if it's not the right place to post for plugin issues

couchDB plugin is not working

when adding mv-plugins="couchdb" to mavo
browser says:

Couldn't find the requested file /mavo-couchdb.js in valterkraemer/mavo-couchdb.

it was looking for

"https://cdn.jsdelivr.net/gh/valterkraemer/mavo-couchdb@latest/mavo-couchdb.js"
"https://cdn.jsdelivr.net/gh/valterkraemer/mavo-couchdb/mavo-couchdb.js"

Also tried to load it manually, with a mavo-couchdb.js local file
using this file

but then got an error like

TinyMCE controls appear:

<div mv-app="frontPage" mv-plugins="tinymce"  
mv-storage="https://github.com/emdashbuck/playmavo/frontPage.json">
<section property="text" class="tinymce">

TinyMCE controls do not appear:

<script src="js/mavo-tinymce.js">
<section property="text" class="tinymce">

I can give you the errors my console is throwing on the latter if you'd like them, but they're indicating the issue is in tinymce.min.js which I'm pretty sure isn't the case.

From @LeaVerou on September 15, 2015 22:44

To enable people to build contact forms and the like with wysie!

https://medium.com/@mariusc23/send-an-email-using-only-javascript-b53319616782

Copied from original issue: mavoweb/mavo#1

(ported from mavoweb/mavo#237)

Steps to reproduce

• Go to http://mavo.io/demos/homepage/
• Choose Edit
• Click the rich-text field
• Press ⌘ + A
• Type X

Expected result

• Text field contains “X|”

Actual result

• Text field contains “|X.” (note the cursor position and extra dot)

This might be a TinyMCE bug though.

I am going to the grumpy cat demo with?storage=local to test this: http://mavo.io/demos/homepage/?storage=local

Browser: 53.0.3 (64-bit)
OS: MacOS Sierra 10.12.5 (16F73)

firefox

chrome

To store Markdown and have it displayed as HTML when not in edit mode.

Hi to all and bonjour @Falafel65

I've been able to install this plug in, and read data.json file correctly

But I'm not able to edit properties and save data (despite correct file permissions)

I guess it's the same cause @LeaVerou and @DmitrySharabin are talking about in another plugin #112

I get this error:

I've experimented with this idea in inspire.js and I think it works really well.
There's a registry of plugin ids and selectors. If a selector matches, the corresponding plugin is autoloaded.

In inspire.js this is default functionality, but in Mavo we could develop it as a plugin. Then people only need to specify mv-plugins="autoload" and add/remove plugins by simply using them.

Plugins could declare what selector applies to them via an extra field in the registry.

Mavo seems nearly perfect for my usecase, however for one website that I'm planning to use Mavo with, I'd rather not have a public github repository (or make the client sign up to github).

I wanted to make this feature proposal as a sort of Request-For-Comment to see if creating a new storage backend based on the github one, but intended for local git repositories (i.e. where the git repository is stored on the same server that is hosting the site).

I imagine this would act exactly like the github integration but would make the commits to either a repository in the current directory, or a more custom setup with a bare repository in another folder (using git worktree) so that the .git folder is not being served by the web server. This would allow a local git username and email address to be set up for use as the identity for making commits so that git is completely abstracted away from the end user (such as when a developer is setting this up for a client).

To replace the github auth (and thus continue to control who is able to make changes to the repository) i was thinking of either setting up some local login database that could run on the webserver to provide a login functionality, or possibly using some kind of oauth (like sign in with google) so the user is able to make edits if they successfully complete a "sign in with google" exchange and authenticate as an account that is on a predefined list of allowed editors (and possibly mapped to git commit identities).

While I should be able to make this happen myself by reading the awesome docs on plugins and storage backends, I'm pretty much brand new to Mavo and wanted to see if the community had any feedback on how to do this (or if anything can be added to help it benefit the community even further). From my research so far, it seems like, most critically, this would depend on the ability of Mavo to run git comands (or other system commands) on the web server. Does Mavo's achitecture have a server side/backend component, or is it all frontend node?

While trying to see if a storage backend needs to handle deleting uploaded files, I read this code in the clear function.
https://github.com/mavoweb/mavo/blob/1281b72b2154d9171676c7c5d87cf12a00b2887b/src/mavo.js#L322

At face value, it looks fine (actually the store function does not take a parameter), but should store be called here? Shouldn't the data only be saved when the user chooses Save?

It did not help me figure out if I need to delete an uploaded file. How is that handled?

From @yonjah on May 17, 2017 15:5

It seem like it is possible to inject code into commits -
https://mavo.io/demos/homepage/?lite=&homepage-storage=https%3A%2F%2Fgithub.com%2Fyonjah%2Fdata-1%2Fhomepage.json

Since you don't need any approval to send link to the preview page this means stored xss can be achieved without a major issue.
Even if the preview will only be available to owners this is still a major issue since if we assume most owners will not have basic programming skills and wont be able to manually review the commit going into the preview page with injected code will allow taking over the owner account

I know this project is still very young but it is probably something you'll want to address sooner than later.

Copied from original issue: mavoweb/mavo#188

Dear Community,

as I mentioned on this discussion with @DmitrySharabin mavoweb/mavo#948 (comment), I´d really like to see an open source alternative to Firebase back-end with real-time capability. There are quite a few of these - most popular for sure Supabase, Appwrite or RethinkDB. I suppose there could be a high interest for this, because you are not longer locked-in in Firebases. Would be very nice.

Thanks!

Hi

While there's already an editor for <img> elements,
I came to different use cases where I couldn't use it in a friendly way:

1/ When image is on the right side of the viewport:
Img editor seems to not being responsive, so I couldn't see the url input correctly

2/ Cropper plugin
Most user don't understand, when to update, load image, crop ratios...etc
The refresh icon from cropper plugin, refreshed with a smaller cropped image (while users thought it was to reset image from initial size)

3/ I wasn't able to customize img popop editor

4/ If people want to upload from Unsplash or other free ressources, they need to copy/paste full url

5/ Usage of mobile phone camera is not implemented by default

While searching for solutions, I came to a really nice and stable github code, and I would like to submit the idea to use it:

It solves all previous usecases, and even allow to transform image (rotate, scale, blur..etc before uploading)

I don't know if all those functions could be done already with Mavo adding code,
or if someone would be interested to implement this javascript as a plugin maybe?

I get this warning in my console when using mv-plugins="tinymce".

"The CDN you are currently using to access TinyMCE will be turned off on 25 Februrary 2021. Please ensure you upgrade TinyMCE (https://www.tiny.cloud/blog/how-to-migrate-from-tinymce-4-to-tinymce-5/) in order to not lose access to the editor."

Mavo is currently using https://cdn.tinymce.com/4/tinymce.min.js, which according to the blogpost indeed will be shut down on February 25th 2021. The new version seems to require an api-key and a "tiny.cloud" account for some reason, so it might not be compatible with how Mavo loads the plugin right now? (if it has to be a personal api-key and not a global one), but there may be alternatives.

Somehow, this happened unexpectedly in a Mavo app I'm making. I used the codebase as if mavoweb/mavo#1025 was already merged, as Netlify is deploying it for use with a <script> tag.

mavo-list-separator.js:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
    at node-render-start (mavo-list-separator.js:22:70)
    at deps.js:2:1
    at Array.forEach (<anonymous>)
    at n.run (deps.js:2:1)
    at Collection.render (node.js:302:1)
    at Collection.<anonymous> (group.js:181:1)
    at Group.propagate (node.js:246:1)
    at Group.dataRender (group.js:162:1)
    at Group.render (node.js:344:1)
    at Mavo.render (mavo.js:356:1)

Hi,

I've made a PHP backend for Mavo (https://github.com/Falafel65/mavo-php), to work with local server.
Could it be reviewed and if it's ok, added to plugins list ?

SQLite is a no-config SQL database that is possibly the most widely use db in the world. Small in both footprint and resources, most ISPs include it in their default installations, and those who don't will install it when asked. PHP ships with sqlite adaptors built-in, as so do many webdev frameworks and ORMs.

This is very important for documentation and demonstration purposes aside.

It would be incredibly helpful if Mavo could use MySQL as a storage backend. For better or worse, SQL databases are well-entrenched among most web hosting services - and MySQL-compatible databases are by far the most popular, and readily available everywhere.

It would be great for Mavo to support NoSQL databases like Mongo, Couch, Arango, etc. These databases, however, require quite a bit of technical knowledge, and don't come pre-bundled and pre-configured with any easy-setup hosting services. MySQL is still by far the most readily-available db out there, which in most cases requires the least amount of installation+configuration. Anyone on a $1/month shared host setup is likely to have access to a MySQL database, without having to instal anything on their own. IMHO, if a new Mavo user sees that they are able to use MySQL as a storage backend, they might be more inclined to try that, even in preference to Github or Dropbox.

Lastly, because of its age, there are a number of existing and well-tested high-level ORMs that interface with MySQL (in various languages) and can help automate database forge functions (creating and managing tables, etc.). Some of these libraries can give MySQL many of the advantages - and some of the flexibility - of NoSQL databases. For example, RedBeanPHP is a super-high-level ORM that can create and manipulate db structures based on your code, so you don't have to worry about defining your schema at all.

Hi

Sometimes we would like to embed external content inside a webpage, like a tweet or instagram feed

Instagram allows you to copy/paste each post link which will be like an image of the post that you can embed into yout website, but you need to do it manually, for each post :(

What about a plug-in (like the twitter one) that would allow to connect to instagram, and grab last X posts?

• not only to copy/paste a twitt
• but ask for a specific feed to be displayed

Something like this:

or

There are some 'code' (like instafeed.js that maybe could help

Mavo could connect to an instagram feed, and allow to filter or display it with specific styles, or sync with other properties to display stats, etc

I would love a Google Sheets backend.
Not only is it useful as a primary backend, but also as a secondary export.

It would also be cool if changes from the sheet could be pushed back to the Mavo, but that would be v2 :)

This should be relatively easy as it's mainly reusing the code from image uploads that we support elsewhere, then getting the returned URL and inserting it in the MD.

I suppose while the upload is pending you'd want to enter something like ![Uploading...]() and disable the textarea. Github's comment area is a good example of good UI for this.

@DmitrySharabin would you be interested in implementing this, since you've worked with uploads before?

This came up in mavoweb/mavo#257

It would be awesome to have a plugin that automatically generates and uploads thumbnails of every uploaded image. Of course, this would need to be opt in, perhaps with a class on the <img>, e.g. mv-thumbnails or mv-create-thumbnails.

From @brundonsmith on May 18, 2017 3:28

When I first started playing with this I quickly thought, "this is amazingly powerful syntax; even as a professional web developer I'd consider using this for projects". Then it occurred to me that it would need to be possible to hook up a custom API for storage, which, I can see by a comment on the Smashing Magazine article, is apparently possible. But then I thought, "well, maybe all I actually need is a database". Since the data is already JSON, might it be possible to create a MongoDB storage option? That way it wouldn't require any custom code to hook up to an API, it would just work.

For clarity, the use case for this would be having multiple users, each of whose data is private to the other users. Github and Dropbox allow user permissions for editing, but all data is necessarily public.

Thoughts? Is this on the roadmap? Is it even feasible?

Copied from original issue: mavoweb/mavo#189

This may evolve to one issue per back-end, but: certain back-ends come with capabilities beyond those assumed by Mavo. For example, github offers versioning, while firebase offers access control rules. It would be nice if it were possible to expose some of these extra capabilities in the mavo app when they're available---for example, to let a github user load a particular commit, or let a firebase user add a rule. It would seem natural to incorporate these specialized UIs in the back-end plugins, since those plugins already incorporate the knowledge of how to talk to the given back-end.

When editing a TinyMCE field and hitting save directly after (without “leaving” the TinyMCE field first in another way), sometimes the slightly older version of the field is saved instead of the latest contents.

just got back to play with mavo and i found out the langugaes plugins didnt work for me if im using the mv-plugins attribute in the mvapp
for instance ive included :
mv-plugins="locale-he"
and then im getting 404 :
ive checked the url:
the url it try to get:https://cdn.jsdelivr.net/gh/seffyfisher/mavo-locale-he/@master/mavo-locale-he.js
the correct url: https://cdn.jsdelivr.net/gh/seffyfisher/mavo-locale-he@master/mavo-locale-he.js
the diffrence between them is the "/@" instead of no slash

ive checked the greek locale via mv-plugins="locale-el" and it works well
so i guess its something to do with the link of my github account
i just wanted to fix it and i wasn't sure how and if the problem is at my end and how to fix it

p.s.
i would love to keep contribute to the project let me know what is needed now so maybe i can try to help

Are there any chances we could edit an image (crop, scale, rotate, etc.) before uploading it to the chosen backend?
I'm planning to develop an app that lets an end user upload images (as far as I know, that function is already available) and make a sequence out of them. So I thought it would be cool if they could make some simple operation with the image right before sending it to the server.
I looked through Github and found a JavaScript library that solves the problem as I suppose it to be solved. From my point of view, the library has many cool features (including localization 😊) and well-documented. At the moment, I'm a bit far from writing a plugin for that feature myself (I hope someday I can manage it 😉) so I decided to request it.

As an author I would like to have an mv-versioning attribute on the mv-app element, to specify that mavo should keep and provide access to multiple versions of my data. We get versioning for free on github, though there isn't a particularly elegant way to access the old version.

For access, it might be nice to trigger, via a url parameter or a config of the toolbar, access to a versions list; selecting from the versions list would load the data from that version. Having done so, there should be a way to reset the data to that currently-viewed version.

As for storage, since Mavo's target is small apps, I think it would be fine to just take periodic snapshot backups and store them under separate names in the specified storage. Periodicity, and the total number to keep, could be specified in the attribute, e.g. mv-versions="7 daily" to keep one a day for the past 7 days.

Related but separate, since Mavo is already keeping a history for undo purposes, it would seem theoretically possible to store the entire (again small) history for some period of time, which would allow undo to persist across multiple sessions.

Hello,

What's the best way to do routing with Mavo?
Has someone made a plugin?
Can it be used in conjunction with React/Vue?

What's the best way to prefill content in a div with markdown plugin on it?

Currently:

As discovered by @svgeesus on colorjs.io/notebook

I suspect this is because we don't actually update the storage when we have a URL, we only update the URL.
Should be easy to fix.

Hi

While there's already a plugin to connect to Google Sheets, I came to a use case, where it would be nice to be able to register to an event, connected to Google calendar

I guess it's possible to connect Google Calendar, to Google Sheets, then to Mavo (needs a specific spreadsheet, plugs ins on Google side that links spreadsheet to Google calendar... painfull for a simple user)

But it would be a really nice feature to be able to connect Mavo to a Google Calendar directly

something like Microsoft

1. Use case 1:

Display availability of a meeting room

2. Use case 2:

Register to a course/event
1 calendar for a classroom
Teachers can add events to this calendar, with courses descriptions

Mavo would then handle the process of submeeting new attendees (A button on a Mavo page, to register to event)

Then outside mavo
User would then receive a confirmation from Google calendar, to his email, confirming he has been added as attendee

auth0 docs

lock docs

auth0 has the ability to use github as well for logging in, but the benefit is the developer can choose other sources.

Thought this would be a nice drop-in plugin or general integration

Hello, I really like Mavo and all of the functionality it provides, thanks for creating / maintaining it and sharing it with the world!

I was wondering if you would be open to a PR to add the ability to pass options to configure TinyMCE via DOM attributes. For my use case I'd like to configure the toolbar. Would you be open to this?

From @aolko on May 17, 2017 7:13

Is it possible to connect a database like Arango/Taffy/Rx/Pouch
?

Copied from original issue: mavoweb/mavo#184

From @terabaud on May 17, 2017 9:52

When you are at the plugins page and you want to get back to, eg. "Getting started" via the footer links, you get a 404 Not Found error:

The footer links mistakenly contain the plugins.mavo.io subdomain: https://plugins.mavo.io/docs/... instead of https://mavo.io/docs/...

Copied from original issue: mavoweb/mavo#185

The Markdown plugin uses the Showdown library under the hood. And wrapping markdown in paragraph tags is the default behavior that might cause some issues and sometimes highly undesirable (e.g., see https://codepen.io/dmitrysharabin/pen/zYwxEPJ?editors=1100).

It is not a rare problem at all. There are issues concerning it in the Showdown repo as well:

• showdownjs/showdown#493
• showdownjs/showdown#573
• showdownjs/showdown#588

As @tivie mentioned in their comment: Showdown does not support selective conversion (the ability to only parse and convert certain markdown elements), however, one can create an extension that removes disallowed “tags”.

So, we could add this code (with some modifications if needed) to our plugin:

showdown.extension("remove-extra-paragraphs", function () {
  return [{
    type: "output",
    filter: function (markdown) {
      return markdown.replace(/<\/?p[^>]*>/g, "");
    }
  }];
});

However, we need to decide whether we want this extension to be enabled plugin-wise or property-wise. If plugin-wise, how can we distinguish when to apply some extra transformations on the markdown and when don't? If property-wise, should authors add some extra attributes to the property, or maybe they should add a class?

Are there any other cases we should take into account?

@LeaVerou @karger What do you think?

E.g. useful when storing data in local storage but you want to share it or store a backup.

Some apps are basically readers of certain "document" types, and it doesn't make sense for them to be tied to one data source, but each user may want to load their own data source. E.g. any tracker, the pros and cons app, the svg path demo. It would be nice to have a plugin that, when visited with no params it offers UI to select storage location, and then redirects to a URL that includes that storage location. This will also enable non-technical users to use many Mavo apps that right now require fiddling of the URL params to get to use your own storage.

Regression, this used to work.