Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SPARK-51104][DOC] Self-host JavaScript and CSS in Spark website #49823

Closed
wants to merge 3 commits into from

Conversation

gengliangwang
Copy link
Member

@gengliangwang gengliangwang commented Feb 6, 2025

What changes were proposed in this pull request?

Currently, the Spark website fails to load bootstrap.bundle.min.js/jquery.js/etc due to the following errors


Refused to load the stylesheet '<URL>' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Understand this errorAI
latest/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Understand this errorAI
latest/:1 Refused to load the script 'https://code.jquery.com/jquery.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
...

As a result, the website looks like:
image

To fix the issue, I suggest using self-host javascript and CSS in Spark website

Why are the changes needed?

Fix the broken styling on the Spark website.

Does this PR introduce any user-facing change?

No

How was this patch tested?

Test locally

Was this patch authored or co-authored using generative AI tooling?

No

@gengliangwang
Copy link
Member Author

Note: after this PR, there is still one error:

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

The mathjax lib is big and it doesn't seem reasonable to self-host it.

@gengliangwang gengliangwang changed the title [SPARK-51104][Doc] Use self-host javascript and CSS in Spark website [SPARK-51104][DOC] Self-host JavaScript and CSS in Spark website Feb 6, 2025
Copy link
Contributor

@LuciferYang LuciferYang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, LGTM

@nchammas
Copy link
Contributor

nchammas commented Feb 6, 2025

Not to distract from the main purpose of this PR, but are you able to build the PySpark API docs locally without hitting memory errors? (Mentioning this only because it was part of my email thread reporting the broken CSS link.)

Copy link
Member

@dongjoon-hyun dongjoon-hyun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, Thank you!

@gengliangwang
Copy link
Member Author

but are you able to build the PySpark API docs locally without hitting memory errors?

@nchammas This question isn't related to this PR, but I couldn't build the PySpark API docs on macOS using the following command:

SKIP_SCALADOC=1 SKIP_RDOC=1 SKIP_SQLDOC=1 bundle exec jekyll serve

@nchammas
Copy link
Contributor

nchammas commented Feb 6, 2025

@nchammas This question isn't related to this PR, but I couldn't build the PySpark API docs on macOS using the following command:

SKIP_SCALADOC=1 SKIP_RDOC=1 SKIP_SQLDOC=1 bundle exec jekyll serve

OK, so it's not just me. I will follow-up on this issue back on the dev list.

@LuciferYang
Copy link
Contributor

@nchammas This question isn't related to this PR, but I couldn't build the PySpark API docs on macOS using the following command:

SKIP_SCALADOC=1 SKIP_RDOC=1 SKIP_SQLDOC=1 bundle exec jekyll serve

OK, so it's not just me. I will follow-up on this issue back on the dev list.

#48860 @panbingkun has provided a developer script to build docs locally using a Docker image.

@nchammas
Copy link
Contributor

nchammas commented Feb 6, 2025

#48860 @panbingkun has provided a developer script to build docs locally using a Docker image.

Yes, I tried that, but got the same result. I think I need a way to tinker with the memory settings Spark uses when run by Sphinx. I am surprised the build here on GitHub is unaffected.

Let's continue the discussion on the dev list so we don't pester the folks on this thread here.

@gengliangwang
Copy link
Member Author

@LuciferYang @HyukjinKwon @dongjoon-hyun @nchammas thanks for the reviews. I am merging this one to master/branch-4.0/branch-3.5

gengliangwang added a commit that referenced this pull request Feb 6, 2025
### What changes were proposed in this pull request?

