Hi!

I have installed Prince without a license to do an evaluation. When I run the following command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs

The system returns the following message:

npx: installed 108 in 6.499s
No next link found!
No buffer to write!

The URL points to the local docusaurus web site.

Any clue what to do?

Thanks!

Are you using this package:

https://libraries.io/npm/docusaurus-prince-pdf

You might need to ask the author for help.

Do you have Prince installed on your local machine, and does it work if you run it from the command-line on a simple document, such as "prince test.html"?

This error went away when I entered the correct URL. Unfortunately, another error replaced it:

Error: HTTPError: Response code 404 (Not Found)
    at Request.<anonymous> (C:\Users\KevinDonovan\node_modules\got\dist\source\as-promise\index.js:117:42)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  code: 'ERR_NON_2XX_3XX_RESPONSE',
  timings: {
    start: 1639995190981,
    socket: 1639995190983,
    lookup: 1639995190988,
    connect: 1639995190989,
    secureConnect: undefined,
    upload: 1639995190989,
    response: 1639995190993,
    end: 1639995190997,
    error: undefined,
    abort: undefined,
    phases: {
      wait: 2,
      dns: 5,
      tcp: 1,
      tls: undefined,
      request: 0,
      firstByte: 4,
      download: 4,
      total: 16
    }
  }
}

The command that I entered is as follows:

npx docusaurus-prince-pdf -u http://localhost:3000/userguide/docs  --output ATGuide.pdf       

Obvious first questions are

- is Prince installed and work, as Mike already asked above?
- is Prince in your path so the exec command here can find it? https://github.com/signcl/docusaurus-prince-pdf/blob/master/index.js#L96
- is the docusaurus site running? The error message indicates the got() call here fails https://github.com/signcl/docusaurus-prince-pdf/blob/master/index.js#L105

Announcement: repos for tests/utils

Prince is installed on my PC, but when I run prince test.html the following appears:

prince : The term 'prince' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ prince test.html
+ ~~~~~~
    + CategoryInfo          : ObjectNotFound: (prince:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

Prince is available as a desktop application.

Note that on Windows you need to specify the full path to the prince.exe file, as described here: https://www.princexml.com/doc/command-line/

And if that prince.exe file is on your path, you should run 'prince.exe', not just 'prince'.

OK I added the path to the Path envoironment variable. When I run

 
npx docusaurus-prince-pdf -u http://localhost:3000/userguide/docs  --output ATGuide.pdf

The system displays:

Error: HTTPError: Response code 404 (Not Found)
    at Request.<anonymous> (C:\Users\KevinDonovan\node_modules\got\dist\source\as-promise\index.js:117:42)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  code: 'ERR_NON_2XX_3XX_RESPONSE',
  timings: {
    start: 1641376374558,
    socket: 1641376374562,
    lookup: 1641376374568,
    connect: 1641376374569,
    secureConnect: undefined,
    upload: 1641376374570,
    response: 1641376374575,
    end: 1641376374579,
    error: undefined,
    abort: undefined,
    phases: {
      wait: 4,
      dns: 6,
      tcp: 1,
      tls: undefined,
      request: 1,
      firstByte: 5,
      download: 4,
      total: 21
    }
  }
}

Does it actually work when you run the prince.exe on that URL manually?

When I enter this:

prince ---baseurl= http://localhost:3000/userguide/docs  --output ATGuide.pdf

The following message appears:

prince: error: no input documents to process

What actually happens if you run

prince http://localhost:3000/userguide/docs  --output ATGuide.pdf

(and, BTW, it should be just a double dash, thus

--baseurl

, not

---baseurl

)

When I enter

prince http://localhost:3000/userguide/docs  --output ATGuide.pdf

The following displays:

prince: http://localhost:3000/userguide/styles.css:2344: warning: unknown property 'overscroll-behavior'
prince: http://localhost:3000/userguide/styles.css:2518: warning: unknown pseudo-element '::placeholder'
prince: http://localhost:3000/userguide/styles.css: warning: unsupported properties: overflow-x, overflow-y, pointer-events

Excellent, so that works - and I guess that a PDF has been produced.

Given that you are getting a 404 error above - is there any broken link in the 'next' links of your docusaurus site?

Well it produces a document that is 1 page long. Please see attached.

1. ATGuide.pdf‎ 2.1 kB

That is to be expected - Prince in itself does not follow 'next' links, as does docusaurus-prince-pdf.

Given that you were getting a 404 error by using that package - is there any broken link in the 'next' links of your docusaurus site?

Nope

