feat: /meme

[kyranet]

No description provided.

[favna]

Also some feedback about the site:

1. As mentioned, there has to be a list of templates like imgflip. Clicking an empty template should show a preview of what that meme could look like with some template text and images.
2. Rather than relying on imgflip URLs we should download and rehost the templates. This is important because if imgflip ever goes down or deletes a template then we should not be affected. For example just last week Imgur announced they'd be removing sexually explicit and content uploaded anonymously (i.e. through sharex and such) which means LOTS of images on the web will soon be dead links. (see: https://www.reddit.com/r/RelayForReddit/comments/12uoqaz/imgur_is_updating_their_tos_on_may_15_2023_all/).
   • This means the website will need some kind of CDN service. We can hopefully use https://www.cloudflare.com/cdn/ for this.
   • The website is Nuxt so we can use server routes for the GETs and POSTs, no need for a separate process.
   • The JSON below the generator will show something like https://cdn.memes.skyra.pw.com/{{name}}.{{ext}} or however CloudFlare CDN works.
3. The UX of the sliders for X and Y is actually horrid wtf. Why is it a circle in a box. If you want more than something simple at least look like https://www.frontendplanet.com/css-range-slider-examples/ but it really should just be a bar with a circle, not a box with a circle.
4. On that note, it would be better if we can move the box on the image itself just like imgflip. Width and height in particular are annoying to control now because they are from-center instead of from-edge so if I have just positioned it correctly on the left X axis then start making it smaller I need to go back to X and place that again and repeat and repeat and repeat.
5. X, Y, Width, Height, and rotation should allow for manual number input. Right now it's really hard to do pixel perfect placements. This is partially solved by 3 and 4, but not entirely. I know there is a checkbox for this but it should be both slides and number input by default, no checkbox. I didn't realise the checkbox was there until I went back and checked for the JSON structure. If I can't find it then simple end-users definitely can't.
6. What are "Boxes". Boxes of text? Boxes of other memes? Boxes of cows? Specify. And no not to me, I know you meant text, specify it on the website.. For example see how imgflip specifically calls them Text #1 and Text #2.
   
7. Providing an invalid link (i.e. https://i.imgflip.com/65exzi.mp4) will show the default message of having to provide an URL instead of an error.
8. We should add some form of admin dashboard so we can delete templates, right now people can theoretically link pornographic images and we'll never know.
9. On that note, we should use some form of external image scanning service that tells us whether the image is explicit or not, and reject it if it is. I'm sure there is some API out there that is free or has an open source plan. and otherwise can train our own ML by getting all the content from imgflip as "good" results and pornographic content as bad stuff /s no thx
10. Text should be more adjustable. Looking at imgflip again:
    • All caps
    • Bold
    • Italic
    • Outline width
    • Max font size
    • Text align
    • Vertical align
    • Opacity

[favna]

The site should have an overview of memes that already exist. Simple users aren't going to check a cumbersome JSON. Take for example https://imgflip.com/memetemplates

[kyranet]

1. A list of templates would have to be available somewhere, and it would depend enormously on how we design the entire thing.
   • Storing it on Artiel makes Artiel able to search memes, and has unlimited capacity. But is rather static rather than dynamic.
   • Storing it on CF makes the template repository easier to update, but search capability may be severely limited unless we do it client-side by pulling potentially hundreds or thousands of entries.
2. We could use some kind of CDN, be CF CDN or our own, however:
   • New entries need to be manually checked for content and quality.
   • NSFW filters aren't perfect, and they're expensive to run. I doubt there is a free service for this, and if there is, I doubt it's anywhere as accurate as a self-hosted runner.
3. The slider's CSS comes from @tailwindcss/forms, yes, the box should be changed to the slider, idk what TailwindCSS's developers had on their minds.
4. The box on the image (as imgflip does) is something unknown to me. The reason why I did it so manual is because I lack the knowledge on how to make it or how to search for information.
5. X, Y, Width, and Height have a toggle, which I added because sliders are nigh impossible to use on touch devices without a keyboard.
   
6. We can rename "Boxes" to "Texts" I guess.
7. There's useImage, we can use that I guess. Right now it's a very small block of code to get the loader done so I could work on the rest of the tool.
8. We would need an admin dashboard (and some way to store temporary things, CF KV?) either way. If we go for the manual curation path, we can ask users to pass an image URL (alongside the rest of the data) and then in the admin dashboard, if we approve the template, the image is downloaded and stored resized and everything to minimize bandwidth.
9. External image scanning services are part of a niche utility market and therefore hardly ever free. Refer to the second bullet on point 2.
10. Sure I guess, are all of those properties per box? Also, I recall seeing somewhere that it supported two fonts (Impact/Arial).

[favna]

Storing it on Artiel makes Artiel able to search memes, and has unlimited capacity. But is rather static rather than dynamic.

Yes. We reference the JSON. Or if you really wanna go the extra mile then do the DJS docs route where the client queries a CF worker function for full text search and that same worker function in turn periodically refreshes the JSON from GitHub but 🤷

X, Y, Width, and Height have a toggle, which I added because sliders are nigh impossible to use on touch devices without a keyboard.

You don't quite get it. I'm talking about both. You can do the slider above and then instead of making the text a string just make it an underline style text field (like the "standard" variant of MUI https://mui.com/material-ui/react-text-field/#basic-textfield) so people can click or tap it and enter their own number.

which I added because sliders are nigh impossible to use on touch devices without a keyboard.

Nonsense. Sliders work just fine on touch devices. No idea where you get this from.

There's useImage, we can use that I guess. Right now it's a very small block of code to get the loader done so I could work on the rest of the tool.

It also doesn't take all that much to regex check the extension... In fact, you can copy the regex from Skyra's code.

Sure I guess, are all of those properties per box? Also, I recall seeing somewhere that it supported two fonts (Impact/Arial).
Yes and yes.

---

I guess we can forego rehosting for now. We will want some form of admin dashboard still, but we don't need to as strict on content approval then because the content isn't hosted by us.