I am creating PDFs using headless chrome, but I have a need to insert bookmarks. Is there any markup I can add to the html that Chrome would interpret into a PDF bookmark?
Thus far I've tried:
<link title="foo" rel="bookmark">Foo</link> <!-- in both the body and head tags -->
<link title="foo" rel="bookmark"/> <!-- empty link tag -->
<a name="foo">Foo</a> <!-- obsolete name attribute -->
Foo <!-- link to a internal id -->
Foo <!-- two above combined -->
Foo <!-- from https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types -->
This is not currently possible in Chrome. See Chrome Issue 781797 and Skia Issue 7532 on which it depends.
My current workaround is to use wkhtmltopdf which generates bookmarks from headings.
Related
We have a sample site which has a basic template and a page level component.
In its head.html we have included the context hub which is not reflecting on the page. The code snippet for head.html of our sample site as shown below:
<head>
<sly data-sly-resource="${ # path = 'contexthub' , resourceType='libs/granite/contexthub/components/contexthub'}"></sly>
<title>${head.title}</title>
</head>
As per my understanding, To enable the ContextHub features we need to include contexthub component in the head section of our page level component. I am still unable to see the contexthub component on my page. Please correct if am missing any step in implementing the same.
Try this:
<head>
<meta data-sly-resource="${'./config' #resourceType='cq/personalization/components/clientcontext_optimized/config'}" data-sly-unwrap></meta>
<meta data-sly-resource="${'./contexthub' #resourceType='granite/contexthub/components/contexthub'}" data-sly-unwrap></meta>
<title>${head.title}</title>
</head>
I have a github webpage. How do I make a page displaying purely a pdf? I.e my cv?
To clarify, I wish the page to be filled only with the pdf - not any headings etc.
Just commit your pdf into your repo and it will be accessible just like any other file.
For instance, my resume is committed to my repo at https://github.com/xiongchiamiov/xiongchiamiov.github.com/blob/master/about/resume.pdf and is available on the web at https://changedmy.name/about/resume.pdf (I have a CNAME set up for changedmy.name).
Rather than redirecting to the PDF, you could embed it using an iframe or something like https://github.com/mozilla/pdf.js.
This way, the PDF will be accessible within the page and you could prevent it from being downloaded without viewing it in the browser.
It's not possible to make the page display "purely" the pdf, as to do that, you would need to alter the response headers, which obviously isn't possible with github pages.
You could have a JS redirect in your index.html that points to a pdf file that's also in your github-pages repo.
Suppose your file structure is like this:-
index.html
- cv(folder)
-----cv.pdf (your cv)
Then your code should look like this.
<html>
<body>
</body>
<script type="text/javascript">
document.location = "robin.github.io/cv/cv.pdf"
</script>
</html>
You can also do this:
<html lang="fr">
<head>
<!-- note the meta tag -->
<meta http-equiv="refresh" content="0; url=http://yourprofile.github.io/cv.pdf" />
<meta charset="utf-8">
<title>Will CV</title>
</head>
<body>
</body>
</html>
See Redirect from an HTML page for more info.
Github is using PDF.js to display PDFs, e.g. https://github.com/mozilla/pdf.js/blob/master/web/compressed.tracemonkey-pldi-09.pdf , you may find iframe with URL you can use to embed your resume (e.g. https://render.githubusercontent.com/view/pdf?commit=b261203018f847c89e05bb4c03c820fad0c90672&enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6d6f7a696c6c612f7064662e6a732f623236313230333031386638343763383965303562623463303363383230666164306339303637322f7765622f636f6d707265737365642e74726163656d6f6e6b65792d706c64692d30392e706466&nwo=mozilla%2Fpdf.js&path=web%2Fcompressed.tracemonkey-pldi-09.pdf&repository_id=1663468#13eff6e4-ecdb-4fe1-85e4-b7a468697e26)
I've followed below mentioned Youtube link for creation of Personalization . Once I've created the demo page in geometrixx site and put the content, I don't see the option to target the content on the right click of the content. Please let me know how can I do that?
https://www.youtube.com/watch?v=HWXMAQcRmEU
Just FYI - I am AEM 6.1
Also, I have followed the below mentioned Adobe documentation. In the teaser creation section, they create a new page using the "Teaser page template" but I don't see that template in the local. I can see the "Experience template". Let me know how can I've this template.
https://docs.adobe.com/docs/en/aem/6-1/author/personalization/campaigns/teasers-and-strategies.html
As you mentioned you are using AEM6.1, I am making the assumption that you are using Sightly markup (not jsp) and also TouchUI interface rather than ClassicUI. If not...you should be!! :)
In your head include data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" to pick up your target cloud service configuration.
inside the top of your body include data-sly-resource="${ #path='clientcontext', resourceType='cq/personalization/components/clientcontext'}" to add Targeting mode to the client context menu
and before your closing body tag include data-sly-resource="${ #path='cloudservices', resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" to close your cloud services config
<html lang="en" data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">>
<head data-sly-use.head="head.js"
data-sly-use.headlibRenderer="headlibs.html"
data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}">
<!-- your other client libs/css etc -->
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" />
</head>
<body>
<sly data-sly-resource="${ #path='clientcontext', resourceType='cq/personalization/components/clientcontext'}" />
<!-- BODY CONTENTS -->
<sly data-sly-resource="${ #path='cloudservices', resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" />
</body>
</html>
Just an FYI....teasers are old terminology (pre 6.1) ...use the experience template.
I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />
I want to embed a variable amount of text files (AngularJs templates) at a specific point of a given text file (./WEB-INF/app.html) but except modifying the file saving it as another file (./index.html?.
The files I want to embed all have file names ending with *.ng.html and are all in a subfolder of ./assets/templates/.
Also I want to write text before and after the embed file (To make AngularJS recognise that they are templates). This text should consist of both static text and the file names relative to the working directory.
This is a possible structure of a working directory:
(index.html) (generated after building)
--assets
--templates
--general
about.ng.html
contact.ng.html
home.ng.html
--users
userlist.ng.html
--WEB-INF
app.html
Can this be done using Ant? If not, how could I do this at build-time in Eclipse?
To further illustrate my intentions, here are examples:
./WEB-INF/app.html
<!doctype html>
<html><head>
#INSERTION_POINT#
</head><body></body></html>
./assets/templates/general/about.ng.html
This is a test.
./assets/templates/general/contact.ng.html
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
./assets/templates/general/home.ng.html
Welcome.<br>
Click a link to explore.
./assets/templates/users/userlist.ng.html
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
After building, I want ./index.html to look like:
<!doctype html>
<html><head>
<script type="text/ng-template" id="/assets/templates/general/about.ng.html">
This is a test.
</script>
<script type="text/ng-template" id="/assets/templates/general/contact.ng.html">
You can contact me at: <a href=mailto:mail#example.com>mail#example.com</a>
</script>
<script type="text/ng-template" id="/assets/templates/general/home.ng.html">
Welcome.<br>
Click a link to explore.
</script>
<script type="text/ng-template" id="/assets/templates/users/userlist.ng.html">
<ol>
<%= "{{#userlist}}" %>
<li>
{{username}}
</li> <%= "{{/userlist}}" %>
</ol>
</script>
</head><body></body></html>
I figured out that I can get a list of the files I want to embed using:
<fileset dir="war/assets/templates">
<include name="**/*.ng.html"/>
</fileset>
When I have the final string, I could replace my placeholder and save the output to a new file probably like this:
<copy file="WEB-INF/app.html" tofile="index.html">
<filterset>
<filter token="INSERTION_POINT" value="??foo??"/>
</filterset>
</copy>
But how do I get the string I want to have to pass as a value?
definitely not what you're looking for... sorry... but might look into a Javascript oriented build tool (Grunt) and integrate that with eclipse (or even run it from ant if you're trying to keep your builds the same in java and javascript.)
Though this may not be exactly what you're looking for, you're guaranteed lots of community support if you stick to the standards.