Detailed package pages (New layout) (#151)

* generate detailed package - base code

* unused file

* exclude package folder

* check differences fix for detailed packages

* Detected changes when regenerating website - fix

* check differences for detailed package-fix

* check differences error fix

* check differences fix

* check differences error fix

* check differences fix

* check differences fix

* check differences fix

* check differences error

* check differences error -fix

* check difference error fix

* check differences fix

* exclude package folder

* add limited files

* exclude package folder

* create package directory

* check differences error

* exclude package folder from check diff task

* exclude package folder from git diff

* exclude package folder from git diff

* detailed page with review comments

* 1. Ensured that package details don't render in new tab

* wip

* lots of changes, see comment

* changed how features are presented

* rebuild site

* adjust workflow

* sync and rebuild

* modify workflow

* reset the validate workflow to original. There should be no changes between runs

* print out git config (temp)

* print the actual diff

* print the actual diff

* print the actual diff

* check commit hashes

* check hashes

* check hashes

* sync metadata

* update vcpkg instance

* respond to Robert's review feedback

* sync with main

* initial commit for new layout

* remove bogus comment

* wip

* sidebar done

* dependency cards added-incomplete

* tabs work

* version content and port content added

* feature tab content added (ugly)

* Feature section

* features tab completed

* setup mobile friendly work: incomplete

* fixed supports expression

* remove pre tag from dep features

* fixed inconsistent padding and reduced tab border

* mobile friendly for small phones

* sync with main

* remove unused code

* Add .DS_Store to .gitignore

* Remove .DS_Store files from the repository

* Revert validate.yml to match version in main branch

* oops, removed wrong css

* add hover affect on packages to show its clickable

* fix supports expression

* versions don't get cut off

* fix icon alignment

* use MS icons

* modify supports

---------

Co-authored-by: Sreenivas-Kalluru <[email protected]>
Co-authored-by: Javier Matos <[email protected]>

Author: 3 people

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 vcpkg
+.DS_Store

assets/package-pages/book-solid.svg

@@ -9,6 +9,7 @@
     margin-top: -350px;
   }
 }
+
 @media screen and (min-width: 500px) and (max-width: 999px) {
   .logo-footer {
     position: absolute;
@@ -20,6 +21,7 @@
     margin-top: -25px;
   }
 }
+
 @media screen and (min-width: 1000px) and (max-width: 1499px) {
   .logo-footer {
     position: absolute;
@@ -74,9 +76,11 @@
     z-index: 10;
     color: #ffffff;
   }
+
   .navbar-toggler {
     z-index: 10;
   }
+
   .vcpkg-nav-color {
     color: #f3f3f3;
   }
@@ -148,15 +152,18 @@
     margin-top: 200px;
     width: 100%;
   }
+
   .footer-right {
     display: flex;
     margin-right: 0%;
     flex-direction: row-reverse;
     flex-wrap: wrap;
   }
+
   .footer-group-logo {
     display: none;
   }
+
   .mobile-margin {
     margin-top: 15%;
     margin-bottom: 10%;
@@ -183,9 +190,11 @@
     z-index: 10;
     color: #ffffff;
   }
+
   .navbar-toggler {
     z-index: 10;
   }
+
   .vcpkg-nav-color {
     color: #f3f3f3;
   }
@@ -257,12 +266,14 @@
     margin-top: 550px;
     width: 100%;
   }
+
   .footer-right {
     display: flex;
     margin-right: 7%;
     width: 40%;
     flex-direction: row-reverse;
   }
+
   .footer-group-logo {
     margin-right: 5px;
   }
@@ -292,9 +303,11 @@
     margin-left: 6.5%;
     z-index: 10;
   }
+
   .navbar-toggler {
     z-index: 0;
   }
+
   .vcpkg-nav-color {
     color: normal;
   }
@@ -330,12 +343,14 @@
     margin-top: 550px;
     width: 100%;
   }
+
   .footer-right {
     display: flex;
     margin-right: 7%;
     width: 40%;
     flex-direction: row-reverse;
   }
+
   .footer-group-logo {
     margin-right: 5px;
   }
