just show bytes for languages instead of estimated LOC

Author: vincerubinetti

app/src/pages/PageCoreProject.vue

@@ -347,7 +347,7 @@ import AppTable, { type Cols } from "@/components/AppTable.vue";
 import AppTimeChart from "@/components/AppTimeChart.vue";
 import { findJournal } from "@/pages/PageHome.vue";
 import { carve, limit } from "@/util/array";
-import { ago, format, match, printObject, span } from "@/util/string";
+import { ago, bytes, format, match, printObject, span } from "@/util/string";
 import { getEntries } from "@/util/types";
 import analytics from "~/analytics.json";
 import coreProjects from "~/core-projects.json";
@@ -626,7 +626,7 @@ const repoCols: Cols<typeof projectRepos.value> = [
     name: "Languages",
     attrs: (row) => ({
       title: row?.languages
-        .map(({ name, bytes }) => `${name}: ${bytes}`)
+        .map((row) => `${row.name}: ${bytes(row.bytes)}`)
         .join("\n"),
     }),
   },

app/src/pages/PageHome.vue

@@ -190,7 +190,7 @@
             <span>
               {{
                 format(
-                  repoProp === "languages" ? entryCount / 160 : entryCount,
+                  repoProp === "languages" ? bytes(entryCount) : entryCount,
                   true,
                 )
               }}
@@ -199,22 +199,6 @@
         </dd>
       </div>
     </dl>
-
-    <div class="col">
-      <AppHeading level="3">Notes</AppHeading>
-
-      <ul>
-        <li>
-          <code>contributors</code> are unique users that have committed, opened
-          an issue, or otherwise participated in the repo.
-        </li>
-        <li>
-          <code>language</code> lines of code estimated from
-          <code>bytes / 160</code> (UTF-8, ~2 bytes per char, ~80 chars per
-          line).
-        </li>
-      </ul>
-    </div>
   </section>
 </template>
 
@@ -252,7 +236,7 @@ import type { Cols } from "@/components/AppTable.vue";
 import AppTable from "@/components/AppTable.vue";
 import AppTimeChart from "@/components/AppTimeChart.vue";
 import { carve } from "@/util/array";
-import { format } from "@/util/string";
+import { bytes, format } from "@/util/string";
 import coreProjects from "~/core-projects.json";
 import rawProjects from "~/projects.json";
 import publications from "~/publications.json";

app/src/util/string.ts

@@ -72,10 +72,15 @@ export const match = (a: string, b: string) =>
 
 /** format bytes */
 export const bytes = (bytes: number) => {
-  const units = ["B", "KB", "MB", "GB"];
-  while (bytes > 1024 && units.length) {
+  const units = ["byte", "kilobyte", "megabyte", "gigabyte"];
+  while (bytes >= 100 && units.length) {
     bytes /= 1024;
     units.shift();
   }
-  return bytes.toFixed(1) + " " + units[0]!;
+  return bytes.toLocaleString(undefined, {
+    style: "unit",
+    unit: units[0],
+    unitDisplay: "narrow",
+    maximumFractionDigits: 1,
+  });
 };

data/util/string.ts

@@ -20,12 +20,17 @@ export const match = (a: string, b: string) =>
 
 /** format bytes */
 export const bytes = (bytes: number) => {
-  const units = ["B", "KB", "MB", "GB"];
-  while (bytes > 1024 && units.length) {
+  const units = ["byte", "kilobyte", "megabyte", "gigabyte"];
+  while (bytes >= 100 && units.length) {
     bytes /= 1024;
     units.shift();
   }
-  return bytes.toFixed(1) + " " + units[0]!;
+  return bytes.toLocaleString(undefined, {
+    style: "unit",
+    unit: units[0],
+    unitDisplay: "narrow",
+    maximumFractionDigits: 1,
+  });
 };
 
 /** truncate string from middle */