Merge pull request #140 from docsbydoxdox/hotfix/bootstrap-styles

neogeek · web-flow · commit 15c4c7791167 · 2022-02-20T10:28:03.000-05:00
[hotfix] Bootstrap styles
diff --git a/packages/doxdox-renderer-bootstrap/src/__snapshots__/index.test.ts.snap b/packages/doxdox-renderer-bootstrap/src/__snapshots__/index.test.ts.snap
@@ -25,21 +25,33 @@ exports[`bootstrap render 1`] = `
         font-size: 3.5rem;
       }
 
+      .pkg-name a {
+        text-decoration: none;
+      }
+
       .pkg-description {
         font-size: 1.5rem;
         font-weight: 200;
       }
 
-      .method-name {
+      nav .file-name {
+        color: #E54D89;
+      }
+
+      nav .method-name {
+        margin: 0.25rem 0;
+      }
+
+      main .method-name {
         position: relative;
       }
 
-      .method-scope {
+      main .method-scope {
         font-size: 1.5rem;
         color: #999;
       }
 
-      .method-permalink {
+      main .method-permalink {
         position: absolute;
         margin-left: -1em;
         font-weight: normal;
@@ -59,15 +71,16 @@ exports[`bootstrap render 1`] = `
 
     <div class=\\"container\\">
       <div class=\\"row\\">
-        <div class=\\"p-5 col-md-3\\">
-          <p><b>directory/index.js</b></p>
+        <nav class=\\"p-5 col-md-3\\">
+          <p><a href=\\"#directory/index.js\\" class=\\"file-name\\"><b>directory/index.js</b></a></p>
 <ul class=\\"list-unstyled ml-0\\">
-<li><a href=\\"#index-js-methodname\\" class=\\"\\">methodName</a></li>
+<li class=\\"method-name\\"><a href=\\"#index-js-methodname\\" class=\\"\\">methodName</a></li>
 </ul>
-        </div>
+        </nav>
 
-        <div class=\\"p-5 col-md-9\\">
-          <div class=\\"mb-5\\"><a name=\\"index-js-methodname\\" />
+        <main class=\\"p-5 col-md-9\\">
+          <a name=\\"directory/index.js\\" />
+<div class=\\"mb-5\\"><a name=\\"index-js-methodname\\" />
 
 <h2 class=\\"method-name\\">
   <a href=\\"#index-js-methodname\\" class=\\"method-permalink\\" aria-label=\\"Permalink\\">#</a>
@@ -108,7 +121,7 @@ exports[`bootstrap render 1`] = `
 
 </div>
 
-        </div>
+        </main>
       </div>
     </div>
 
diff --git a/packages/doxdox-renderer-bootstrap/src/index.ts b/packages/doxdox-renderer-bootstrap/src/index.ts
@@ -65,20 +65,23 @@ ${method.returns.map(
 </div>
 `;
 
-const renderFileNav = (file: File) => `<p><b>${file.path}</b></p>
+const renderFileNav = (file: File) => `<p><a href="#${
+    file.path
+}" class="file-name"><b>${file.path}</b></a></p>
 <ul class="list-unstyled ml-0">
 ${file.methods
     .map(
         method =>
-            `<li><a href="#${method.slug}" class="${
+            `<li class="method-name"><a href="#${method.slug}" class="${
                 method.private ? 'text-muted' : ''
             }">${method.name}</a></li>`
     )
     .join('')}
 </ul>`;
 
 const renderFile = (file: File) =>
-    `${file.methods.map(method => renderMethod(method)).join('')}`;
+    `<a name="${file.path}" />
+${file.methods.map(method => renderMethod(method)).join('')}`;
 
 export default async (doc: Doc): Promise<string> => `<!DOCTYPE html>
 <html>
@@ -104,21 +107,33 @@ export default async (doc: Doc): Promise<string> => `<!DOCTYPE html>
         font-size: 3.5rem;
       }
 
+      .pkg-name a {
+        text-decoration: none;
+      }
+
       .pkg-description {
         font-size: 1.5rem;
         font-weight: 200;
       }
 
-      .method-name {
+      nav .file-name {
+        color: #E54D89;
+      }
+
+      nav .method-name {
+        margin: 0.25rem 0;
+      }
+
+      main .method-name {
         position: relative;
       }
 
-      .method-scope {
+      main .method-scope {
         font-size: 1.5rem;
         color: #999;
       }
 
-      .method-permalink {
+      main .method-permalink {
         position: absolute;
         margin-left: -1em;
         font-weight: normal;
@@ -146,19 +161,19 @@ export default async (doc: Doc): Promise<string> => `<!DOCTYPE html>
 
     <div class="container">
       <div class="row">
-        <div class="p-5 col-md-3">
+        <nav class="p-5 col-md-3">
           ${doc.files
               .filter(file => file.methods.length)
               .map(file => renderFileNav(file))
               .join('')}
-        </div>
+        </nav>
 
-        <div class="p-5 col-md-9">
+        <main class="p-5 col-md-9">
           ${doc.files
               .filter(file => file.methods.length)
               .map(file => renderFile(file))
               .join('')}
-        </div>
+        </main>
       </div>
     </div>
 