@@ -350,11 +365,11 @@
 
 body {
   padding-top: 75px;
-  font-family: 'Source Sans Pro',var(--font-family-sans-serif);
+  font-family: 'Source Sans Pro', var(--font-family-sans-serif);
 }
 
 code {
-  font-family: 'Source Code Pro',var(--font-family-monospace);
+  font-family: 'Source Code Pro', var(--font-family-monospace);
   color: rgb(0, 0, 0);
   background: #f1f1f2;
   word-break: break-all;
@@ -372,13 +387,16 @@ h2 {
   font-weight: bold;
 }
 
-.docs-anchor::before,h2::before,h3::before,h4::before {
-    display: block;
-    content: " ";
-    margin-top: -62px;
-    height: 62px;
-    visibility: hidden;
-    pointer-events: none;
+.docs-anchor::before,
+h2::before,
+h3::before,
+h4::before {
+  display: block;
+  content: " ";
+  margin-top: -62px;
+  height: 62px;
+  visibility: hidden;
+  pointer-events: none;
 }
 
 .selected {
@@ -496,7 +514,7 @@ footer p {
   margin-right: 10px;
 }
 
-.copy:hover > .tip-text {
+.copy:hover>.tip-text {
   display: inline-block;
 }
 
@@ -549,22 +567,25 @@ footer p {
   line-height: 160%;
   color: #2A2A2D;
 }
-.footer-heading img, .footer-group-logo {
-  -webkit-filter: invert(100%); 
-   filter: invert(100%);
+
+.footer-heading img,
+.footer-group-logo {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
 }
+
 .footer-description {
   font-style: normal;
   font-size: 14px;
   line-height: 160%;
   color: #2A2A2D;
 }
 
-ul > ul.collapse {
+ul>ul.collapse {
   display: none;
 }
 
-ul > ul.expand {
+ul>ul.expand {
   display: block;
 }
 
@@ -620,6 +641,7 @@ a.section-selected:hover {
 .bold {
   font-weight: bold;
 }
+
 .italic {
   font-style: italic;
 }
@@ -684,6 +706,7 @@ a.section-selected:hover {
 .footer-link {
   color: #2A2A2D;
 }
+
 a.footer-link {
   text-decoration: none;
   color: #2A2A2D;
@@ -769,6 +792,7 @@ li.docs-col-bold {
 .navbar-mobile {
   color: #f1f1f2;
 }
+
 .navbar-mobile:hover {
   color: #f1f1f2;
   text-decoration: none;
@@ -812,7 +836,7 @@ span.navbar-close {
   background: #f1f1f2;
   width: 100%;
   padding: 10px;
-  font-family: 'Source Code Pro',var(--font-family-monospace);
+  font-family: 'Source Code Pro', var(--font-family-monospace);
   margin: 10px;
 }
 
@@ -856,6 +880,7 @@ span.navbar-close {
 .doc-outline-link {
   color: #222222;
 }
+
 .doc-outline-link:hover {
   color: #222222;
 }
@@ -881,6 +906,10 @@ span.navbar-close {
   top: 50px;
 }
 
+.badge {
+  margin: 0 5px;
+}
+
 @media screen and (min-width: 310px) and (max-width: 370px) {
   .footer-info-group-privacy {
     margin-left: 25%;

assets/package-pages/check-solid.svg

@@ -1,93 +1,85 @@
 .github-btn {
   overflow: hidden;
 }
+
 .gh-btn,
 .gh-count,
 .gh-ico {
   float: left;
 }
+
+/* Common button and count styles */
 .gh-btn,
 .gh-count {
-  padding: 0px 5px 0px 5px;
+  padding: 0 5px;
   color: #333;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   border-radius: 3px;
 }
+
+/* Button styling with gradient background for cross-browser compatibility */
 .gh-btn {
-  background-color: #eee;
-  background-image: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0, #fcfcfc),
-    to(#eee)
-  );
-  background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
+  background-color: #eee; /* Fallback color if gradients are not supported */
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#eee)); /* For old WebKit */
+  background-image: linear-gradient(to bottom, #fcfcfc 0%, #eee 100%); /* Standard syntax */
   background-repeat: no-repeat;
   border: 1px solid #d5d5d5;
 }
+
 .gh-btn:hover,
 .gh-btn:focus {
-  text-decoration: none;
   background-color: #ddd;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), to(#ddd));
   background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
   border-color: #ccc;
 }
+
 .gh-btn:active {
   background-color: #dcdcdc;
   background-image: none;
   border-color: #b5b5b5;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
 }
+
 .gh-ico {
   width: 27px;
   height: 27px;
   margin-right: 4px;
   background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='12 12 40 40'%3e%3cpath fill='%23333' d='M32 13.4c-10.5 0-19 8.5-19 19 0 8.4 5.5 15.5 13 18 1 .2 1.3-.4 1.3-.9v-3.2c-5.3 1.1-6.4-2.6-6.4-2.6-.9-2.1-2.1-2.7-2.1-2.7-1.7-1.2.1-1.1.1-1.1 1.9.1 2.9 2 2.9 2 1.7 2.9 4.5 2.1 5.5 1.6.2-1.2.7-2.1 1.2-2.6-4.2-.5-8.7-2.1-8.7-9.4 0-2.1.7-3.7 2-5.1-.2-.5-.8-2.4.2-5 0 0 1.6-.5 5.2 2 1.5-.4 3.1-.7 4.8-.7 1.6 0 3.3.2 4.7.7 3.6-2.4 5.2-2 5.2-2 1 2.6.4 4.6.2 5 1.2 1.3 2 3 2 5.1 0 7.3-4.5 8.9-8.7 9.4.7.6 1.3 1.7 1.3 3.5v5.2c0 .5.4 1.1 1.3.9 7.5-2.6 13-9.7 13-18.1 0-10.5-8.5-19-19-19z'/%3e%3c/svg%3e")
     0 0 / 100% 100% no-repeat;
 }
+
 .gh-count {
   position: relative;
   display: none; /* hidden to start */
   margin-left: 4px;
   background-color: #fafafa;
   border: 1px solid #d4d4d4;
 }
+
 .gh-count:hover,
 .gh-count:focus {
   color: #0366d6;
 }
-.gh-count::before,
-.gh-count::after {
-  position: absolute;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  content: '';
-  border-color: transparent;
-  border-style: solid;
-}
+
+/* Little triangle before gh-count pointing at the gh-icon */
 .gh-count::before {
-  content: '';
   position: absolute;
+  display: inline-block;
   top: 50%;
+  left: 0; /* Align the left edge of the pseudo-element with the left edge of .gh-count */
   width: 0;
   height: 0;
+  content: '';
   border: 5px solid transparent;
-  margin-top: -5px;
-  right: 3;
-  border-right-color: #d4d4d4;
-  border-left: 0;
-  margin-left: -10px;
-}
-.gh-count::after {
-  top: 50%;
-  left: -4px;
-  z-index: -1;
-  margin-top: -5px;
-  border-width: 5px 5px 5px 0;
-  border-right-color: #d4d4d4;
+  border-right-color: #d4d4d4; /* The color of the triangle */
+  transform: translate(-10px, -50%); /* Shift left by 10px and center vertically */
 }
+
+/* Utility class for block-level display */
+.display-block
+{
+  display: block !important;
+}