How to Add userstyles or gain acces to our own userstyles ?

[decembre]

Sorry , was an error of me.. I can't change the label "Bug"...

But i have a question: How i can add userstyles to your your site? It's possible to gain access to our own userstyles displaying here?

[vednoc]

Hi, all good. 😃

As for adding new userstyles, you have to self-host them wherever you want. Take my Dark-WhatsApp project as an example, all the code is hosted here on GitHub. I then made a content/userstyle/dark-whatsapp.md file and added the necessary info for archetypes/userstyle.md template (see raw file, pretty formatting is not great).

You could put all of your userstyles in a single repository, but just make sure the links are correct. Also, you can upload an image in a comment (that you don't even need to send) on GitHub, and copy the link from preview tab in order to avoid adding a ton of images to the repository.

That should be it! I plan on changing some things around during next week; been quite busy with life in the last few weeks.

[decembre]

Ok, thanks ! Just a little bit complicated for me... :-) I am not very good for using Github, but seems a powerful process.

When you have time, can you find a way to make adding userstyle more simple ?

[vednoc]

I'll add a more thorough "getting started" guide in the documentation. I'm sorry if it's too confusing right now, but I'll try my best to make it much more friendly for newcomers.

[decembre]

I understand and yes it should be great to have something more useful for newcomers: Wait and see

[vednoc]

Hey @decembre, I've added the aforementioned "getting started" guide. Let me know if you found it easy to follow, if you got stuck somewhere, or if you have suggestions on how to make it better.

[decembre]

That's a good doc, useful to understand how GitHub work. But for a "normal usage" about posting an userstyle or a newbie, it seems (in fact, it is) heavy: We need GitHub account, manipulate our code, Setting up a repository, Sending a Pull Request. And ..."I’ll review it and let you know if everything is alright...."

Whaaa that's too heavy for me, sorry.

But i am not coder, maybe my 2 cents idea can't be useful. I can make effort on something similar to a submit form, like with this damn and poor userstyles.org, I don't know how you can do that, i imagine it's very difficult (and i think your idea of review should by hard to maintain too).

Anyway, we need something to replace uerstyles.org : I read on "Open Styles - Discord Channel", some approach around the idea. And notice its difficulty.

[AbhayAysola]

I'm not sure if it's possible with Hugo, but I have an idea to rework the themes system. Basically it will be a form on the actual website. You add the required fields - Name, Author, Contact, Installation url and the other stuff. Once you complete the form, it gets sent to the database. When the themes are being loaded, we take the data from the database and load it. I'm not sure how this would be done with Hugo, but it's pretty straightforward with Node JS.

[decembre]

Yes, should be better like that. Go to discord to ask suggestion too. I wait your future evolution. :-)

[SeerLite]

I find the instructions quite easy to follow, but that's probably because I already know how Git/GitHub works. AFAIK Hugo is just a static website generator, so a backend with a database to receive the forms with the styles would need a really big change to the entire website (correct me if I'm wrong). It's a whole new layer to set up.

@decembre Have you tried the instructions? Is there any specific step you found too difficult? It's not as hard as it seems really (or at least I hope not!). Do you think maybe a short video tutorial would be easier to follow for newbies so they can just follow the steps quickly and get their GitHub repo/account + PR set up?

I'm just chiming in here cause I love this project and really want to see it grow. Maybe a backend/database/whatever really is necessary to maintain it successfully though.

[AbhayAysola]

According to me, the database thing is much better in terms of scalability but that comes later. The decision should be made now, whether to stick with Hugo or database and react or other frontend frameworks. The instructions aren't that hard to follow in my opinion it just takes time. If the website gets bigger, it wouldn't be feasible to approve every pull request. Hosting on GitHub is optional anyways so if we implement the database thing, a GitHub account or any knowledge of GitHub wouldn't be needed. But if Hugo is what vednoc wants to do, then Hugo it is.

[vednoc]

My main goal with this project was to present the idea of not having to rely on backend/database and to do everything as static content since it's "cheap/free" (free as in beer) to host on a CDN, while renting a VPS costs money and takes much more time to develop (especially if you don't have the required skills to pull everything off by yourself, like me 😅).

This whole website was just a minimum-viable-product, and I kinda stopped working on it for a month due to university exams, and to work on some of my other projects, but now I'm back at it to add some of the things I didn't have enough time to do before.

