sync: Updates from docusaurus-template

writedocs · Jan 6, 2025 · e90e7ed · e90e7ed
1 parent 745564e
commit e90e7ed
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 19 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -86,6 +86,9 @@ function getFirstPageFromJson(sectionName) {
 }
 
 function createOpenApiConfig() {
+  if (!configurations.apiFiles || configurations.apiFiles.length === 0) {
+    return null;
+  }
   const fileNames = configurations.apiFiles;
   const directoryPath = 'openAPI';
   const proxyUrl = 'https://proxy.writechoice.io/';
@@ -136,11 +139,20 @@ function createOpenApiConfig() {
     return acc;
   }, {});
 
-  return {
-    id: 'openapi',
-    docsPluginId: 'classic',
-    config,
-  };
+  // return {
+  //   id: 'openapi',
+  //   docsPluginId: 'classic',
+  //   config,
+  // };
+
+  return [
+    "docusaurus-plugin-openapi-docs",
+    {
+      id: 'openapi',
+      docsPluginId: 'classic',
+      config,
+    }
+  ]
 }
 
 function createNavigationArray() {
@@ -368,10 +380,7 @@ const config = {
         maxHits: '7',
         highlightResult: 'true'
       }],
-      [
-        "docusaurus-plugin-openapi-docs",
-        createOpenApiConfig()
-      ],
+      createOpenApiConfig(),
       [
         '@docusaurus/plugin-content-blog',
         {

diff --git a/src/components/writedocsComponentsFolder/Callouts/callouts.css b/src/components/writedocsComponentsFolder/Callouts/callouts.css
@@ -15,7 +15,7 @@
   font-style: normal;
   font-weight: var(--font-weight-heavy);
   margin-bottom: 0 !important;
-  text-transform: none !important;
+  text-transform: capitalize !important;
   font-family: var(--font-main);
 }
 
@@ -55,8 +55,16 @@
 
 .no-title-admonition {
   flex-direction: row;
+  justify-content: start;
+  align-items: center;
+  padding: 14px 12px 12px 18px;
 }
 
 .no-title-admonition .admonitionContent_UjKb {
   margin: 0;
+  margin-bottom: 2px;
+}
+
+.no-title-admonition .admonitionIcon_kpSf {
+  margin-right: 0;
 }
diff --git a/src/components/writedocsComponentsFolder/Callouts/types/Transpara/transpara.css b/src/components/writedocsComponentsFolder/Callouts/types/Transpara/transpara.css
@@ -1,10 +1,10 @@
 /* WARNING */
 .alert--transpara {
-  --ifm-alert-background-color: rgba(166, 189, 175, 0.212);
+  --ifm-alert-background-color: #66990029;
   --ifm-link-color: #690;
   --ifm-alert-border-color: #690;
   border-color: #690;
-  --ifm-code-background: #4ffd7d3d;
+  --ifm-code-background: #66991c26;
 }
 
 .alert--transpara .callout_img {

diff --git a/src/components/writedocsComponentsFolder/Media/Video.jsx b/src/components/writedocsComponentsFolder/Media/Video.jsx
@@ -55,14 +55,14 @@ const YouTubeIframe = ({ src, width, title }) => {
     return <div style={{ color: "red" }}>Error: Video source is required</div>;
   }
 
-  const iframeWidth = width || "100%";
-  const iframeHeight = `calc(${iframeWidth} * 9 / 16)`; // Maintain 16:9 aspect ratio
+  const iframeWidth = width || "800px";
+  const iframeHeight = `calc(${iframeWidth} * 9 / 16)`;
 
   return (
     <div
       style={{
         display: "flex",
-        justifyContent: "center", // Horizontally center
+        justifyContent: "center",
         width: "100%",
         marginBottom: "20px",
       }}
@@ -73,6 +73,7 @@ const YouTubeIframe = ({ src, width, title }) => {
           height: iframeHeight,
           position: "relative",
         }}
+        className="youTube_iframe"
       >
         <iframe
           src={src}
@@ -103,7 +104,12 @@ const Video = ({ src, autoPlay, width, title }) => {
 
   return (
     <div className="video_container">
-      <video style={srcVideoStyles} controls autoPlay={autoPlay}>
+      <video
+        style={srcVideoStyles}
+        className="video"
+        controls
+        autoPlay={autoPlay}
+      >
         <source src={useBaseUrl(src)} type="video/mp4" />
         {title ? title : "Your browser does not support the video tag."}
       </video>

diff --git a/src/components/writedocsComponentsFolder/Media/media.css b/src/components/writedocsComponentsFolder/Media/media.css
@@ -15,3 +15,54 @@
   width: 100%;
   margin-bottom: 20px;
 }
+
+/* Container styles for consistency */
+.video-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.youTube_iframe {
+  position: relative;
+}
+
+.youTube_iframe iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  border: 0;
+}
+
+/* Styles for video responsiveness */
+.video_container .video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+/* Media query for responsiveness */
+@media (max-width: 768px) {
+  .video_container .video {
+    width: 100%;
+  }
+
+  .youTube_iframe {
+    width: 100% !important;
+    padding-top: 56.25% !important;
+    height: calc(100% * 9 / 16) !important;
+  }
+}
+
+/* @media (min-width: 769px) {
+  .youTube_iframe,
+  .video_container .video {
+    width: var(--video-width, 800px); 
+  }
+} */
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -76,7 +76,7 @@
 
   --bg-defined-text-color: #FFFFFF;
 
-  --scroll-top-margin: 76px;
+  --scroll-top-margin: 130px;
 
   /* TABLE */
   --table-header-background-color: var(--primary-color);

diff --git a/src/css/table.css b/src/css/table.css
@@ -1,7 +1,7 @@
 table {
   width: 100% !important;
+  max-width: 100%;
   margin-bottom: var(--ifm-spacing-vertical);
-  display: table;
 }
 
 table thead,

diff --git a/src/css/tabs.css b/src/css/tabs.css
@@ -11,3 +11,7 @@
   border-color: var(--ifm-color-primary);
   background-color: var(--ifm-hover-overlay);
 }
+
+.tabs {
+  margin-bottom: 10px !important;
+}
diff --git a/writedocs/styles/utils/index.js b/writedocs/styles/utils/index.js
@@ -19,7 +19,8 @@ function navbarTotalItems(externalLinks, navbar, homepage) {
 }
 
 function navbarHeight(externalLinks, navbar, homepage) {
-  return navbarTotalItems(externalLinks, navbar, homepage) < navbarBreakpoint ? '76px' : '130px';
+  // return navbarTotalItems(externalLinks, navbar, homepage) < navbarBreakpoint ? '76px' : '130px';
+  return "130px";
 }
 
 function sidebarTocPosition(externalLinks, navbar, homepage) {