Skip to content

Commit 5f65700

Browse files
devksingh4devksingh4
committed
Change docs UI
1 parent b757a18 commit 5f65700

File tree

1 file changed

+113
-9
lines changed

1 file changed

+113
-9
lines changed

‎src/api/createSwagger.ts

Lines changed: 113 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,126 @@ const html = `
1717
<meta property="description" content="The ACM @ UIUC Core API provides services for managing chapter operations." />
1818
<meta property="og:image" content="https://static.acm.illinois.edu/square-blue.png" />
1919
<meta property="og:url" content="https://core.acm.illinois.edu/docs" />
20+
<style>
21+
:root {
22+
--scalar-custom-header-height: 50px;
23+
/* Default colors (Light Mode) */
24+
--initial-bg-color: #FFFFFF; /* White */
25+
--initial-text-color: #2A2F45; /* Black */
26+
}
27+
28+
@media (prefers-color-scheme: dark) {
29+
:root {
30+
/* Dark Mode colors */
31+
--initial-bg-color: #0F0F0F; /* Dark Gray */
32+
--initial-text-color: #E7E7E7; /* Light Gray */
33+
}
34+
}
35+
36+
/* Apply initial landing page colors and hide content */
37+
body {
38+
background-color: var(--initial-bg-color);
39+
color: var(--initial-text-color);
40+
opacity: 0; /* Hidden by default */
41+
visibility: hidden;
42+
transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
43+
min-height: 100vh; /* Ensures the body always takes at least the full viewport height */
44+
margin: 0; /* Remove default body margin */
45+
display: flex;
46+
flex-direction: column;
47+
justify-content: center;
48+
align-items: center;
49+
font-family: sans-serif; /* Basic font for initial load */
50+
}
51+
52+
/* Class to show the body content */
53+
body.loaded {
54+
opacity: 1;
55+
visibility: visible;
56+
}
57+
58+
/* Styles for the loading indicator (optional) */
59+
.loading-indicator {
60+
font-size: 2em;
61+
text-align: center;
62+
}
63+
64+
/* Original Scalar styles (ensure these are applied after initial hide) */
65+
.custom-header {
66+
height: var(--scalar-custom-header-height);
67+
background-color: var(--scalar-background-1);
68+
box-shadow: inset 0 -1px 0 var(--scalar-border-color);
69+
color: var(--scalar-color-1);
70+
font-size: var(--scalar-font-size-2);
71+
/* Increased padding on left and right for more space */
72+
padding: 0 36px; /* Increased from 18px */
73+
position: sticky;
74+
justify-content: space-between;
75+
top: 0;
76+
z-index: 100;
77+
width: 100%; /* Ensure header spans full width */
78+
box-sizing: border-box; /* Include padding in the width calculation */
79+
}
80+
.custom-header,
81+
.custom-header nav {
82+
display: flex;
83+
align-items: center;
84+
gap: 18px;
85+
font-size: var(--scalar-font-size-3);
86+
}
87+
.custom-header a:hover {
88+
color: var(--scalar-color-2);
89+
}
90+
91+
/* If the script targets a specific container, give it a min-height */
92+
/* This is still useful even if hidden, to reserve space when shown */
93+
#app {
94+
min-height: 500px; /* Adjust as needed based on expected content height */
95+
width: 100%; /* Ensure app container spans full width */
96+
}
97+
</style>
98+
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@scalar/api-reference" as="script" />
2099
</head>
21100
22101
<body>
23-
<div id="app"></div>
102+
<div class="loading-indicator">
103+
Loading API Documentation...
104+
</div>
105+
106+
<header class="custom-header scalar-app" style="display: none;">
107+
<b>ACM @ UIUC</b>
108+
<nav>
109+
<a href="https://acm.illinois.edu">Home</a>
110+
<a href="https://core.acm.illinois.edu">Management Portal</a>
111+
</nav>
112+
</header>
113+
<div id="app" style="display: none;"></div>
24114
25-
<!-- Load the Script -->
26115
<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
27116
28-
<!-- Initialize the Scalar API Reference -->
29117
<script>
30-
Scalar.createApiReference('#app', {
31-
// The URL of the OpenAPI/Swagger document
32-
url: '/docs/openapi.json',
33-
// Avoid CORS issues
34-
proxyUrl: 'https://proxy.scalar.com',
35-
})
118+
function initializeAndShowPage() {
119+
// Hide the initial loading indicator
120+
document.querySelector('.loading-indicator').style.display = 'none';
121+
122+
// Show the actual header and app container
123+
document.querySelector('.custom-header').style.display = 'flex';
124+
document.getElementById('app').style.display = 'block';
125+
126+
Scalar.createApiReference('#app', {
127+
url: '/docs/openapi.json',
128+
});
129+
130+
// Add a class to the body to make it visible and apply full styles
131+
document.body.classList.add('loaded');
132+
}
133+
134+
// Check if Scalar is already defined, or wait for it to load
135+
if (typeof Scalar !== 'undefined' && typeof Scalar.createApiReference === 'function') {
136+
initializeAndShowPage();
137+
} else {
138+
document.addEventListener('DOMContentLoaded', initializeAndShowPage);
139+
}
36140
</script>
37141
</body>
38142
</html>

0 commit comments

Comments
 (0)