Merge pull request #139 from ChtiJS/feat/mastodon

feat(mastodon): Switched from X to mastodon

package.json

@@ -22,11 +22,11 @@
     "front-matter": "^4.0.2",
     "lunr": "^2.3.9",
     "next": "14.0.3",
+    "node-html-markdown": "^1.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark-parse": "^11.0.0",
     "swr": "^2.2.4",
-    "twitter-api-sdk": "^1.2.1",
     "typescript": "5.3.2",
     "unified": "^11.0.4",
     "yerror": "^6.2.1"

src/components/tootList.tsx

@@ -0,0 +1,62 @@
+import Heading2 from './h2';
+import { renderMarkdown } from '../utils/markdown';
+import Paragraph from './p';
+import Anchor from './a';
+import type { MarkdownRootNode } from '../utils/markdown';
+
+export type Toots = {
+  id: string;
+  text: MarkdownRootNode;
+  createdAt: string;
+  url: string;
+}[];
+
+const TootList = ({ toots }: { toots: Toots }) => (
+  <aside className="root">
+        <Heading2>Derniers messages Mastodon&nbsp;:</Heading2>
+        <div className="tootList">
+          {toots.map((toot) => (
+            <div key={toot.id} className="toot">
+              {renderMarkdown({ index: 0 }, toot.text)}
+              <Paragraph>
+                Publié le{" "}
+                <Anchor href={toot.url}>
+                  {new Date(toot.createdAt).toLocaleString()}.
+                </Anchor>
+              </Paragraph>
+            </div>
+          ))}
+        </div>
+    <style jsx>{`
+      .root {
+        margin: 0 0 var(--vRythm) 0;
+      }
+      .toot :global(a) {
+        color: #205370;
+      }
+      .toot :global(p) {
+        margin-left: 2%;
+      }
+      .toot :global(a):hover {
+        color: #14171a;
+      }
+
+      .tootList {
+        margin-top: var(--vRythm);
+        display: flex;
+        flex-direction: row;
+        gap: var(--gutter);
+      }
+      .toot {
+        border-style: solid;
+        border-color: var(--grey);
+        border-size: var(--borderSize);
+        border-radius: var(--borderRadius);
+        width: var(--block);
+        padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+      }
+    `}</style>
+  </aside>
+);
+
+export default TootList;