feat(blog): card implemented to blog page

privacy-scaling-explorations · Jul 17, 2024 · fd94412 · fd94412
1 parent 82f4c72
commit fd94412
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 8 deletions.
diff --git a/website/blog/2021-10-12-maci-v1.md b/website/blog/2021-10-12-maci-v1.md
@@ -9,6 +9,16 @@ authors:
 tags: [zk, maci, release, voting, security]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt="The Privacy & Scaling Explorations team is proud to release version 1.0 of Minimal Anti-Collusion Infrastructure (MACI). MACI enables collusion resistance for decentralised applications, particularly voting and quadratic funding systems. This release is a major upgrade to the project and provides better developer experience and gas savings for users."
+  url="https://maci.pse.dev/blog/maci-1-0-release"
+  content="
+
 # Release Announcement: MACI 1.0
 
 The Privacy & Scaling Explorations team is proud to release version 1.0 of Minimal Anti-Collusion Infrastructure (MACI). MACI enables collusion resistance for decentralised applications, particularly voting and quadratic funding systems. This release is a major upgrade to the project and provides better developer experience and gas savings for users.
@@ -96,3 +106,7 @@ Unlike other ZKP projects, MACI does not have an official trusted setup. Instead
 ## Conclusion
 
 This release marks a step towards the hard problem of preventing collusion in decentralised voting and quadratic funding systems. We are excited to share our work and please get in touch if you are a developer and are interested in getting involved in any way.
+"
+/>
+
+</div>
diff --git a/website/blog/2022-09-22-maci-v1-technical-introduction.md b/website/blog/2022-09-22-maci-v1-technical-introduction.md
@@ -9,6 +9,16 @@ authors:
 tags: [zk, maci, release, voting, security]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt="MACI, which stands for Minimal Anti-Collusion Infrastructure, is an application that allows users to have an on-chain voting process with greatly increased collusion resistance. A common problem among today’s on-chain voting processes is how easy it is to bribe voters into voting for a particular option. Oftentimes this bribery takes the form of “join our pool (vote our way) and we will give you a cut of the rewards (the bribe)”. Since all transactions on the blockchain are public, without MACI, voters can easily prove to the briber which option they voted for and therefore receive the bribe rewards."
+  url="https://maci.pse.dev/blog/maci-1-0-technical-introduction"
+  content="
+
 # A Technical Introduction to MACI 1.0
 
 ## Introduction
@@ -176,3 +186,7 @@ The tallyVotes function is only successful if the verifier contract returns that
 ## Conclusion
 
 MACI is a huge step forward in preventing collusion for on-chain votes. While it doesn’t prevent all possibilities of collusion, it does make it much harder. MACI can already be seen to be in use by the clr.fund, which has users vote on which projects to receive funding. When the possible funding amount becomes very large, users and organizations have a large incentive to collude to receive parts of these funds. This is where MACI can truly make a difference, to protect the fairness of such important voting processes such as those at clr.fund.
+"
+/>
+
+</div>
diff --git a/website/blog/2023-01-18-maci-v1.1.1.md b/website/blog/2023-01-18-maci-v1.1.1.md
@@ -9,6 +9,16 @@ authors:
 tags: [zk, maci, release, voting, security]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt="We are pleased to announce the release of an updated version of MACI - Minimal Anti-Collusion Infrastructure v1.1.1.This new release brings a more secure product, new features, and a much needed documentation refresh. Before we dive into the updates, let's refresh your memory on what MACI is and what it was created to achieve."
+  url="https://maci.pse.dev/blog/maci-v1-1-1-release"
+  content="
+
 # MACI v1.1.1 Release Article
 
 We are pleased to announce the release of an updated version of MACI - Minimal Anti-Collusion Infrastructure v1.1.1.