Currently, the [Spark website](https://spark.apache.org/docs/latest/) fails to load bootstrap.bundle.min.js/jquery.js/etc due to the following errors

```

Refused to load the stylesheet '<URL>' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Understand this errorAI
latest/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap5.0.2/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Understand this errorAI
latest/:1 Refused to load the script 'https://code.jquery.com/jquery.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
...
```

As a result, the website looks like:
<img width="1040" alt="image" src="https://github.com/user-attachments/assets/77898702-c0be-4898-88d7-e5f4e368dfad" />

To fix the issue, I suggest using self-host javascript and CSS in Spark website

### Why are the changes needed?

Fix the broken styling on the Spark website.

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Test locally

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49823 from gengliangwang/fixWebsite.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
(cherry picked from commit e89b19f)
Signed-off-by: Gengliang Wang <gengliang@apache.org>
gengliangwang added a commit that referenced this pull request Feb 6, 2025
### What changes were proposed in this pull request?

Currently, the [Spark website](https://spark.apache.org/docs/latest/) fails to load bootstrap.bundle.min.js/jquery.js/etc due to the following errors

```

Refused to load the stylesheet '<URL>' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Understand this errorAI
latest/:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/bootstrap5.0.2/dist/js/bootstrap.bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Understand this errorAI
latest/:1 Refused to load the script 'https://code.jquery.com/jquery.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.apache.org/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
...
```

As a result, the website looks like:
<img width="1040" alt="image" src="https://github.com/user-attachments/assets/77898702-c0be-4898-88d7-e5f4e368dfad" />

To fix the issue, I suggest using self-host javascript and CSS in Spark website

### Why are the changes needed?

Fix the broken styling on the Spark website.

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Test locally

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49823 from gengliangwang/fixWebsite.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
(cherry picked from commit e89b19f)
Signed-off-by: Gengliang Wang <gengliang@apache.org>
gengliangwang added a commit that referenced this pull request Feb 6, 2025
…site

### What changes were proposed in this pull request?

Follow-up of #49823, we need to self-host docsearch.min.css in Spark website as well

### Why are the changes needed?

Fix the broken styling on the Spark website.

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Local build and preview

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49838 from gengliangwang/fixWebsiteFollowup.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
gengliangwang added a commit that referenced this pull request Feb 6, 2025
…site

### What changes were proposed in this pull request?

Follow-up of #49823, we need to self-host docsearch.min.css in Spark website as well

### Why are the changes needed?

Fix the broken styling on the Spark website.

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Local build and preview

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49838 from gengliangwang/fixWebsiteFollowup.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
(cherry picked from commit 5a925c6)
Signed-off-by: Gengliang Wang <gengliang@apache.org>
gengliangwang added a commit that referenced this pull request Feb 6, 2025
…site

Follow-up of #49823, we need to self-host docsearch.min.css in Spark website as well

Fix the broken styling on the Spark website.

No

Local build and preview

No

Closes #49838 from gengliangwang/fixWebsiteFollowup.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
(cherry picked from commit 5a925c6)
Signed-off-by: Gengliang Wang <gengliang@apache.org>
@panbingkun
Copy link
Contributor

LGTM late.

gengliangwang added a commit that referenced this pull request Feb 7, 2025
### What changes were proposed in this pull request?

Fix code tab switching on the Spark website. The issue occurs because the self-hosted bootstrap.bundle.min.js from [PR #49823](#49823) is version 4.4.1, while the CDN version is 5.0.2. Upgrading bootstrap.bundle.min.js resolves the problem.

### Why are the changes needed?

Fix Spark website code tab switching

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Local built website and verified.

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49853 from gengliangwang/codeTab.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
gengliangwang added a commit that referenced this pull request Feb 7, 2025
### What changes were proposed in this pull request?

Fix code tab switching on the Spark website. The issue occurs because the self-hosted bootstrap.bundle.min.js from [PR #49823](#49823) is version 4.4.1, while the CDN version is 5.0.2. Upgrading bootstrap.bundle.min.js resolves the problem.

### Why are the changes needed?

Fix Spark website code tab switching

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Local built website and verified.

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49853 from gengliangwang/codeTab.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
(cherry picked from commit 717027d)
Signed-off-by: Gengliang Wang <gengliang@apache.org>
gengliangwang added a commit that referenced this pull request Feb 7, 2025
### What changes were proposed in this pull request?

Fix code tab switching on the Spark website. The issue occurs because the self-hosted bootstrap.bundle.min.js from [PR #49823](#49823) is version 4.4.1, while the CDN version is 5.0.2. Upgrading bootstrap.bundle.min.js resolves the problem.

### Why are the changes needed?

Fix Spark website code tab switching

### Does this PR introduce _any_ user-facing change?

No

### How was this patch tested?

Local built website and verified.

### Was this patch authored or co-authored using generative AI tooling?

No

Closes #49853 from gengliangwang/codeTab.

Authored-by: Gengliang Wang <gengliang@apache.org>
Signed-off-by: Gengliang Wang <gengliang@apache.org>
(cherry picked from commit 717027d)
Signed-off-by: Gengliang Wang <gengliang@apache.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants