I am aware it is possible to reference images stored in s3 via the src property, But what if I want to load something more complex, like a section of static html. Are there any ways to go about simply pulling html down for use/insertion into the DOM (similar to a rest call, I suppose)?
I would imagine the css would be inline in this scenario, but that would be the next challenge to face.
(for reference, I'm in an angular framework attempting to implement a section of a page that would be rendered via code stored in s3, so it would be easy enough to update it without deploying the codebase)
A possible solution is to have an API that will return a JSON file of format (just a rough assumption):
{htmlCodeAlongWithStyle:'Code in string'}
Here we are not creating a separate style sheet instead using style property of individual HTML components.
Now to embed code just create a div tag and set the innerHTML to the value of htmlCodeAlongWithStyle property of json.
Example:
<div [innerHTML]='variableStoringAPIResponse.htmlCodeAlongWithStyle'></div>
I would strongly encourage you to see if CDNs fit your use case:
Powering server-side rendering by offloading static assets to CDN for Angular apps
Since you're using Amazon S3, I would encourage you to look at Amazon Cloudfront. But you have many other options - including simply serving static content directly from your S3 instance.
Related
I have a question about referencing image in HTML. I have a single snippet of HTML code as
below, where I need to reference an image in a folder called static. The image has an extension of SVG
but it's name is dynamically created. If there a way for HTML to refer to this image by only referring to the file extension? The code below using a wild card doesn't work.
<p>
<img src="/static/*.svg" width="1000">
</p>
Additionally, can we add a logic in HTML such that if there is no SVG file in static folder, we don't render it; if there is one, then render it.
Thank you.
I don't think it's possible to do what you're asking with just HTML. However you can easily do this by adding an id to the tag and applying the attribute based on your condition. There are plenty of examples on the web on how to do this including one already answered here: Javascript set img src
This is possible with a server that is designed for this purpose. There is not a feature of just html that will do this, however. If you don't control the server on the backend, you probably can't get this to work, as it most likely will require custom backend code.
On the backend, you make a simple static html server that will match file patterns, and determine and serve the best match. You can do this any number of ways, and if you look up "how to make a static http server" for your favorite backend language, you likely will find an example to get you started, like these:
https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module
https://blog.appsignal.com/2016/11/23/ruby-magic-building-a-30-line-http-server-in-ruby.html
https://stackabuse.com/serving-files-with-pythons-simplehttpserver-module/
You would then have to modify whatever base example you chose with your custom pattern matching code. Your server could be designed to do whatever you wanted with the request you send it, including the scenario you described.
This works because an img tag like the one in your example causes the browser to make a GET http request to your server, passing on the url in the src attribute. So, if you control that server, you can have it respond in any way you want, including treating specific characters like * specially.
I've a set of pre-generated html documentation files (provided via an external mechanism). These are fully standalone in their own right, but I'd like to integrate these files into an existing portal.
Ideally, I'd like the existing site to take care of the (common) layout, and simply embed the existing html into this layout. I've been trying to get it to work over the last few hours to no avail.
Problems I've encountered (no specific order):
The pre-generated content already contains html/body/etc. tags (as mentioned, it is standalone documentation in its own right).
Redirection is no use, as it bypasses the view mechanism, losing the common layout.
I'm not really sure how to proceed, as I seem to have exhausted my googling ability on this matter. I'd appreciate any tips or pointers on concepts or terminology surrounding what I'm trying to do - I'm happy to do the leg work investigation as required.
have you tried putting your html files in the wwwroot folder and in the Startup.cs Configure method, add the line app.UseStaticFiles();
If you really need to static *.html use
var htmlString = System.IO.File.ReadAllLines(#"patch/to/your.html");
And then pass it to view and render by #Html.Raw() but i not reccomend this way. Better create partial view and then simply use by #Html.Partial() (official docs)
I'm looking to Add social sharing buttons on a static which is having more than 500 Static Pages.
I can add manually but it's very tedious task so looking for an easy way to add.
Is there any Way to get the Permalinks of a Static Site Dynamically I'm thinking to pass it to the Sharing Code so that I can append the URL in the code if there is any way to add a piece of code automatically to all the pages it would be of great help.
Best Regards,
Arpit
You manually have created 500 pages or using php to generate dynamically?
If it is generated dynamically, you can easily add social share plugin to every page.
HTML code for social share by social9.com
https://www.social9.com/get-free-social-share/
...Select "code your own" from the list for HTML Code.
Yes, there is a way.
Use regular expressions in an IDE to find the right places and place the code in the replacing string.
If that's not enough powerful, then write a script, using e.g. Bash in Linux, or Groovy, or I would personally write a simple Java program leveraging the JSoup library.
Lastly, and I would recommend that most, give up maintaining the files manually, and switch to static site generating software, like JBake.
JBake can take your HTML pages and take their content as an input and re-generate the website through templates.
When I have one basis html file in which I want to embed a few external html files as sort of a portfolio page, what is the best way to embed those external html files? I now use iframe, but I've read that is not the preferred way? What other options are there and which one is the best?
Most modern websites implement a server-side framework such as php or asp.net that can assemble the final HTML for each page and output it together
The only issue with iFrame is that it causes additional round-trips to the server, as the client has to load each frame individually, but if you don't have access to any server-side scripting then any other solution will do the same thing
Ok, so I'm asking this to document my solution and will answer it myself but any improvements on my method are welcome.
The problem:
I need to render a report to both an html page embedded in an iframe (so it needs its own url) and to pdf.
The report includes an out of the ordinary graph which is not supported by any graph api I've seen.
My site uses the Joomla! CMS (V. 2.5.*) which means my backend is php and mysql.
I need the report to render without interference from the default template set on Joomla.
I'm running on a linux host, (basic LAMP).
Joomla uses the base tag in their html which screws up svg's url().
My solution involves the following: wkhtml2pdf, js, url parameters, and writing a joomla component.
I wrote a basic Joomla component with two site views, one that generated the report in html and one that displayed the report view in an iframe. So the report has a url to access it at, and I have a way to embed it. The component also had the js and css for generating the report extracted out to separate files for including in the media folder (but that was just for code cleanliness not functionality).
The report view had to do the following modifications to the page header to get the report to render right (save for the graph) otherwise the resources were loaded at the wrong times:
$document = &JFactory::getDocument();
$document->setBase('');//base tag screws up svg urls so get rid of it
$document->addscript('http://www.google.com/jsapi');
$document->addscript(JURI::root(true).'/media/com_metahealthzone/javascript/chart.js');
$document->addStyleSheet(JURI::root(true).'/media/com_metahealthzone/css/chart.css');
The url used in the iframe had to have ?template=system appended, tmpl=component didn't work as the css from the template was still applied.
To get the Google visualization to look right I added javascript to the end of the OnLoadCallback to grab the svg and add a linearGradient as a child of the defs tag with id="svg_grad" (why Google doesn't support gradients, I don't know) then grab all the elements in the graph that needed the gradient and set their fill to 'url(#svg_grad)'. Remember to use setAttributeNS because of the svg namespace, and make the gradient stop tags be children of the gradient not of defs.
I still have to do the tweaks for VML (stupid IE).
There were some issues with wkhtml2pdf that I had to overcome too. When you add an element to the DOM using js it doesn't behave like other browsers. You must keep the returned handle because you can't get the new element using document.getElement* type functions. Also you have to instruct wkhtml2pdf to wait for the js to run using --no-stop-slow-scripts or the graph won't show up (it's slow). I also had to impersonate the user's session by setting the cookie for wkhtml2pdf using the --cookie <name> <value> argument.