We need GitHub account, manipulate our code, Setting up a repository, Sending a Pull Request.

I think the benefit here is that you'll learn how to do it once, which could take a little bit of time, but from there on out you're going to spend far less time than trying to create/update a userstyle on USo.

I completely understand the drawbacks, especially for people that aren't familiar with git and/or Github. It's something new and different, and we all know how (most) people react to new things.

And ..."I’ll review it and let you know if everything is alright...." Whaaa that's too heavy for me, sorry.

The idea here is to simply verify that the template data is correct, and that links lead to valid addresses and not 404 pages, which will take a few minutes at most. Should this project gain enough attention to receive a lot of pull requests (which I doubt), the reviewer doesn't have to be me, it's more than likely to be someone else.

a backend with a database to receive the forms with the styles would need a really big change to the entire website

You're pretty much on point. Hugo is useless if you have a proper backend/database since it's not a "UI layer" like React/Vue/etc.

In fact, the "database" part of Hugo is stored in the data directory, but in USw I'm actually using content directory to store the userstyles. It serves the same purpose AFAICT, except you can use hugo new userstyle/example.md to create add a new userstyle; this might change in the future.

the database thing is much better in terms of scalability but that comes later

It shouldn't be too difficult to swap Hugo for a setup like that if it gains a lot of popularity. The only problem here would be migrating userstyles to user accounts (if there are any).

Hugo is pretty fast! There aren't many pages right now, and 38 of them are generated in 50–100ms on my machine, but on Vercel it takes 20–30ms and the whole website is deployed in less than 10 seconds. The slowdown is bound to happen, it's just a matter of adding enough userstyles.

But if Hugo is what vednoc wants to do, then Hugo it is.

I'm down to whatever is the best solution that will be worked on. USo will be replaced sooner or later, it will just take some doing for that to happen.

-- There is also a similar project at https://github.com/33kk/uso-archive that archives the entire USo. My project creates a brand new place for UserCSS userstyles, but I'm still torn between continuing the development of USw or contributing to USo-archive. Perhaps it would be possible to meet somewhere in the middle.

I hope that answers all questions. If not, let me know what I missed and I'll get back to you shortly. 😄

[SeerLite]

Hey @vednoc, check this out! https://fosshost.org/ It's a free hosting service for FOSS projects. I think userstyles.world would fit right in!

Even if you don't see the need for it yet, it's a good solution to take into consideration!

[vednoc]

That's awesome, @SeerLite. Thanks for the link!

[vednoc]

Hi @decembre, USw has been rewritten, so now you can create an account and add/import/edit/delete your userstyles like on USo. If you didn't convert them to UserCSS format, search for them in USo-archive and your source code will be available by clicking on "UserCSS" or "Install" links. If you want to import them, just copy-paste said link.

Keep in mind that this is the very first public beta. Check the Roadmap for an incomplete list of tasks, and feel free to open a new issue if you have feature requests. More features are coming soon, but I would appreciate any feedback that you might have.

The rewrite is live at: https://www.v1.userstyles.world

[decembre]

That's a Good news! First test. The import function One By One: After test, in my usertsyles page from USO, i choose copy / paste the UserCSS link dirctly. Seems the good way to do.

But, firstly i opened it, which open a tab driven by Stylus (which show the code but said "error parser: invalid regex group"). And copy/past the link in the adresse bar of this Stylus Tab: Not good (invalid format)

So, Add more infos to which links we need choose should useful. Maybe by adding an example of link to copy in the form. By example in my test for import Youtube WideScreen (New Design Polymer), it was: https://raw.githubusercontent.com/33kk/uso-archive/flomaster/data/usercss/188453.user.css

• Request Edit an userstyle The description form should be multi lines. The notes can be edited ? I wanted add them (because they are not imported): But i don't see a save button. And in general their is no save button for the Edit page.

• Request for screenshots: Accept import it from services like Imgur

• Request Batch Import: Add the possibility to import all of them (with Screenshots) from Userstyles.org directly as USO . And if it is possible all at once (with a check before each to choose which usertyle to import effectively.)

As Userstyles.org have not API to verify if we are the owner of them, here an idea to how verify if we are the real author of these styles: You can ask to us to go to our Usertyles.org profile page, and change our username by adding a word, by example add "userstyles.world" to our Username, which give an indication of the reality we are the owner.

