✨ Add word counting feature to PageRepository

nest_frontend/components/interactive/BoxWordcloud.js

@@ -24,7 +24,7 @@ export default function BoxWordcloud({ words, props }) {
                             "var(--fg-primary)",
                         ],
                         fontFamily: "Bree Serif",
-                        fontSizes: [12, 128],
+                        fontSizes: [16, 48],
                         size: undefined,
                         deterministic: true,
                     }}

nest_frontend/routes/PageRepository.js

@@ -2,13 +2,11 @@ import React from "react"
 import Style from "./PageRepository.module.css"
 import classNames from "classnames"
 import BoxRepositoryTweets from "../components/interactive/BoxRepositoryTweets"
+import BoxWordcloud from "../components/interactive/BoxWordcloud"
 
 
 export default function PageRepository({ className, ...props }) {
-    return (
-        <div className={classNames(Style.PageRepository, className)} {...props}>
-            <BoxRepositoryTweets
-                tweets={[
+    const tweets = [
         {
             "conditions": [],
             "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere lacinia eleifend. Maecenas a neque augue. Nulla dapibus lobortis gravida. Quisque quis ultricies elit. Donec in tortor augue. Cras eget aliquam felis. Nunc tempor, ipsum in lobortis tristique, nunc ante velit.",
@@ -18,8 +16,36 @@ export default function PageRepository({ className, ...props }) {
             "poster": "USteffo",
             "snowflake": "1394698342282809344",
         },
-                ]}
-            />
+    ]
+
+    let preprocessedWords = {}
+    for(const tweet of tweets) {
+        if(!tweet.content) {
+            continue
+        }
+        for(const word of tweet.content.toLowerCase().split(/\s+/)) {
+            if(!preprocessedWords.hasOwnProperty(word)) {
+                preprocessedWords[word] = 0
+            }
+            preprocessedWords[word] += 1
+        }
+    }
+
+    let processedWords = []
+    for(const word in preprocessedWords) {
+        if(!preprocessedWords.hasOwnProperty(word)) {
+            continue
+        }
+        processedWords.push({
+            text: word,
+            value: preprocessedWords[word]
+        })
+    }
+
+    return (
+        <div className={classNames(Style.PageRepository, className)} {...props}>
+            <BoxRepositoryTweets className={Style.Tweets} tweets={tweets}/>
+            <BoxWordcloud className={Style.Wordcloud} words={processedWords}/>
         </div>
     )
 }

nest_frontend/routes/PageRepository.module.css

@@ -4,14 +4,22 @@
     grid-template-areas:
             "a b"
             "c d"
+            "e f"
+            "g h"
     ;
 
     grid-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto 1fr auto;
 
     width: 100%;
     height: 100%;
 }
 
-.Wordcloud {
+.Tweets {
     grid-area: a;
 }
+
+.Wordcloud {
+    grid-area: b;
+}