Vuepress documentation broken

Describe the bug
Vuepress docs build is broken

To Reproduce
Steps to reproduce the behavior:
npm run docs:build

Expected behavior
Build as usual

Screenshots

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ],
  "use": [
    {
      "loader": "cache-loader",
      "options": {
        "cacheDirectory": "/Users/jhgascon/Code/konviw/node_modules/@vuepress/core/node_modules/.cache/vuepress",
     ...

Desktop (please complete the following information):

System:
- OS: macOS 11.1
- CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
- Memory: 318.13 MB / 32.00 GB
- Shell: 5.8 - /bin/zsh
Binaries:
- Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
- npm: 7.23.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
Browsers:
- Chrome: 97.0.4692.71
- Safari: 14.0.2

Additional context
I had recurrent issues with Vuepress in the past and too many extra dependencies that somehow pollute the konviw nestjs repository.
An alternative would be the to move the docs to another repository or to move vuepress or vitepress into a folder with another package.json removing dependencies risks with konviw.

Display Chart macro image attachment generated by Confluence

ISSUE

Currently only the inner table to the macro is displayed
Confluence use a table to be place inside the body of the Chart macro to provide the dataset for the chart.
Currently only the table with the data is displayed in the page rendered by konviw although the div class is hidden to prevent this content to de shown in Confluence.

SOLUTION

Render the PNG/JPG generated by Confluence
Confluence provides a feature to natively generate attachments with images PNG or JPG with the charts generated.
We can implement a new step in proxy-page.service.ts to parse the

chart-bootstrap-wrapper and extract the name of the attachment to display as an image in the page.

ALTERNATIVES

Alternatively integrate another JS chart library like ApexCharts
We could also parse the full body of the 'script.chart-render-data' and retrieve all the dataset to display natively in a JS chart library like ApexChart a new chart. Probably this solution would be more appealing but will require much more time and penalise the performance of the rendering of the page.

ADDITIONAL CONTEXT

Documentation on how to use Chart macro in Confluence.

10387469

Demo with Blog Post

Enterprise public viewer for your Confluence pages

http://localhost:8080/konviw/demoBlogPost.html

Expose pages through API in addition to iFrame option

Is your feature request related to a problem? Please describe.
Today the only way to embed a page from Konviw is via iFrame. This does work well but comes with the limitations of an iFrame. For example occasional resizing issues, JS errors not detected within the embedding app by our APM tool.

It would be possible to achieve better integration if the content was available via API like a headless CMS, so it could be fetched and rendered as required by the embedding app.

Describe the solution you'd like

Add an additional endpoint returning the page body, and other properties (title, read time, ...) in the JSON response
This would move Konviw more in the direction of a simple headless CMS proxy in front of Confluence, with the advantage that iFrame can still be used for fast embedding
Embedding app would need to load supporting .js and .css files, but this could possibly be improved in the future to provide a helper.js to add the imports and to apply syntax highlighting server-side
Rename existing internal function getHtmlBody() to getHtmlDocument() as it returns the full page HTML, not only the body

Describe alternatives you've considered

New API endpoint as described above
Host as a micro app using https://single-spa.js.org/ (not chosen as it's more complex to implement and embed)

Additional context
This implementation would be very similar to the Articles endpoint on the Dev.to API: https://developers.forem.com/api#operation/getArticleByPath. It returns a JSON response containing the page HTML body (not the full document as rendered in Konviw), along with several other page properties. There's a good example of how it can be used in this article: https://nuxtjs.org/tutorials/build-dev-to-clone-with-nuxt-new-fetch.

Switch from 'body.styled_view' to 'body.view'

Is your feature request related to a problem? Please describe.
Actually not a problem but we may get better performance and smaller size of the payload requesting 'body.view' only.

Describe the solution you'd like
Switch the use of the API Get content by ID expanding the body as body.view instead of body.styled_view, which retrieves the full html.

Describe alternatives you've considered
Keep the current API with body.styled_view if performance improvement is not relevant

Additional context
Many cheerio operations are added to the <div id="Content"> so we may have to add it to the body content delivered by body.view. This is done natively as via the response body.styled_view.

Example in addReadingProgressBar.ts

$('#Content').prepend(
      `<div class="reading-progress" id="reading-progress"></div>`,
    );

We could do this fix easily in context.setHtmlBody loading this.cheerioBody properly wrapped by <div id="Content">.

Make related JavaScript libraries as package.json dependencies

Is your feature request related to a problem? Please describe.
This enhancements is to improve the maintainability of the source code and make easier the upgrade of javascript libray dependencies which currently are manually copied in a folder.

Describe the solution you'd like
Install the related libraries via package manager and include a webpack or other builder script to generate the javascript libraries during DEV and BUILD phase.

Describe alternatives you've considered
We could continue as today, because those libraries are not evolving very frequently but we may face some regressions in the long term.

Additional context
Libraries that we shall move to dependencies are:

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

dockerfile

Dockerfile

node 16.14.0-alpine

node 16.14.0-alpine

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

actions/cache v3

cypress-io/github-action v2

actions/upload-artifact v3

actions/upload-artifact v3

actions/checkout v3

actions/setup-node v3

actions/cache v3

.github/workflows/gh-pages.yml

actions/checkout v3

actions/setup-node v3

actions/cache v3

peaceiris/actions-gh-pages v3

npm

docs/package.json

@vuepress/plugin-google-analytics 2.0.0-beta.36

@vuepress/plugin-register-components 2.0.0-beta.36

copyfiles 2.4.1

gh-pages 3.2.3

iframe-resizer 4.3.2

vuepress 2.0.0-beta.36

package.json

@instana/collector 1.140.1

@nestjs/axios 0.0.7

@nestjs/common 8.4.1

@nestjs/config 1.2.1

@nestjs/core 8.4.1

@nestjs/platform-express 8.4.1

@nestjs/serve-static 2.2.2

@nestjs/swagger 5.2.0

@nestjs/terminus 8.0.6

axios 0.27.2

cache-manager 3.6.0

cheerio 1.0.0-rc.10

class-transformer 0.5.1

class-validator 0.13.2

css-select 5.1.0

date-fns ^2.30.0

hbs 4.2.0

https-proxy-agent ^5.0.1

reflect-metadata 0.1.13

rxjs 7.5.5

swagger-ui-express 4.3.0

tabletojson 2.0.7

@kiru42/cypress-plugin-visual-tests 1.5.22

@nestjs/cli 8.2.2

@nestjs/schematics 8.0.8

@nestjs/testing 8.4.1

@types/cache-manager 3.4.3

@types/express 4.17.13

@types/jest 27.4.1

@types/node 16.11.26

@types/superagent 4.1.15

@types/supertest 2.0.11

@typescript-eslint/eslint-plugin 5.31.0

@typescript-eslint/parser 5.14.0

cypress 9.5.4

eslint 8.20.0

eslint-config-airbnb-base 15.0.0

eslint-config-prettier 8.5.0

eslint-plugin-import 2.26.0

eslint-plugin-jest 27.0.1

eslint-plugin-prettier 4.2.1

iframe-resizer 4.3.2

jest 27.5.1

npm-run-all 4.1.5

prettier 2.6.2

rimraf 3.0.2

sass 1.49.9

supertest 6.2.2

ts-jest 27.1.4

ts-loader 9.2.8

ts-node 10.7.0

tsconfig-paths 3.14.1

typescript 4.6.3

webpack 5.70.0

Check this box to trigger a request for Renovate to run again on this repository

Add Cypress E2E testing

Is your feature request related to a problem? Please describe.
Before Konviw was released as open source we had some Cypress tests running internally (requested by @PiiXiieeS) to ensure pages were rendered correctly by doing visual checks.

There have been several fairly significant updates to the app recently, thankfully with no regressions. As we continue to improve and add more functionality it would be great to get these tests back up and running on the open source version.

More confidence that we're not breaking existing functionality when making a change, eventually resulting in a faster deployment cycle
Faster merging of Renovate changes thanks to increased confidence that the rendered page is tested

Describe the solution you'd like

Copy the content from the previously used Confluence pages content to the official Konviw Confluence
Run the Cypress tests through GitHub actions (either in a new action, or a step in the existing CI action) - decide during implementation whether these tests are on a test deployment version on Vercel
Run the Cypress tests on a deployed internal version

Describe alternatives you've considered

Remove Cypress tests and use Jest E2E tests: we should add some additional Jest testing, but this should not replace tests of the rendered pages using Cypress
Simplify the Cypress tests instead of just copying them: we probably should simplify some of the tests, but let's do the migration first to get the tests running before we do that (see additional context of this issue)
Run Cypress tests internally only: against the open source spirit of Konviw, and also makes the CICD workflow more complex. The only benefit would be the initial time saved as we wouldn't need to recreate the test content in the Konviw Confluence space.

Additional context
I believe that the previous Cypress tests were full page visual checks. They work well but this strategy can be a bit aggressive and result in a lot of test maintenance. After this implementation we can review to see whether some of the tests can be simplified for easier maintenance.

Cheerio @types should be removed from devDependencies

Describe the bug
This is a development environment bug, it does not cause a functional issue in the app.

While working on #281 I found that several Cheerio features through type errors.

I reported the issue cheeriojs/cheerio#2265 and it turns out it is because @types/cheerio was still in devDependencies, causing cheerio to use the old types instead of the new ones.

To Reproduce
Steps to reproduce the behavior:

Use the code private cheerioBody = cheerio.load(myHtml, null, false);
Expected 1-2 arguments, but got 3 error, but this should be allowed in the latest version of Cheerio.
Full investigation documented here: cheeriojs/cheerio#2265

Expected behavior
It should work (cheeriojs/cheerio#2265).

Screenshots
n/a

Desktop (please complete the following information):
n/a

Smartphone (please complete the following information):
n/a

Additional context
n/a

32981

Demo Comments

Enterprise public viewer for your Confluence pages

http://localhost:8080/konviw/demoComments.html

sanofi-iadc / konviw Goto Github PK

konviw's People

Contributors

Stargazers

Watchers

Forkers

konviw's Issues