From some little testing locally, I seem to understand that you get the 404 error because docusaurus-prince-pdf does not find the expected 'next' link. There might be several reasons for this:
1. in its default setting, it works with dovusaurus v2
2. if you have a custom landing page, also that page needs a (recognizeable) 'next' link.

Thus:
1. if you are working with docusaurus v1, the command to run is:

prince http://localhost:3000/userguide/docs  --selector '.docs-next' --output ATGuide.pdf

2. if you are using v2 and have a custom landing page, you need to add a link constructed like this:

<div class="pagination-nav__item--next">
  <a href="your-next-page">Next</a>
</div>

Let me know if this brings you forward.

I added the custom link. (I use v2.)

I still get theses messages:

prince: http://localhost:3000/userguide/styles.css:2344: warning: unknown property 'overscroll-behavior'
prince: http://localhost:3000/userguide/styles.css:2518: warning: unknown pseudo-element '::placeholder'
prince: http://localhost:3000/userguide/styles.css: warning: unsupported properties: overflow-x, overflow-y, pointer-events

There is a kind of landing page that is defined by docusaurus.config.js. Here are its contents:

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

// With JSDoc @type annotations, IDEs can provide config autocompletion
/** @type {import('@docusaurus/types').DocusaurusConfig} */
(module.exports = {
  title: 'AlgoTrader User Guide',
  tagline: 'Learn how to configure AlgoTrader',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/userguide/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'AlgoTrader', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          //editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          //editUrl:
          //  'https://github.com/facebook/docusaurus/edit/main/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: '',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [ 
          
        ],
      },
      footer: {
        style: 'dark',
        
        copyright: `Copyright © ${new Date().getFullYear()} AlgoTrader AG. All rights reserved.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
        additionalLanguages: ['java'],
      },
    }),
});

As for the warning messages for unsupported CSS properties: that shouldn't cause any problem in the generation of a PDF. Prince is just telling you that it doesn't support these CSS properties. But did the PDF actually get produced?

Yes one was produced but almost empty.

1. ATGuide-Test.pdf‎ 2.1 kB

It looks like you might be missing a 'next' link to the rest of the documentation.

To check if everything else works, you can enter the next page in the sequence (i.e. the first page of the actual documentation) - if all is OK, it should generate the whole documentation without the first page.

As for the landing page: the JSX page is irrelevant here, what you care for is the page that actually gets served. You can either build your site and check the generated HTML landing file, or you load the landing page in your favourite browser and find out whether the landing page actually contains said link (for v2, the default class you are looking for is 'pagination-nav__item--next'.

If that class does not exist, you need to find a way to insert it on the landing page - I'll leave it to you to find out how (I have been struggling with some "docusaurus-v2-magic" myself, and I know that at times some things can get rather messy...).

OK, I was able to resolve some of the issues.

I had to run the following command:

yarn run build

followed by

npm run serve

in order for the Docusaurus locally hosted site to be served properly. (yarn run serve did not serve pages properly)

Then I ran the following command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book --output BBDDAFFF.pdf

and the following messages were displayed:

Got link: http://localhost:3000/docs/dashboard_overview
Got link: http://localhost:3000/docs/customizing_the_dashboard
Got link: http://localhost:3000/docs/managing_portfolios
Got link: http://localhost:3000/docs/viewing_conditions
Got link: http://localhost:3000/docs/buying_and_selling_securities
Got link: http://localhost:3000/docs/smart_trading
Got link: http://localhost:3000/docs/creating_an_RFQ_for_a_trade
Got link: http://localhost:3000/docs/downloading_historical_data
Got link: http://localhost:3000/docs/reference_data
Got link: http://localhost:3000/docs/performance
Got link: http://localhost:3000/docs/viewing_balances
Got link: http://localhost:3000/docs/drawing_configuration
Got link: http://localhost:3000/docs/order_display_configuration
Got link: http://localhost:3000/docs/account_creation
No next link found!
Writing buffer (14 links) to ./pdf/localhost-docs-book.txt
Generating PDF BBDDAFFF.pdf

And so a PDF was created! And the TOC on the left worked!

But there was a big problem - only the first page of each individual file was inserted into the PDF. Would this be due to the fact that I do not have a Prince license but just a trial version? Or is there something else?

Thanks!

Good to hear you solved issues so far! What you are hitting now seems to actually be this: https://www.princexml.com/forum/topic/4608/page-cut-off-for-docusaurus-sites

This might be the solution, but how do I specify the CSS file in the command line. I tried the following:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book --output B.pdf --prince-args '-s print.css'

but received the message:

npx: installed 108 in 9.4s
No next link found!
No buffer to write!

So would you know how to pass a Prince option to docusaurus-prince-pdf?

Thanks!

https://github.com/signcl/docusaurus-prince-pdf/issues/2

Sounds like an issue in docusaurus-prince-pdf

Thanks but I don't have a login at GitHub. There does not seem to be a fix. Is this correct?

So close and yet so far.

Indeed, I reported the issue a few days ago, when noticing that it didn't seem to work. And it is yet to be fixed. Will try and see if I have some time to look for a fix.

On a related issue, the first file in the group of files is not part of the PDF when I enter the following command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book/ --output GOSH.pdf

The first file is 'book' but it is ignored by docusaurus-prince-pdf.

Any idea on how I could include this file in the PDF output?

You need to pass --include-index to docusaurus-prince-pdf

Thanks! It worked.

And I actually figured out that it does take custom arguments, but they need to be properly escaped!

So in your case you need to pass

--prince-args '\-s print.css'

and it should work.

Still not working for me. Could you display the command line that works for you?

What exactly is not working? If I run my command with the parameter `--prince-args '\-s print.css` the extra styles in print.css get applied.

Have you tried running:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book --output BBDDAFFF.pdf --prince-args '\-s print.css'

? i.e. the command which you above said that it worked, plus the extra args.

Make sure docusaurus site is actually up and running...

Edited 21 Jan 2022 by csant

And this is the only content of print.css:

@media print {
    .row { display: block !important; }
}

The Docusaurus site is running and output is created but onth the first pages of each file are inserted into the PDF.

Upon investigation that print/pdf is already included in docusaurus-prince-pdf - and when I run

npx docusaurus-prince-pdf -u https://docusaurus.io/docs --include-index

all works indeed fine.

I don't know your local site - it looks like you have styled something in some other way, and might have caused some other issues. Without having access to your local site, debugging is impossible.

It is still the same problem, only the first page of a file is inserted into the PDF.

Thanks for your help. I think it is a problem with docusaurus-prince-pdf. I made no chanegs to the CSS and other elements.

The following command does eliminate the cutoff page problem:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o ZAZ.pdf  --prince-args  '\-\-javascript'

Apparently the

--javascript

option is needed to assure that each file is not cut off after the first page.

This probabaly should be documented somewhere.

I am very happy that you managed to find a solution!



As mentioned above, I am not able to reproduce the issue on the Docusaurus page - can you reproduce the cut-off issue by running this command

npx docusaurus-prince-pdf -u https://docusaurus.io/docs --include-index

? If yes, I agree that docusaurus-prince-pdf should document it somewhere - or better yet, they might want to consider whether to enable JavaScript by default. Else, it might be an issue specific to your local site.

Edited 24 Jan 2022 by csant

What I had to do was simply put this string:

@media print {
    .row { display: block !important; }
}

at the top of the custom.css file in the \src\css directory.

I just ran the command without --javascript and everything worked fine.

The main thing to do then, AFAIK, is to pur the string at the top of the custom.css file, as shown below:

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */

@media print {
    .row { display: block !important; }
}

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}