For me it should be: decembre-userstyles.world After the import done we can revert back to our old username, or let it like that to say we are moving to userstyles.world...

So like it is only the owner can change his username, the proof is done and you can import our usertyles from Usertyles .org directly

[vednoc]

error parser: invalid regex group

I don't see any issues when installing that userstyle. Stylus might be using something that's not available to Waterfox Classic, if you're still using that browser (saw that in the userstyle description).

The description form should be multi lines.

You're right. I'll change that in next beta release.

The notes can be edited ?

Yes. Once your userstyle is added/imported to USw's server, you can change it however you like.

their is no save button for the Edit page

It's the "Edit userstyle" button, but I'll change the name to "Save", as it seems more appropriate.

Accept import it from services like Imgur

Had this in mind, but it could be exploited. Our goal is to store them on the server itself, but for the time being you can right click on the image and copy image location. For your style, the link to main screenshot is: https://raw.githubusercontent.com/33kk/uso-archive/flomaster/data/screenshots/188453_after.jpeg

I'll look into scraping the image, category, and notes, so that you only need to paste the link to your userstyle and you're done.

Add the possibility to import all of them (with Screenshots) from Userstyles.org directly as USO .

Not only would this make your userstyles uninstallable without direct support from Stylus (and/or other userstyle managers), but it would also require reinventing the wheel if we wanted to make them installable (by converting "traditional" format to UserCSS format).

Request Batch Import

Maybe. I'll have to explore that option, but the answer is likely to be no because importing userstyles is a one-time process. We also don't want someone to import their userstyle many times (just realized I have to fix this).

here an idea to how verify if we are the real author of these styles

That sounds like a great idea. I'll have to explore their API, but USo-archive will surely be used as a source for userstyles. There's a lot to this, but I'll let you know about my findings.

