Improve the Community Directory (#113)

* dmarz requests * metachris feedback + ccr-rs
flashbots · Apr 8, 2024 · 198e314 · 198e314
1 parent 1759a6a
commit 198e314
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 4 deletions.
diff --git a/docs/tools/community-directory.mdx b/docs/tools/community-directory.mdx
@@ -10,8 +10,19 @@ keywords:
   - community
 ---
 
+import PirateCards from '@site/src/components/Pirates';
+import RequestsForSuapps from '@site/src/components/SuappRequest'
+
 # Community Directory
 
+<div className="mx-auto my-10 flex flex-col items-center justify-center md:w-1/2">
+    <a
+    href="https://github.com/flashbots/suave-docs/edit/main/docs/tools/community-directory.mdx"
+    className="ring-offset-background focus-visible:ring-ring inline-flex min-w-full cursor-pointer items-center justify-center whitespace-nowrap rounded-md border-none bg-gray-950 text-base font-bold text-white transition-colors hover:bg-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 directory">
+        Add your work to this page
+    </a>
+</div>
+
 ## SDKs
 
 We provide two well-supported SDKs:
@@ -24,7 +35,7 @@ We provide two well-supported SDKs:
       </div>
       <div className="intro-text">
         <div className="intro-heading">TypeScript</div>
-        <div className="intro-desc">For web developers</div>
+        <div className="intro-desc">Forked from viem</div>
       </div>
     </div>
   </a>
@@ -48,7 +59,7 @@ We provide two well-supported SDKs:
       </div>
       <div className="intro-text">
         <div className="intro-heading">Golang</div>
-        <div className="intro-desc">For engineers</div>
+        <div className="intro-desc">Forked from Geth</div>
       </div>
     </div>
   </a>
@@ -72,7 +83,7 @@ SUAVE works well with Forge, as our tutorials illustrate. If you need something
         <div className="comm-card">
             <div className="comm-text">
                 <div className="intro-heading">SUAVE Ethers</div>
-                <div className="intro-desc">For those who prefer Ethers to Viem.</div>
+                <div className="intro-desc">For those who prefer Ethers to viem.</div>
             </div>
         </div>
     </a>
@@ -189,4 +200,12 @@ SUAVE works well with Forge, as our tutorials illustrate. If you need something
     </a>
 </div>
 
+## Requests for SUAPPs 
+
+<RequestsForSuapps />
+
+## SUAVE Pirates
+
+Join the community of people building on SUAVE by creating your own SUAPP or contributing to any of our repos.
 
+<PirateCards />
diff --git a/docs/tutorials/rigil.mdx b/docs/tutorials/rigil.mdx
@@ -147,4 +147,8 @@ async function sendCCR() {
 sendCCR().catch(console.error);
 ```
 
-3. Run `node index.js` and check your console for tx hash of your first CCR on Rigil.
+3. Run `node index.js` and check your console for tx hash of your first CCR on Rigil.
+
+### Rust 
+
+There is a [community-maintained repo developing here](https://github.com/halo3mic/ccr-rs) if you'd like to contribute to working on SUAVE using Rust.
diff --git a/src/components/Pirates/index.tsx b/src/components/Pirates/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import piratesData from './pirates.json';
+
+const PirateCards = () => {
+  const pirates = piratesData.pirates;
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+      {pirates.map((pirate) => (
+        <div key={pirate.gh_username} style={{ width: '200px', padding: '10px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
+          <img src={pirate.image} alt={pirate.name} style={{ width: '100px', height: '100px', borderRadius: '50%', display: 'block', marginLeft: 'auto', marginRight: 'auto' }} />
+          <h3 style={{ textAlign: 'center' }}>{pirate.name}</h3>
+          <p style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
+            {pirate.gh_username && (
+              <a href={`https://github.com/${pirate.gh_username}`} target="_blank" rel="noopener noreferrer">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"></path></svg>
+              </a>
+            )}
+            {pirate.x_url && (
+              <a href={pirate.x_url} target="_blank" rel="noopener noreferrer">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"></path></svg>
+              </a>
+            )}
+            {pirate.website && (
+              <a href={pirate.website} target="_blank" rel="noopener noreferrer">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z"></path><path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"></path></svg>
+              </a>
+            )}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PirateCards;
diff --git a/src/components/Pirates/pirates.json b/src/components/Pirates/pirates.json
@@ -0,0 +1,31 @@
+{
+    "pirates": [
+        {
+            "gh_username": "halo3mic",
+            "name": "Miha Lotric",
+            "image": "https://avatars.githubusercontent.com/u/46010359?v=4",
+            "x_url": "https://twitter.com/MihaLotric"
+        },
+        {
+            "gh_username": "Lilyjjo",
+            "name": "Lily Johnson",
+            "image": "https://avatars.githubusercontent.com/u/35852084?v=4",
+            "x_url": "https://twitter.com/lobstermindset",
+            "website": "https://lilyaudits.xyz/"
+        },
+        {
+            "gh_username": "mehranhydary",
+            "name": "Mehran Hydary",
+            "image": "https://avatars.githubusercontent.com/u/2007405?v=4",
+            "x_url": "https://twitter.com/mehranhydary",
+            "website": "https://mehranhydary.notion.site/Meet-Mehran-cfa92f7793874a409831076a663f5cb9"
+        },
+        {
+            "gh_username": "lstephanian",
+            "name": "Lauren Stephanian",
+            "image": "https://avatars.githubusercontent.com/u/3458687?v=4",
+            "x_url": "https://twitter.com/lstephanian",
+            "website": "https://laurenstephanian.com/"
+        }
+    ]
+}
diff --git a/src/components/SuappRequest/index.tsx b/src/components/SuappRequest/index.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useState, useEffect } from 'react';
+
+interface Topic {
+  id: number;
+  title: string;
+  slug: string;
+}
+
+const RequestsForSuapps: React.FC = () => {
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchTopics = async () => {
+      try {
+        const response = await fetch('https://collective.flashbots.net/tag/request-for-suapp.json');
+        const data = await response.json();
+        console.log(data)
+        setTopics(data.topic_list.topics); 
+        setIsLoading(false);
+      } catch (error) {
+        console.error('Error fetching topics:', error);
+        setIsLoading(false);
+      }
+    };
+
+    fetchTopics();
+  }, []);
+
+  if (isLoading) return <div>Loading...</div>;
+
+  const baseUrl = 'https://collective.flashbots.net/t/';
+
+  return (
+    <div>
+      {topics.length > 0 ? (
+        <ol>
+          {topics.map(topic => (
+            <li key={topic.id}>
+                <a href={`${baseUrl}${topic.slug}/${topic.id}`} target="_blank" rel="noopener noreferrer">
+                {topic.title}
+                </a>    
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <p>No topics found.</p>
+      )}
+    </div>
+  );
+};
+
+export default RequestsForSuapps;
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -286,3 +286,12 @@ footer {
 [data-theme='dark'] .card {
   color: #fff;
 }
+
+.directory {
+  padding-top: 16px;
+}
+
+.directory:hover {
+  text-decoration: none !important;
+  color: #fff !important;
+}