.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.markdown img {
  margin-left: auto;
  margin-right: auto;
  display: img;
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

table {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

When I placed this string in a special CSS file, and tried to include this special file using the -s option on a command line, it did not work.

The command that I ran to build the PDF was as follows:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o DOCUMENT.pdf

Edited 24 Jan 2022 by ZurichKevin

That is most strange - since that very extra CSS rule is included by default by docusaurus-prince-pdf!
See here: https://github.com/signcl/docusaurus-prince-pdf

I don't understand, why it is not included when you run the command...

As for "using the -s option on a command line" - please make sure that the command passed is "\-s"!

I escaped the -s option and it did not work.

I put the following:

@media print {
    .row { display: block !important; }
}

at the end of the /src/css/custom.css file and when I subsequently ran the command:

npx docusaurus-prince-pdf -u http://localhost:3000/docs/book  --include-index -o DOCUMENT.pdf

only the first page of each file was integrated into the PDF file.

But hey, it works and that's great.

On a different topic, would you know why hash marks appear in the TOC, as shown in the attached screen shot?

1. Hash-Marks-in-TOC.png‎ 32.1 kB

It must be something in your HTML or CSS - I cannot reproduce this in the Docusaurus site. Without seeing your HTML and CSS it is impossible to give you an answer.

How much of the file do you need to see? Here is the custom.css file.

1. custom.css‎ 1.1 kB

Thank you, nothing in there justifies the hashes. Do you only see it in the generated PDF?

It would be good to post the HTML of the title generating the PDF-bookmark-with-hash, and any CSS connected with it (you might find that in the web development tools in your browser).

The hashes appear only in the PDF.