(If I missed replying to something, please point it out and I'll be happy to do so.)

[decembre]

That's ok... Seems on the good direction. ;-) Just don't understand: "Not only would this make your userstyles uninstallable without direct support from Stylus (and/or other userstyle managers), but it would also require reinventing the wheel if we wanted to make them installable (by converting "traditional" format to UserCSS format)." Re - Edit: Yes, i understand a little bit more: You speak about Convert the old MOZ format to usercss format(which is done by USO: so not need "reinventing the wheel "). But, i don't understand: "Not only would this make your userstyles uninstallable without direct support from Stylus (and/or other userstyle managers), "

Another question: I make my userstyles on the old way (Mozilla format), because i use a modified version of Stylish (without spy) which have a good editing interface (for me, more comfortable than Stylus).

Can i update an usertyles on your site by simply past in in the CSS form?

If not it should be kind to have a parser (?) for that, no? I think i am not the only one in this case.

Thanks for the way to add my screenshots... But there are no way to save my change, yet . Click "Edit" press enter etc don't save my change actually.

About Waterfox and Stylus: It seems i have a problem with this userscript: Linkify Plus Plus It seems hide/remove links on certain actions (copy paste in form it seems, not certain..and maybe in the Stylus process too) If i disable all my userscripts, i have an error too, but different: "Stylus a échoué à parser le usercss : can't access lexical declaration `metaParser' before initialization" Yes, as you said, that's should be a Waterfox problem (one more...)

Re test: Definitivly a waterfox Classic problem: With Firefox Quantum open/install from USO is fine (not error massage)

[vednoc]

Traditional format (or userstyle without ==UserStyle== metadata) requires extension support. You can't install userstyles in traditional format in the same way that you can install userstyles with ==UserStyle== metadata (or UserCSS format).

If we wanted to make them installable, we would have to either:

1. Convert traditional format to UserCSS format (like what USo-archive is doing, but now we will have to do it ourselves)
2. Ask and wait for Stylus (and/or other userstyle managers) to add support for installing traditional format from USw

Convert the old MOZ format to usercss format

It's similar, but it's not it. Mozila Format just wraps code added to sections on Stylus' edit page:

@-moz-document domain("example1.com") {
    :root { section: 1 }
}

@-moz-document domain("example2.com") {
    :root { section: 2 }
}

On the other hand, UserCSS format takes userstyle details (name, author, version, etc) and options for "Customize Settings" (if there are any) then embeds them into ==UserStyle== metadata. More info on the Writing UserCSS/UserCSS Metadata page.

UserCSS can be installed from anywhere, and that's the beauty of it. As a bonus: in order to customize settings, they're now embedded into Stylus' popup menu, you no longer have to visit USo in order to change them.

i use a modified version of Stylish (without spy) which have a good editing interface

If you want a good editing interface, using Stylus with an external text editor is the best. I have many snippets that work like Emmet (simple example: type "bgc" press tab and it expands to background-color: x !important; x is your cursor).

Can i update an usertyles on your site by simply past in in the CSS form?

Yes, you can. Keep in mind that you will get errors if the UserCSS metadata is missing. We do this to avoid broken userstyles.

Click "Edit" press enter etc don't save my change actually.

After you finish making changes on edit page, scroll down and click on "Edit userstyle" button.

Waterfox problem

Yeah, that's really unfortunate. I've been a Waterfox user for many, many years. These days technology goes obsolete very fast.

[decembre]

If we wanted to make them installable, we would have to either:

1. Convert traditional format to UserCSS format (like what USo-archive is doing, but now we will have to do it ourselves)
2. Ask and wait for Stylus (and/or other userstyle managers) to add support for installing traditional format from USw

OK: For an easy Editing an old userstyle / Create a new one , should be possible to have a CSS code form in 2 parts: One for the metadata (for a new creation with an general template - or customisable which have register to our account). Another one for the Old CSS ?

Convert the old MOZ format to usercss format....

Ok Actually i don't use usercss, keep a compatibility with MOZ format is important, no?

If you want a good editing interface, using Stylus with an external text editor is the best.

Stylus can use an external editor? I need test that (but you lost the instant preview?). I am not very expert with shortcuts: All i need it's a simple interface with line numbers, code error verification and a toolbar for basic actions: comment /uncomment, undo / redo, Go to line number, Go to Top/End and an automatic !important; (which can be enable /disable) when i press ! .... I asked for the Toolbar to Stylus forum: They say yes, but ....

After you finish making changes on edit page, scroll down and click on "Edit userstyle" button.

Yes, i have seen, but the problem was a ' added before and after the text in the description form after the import. Removing them make the " description" form ok: After that, i can make all changes i want and save them with success. note: I haven't take attention to the red border on the no valid description field. But when i test with Quantum, i see the tooltip message "invalid...". Maybe it's not visible to Waterfox.

Yeah, that's really unfortunate. I've been a Waterfox user for many, many years. These days technology goes obsolete very fast.

Yes, but actually i stay with it for: My Modified Stylish editor Firebug (buggy but usable) and Firepath (so practical): Tested regularly the Quantum DevTool but i found it very uncomfortable to use for CSS things. Many beautiful improvements but basic things are not so easy as Firebug was. By example Quantum need to open a devtool window for each tabs we want inspect....

[vednoc]

CSS code form in 2 parts

That's unnecessary. I bet 80% of people (or more) would want to copy-paste code from editor, save the userstyle, and carry on with their life. Including me. It will be done this way until there is an API endpoint to update userstyles with cURL, GitHub Actions, or other methods.

Actually i don't use usercss, keep a compatibility with MOZ format is important, no?

UserCSS consists of that metadata block and exported "Mozilla Format" code. All you need to do is keep the metadata block while updating.

Stylus can use an external editor?

Yes. And yes, you do lose live preview. It's a tradeoff, but I find external text editor a lot more useful than live preview.

I am not very expert with shortcuts

It's about muscle memory, the more you use them the better you get at it. Most editors allow you to set your own shortcuts, and make custom snippets, it really is worth the invested time and energy. After a while you'll write code with a lot more speed and accuracy. That's my suggestion.

I haven't take attention to the red border on the no valid description field.

This also needs to be fixed. The allowed text length should be increased, sorry about that. The red border will disappear if text is less than 128 characters.

i stay with it

If that works for you, awesome! Waterfox Classic had too many performance issues with websites that I used at the time, so it had to go.

[vednoc]

In the next release the import feature will be improved a lot — we'll get most of the available data from USo-archive. Also, #19 will be added and that should conclude the "set it and forget it" type of functionality.

If I missed anything, please open a new issue so I can keep track of it.