@@ -117,3 +127,7 @@ For any other enquiry, please reach out to us via the Privacy and Scaling Explor
 ## Release
 
 Here is a link to the new release code in GitHub - [v1.1.1 Release](https://github.com/privacy-scaling-explorations/maci/releases/tag/v1.1.1).
+"
+/>
+
+</div>
diff --git a/website/blog/2024-01-18-roadmap.md b/website/blog/2024-01-18-roadmap.md
@@ -9,6 +9,16 @@ authors:
 tags: [maci, roadmap]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt="Happy 2024 and welcome to the new MACI documentation website and blog! Moving forward, we’ll post our latest project news and development updates here.We have a few exciting announcements to share, but first, a quick review"
+  url="https://maci.pse.dev/blog/2024-team-roadmap"
+  content="
+
 Greetings anons,
 
 Happy 2024 and welcome to the new MACI documentation website and blog! Moving forward, we’ll post our latest project news and development updates here.
@@ -53,7 +63,7 @@ MACI is now maintained and will be continuously be improved by our core team, wh
 - [aguzmant103](https://github.com/aguzmant103)
 - [Vee](https://github.com/Vee-18)
 
-Now is a great time to mention that **we stand on the shoulders of giants**. Many gigabrains have made heroic advancements in this project - a big "thank you" to all those who have contributed to date! There are too many people to list here, but calling out a few notable players:
+Now is a great time to mention that **we stand on the shoulders of giants**. Many gigabrains have made heroic advancements in this project - a big &quot;thank you&quot; to all those who have contributed to date! There are too many people to list here, but calling out a few notable players:
 
 - Vitalik, Barry, Wei Jei for the original idea, architecture, initial implementation, and ongoing guidance
 - Recent team members that helped launched our [v1.1.1 release](/blog/maci-v1-1-1-release) and have since moved on: Q, Jei, Chao, and Daehyun
@@ -102,3 +112,7 @@ Questions? Concerns? Ideas? We’d love to hear from you!
 If there is a feature you think we should work on, or an initiative you'd like to collaborate with us on, please let us know! We welcome input from anyone in the community.
 
 Onward and upward 🚀
+"
+/>
+
+</div>
diff --git a/website/blog/2024-02-28-maci-v1.2.0.md b/website/blog/2024-02-28-maci-v1.2.0.md
@@ -9,6 +9,15 @@ authors:
 tags: [release, audit, security, documentation]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt=" We are pleased to announce the release of MACI [v1.2.0](https://github.com/privacy-scaling-explorations/maci/releases/tag/v1.2.0)!"
+  url="https://maci.pse.dev/blog/maci-v1-2-0-release"
+  content="
 # MACI v1.2 Release
 
 We are pleased to announce the release of MACI [v1.2.0](https://github.com/privacy-scaling-explorations/maci/releases/tag/v1.2.0)!
@@ -117,3 +126,7 @@ For any other questions or feedback, please reach out to us via [PSE's Discord](
 ## Release
 
 Here's the link to the new release code in GitHub: [v1.2.0 Release](https://github.com/privacy-scaling-explorations/maci/releases/tag/v1.2.0).
+"
+/>
+
+</div>
diff --git a/website/blog/2024-04-10-roadmap-q2.md b/website/blog/2024-04-10-roadmap-q2.md
@@ -10,6 +10,16 @@ authors:
 tags: [roadmap, rpgf, qf, qv]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt=" Glad to have you here! We have a few MACI roadmap updates to share.
+            Before we hop into our Q2 plans, let's take a look at what we did in Q1"
+  url="https://maci.pse.dev/blog/2024-q2-roadmap"
+  content="
 Greetings anon,
 
 Glad to have you here! We have a few MACI roadmap updates to share.
@@ -56,7 +66,7 @@ This quarter we're excited to keep building out MACI-RPGF with additional functi
 
 From [years of supporting QF rounds on MACI](https://qf.pse.dev/case-studies) we've learned a lot about the pain-points of community organizers. The blunt truth is that many technical barriers still exist - in order to operate a MACI poll (whether in a QF round or a simple voting application), you essentially must be a developer to deploy the smart contracts, execute on-chain transactions, and run tooling to generate zero-knowledge proofs to guarantee the integrity of a MACI poll. This is no trivial feat, and as a result, MACI is simply not a viable option for many communities to use today.
 
-We're aiming to change this by building a "Coordinator Service" to simplify the [role of the coordinator](/docs/overview/workflow#coordinator), automate tasks, and remove technical barriers to running MACI-RPGF (and all MACI) rounds. This will include a web interface to deploy and operate MACI instances as well as a server to generate proofs and submit them on-chain. We're confident this tooling will accelerate community adoption by offloading the technical overhead and domain knowledge currently required to use this technology stack. More details to come on this soon!
+We're aiming to change this by building a &quot;Coordinator Service to simplify the [role of the coordinator](/docs/overview/workflow#coordinator), automate tasks, and remove technical barriers to running MACI-RPGF (and all MACI) rounds. This will include a web interface to deploy and operate MACI instances as well as a server to generate proofs and submit them on-chain. We're confident this tooling will accelerate community adoption by offloading the technical overhead and domain knowledge currently required to use this technology stack. More details to come on this soon!
 
 ### 🎯 MACI Core Protocol Improvements
 
@@ -93,3 +103,7 @@ Questions? Concerns? Ideas? We’d love to hear from you!
 If there is a feature you think we should work on, or an initiative you'd like to collaborate with us on, please let us know! We welcome input from anyone in the community. The best ways to get in touch are to hop in [our Discord](https://discord.com/invite/sF5CT5rzrR) (`#🗳️-maci` channel), [tag us on X](https://twitter.com/zkmaci) or [create an issue on GitHub](https://github.com/privacy-scaling-explorations/maci/).
 
 Onward and upward 🚀
+"
+/>
+
+</div>
diff --git a/website/blog/2024-05-08-ethdam.md b/website/blog/2024-05-08-ethdam.md
@@ -10,6 +10,16 @@ authors:
 tags: [security, bug, babyjubjub, input validation]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  title="ETHDam(n)"
+  excerpt="During [ETHDam's Quadratic Funding round](https://ethdamqf.com/#/), run on [clr.fund](https://clr.fund), we discovered a critical bug in MACI. The issue stemmed from the lack of validation on MACI public keys within the [Poll contract](/docs/developers-references/smart-contracts/solidity-docs/Poll). A user (spoiler alert, it was a self-inflicted denial of service (DoS)) was able to submit a MACI public key which was not a point of the Baby JubJub elliptic curve, and it broke everything."
+  url="https://maci.pse.dev/blog/ethdam-bug"
+  content="
 During [ETHDam's Quadratic Funding round](https://ethdamqf.com/#/), run on [clr.fund](https://clr.fund), we discovered a critical bug in MACI. The issue stemmed from the lack of validation on MACI public keys within the [Poll contract](/docs/developers-references/smart-contracts/solidity-docs/Poll). A user (spoiler alert, it was a self-inflicted denial of service (DoS)) was able to submit a MACI public key which was not a point of the Baby JubJub elliptic curve, and it broke everything.
 
 ## So... what happened, really?
@@ -22,10 +32,10 @@ The message in question can be seen on Gnosis Chain's [block explorer](https://g
 
 ```json
 {
-  "address": "0xc59975735ed4774b3Ee8479D0b5A26388B929a34",
-  "msg": "This is proof that I control this wallet and dossed MACI by mistake while doing an invalid vote",
-  "sig": "0x8962b66462630f12476d7bdb348f08af574ba40dd32c6f149ea26717830f13f50f4e95574e8fc909dd3dd1e20bcd85ae2c3caaf41bed6b123973353635483b7f1b",
-  "version": "2"
+  &quot;address&quot;: &quot;0xc59975735ed4774b3Ee8479D0b5A26388B929a34&quot;,
+  &quot;msg&quot;: &quot;This is proof that I control this wallet and dossed MACI by mistake while doing an invalid vote&quot;,
+  &quot;sig&quot;: &quot;0x8962b66462630f12476d7bdb348f08af574ba40dd32c6f149ea26717830f13f50f4e95574e8fc909dd3dd1e20bcd85ae2c3caaf41bed6b123973353635483b7f1b&quot;,
+  &quot;version&quot;: &quot;2&quot;
 }
 ```
 
@@ -39,8 +49,8 @@ The MACI key in question looked like the below object:
 
 ```json
 {
-  "x": 1,
-  "y": 1
+  &quot;x&quot;: 1,
+  &quot;y&quot;: 1
 }
 ```
 
@@ -166,3 +176,7 @@ Below is a list of the contract addresses for this EthDAM round. All code is ver
 We decided to publish a new version of MACI with the fix (and other changes made since the 1.2 release). The new version is [1.2.1](https://github.com/privacy-scaling-explorations/maci/releases/tag/v1.2.1).
 
 Please do not use the 1.2 version of the contracts for any new deployments, as it contains the bug described in this post. All other packages are safe, though 1.2.1 is the recommended version to use.
+"
+/>
+
+</div>
diff --git a/website/blog/2024-05-22-the-origins-of-maci.md b/website/blog/2024-05-22-the-origins-of-maci.md
@@ -10,6 +10,15 @@ authors:
 tags: [maci, voting, history, vitalik]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt="Minimal Anti-Collusion Infrastructure (MACI), is making waves in the world of private, digital voting. But where did this technology originate? Vitalik Buterin is the mind that thought of MACI. In this post, we’ll dive into his vision for a more secure and private digital voting system."
+  url="https://maci.pse.dev/blog/maci-origins"
+  content="
 Minimal Anti-Collusion Infrastructure (MACI), is making waves in the world of private, digital voting. But where did this technology originate? Vitalik Buterin is the mind that thought of MACI. In this post, we’ll dive into his vision for a more secure and private digital voting system.
 
 ## Who is Vitalik Buterin?
@@ -35,3 +44,7 @@ Through MACI, Vitalik sought to revolutionise the democratic process. Imagine a
 ## Final Thoughts
 
 Vitalik’s vision for MACI was not just a technological advancement, but a stride towards a more just and democratic society. Through blockchain technology, he has shown how innovation can be harnessed for the greater good, by protecting the sanctity of each vote. MACI is a testament to how technology can be a powerful tool in upholding democratic values and ensuring that every voice is heard. If you’re keen on learning more, dig in to our documentation [**here**](https://maci.pse.dev/docs/introduction). Also, join us in building our future, connect with our team on [Discord](https://discord.com/invite/sF5CT5rzrR)!
+"
+/>
+
+</div>
diff --git a/website/blog/2024-05-28-upcoming-grants.md b/website/blog/2024-05-28-upcoming-grants.md
@@ -10,6 +10,16 @@ authors:
 tags: [voting, security, anonymity, roadmap, grants]
 ---
 
+import React from 'react';
+import Card from '../src/components/BlogCard/Card';
+import styles from '../src/components/BlogCard/blog.module.css';
+
+<div className={styles.cardsGrid}>
+<Card
+  excerpt="Minimal Anti Collusion Infrastructure ([MACI](https://github.com/privacy-scaling-explorations/maci)) is a public good that allows one to run secure, private, on-chain voting polls.
+  "
+  url="https://maci.pse.dev/blog/upcoming-grants-2024"
+  content="
 Minimal Anti Collusion Infrastructure ([MACI](https://github.com/privacy-scaling-explorations/maci)) is a public good that allows one to run secure, private, on-chain voting polls.
 
 Given MACI's open source nature, it's common for our core team to develop new features or to fix issues based on community feedback. However, it's been less common for external contributors to make significant changes to the core protocol.
@@ -82,3 +92,6 @@ If you have an ambitious idea you'd like to work on, reach out to us and we coul
 - [Marija Mikić - Anonymity in MACI - EthCC [6]](https://www.youtube.com/live/X54LaXfJTn4)
 - [MACI Original idea](https://ethresear.ch/t/minimal-anti-collusion-infrastructure/5413)
 - [MACI Anonymization](https://ethresear.ch/t/maci-anonymization-using-rerandomizable-encryption/7054)
+"
+/>
+</div>
diff --git a/website/src/components/BlogCard/Card.tsx b/website/src/components/BlogCard/Card.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "./card.module.css";
+
+interface CardProps {
+  title: string;
+  excerpt: string;
+  url: string;
+  author: string;
+  content: string;
+}
+
+const Card: React.FC<CardProps> = ({ title, excerpt, url, author, content }) => {
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHeader} onClick={() => (window.location.href = url)}>
+        <h2 className={styles.title}>{title}</h2>
+      </div>
+      <div className={styles.cardBody}>
+        <p className={styles.excerpt}>{excerpt}</p>
+        <button onClick={() => (window.location.href = url)} className={styles.readMoreButton}>
+          Read More
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/website/src/components/BlogCard/blog.module.css b/website/src/components/BlogCard/blog.module.css
@@ -0,0 +1,9 @@
+.container {
+  padding: 16px;
+}
+
+.cardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
diff --git a/website/src/components/BlogCard/card.module.css b/website/src/components/BlogCard/card.module.css
@@ -0,0 +1,51 @@
+.card {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  transition: box-shadow 0.3s ease;
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.cardHeader {
+  margin-bottom: 8px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.cardBody {
+  font-size: 16px;
+  color: #666;
+}
+
+.excerpt {
+  margin-bottom: 8px;
+}
+
+.readMoreButton {
+  background-color: #0070f3;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.readMoreButton:hover {
+  background-color: #005bb5;
+}
+
+.cardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}