feat: Readability score is not out of 100 (#32)

* Do not show score / 100 in comments

* Remove /100 from playground

* Add space in readme so that the text is bold

* Fix capitalization

---------

Co-authored-by: Chris <85164331+noon-dawg@users.noreply.github.com>

README.md

@@ -4,7 +4,8 @@ Report a readability score for Markdown files in your pull requests, allowing yo
 
 <details>
   <summary>See example pull request comment</summary>
-**Overall readability score:** 20.18/100 (🟢 +0.97)
+
+**Overall readability score:** 20.18 (🟢 +0.97)
 
 File | Readability
 --- | ---

playground/src/App.vue

@@ -19,24 +19,33 @@ const processedText = computed(() => {
     return preprocessMarkdown(input.value);
 });
 
+const rawScores = computed(() => calculateReadabilityOfText(input.value));
 
 const scores = computed(() => {
-    const rawScores = calculateReadabilityOfText(input.value);
-    return Object.entries(rawScores).map(([name, value]) => {
-        const {min, max} = METRIC_RANGES[name as keyof typeof METRIC_RANGES];
-        return {
-            // convert from namesLikeThis to Names Like This
-            name: name
-                .replace(/([A-Z])/g, ' $1')
-                .replace(/^./, (str) => str.toUpperCase()),
-            min,
-            max,
-            value,
-            description:
-                metricToDescription[name as keyof typeof metricToDescription],
-        };
-    });
+    return Object.entries(rawScores.value)
+        .filter(([name]) => name !== 'readabilityScore')
+        .map(([name, value]) => {
+            const {min, max} =
+                METRIC_RANGES[name as keyof typeof METRIC_RANGES];
+            return {
+                // convert from namesLikeThis to Names Like This
+                name: name
+                    .replace(/([A-Z])/g, ' $1')
+                    .replace(/^./, (str) => str.toUpperCase()),
+                min,
+                max,
+                value,
+                description:
+                    metricToDescription[
+                        name as keyof typeof metricToDescription
+                    ],
+            };
+        });
 });
+
+const readabilityScore = computed(() =>
+    rawScores.value.readabilityScore.toFixed(2)
+);
 </script>
 
 <template>
@@ -70,6 +79,10 @@ const scores = computed(() => {
         </div>
         <div class="column size-30 auto-margin">
             <div class="scores">
+                <div class="readability-score">
+                    <h3>Readability score</h3>
+                    <span>{{ readabilityScore }}</span>
+                </div>
                 <SingleScore
                     v-for="score in scores"
                     :key="score.name"
@@ -100,5 +113,20 @@ const scores = computed(() => {
 
 .scores > * {
     margin-bottom: 16px;
+    font-weight: 300;
+}
+
+.readability-score {
+    text-align: center;
+    margin-bottom: 32px;
+    font-weight: 100;
+
+    > h3 {
+        margin-bottom: 0;
+    }
+
+    > span {
+        font-size: 2rem;
+    }
 }
 </style>

playground/src/components/SingleScore.vue

@@ -77,7 +77,8 @@ const progress = computed(() => {
 
 .r-icon {
     margin-left: 6px;
+    margin-top: 3px;
     width: 16px;
-    fill: rgba(255, 255, 255, 0.87);
+    fill: rgba(255, 255, 255, 0.60);
 }
 </style>

src/markdown.test.ts

@@ -51,7 +51,7 @@ describe('reportToComment', () => {
 
         expect(reportToComment(report)).toMatchInlineSnapshot(`
           "
-          **Overall readability score:** 1/100 (🟢 +1)
+          **Overall readability score:** 1 (🟢 +1)
 
           File | Readability
           --- | ---

src/markdown.ts

@@ -152,7 +152,7 @@ export const reportToComment = (
     );
 
     return `
-**Overall readability score:** ${averageReadability}/100 (${averageReadabilityDiff})
+**Overall readability score:** ${averageReadability} (${averageReadabilityDiff})
 
 ${readabilityTable}