docs: split custom Faker instance example

[pkuczynski]

Currently two examples are joined and it looks quite confusing.

https://deploy-preview-3585.fakerjs.dev/api/faker.html#faker

[netlify]

✅ Deploy Preview for fakerjs ready!

Name	Link
🔨 Latest commit	2494cf0
🔍 Latest deploy log	https://app.netlify.com/projects/fakerjs/deploys/69d22bce05e56c0008bdd0f6
😎 Deploy Preview	https://deploy-preview-3585.fakerjs.dev
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.88%. Comparing base (5e1ce98) to head (2494cf0).

Additional details and impacted files

@@           Coverage Diff           @@
##             next    #3585   +/-   ##
=======================================
  Coverage   98.88%   98.88%           
=======================================
  Files         886      886           
  Lines        3061     3061           
  Branches      540      556   +16     
=======================================
  Hits         3027     3027           
  Misses         30       30           
  Partials        4        4           

Files with missing lines	Coverage Δ
src/faker.ts	100.00% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkuczynski]

Initial attempt does not look as intended:

[pkuczynski]

Still not perfect, but I think a little bit more clear

Is there a way to split examples into two boxes?

[pkuczynski]

Removing second @example tag was the only way to achieve a bit of clarity. Still I think being able to break into two separate boxes would be best:

[ST-DDT]

Is there a way to split examples into two boxes?

Yes, that would require some changes to the api-docs scripts.

Class-Level:

faker/scripts/apidocs/output/page.ts

Line 76 in 61e4c45

${examples.length === 0 ? '' : `<div class="examples">${codeToHtml(examples.join('\n'))}</div>`}

Method-Level:

faker/scripts/apidocs/output/page.ts

Line 195 in 61e4c45

examples: codeToHtml(examples.join('\n')),

Note: The later might have impact on the refresh examples button.

[matthewmayer]

I think it's a bit tricky to read partly because of the other commented out code. (Like the CJS imports and the seed). So comments are being used both as a header and to show optional alternatives.

Maybe some of the commented lines could be removed or split to another example.

[ST-DDT]

I just revisted this and maybe I have a new idea on how to address this.
Instead of merging the examples with a newline, we could change the joiner to
\n//-----------------------------------------.

Then we could put a comment in the first line of each example.

E.g.

// Default Usecase
...
// ------------------------------ added by docs script
// Custom usecase for smaller bundle size
...

Maybe we can even replace --- with an hr in post processing.

What do you think?