Merge pull request #150 from Lissy93/FIX/links-api-spec-and-sponsor

Fix/links api spec and sponsor

package.json

@@ -1,7 +1,7 @@
 {
   "name": "web-check",
   "type": "module",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "homepage": "https://web-check.xyz",
   "scripts": {
     "start": "node server",

src/components/homepage/SponsorSegment.astro

@@ -9,7 +9,7 @@ const ctaLinkText = 'Terminal Trove Newsletter';
 const ctaImageSrc = 'https://i.ibb.co/5jJ4bzZ/terminal-trove-cta.png';
 ---
 
-<div class="sponsor-block">
+<div class="sponsored-but-dont-block">
   <div>
     <h5>Sponsored by <a href={sponsorLink}>{sponsorName}</a></h5>
     <p>
@@ -24,7 +24,7 @@ const ctaImageSrc = 'https://i.ibb.co/5jJ4bzZ/terminal-trove-cta.png';
 
 <style lang="scss">
   @import '@styles/global.scss';
-  .sponsor-block {
+  .sponsored-but-dont-block {
     background: var(--text-color);
     color: var(--background);
     padding: 2rem;

src/pages/web-check-api/spec.astro

@@ -1,9 +1,7 @@
 ---
 import BaseLayout from '@layouts/Base.astro';
 import NavBar from '@components/scafold/Nav.astro';
-// import Footer from '@components/scafold/Footer.astro';
-// import config from '../site-config';
-
+import Footer from '@components/scafold/Footer.astro';
 ---
 
 <BaseLayout
@@ -17,12 +15,13 @@ import NavBar from '@components/scafold/Nav.astro';
   <main>
     <NavBar />
     <div id="swagger-ui"></div>
+    <Footer />
   </main>
 </BaseLayout>
 
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui-bundle.js"></script>
-<script type="module" is:inline>
-  window.onload = () => {
+<script is:inline>
+  function initializeSwagger() {
     SwaggerUIBundle({
       url: '/resources/openapi-spec.yml',
       dom_id: '#swagger-ui',
@@ -33,19 +32,24 @@ import NavBar from '@components/scafold/Nav.astro';
       ],
     });
   }
+  // Initialize Swagger when visiting page directly
+  document.addEventListener('DOMContentLoaded', initializeSwagger);
+  // Initialize Swagger when navigating to page from another page
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    initializeSwagger();
+  }
 </script>
 
 <style lang="scss">
   @import '@styles/global.scss';
   main {
-    padding: 2rem;
-    margin: 0 auto;
     height: 100vh;
-    width: 100vw;
-    max-width: 1600px;
-    @include mobile-down {
-      padding: 0;
+    padding-top: 2rem;
+    #swagger-ui {
+      margin: 0 auto;
+      width: calc(100vw - 4rem);
+      max-width: 1600px;
+      min-height: 100vh;
     }
   }
-
 </style>

src/web-check-live/components/Form/Nav.tsx

@@ -22,7 +22,7 @@ const Nav = (props: { children?: ReactNode}) => {
     <Header as="header">
     <Heading color={colors.primary} size="large">
       <img width="64" src="/web-check.png" alt="Web Check Icon" />
-      <Link to="/">Web Check</Link>
+      <a href="/" target="_self">Web Check</a>
     </Heading>
       {props.children && props.children}
   </Header>