are there any utilities or approaches to export regular react component into an email friendly static html?
for example i have a dashboard using react-table and would love it if there was a way to auto-magically translate that to static html i could insert into an email body.
i can think of a few approaches using a headless browser to render as pure html, but it would be awesome if there was a solution with more email friendly html
Because the layout of these gets fairly complex, it may also be advantageous to render page as image and insert that image into email body?
I only really know HTML Email, and basics of React - and SO is not great for recommendations of software type questions - so I'll just speak to the email side.
If you can get HTML, you need to consider a few things.
First, anything over two columns is likely to run out of space. You would need to consider a stackable column structure with repeated headers. That would require hiding the duplicated headers for desktop views, since the tables would be separate due to the way we do stacked columns in emails (as inline-blocks without media queries). See https://medium.com/#nathankeenmelb/bulletproof-responsive-datatables-in-html-emails-64248b9e18f5 for full details.
Second, only some approaches would work like that. Images then would be your go-to option. A nice output for table images would be:
<img src="https://via.placeholder.com/600x500" width="600" style="vertical-align:middle;width:100%;border:0">
The link goes to the image itself so you can zoom and move around easier, and get maximum realestate.
An alternative built on that idea would be to have a link from the image to landing page with full web capabilities. That would take longer to load, but may be well worth it.
Since that's probably the most viable, I'll explain these choices of attributes and styles:
Use the width attribute width="600" because that's what Outlook desktop uses
Use inline styles for those email clients that do not support <style> blocks
Vertical-align:middle (or display:block) removes the space underneath the image that some email clients add
width:100% makes it responsive to mobiles
border:0 ensures no border is shown because of the link
Third, datatables are so finicky and particular in HTML email. Each table is unique because they have different data in them that responds differently. In normal web design, you can just use a nice reset and get everything working without much thought. In HTML Email, everything needs to be inline, and supported, with fallbacks for those things that are unsupported. So even the core data often needs editing - e.g. if it has long URLs, emails or words you need to add a wrapping span with word-break CSS but also <wbr>s in the middle of it for some email clients to properly wrap.
Datatables don't often come up, and because of these considerations, it's hard to see how they could be automated easily - and hard to build a case for it financially.
On a related note, if you can show the information using card UI, that seems to me to be a much nicer, simpler, more accessible and easier to code solution than datatables. This is about taking the information and redesigning it into card blocks. I talk about that in detail here: https://medium.com/#nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2
Related
I'm trying to decide between using ParentalKey or StreamField, in this case, with the purpose of adding an image gallery to a page.
We don't need any other information than the image itself (given that the image will be anyway a wagtailimages.Image model's instance, so the alt text is already handled there).
Any thoughts on what is better to make it easier for the editor to work even if maintaining around 50 images per page?
And about good practices and code maintainability?
Would you prefer a third party package for the image gallery? (even if that blocks you from upgrading to wagtail 4?)
Would your opinion change if instead of a single image, we needed some more fields?
Many thanks!
For an image gallery, the first recommendation would be to use the Collections feature. You can get pretty far with the nested collection system and even add extra meta data if needed by adding a model that relates to the collection.
If that is not suitable, ParentalKey/InlinePanel would be my next pick. For simple relationships you get all the benefits of StreamField such as re-ordering, add/remove items but with solid database integrity and usage stats working out of the box.
Only go to StreamField if you need to have optional data set against each image. For example if you have an image list but images could be an Image with a RichText OR just an image.
Unfortunately, managing large sets of images is not great (outside of collections) so you may find you need to build a seperate UI for this. If that ends up being the case you will find migration of data already in model relations being easier to do or maybe not even needed with something like ModelAdmin.
Hope it goes well, be sure to write a blog post about what you end up doing.
I would use the ParentalKey with InlinePanel for that. It shows you all the images as a list in a more compact way than the StreamField. One can reorder this list.
A StreamField is more expandable in the future. You could add new blocks, like videos or quotes or whatever at any point. If you define each block as StructBlock, you will be able to add whatever you want in the future to these blocks without loosing existing data (also true for the ParentalKey model).
I would not use Collections for image slideshows as you won’t be able to sort the imagas in a collection via the CMS, right? Collections are meant to keep order in the backend, I think.
I've successfully implemented django-ckeditor with Django REST Framework and React, but I'm pretty sure that the way I've done it is not secure.
I've created an art blog, where each art piece has a rich-text description. Here's a basic example of one of my models with a rich-text field:
from ckeditor.fields import RichTextField
class Artist(models.Model):
biography = RichTextField(blank=True, null=False)
...
So, if saved his biography as "He was a nice guy!", then DRF serializes that as:
<p>He was a <em><strong>nice guy!</strong></em></p>
In my React app, I render it with:
<div dangerouslySetInnerHTML={{__html: artist.biography}} />
But, as the name implies, the React documentation says that this is generally risky.
This is a personal blog, so I'm not worried about other users injecting code into posts. However, I'm sure that someday I'll want to provide a rich-text editor for my users.
Is there a way to implement CKEditor with Django rest framework that doesn't require me to use dangerouslySetInnerHTML? If not, how can I safely implement a rich-text editor, and still use it with DRF?
UPDATE
I've been doing a bit more research, and I've discovered something from Mozilla called Bleach. They describe it this way:
Bleach is an allowed-list-based HTML sanitizing library that escapes or strips markup and attributes.
They go on to say:
Bleach is intended for sanitizing text from untrusted sources. If you find yourself jumping through hoops to allow your site administrators to do lots of things, you're probably outside the use cases. Either trust those users, or don't.
So, in this case, I don't think I need it. Perhaps I'll use it in future projects though.
That still doesn't help me avoid using dangerouslySetInnerHTML, but this is the most practical solution that I can think of.
I did look through the similar questions and found this one, but the answer there isn't, at least by itself, dynamic enough for my needs.
Similar to that question, I am attempting to put together a multi-tenant application with a different skin per property. However, the answer given in the above question assumes that the various skin resources can be hard-coded into the application. That would be fine if we were talking about 2 or 3 skins, but my application will need to support dozens at launch and probably tens of thousands in its lifetime (each property can create multiple skins for different campaigns).
I have an API where I can request the skin, which is currently a long string of HTML with a token embedded indicating where the application contents should be rendered into the skin (e.g. {{body}}).
One of the things I'll need to do is inject some <link> tags into the <Head> element to pull in some external CSS. If React.Fragment supports attributes (like __dangerouslySetInnerHTML), I haven't been able to figure out how. If it's possible, that might be one way.
I'll run into the same problem when I want to inject some pre-application and post-application content into the body of the page, too.
Since I want the skin to be rendered server-side on the first request and then be static until the tab is closed, it makes sense to do this in pages/_document.js. After that, I'm kind of lost for what to do next. Parsing the string that contains the skin content is easy enough, but how do I intermingle that raw HTML with React components?
I was wondering to use paypal's React Engine (https://github.com/paypal/react-engine), but I have some doubts:
What are the benefits over other template engines like Handlebars?
Why upload .jsx files, and not (jsx precompiled/transformed) .js files? (This one should be faster because don't have to do deal with the transformation at the server).
I have been researching but I get confused.
Thanks
The main difference between react-engine and template engines is only when the browser enables the user to interact with the browser page. Nevertheless, it is important how machines have access to individual data.
Assuming we want to run a simple webpage. Just a scrolling and open text information. Using template engines, like Handlebars.js, typically, when the browser request hits to the server, it tries to figure it out how to respond and what to do. That said, the template engine may reference existing fetched data from files stored into a local and accessible source. Those are loading all the defined data regarding the site template file (i.e. head, meta, title, etc.), with a render of incomplete HTML string. This HTML is then sent back to the Browser and rendered.
The react-engine, on the same side it happens the use of the same rendering mechanism. However, instead of a template engine semantic, it uses JSX, or if we want, we can also use JavaScript. The JSX is, therefore, broader then template engines. A great article by Hajime Yamasaki Vukelic complies the separation of concerns from a different angle between JSX and HTML templates.
With template engines, you feed the library a string (usually but not
necessarily HTML), which is then converted into a piece of JavaScript
code which generates virtual DOM structures when executed. At design
time, templates are just strings, so we don’t have direct access to
the surrounding code. For instance, we can’t import helper functions,
or call methods. These things are only possible through abstractions
called directives (and possibly other names depending on where you are
coming from). Directives are the glue between the HTML and the
JavaScript.
So far so good, there is no relevant difference between both solutions. Links to next or previous simple webpage are just simple <a href="/webpage>Next</a> elements.
At the moment, when we decide to implement some interactions, react-engine will be the winner. While react-engine rendering does not require JavaScript to run on the client side, it will enable SEO over the search.
Template engines also have this SEO support, but with less impact. We can not run here all JavaScript to render HTML. Even libraries like jQuery require live access to the browser window object which cannot be mocked easily on the server side. So template engines become less productive.
In conclusion, template engines can do the same as react-engine rendering. Maybe not equally easy or equally fast but both tools are qualified. You can also read another great thread on this topic.
First off, this is not a question about how to scrape websites. I am fully aware of the tools available to me to scrape (css_parser, nokogiri, etc. I'm using Ruby to do the scraping).
This is more of an overarching question on the best possible solution to scrape the logo of a website starting with nothing but a website address.
The two solutions I've begun to create are these:
Use Google AJAX APIs to do an image search that is scoped to the site in question, with the query "logo", and grab the first result. This gets the logo, I'd say, about 30% of the time.
The problem with the above is that Google doesn't really seem to care about CSS image replaced logos (ie. H1 text that is image replaced with the logo). The solution I've tentatively come up with is to pull down all CSS files, scan for url() declarations, and then look for the words header or logo in the file names.
Solution two is problematic because of the many idiosyncrasies of all the people who write CSS for websites. They use Header instead of logo in the file name. Sometimes the file name is random, saying nothing about a logo. Other times, it's just the wrong image.
I realize I might be able to do something with some sort of machine learning, but I'm on a bit of a deadline for a client and need something fairly capable soon.
So with all that said, if anyone has any "out of the box" thinking on this one, I'd love to hear it. If I can create a solution that works well enough, I plan on open-sourcing the library for any other interested parties :)
Thanks!
Check this API by Clearbit. It's super simple to use:
Just send a query to:
https://logo.clearbit.com/[enter-domain-here]
For example:
https://logo.clearbit.com/www.stackoverflow.com
and get back the logo image!
More about it here
I had to find logos for ~10K websites for a previous project and tried the same technique you mentioned of extracting the image with "logo" in the URL. My variation was I loaded each webpage in webkit so that all images were loaded from CSS or JavaScript. This technique gave me logos for ~40% of websites.
Then I considered creating an app like Nick suggested to manually select the logo for the remaining websites, however I realized it was more cost effective to just give these to someone cheap (who I found via Elance) to do the work manually.
So I suggest don't bother solving this properly with a fully technical solution - outsource the manual labour.
Creating an application will definetely help you, but I believe in the end there will some manual work involved. Here's what I would do.
Have your application store in a database a link to all images on a website that are larger than a specified dimension so that you can weed out small icons.
Then you can setup a form to access these results. You may want to setup the database table to store the website url and relationship between the url and image links.
Even if it we're possible to write an application to truly figure out if it was a logo or not seems like it would be a massive amount of code. In the end, it would probably weed out even more than the above, but you have to take into account it could be faster for human to visually parse the results then the time it took for you to write and test the complex code.
Yet another simple way to solve this problem is to get all leaf nodes and get the first
<a><img src="http://example.com/a/file.png" /></a>
you can lookup for projects to get html leaf nodes on the net or use regular expressions to get all html tags.
I used C# console app with HtmlAgilityPack nuget package to scrape logos from over 600+ sites.
Algorithm is that you get all images that have "logo" in url.
The challenges you will face with during such extraction are:
Relative images
Base url is CDN HTTP/HTTPS (if you don't know
protocol before you make a request)
Images have ? or & with query
string at the end
With that things in mind I got approximately 70% of success but some images were not actual logos.