Moved Methodology (#280)

Author: AlexanderKaran

packages/docs/src/components/ClientSideRenderedStatsMethodologyNotes.astro

@@ -8,7 +8,7 @@ const { href, label } = Astro.props
 ---
 
 <p class="details-link">
-  For full details and methodology, see <a href={href}>{label}</a>.
+  Methodology: <a href={href}>{label}</a>.
 </p>
 
 <style>

packages/docs/src/components/CoreWebVitalsMethodologyNotes.astro

@@ -20,6 +20,11 @@ const pathname = Astro.url.pathname
           class={`nav-link${pathname === '/run-time' ? ' nav-link--active' : ''}`}
           >Run Time</a
         >
+        <a
+          href="/methodology"
+          class={`nav-link${pathname === '/methodology' ? ' nav-link--active' : ''}`}
+          >Methodology</a
+        >
         <a
           href="/glossary"
           class={`nav-link${pathname === '/glossary' ? ' nav-link--active' : ''}`}
@@ -191,6 +196,16 @@ const pathname = Astro.url.pathname
       class={`mobile-nav-link${pathname === '/run-time' ? ' mobile-nav-link--active' : ''}`}
       >Run Time</a
     >
+    <a
+      href="/methodology"
+      class={`mobile-nav-link${pathname === '/methodology' ? ' mobile-nav-link--active' : ''}`}
+      >Methodology</a
+    >
+    <a
+      href="/glossary"
+      class={`mobile-nav-link${pathname === '/glossary' ? ' mobile-nav-link--active' : ''}`}
+      >Glossary</a
+    >
     <a href="https://e18e.dev" class="mobile-nav-link">e18e.dev</a>
   </div>
 </header>

packages/docs/src/components/DetailsLink.astro

@@ -5,35 +5,37 @@ import CoreJsTable from '../components/CoreJsTable.astro'
 import DependencyCharts from '../components/DependencyCharts.astro'
 import DependencyStatsTable from '../components/DependencyStatsTable.astro'
 import NodeModulesSizeCharts from '../components/NodeModulesSizeCharts.astro'
-import MethodologyTag from '../components/MethodologyTag.astro'
+import DetailsLink from '../components/DetailsLink.astro'
 import PageHeader from '../components/PageHeader.astro'
 import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
   <PageHeader showToggle>Dev Time Stats</PageHeader>
   <h2 id="dependency-counts">Dependency Counts</h2>
+  <DetailsLink
+    href="/methodology#dependency-counts"
+    label="Dependency Counts"
+  />
   <DependencyStatsTable />
   <DependencyCharts />
   <h2 id="node-modules-size">Node Modules Size</h2>
+  <DetailsLink
+    href="/methodology#node-modules-size"
+    label="Node Modules Size"
+  />
   <NodeModulesSizeCharts />
   <h2 id="build-and-install-times">Build and Install Times</h2>
+  <DetailsLink
+    href="/methodology#build-and-install-times"
+    label="Build and Install Times"
+  />
   <BuildInstallStatsTable />
   <BuildSizeCharts />
   <h2 id="core-js">Core-JS Polyfills</h2>
-  <MethodologyTag>
-    Detects vendored <a
-      href="https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/README.md"
-      target="_blank"
-      rel="noopener noreferrer">core-js</a
-    > in build output and counts polyfill modules that are already natively supported
-    by the <a
-      href="https://browsersl.ist/#q=last+2+Chrome+major+versions%2C+last+2+Firefox+major+versions%2C+last+2+Safari+major+versions%2C+last+2+Edge+major+versions"
-      target="_blank"
-      rel="noopener noreferrer"
-      >last 2 major versions of Chrome, Firefox, Safari, and Edge</a
-    >. Size is approximate — it reflects the JS chunk containing core-js, which
-    may include other bundled code.
-  </MethodologyTag>
+  <DetailsLink
+    href="/methodology#core-js-polyfills"
+    label="Core-JS Polyfills"
+  />
   <CoreJsTable />
 </Layout>