Skip to content

Commit

Permalink
[SPARK-51104][DOC] Self-host JavaScript and CSS in Spark website
Browse files Browse the repository at this point in the history
### 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 <[email protected]>
Signed-off-by: Gengliang Wang <[email protected]>
  • Loading branch information
gengliangwang committed Feb 6, 2025
1 parent a79ba48 commit e89b19f
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
1 change: 1 addition & 0 deletions LICENSE
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ core/src/main/resources/org/apache/spark/ui/static/sorttable.js
docs/js/vendor/anchor.min.js
docs/js/vendor/jquery*
docs/js/vendor/modernizer*
docs/js/vendor/docsearch.min.js

ISC License
-----------
Expand Down
11 changes: 4 additions & 7 deletions docs/_layouts/global.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@
{% endif %}


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="{{ rel_path_to_root }}css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
Expand Down Expand Up @@ -193,15 +192,13 @@ <h1 class="title">{{ page.title }}</h1>
<!-- /container -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="{{ rel_path_to_root }}js/vendor/jquery-3.5.1.min.js"></script>
<script src="{{ rel_path_to_root }}js/vendor/bootstrap.bundle.min.js"></script>

<script src="{{ rel_path_to_root }}js/vendor/anchor.min.js"></script>
<script src="{{ rel_path_to_root}}js/main.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript" src="{{ rel_path_to_root }}js/vendor/docsearch.min.js"></script>
<script type="text/javascript">
// DocSearch is entirely free and automated. DocSearch is built in two parts:
// 1. a crawler which we run on our own infrastructure every 24 hours. It follows every link
Expand Down
2 changes: 2 additions & 0 deletions docs/js/vendor/docsearch.min.js

Large diffs are not rendered by default.

0 comments on commit e89b19f

Please sign in to comment.