This is an automated email from the ASF dual-hosted git repository.
bcall pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/trafficserver-site.git
The following commit(s) were added to refs/heads/asf-site by this push:
new cf162be Fix: Replace Tailwind CDN with local CSS to comply with
Apache CSP (#7)
cf162be is described below
commit cf162beaa4dad1b229c63ca085a043fc069986ed
Author: Bryan Call <[email protected]>
AuthorDate: Wed Dec 24 14:35:08 2025 -0800
Fix: Replace Tailwind CDN with local CSS to comply with Apache CSP (#7)
The Apache server's Content Security Policy blocks external CDNs like
cdn.tailwindcss.com, causing the new site to render without any styling.
Changes:
- Created tailwind-base.css with all necessary Tailwind utilities
- Replaced CDN script tags with local CSS link in all HTML files
- Includes all utility classes used across the site
- Fully responsive design maintained
- No external dependencies required
This fixes the issue where https://trafficserver.apache.org/newsite/
was displaying unstyled content.
---
content/newsite/acknowledgements.html | 18 +-
content/newsite/assistance.html | 28 +--
content/newsite/downloads.html | 18 +-
content/newsite/index.html | 19 +-
content/newsite/press.html | 18 +-
content/newsite/styles/tailwind-base.css | 296 +++++++++++++++++++++++++++++++
content/newsite/users.html | 18 +-
7 files changed, 307 insertions(+), 108 deletions(-)
diff --git a/content/newsite/acknowledgements.html
b/content/newsite/acknowledgements.html
index 507c5b7..24889ea 100644
--- a/content/newsite/acknowledgements.html
+++ b/content/newsite/acknowledgements.html
@@ -17,23 +17,7 @@
See the License for the specific language governing permissions and
limitations under the License. -->
<!-- Tailwind CSS -->
- <script src="https://cdn.tailwindcss.com";></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'primary': '#1e3a8a',
- 'accent': '#3b82f6',
- 'secondary': '#64748b'
- },
- fontFamily: {
- 'sans': ['Inter', '-apple-system',
'BlinkMacSystemFont', 'SF Pro', 'Segoe UI', 'Roboto', 'sans-serif']
- }
- }
- }
- }
- </script>
+ <link rel="stylesheet" href="/newsite/styles/tailwind-base.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="/newsite/styles/custom.css">
diff --git a/content/newsite/assistance.html b/content/newsite/assistance.html
index 8b6bf23..8b36f94 100644
--- a/content/newsite/assistance.html
+++ b/content/newsite/assistance.html
@@ -15,28 +15,12 @@
Unless required by applicable law or agreed to in writing, software
distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
-
- <!-- Tailwind CSS -->
- <script src="https://cdn.tailwindcss.com";></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'primary': '#1e3a8a',
- 'accent': '#3b82f6',
- 'secondary': '#64748b'
- },
- fontFamily: {
- 'sans': ['Inter', '-apple-system', 'BlinkMacSystemFont', 'SF Pro', 'Segoe
UI', 'Roboto', 'sans-serif']
- }
- }
- }
- }
- </script>
-
- <!-- Custom Styles -->
- <link rel="stylesheet" href="/newsite/styles/custom.css">
+
+ <!-- Tailwind CSS -->
+ <link rel="stylesheet" href="/newsite/styles/tailwind-base.css">
+
+ <!-- Custom Styles -->
+ <link rel="stylesheet" href="/newsite/styles/custom.css">
<style>
.headerlink, .elementid-permalink {
diff --git a/content/newsite/downloads.html b/content/newsite/downloads.html
index bd93b95..0863473 100644
--- a/content/newsite/downloads.html
+++ b/content/newsite/downloads.html
@@ -17,23 +17,7 @@
See the License for the specific language governing permissions and
limitations under the License. -->
<!-- Tailwind CSS -->
- <script src="https://cdn.tailwindcss.com";></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'primary': '#1e3a8a',
- 'accent': '#3b82f6',
- 'secondary': '#64748b'
- },
- fontFamily: {
- 'sans': ['Inter', '-apple-system',
'BlinkMacSystemFont', 'SF Pro', 'Segoe UI', 'Roboto', 'sans-serif']
- }
- }
- }
- }
- </script>
+ <link rel="stylesheet" href="/newsite/styles/tailwind-base.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="/newsite/styles/custom.css">
diff --git a/content/newsite/index.html b/content/newsite/index.html
index cd7f764..9c5941d 100644
--- a/content/newsite/index.html
+++ b/content/newsite/index.html
@@ -6,24 +6,7 @@
<meta name="google-site-verification"
content="0Zvqk8EoyLzvCzEZj86bw4McxpCrEzUskO2c1n5OqE8" />
<title>Apache Traffic Server</title>
- <script src="https://cdn.tailwindcss.com";></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'primary': '#1e3a8a',
- 'accent': '#3b82f6',
- 'secondary': '#64748b'
- },
- fontFamily: {
- 'sans': ['Inter', '-apple-system',
'BlinkMacSystemFont', 'SF Pro', 'Segoe UI', 'Roboto', 'sans-serif']
- }
- }
- }
- }
- </script>
-
+ <link rel="stylesheet" href="/newsite/styles/tailwind-base.css">
<link rel="stylesheet" href="/newsite/styles/custom.css">
</head>
<body class="font-sans text-gray-800 bg-white">
diff --git a/content/newsite/press.html b/content/newsite/press.html
index 3b6fc7b..39861e2 100644
--- a/content/newsite/press.html
+++ b/content/newsite/press.html
@@ -17,23 +17,7 @@
See the License for the specific language governing permissions and
limitations under the License. -->
<!-- Tailwind CSS -->
- <script src="https://cdn.tailwindcss.com";></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'primary': '#1e3a8a',
- 'accent': '#3b82f6',
- 'secondary': '#64748b'
- },
- fontFamily: {
- 'sans': ['Inter', '-apple-system',
'BlinkMacSystemFont', 'SF Pro', 'Segoe UI', 'Roboto', 'sans-serif']
- }
- }
- }
- }
- </script>
+ <link rel="stylesheet" href="/newsite/styles/tailwind-base.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="/newsite/styles/custom.css">
diff --git a/content/newsite/styles/tailwind-base.css
b/content/newsite/styles/tailwind-base.css
new file mode 100644
index 0000000..9a7a4e3
--- /dev/null
+++ b/content/newsite/styles/tailwind-base.css
@@ -0,0 +1,296 @@
+/* Tailwind CSS Base Styles and Utilities - Compiled for Apache Traffic Server
*/
+
+/* Base Reset */
+*, ::before, ::after {
+ box-sizing: border-box;
+ border-width: 0;
+ border-style: solid;
+ border-color: #e5e7eb;
+}
+
+html {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -moz-tab-size: 4;
+ tab-size: 4;
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: 0;
+ line-height: inherit;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-size: inherit;
+ font-weight: inherit;
+}
+
+a {
+ color: inherit;
+ text-decoration: inherit;
+}
+
+b, strong {
+ font-weight: bolder;
+}
+
+img, svg, video {
+ display: block;
+ vertical-align: middle;
+ max-width: 100%;
+ height: auto;
+}
+
+button, input {
+ font-family: inherit;
+ font-size: 100%;
+ font-weight: inherit;
+ line-height: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ background-color: transparent;
+ background-image: none;
+ cursor: pointer;
+}
+
+:root {
+ --color-primary: #1e3a8a;
+ --color-accent: #3b82f6;
+ --color-secondary: #64748b;
+}
+
+/* Utility Classes */
+.container { width: 100%; }
+@media (min-width: 640px) { .container { max-width: 640px; } }
+@media (min-width: 768px) { .container { max-width: 768px; } }
+@media (min-width: 1024px) { .container { max-width: 1024px; } }
+@media (min-width: 1280px) { .container { max-width: 1280px; } }
+@media (min-width: 1536px) { .container { max-width: 1536px; } }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
+.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-4 { margin-top: 1rem; }
+.mt-6 { margin-top: 1.5rem; }
+.mt-8 { margin-top: 2rem; }
+.mt-12 { margin-top: 3rem; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mb-12 { margin-bottom: 3rem; }
+.mb-16 { margin-bottom: 4rem; }
+.ml-2 { margin-left: 0.5rem; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-3 { margin-right: 0.75rem; }
+
+.block { display: block; }
+.inline-block { display: inline-block; }
+.inline-flex { display: inline-flex; }
+.flex { display: flex; }
+.inline-grid { display: inline-grid; }
+.grid { display: grid; }
+.hidden { display: none; }
+
+.h-8 { height: 2rem; }
+.h-10 { height: 2.5rem; }
+.h-12 { height: 3rem; }
+.h-16 { height: 4rem; }
+.h-auto { height: auto; }
+.h-full { height: 100%; }
+
+.w-auto { width: auto; }
+.w-full { width: 100%; }
+
+.max-w-4xl { max-width: 56rem; }
+.max-w-6xl { max-width: 72rem; }
+.max-w-7xl { max-width: 80rem; }
+
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-8 { gap: 2rem; }
+.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
+.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
+.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
+.space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; }
+.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
+.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
+.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
+.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
+
+.rounded { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-full { border-radius: 9999px; }
+
+.border { border-width: 1px; }
+.border-l-4 { border-left-width: 4px; }
+.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
+.border-gray-200 { border-color: #e5e7eb; }
+.border-accent { border-color: var(--color-accent); }
+
+.bg-white { background-color: #fff; }
+.bg-gray-50 { background-color: #f9fafb; }
+.bg-gray-100 { background-color: #f3f4f6; }
+.bg-gray-800 { background-color: #1f2937; }
+.bg-gray-900 { background-color: #111827; }
+.bg-blue-50 { background-color: #eff6ff; }
+.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
+
+.bg-gradient-to-r { background-image: linear-gradient(to right,
var(--tw-gradient-stops)); }
+.bg-gradient-to-br { background-image: linear-gradient(to bottom right,
var(--tw-gradient-stops)); }
+.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: rgba(37, 99,
235, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
+.via-blue-700 { --tw-gradient-to: rgba(29, 78, 216, 0); --tw-gradient-stops:
var(--tw-gradient-from), #1d4ed8, var(--tw-gradient-to); }
+.to-blue-800 { --tw-gradient-to: #1e40af; }
+.from-blue-500 { --tw-gradient-from: #3b82f6; --tw-gradient-to: rgba(59, 130,
246, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
+.to-blue-900 { --tw-gradient-to: #1e3a8a; }
+
+.p-2 { padding: 0.5rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.p-8 { padding: 2rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.px-8 { padding-left: 2rem; padding-right: 2rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
+.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
+.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
+.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
+.pl-6 { padding-left: 1.5rem; }
+
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+
+.font-sans { font-family: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro',
'Segoe UI', Roboto, sans-serif; }
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-base { font-size: 1rem; line-height: 1.5rem; }
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+.text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
+.text-5xl { font-size: 3rem; line-height: 1; }
+
+.font-light { font-weight: 300; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.font-extrabold { font-weight: 800; }
+
+.uppercase { text-transform: uppercase; }
+
+.leading-relaxed { line-height: 1.625; }
+.leading-tight { line-height: 1.25; }
+
+.tracking-wide { letter-spacing: 0.025em; }
+.tracking-wider { letter-spacing: 0.05em; }
+
+.text-white { color: #fff; }
+.text-gray-600 { color: #4b5563; }
+.text-gray-700 { color: #374151; }
+.text-gray-800 { color: #1f2937; }
+.text-gray-900 { color: #111827; }
+.text-blue-50 { color: #eff6ff; }
+.text-blue-100 { color: #dbeafe; }
+.text-blue-600 { color: #2563eb; }
+.text-accent { color: var(--color-accent); }
+.text-secondary { color: var(--color-secondary); }
+
+.underline { text-decoration-line: underline; }
+
+.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0,
0, 0, 0.1); }
+.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px
rgba(0, 0, 0, 0.1); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px
rgba(0, 0, 0, 0.1); }
+.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px
rgba(0, 0, 0, 0.1); }
+
+.backdrop-blur-sm { backdrop-filter: blur(4px); }
+
+.transition-colors { transition-property: color, background-color,
border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms; }
+.transition-all { transition-property: all; transition-timing-function:
cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-transform { transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration:
150ms; }
+.duration-300 { transition-duration: 300ms; }
+.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+.hover\:text-white:hover { color: #fff; }
+.hover\:text-accent:hover { color: var(--color-accent); }
+.hover\:bg-gray-50:hover { background-color: #f9fafb; }
+.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
+.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
+.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px
4px -2px rgba(0, 0, 0, 0.1); }
+.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0
4px 6px -4px rgba(0, 0, 0, 0.1); }
+.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0
8px 10px -6px rgba(0, 0, 0, 0.1); }
+.hover\:underline:hover { text-decoration-line: underline; }
+.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
+
+.sticky { position: sticky; }
+.fixed { position: fixed; }
+.relative { position: relative; }
+.top-0 { top: 0; }
+.z-50 { z-index: 50; }
+
+.overflow-hidden { overflow: hidden; }
+
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
+/* Responsive Utilities */
+@media (min-width: 640px) {
+ .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+ .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+ .sm\:text-5xl { font-size: 3rem; line-height: 1; }
+}
+
+@media (min-width: 768px) {
+ .md\:mt-0 { margin-top: 0; }
+ .md\:mb-0 { margin-bottom: 0; }
+ .md\:flex { display: flex; }
+ .md\:grid { display: grid; }
+ .md\:hidden { display: none; }
+ .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+ .md\:flex-row { flex-direction: row; }
+ .md\:items-center { align-items: center; }
+ .md\:justify-between { justify-content: space-between; }
+ .md\:gap-8 { gap: 2rem; }
+ .md\:text-left { text-align: left; }
+ .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+ .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
+ .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
+}
+
+@media (min-width: 1024px) {
+ .lg\:mt-0 { margin-top: 0; }
+ .lg\:flex { display: flex; }
+ .lg\:hidden { display: none; }
+ .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+ .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+ .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+ .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
+ .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+}
diff --git a/content/newsite/users.html b/content/newsite/users.html
index 95d2605..f9f103f 100644
--- a/content/newsite/users.html
+++ b/content/newsite/users.html
@@ -17,23 +17,7 @@
See the License for the specific language governing permissions and
limitations under the License. -->
<!-- Tailwind CSS -->
- <script src="https://cdn.tailwindcss.com";></script>
- <script>
- tailwind.config = {
- theme: {
- extend: {
- colors: {
- 'primary': '#1e3a8a',
- 'accent': '#3b82f6',
- 'secondary': '#64748b'
- },
- fontFamily: {
- 'sans': ['Inter', '-apple-system',
'BlinkMacSystemFont', 'SF Pro', 'Segoe UI', 'Roboto', 'sans-serif']
- }
- }
- }
- }
- </script>
+ <link rel="stylesheet" href="/newsite/styles/tailwind-base.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="/newsite/styles/custom.css">
