Skip to content

Commit 6303217

Browse files
olaszakosolaszakos
committed
update /internet-identity-page
1 parent e170045 commit 6303217

26 files changed

+2549
-2213
lines changed

‎plugins/data/airtable-mock.json

+1,329-1,457
Large diffs are not rendered by default.

‎plugins/data/youtube-mock.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"mostRecentVideo": {
3-
"id": "J6uG2FZyoeI",
4-
"title": "What sets the #InternetComputer apart from other blockchains 🤔",
5-
"description": "Security Scalability Canister Smart Contracts Interoperability.",
6-
"thumbnail": "https://i.ytimg.com/vi/J6uG2FZyoeI/hqdefault.jpg",
7-
"publishedAt": "2024-02-07T09:47:21Z"
3+
"id": "9BfDy3VNxu8",
4+
"title": "ICP Developer Journey 2.2 | Advanced canister calls",
5+
"description": "In a previous episode, the ICP Developer Journey briefly discussed query and update canister calls. In this episode, developers ...",
6+
"thumbnail": "https://i.ytimg.com/vi/9BfDy3VNxu8/hqdefault.jpg",
7+
"publishedAt": "2024-03-01T18:29:05Z"
88
}
99
}

‎plugins/youtube.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const youtubePlugin = async function () {
4848
return {
4949
name: "youtube",
5050
async loadContent() {
51-
if (!YOUTUBE_API_KEY) {
51+
if (!YOUTUBE_API_KEY || isDev) {
5252
logger.warn(
5353
"Warning: no env variables found for Youtube integration. Using mock youtube data."
5454
);

‎src/components/Common/Faq/Faq.tsx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, { ReactNode } from "react";
2+
import slugify from "slugify";
3+
import AnimateSpawn from "../AnimateSpawn";
4+
import transitions from "@site/static/transitions.json";
5+
import { motion } from "framer-motion";
6+
import clsx from "clsx";
7+
8+
export function idFromTitle(title: string) {
9+
const slug = slugify(title, { strict: true, lower: true });
10+
if (slug.match(/^\d/)) {
11+
return "sns-faq-" + slug;
12+
}
13+
return slug;
14+
}
15+
16+
export const Faq: React.FC<{
17+
title: string;
18+
children: ReactNode;
19+
id?: string;
20+
}> = ({ children, title, id }) => {
21+
return (
22+
<article
23+
id={id || slugify(title, { lower: true, strict: true })}
24+
className="scroll-m-[110px]"
25+
>
26+
<AnimateSpawn variants={transitions.item}>
27+
<motion.h2
28+
className="tw-heading-5 md:tw-heading-3 mb-6 relative group"
29+
variants={transitions.item}
30+
>
31+
{title}
32+
<a
33+
className="text-infinite absolute -left-6 md:-left-8 top-0 hidden group-hover:inline-block hover:text-infinite-60 hover:no-underline md:pr-3"
34+
href={`#${idFromTitle(title)}`}
35+
>
36+
#
37+
</a>
38+
</motion.h2>
39+
<motion.div
40+
variants={transitions.item}
41+
className="
42+
tw-paragraph md:tw-lead-sm
43+
prose
44+
max-w-none
45+
prose-h3:tw-heading-6 prose-h3:md:tw-heading-5 prose-h3:mb-4
46+
prose-p:tw-paragraph md:prose-p:tw-lead-sm prose-p:mb-3
47+
prose-img:mb-0 prose-img:mt-2 prose-img:w-full prose-img:aspect-video prose-img:object-contain prose-img:object-center
48+
prose-a:font-normal hover:prose-a:text-infinite hover:prose-a:no-underline
49+
prose-ul:mb-4 prose-ul:list-none prose-ul:pl-0 prose-ul:tw-paragraph md:prose-ul:tw-lead-sm
50+
prose-li:bg-[url('/img/checkmark.svg')] prose-li:bg-no-repeat prose-li:bg-left-top prose-li:pl-8 prose-li:my-3 prose-li:tw-paragraph prose-li:md:tw-lead-sm
51+
"
52+
>
53+
{children}
54+
</motion.div>
55+
</AnimateSpawn>
56+
</article>
57+
);
58+
};
59+
60+
export const FaqSection: React.FC<{
61+
title: ReactNode;
62+
children: ReactNode;
63+
className?: string;
64+
contentClassName?: string;
65+
id?: string;
66+
}> = ({ children, title, id, className, contentClassName }) => {
67+
return (
68+
<div
69+
className={clsx(
70+
"flex flex-col md:flex-row md:gap-1/12 scroll-m-[110px]",
71+
className
72+
)}
73+
id={id}
74+
>
75+
<div className="md:w-4/12 flex-shrink-0">
76+
<AnimateSpawn
77+
variants={transitions.item}
78+
className="md:sticky md:top-10"
79+
>
80+
{title}
81+
</AnimateSpawn>
82+
</div>
83+
<div
84+
className={clsx(
85+
"flex-1 flex flex-col gap-12 md:gap-20 relative",
86+
contentClassName
87+
)}
88+
>
89+
{children}
90+
</div>
91+
</div>
92+
);
93+
};

‎src/components/Common/TranslatedCards/TranslatedCards.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import AnimateSpawn from "../AnimateSpawn";
3+
import transitions from "@site/static/transitions.json";
4+
import { motion } from "framer-motion";
5+
import clsx from "clsx";
6+
7+
export const TranslatedCard: React.FC<{
8+
title: React.ReactNode;
9+
children: React.ReactNode;
10+
icon: React.ReactNode;
11+
}> = ({ title, children, icon }) => {
12+
return (
13+
<AnimateSpawn
14+
className="sm:w-4/10 sm:even:self-end sm:-mt-40 lg:-mt-20 sm:first:mt-0"
15+
variants={transitions.container}
16+
>
17+
<motion.div className="w-30 mb-4" variants={transitions.item}>
18+
{icon}
19+
</motion.div>
20+
<motion.h3
21+
className="tw-heading-4 mb-4 md:tw-heading-3"
22+
variants={transitions.item}
23+
>
24+
{title}
25+
</motion.h3>
26+
{children}
27+
</AnimateSpawn>
28+
);
29+
};
30+
31+
export const TranslatedCardList: React.FC<{
32+
children: React.ReactNode;
33+
className?: string;
34+
}> = ({ children, className }) => {
35+
return (
36+
<div className={clsx("flex flex-col gap-16 sm:gap-0", className)}>
37+
{children}
38+
</div>
39+
);
40+
};

‎src/data/sns.tsx

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import snsDataJson from "@site/.docusaurus/sns-data/default/sns-data.json";
2+
import React from "react";
3+
import { DaoCardProps } from "../components/SnsPage/DaoCard";
4+
5+
export const snsData = snsDataJson as any as {
6+
name: string;
7+
description: string;
8+
url: string;
9+
logo: string;
10+
rootCanisterId: string;
11+
proposalCount: number;
12+
icpRaised: number;
13+
participants: number;
14+
}[];
15+
16+
export const openChatDao = snsData.find(
17+
(dao) => dao.rootCanisterId === "3e3x2-xyaaa-aaaaq-aaalq-cai"
18+
);
19+
export const sonicDao = snsData.find(
20+
(dao) => dao.rootCanisterId === "qtooy-2yaaa-aaaaq-aabvq-cai"
21+
);
22+
export const goldDao = snsData.find(
23+
(dao) => dao.rootCanisterId === "tw2vt-hqaaa-aaaaq-aab6a-cai"
24+
);
25+
26+
export const extraMetadata: Record<string, Partial<DaoCardProps>> = {
27+
"tw2vt-hqaaa-aaaaq-aab6a-cai": {
28+
// Gold DAO
29+
twitter: "https://twitter.com/gldrwa",
30+
description: (
31+
<>
32+
The Gold DAO represents a groundbreaking fusion of traditional gold and
33+
modern blockchain technology, allowing anyone in the world to access
34+
physical gold instantaneously, without depending on banks.
35+
</>
36+
),
37+
},
38+
39+
"qtooy-2yaaa-aaaaq-aabvq-cai": {
40+
// Sonic
41+
name: "Sonic",
42+
twitter: "https://twitter.com/sonic_ooo",
43+
description: (
44+
<>
45+
The open DeFi suite on the Internet Computer blockchain governed by the
46+
people for the people. Sonic unleashes the potential of crypto trading
47+
through innovative DeFi products.
48+
</>
49+
),
50+
},
51+
52+
"3e3x2-xyaaa-aaaaq-aaalq-cai": {
53+
// OpenChat
54+
twitter: "https://twitter.com/OpenChat",
55+
name: "OpenChat raises 1M ICP in 6 hours",
56+
description: (
57+
<>
58+
OpenChat was the first project to launch an SNS DAO on the Internet
59+
Computer, marking a significant milestone in the world of blockchain and
60+
social media as an open internet service.{" "}
61+
</>
62+
),
63+
},
64+
65+
"zxeu2-7aaaa-aaaaq-aaafa-cai": {
66+
// Dragginz
67+
twitter: "https://twitter.com/dragginzgame",
68+
description: (
69+
<>
70+
A virtual pets game from the creators of Neopets. Non-profit, 100%
71+
on-chain baby dragons, crowdsourced world building, magic spells, and a
72+
prince in disguise!
73+
</>
74+
),
75+
},
76+
77+
"7jkta-eyaaa-aaaaq-aaarq-cai": {
78+
// Kinic
79+
twitter: "https://twitter.com/kinic_app",
80+
description: (
81+
<>
82+
The first and only dedicated search engine for Web3 content that runs on
83+
100% on-chain. Trustless SEO backed by ZKML enables transparent results,
84+
instead of ad-based content .
85+
</>
86+
),
87+
},
88+
89+
"67bll-riaaa-aaaaq-aaauq-cai": {
90+
// Hot or Not
91+
twitter: "https://twitter.com/hotornot_dapp",
92+
description: (
93+
<>
94+
A decentralized short-video social media platform governed by the people
95+
for the people. Monetized time on social media.
96+
</>
97+
),
98+
},
99+
100+
"4m6il-zqaaa-aaaaq-aaa2a-cai": {
101+
// IC Ghost
102+
twitter: "https://twitter.com/ghost_icp",
103+
description: (
104+
<>
105+
The first decentralized meme coin on the Internet Computer. GHOST is
106+
powered by the community and owd by the community.
107+
</>
108+
),
109+
},
110+
111+
"x4kx5-ziaaa-aaaaq-aabeq-cai": {
112+
// Modclub
113+
twitter: "https://twitter.com/ModclubApp",
114+
description: (
115+
<>
116+
A decentralized crowdwork platform that supports dapps by handling
117+
resource-intensive tasks such as content moderation, user verification
118+
and data labeling.
119+
</>
120+
),
121+
},
122+
123+
"xjngq-yaaaa-aaaaq-aabha-cai": {
124+
// BOOM DAO
125+
twitter: "https://twitter.com/boomdaosns",
126+
description: (
127+
<>
128+
A collaborative hub for all things Web3 gaming. Plus an all-in-one web3
129+
game platform and protocol running 100% on-chain on the Internet
130+
Computer.
131+
</>
132+
),
133+
},
134+
135+
"uly3p-iqaaa-aaaaq-aabma-cai": {
136+
// Catalyze
137+
twitter: "https://twitter.com/catalyze_one",
138+
description: (
139+
<>
140+
A one-stop social-fi application for organising Web3 experiences and
141+
building community. Event management, crowdsourcing, chat function, and
142+
reward tooling.
143+
</>
144+
),
145+
},
146+
147+
"u67kc-jyaaa-aaaaq-aabpq-cai": {
148+
// ICX
149+
twitter: "https://twitter.com/icxdao",
150+
description: (
151+
<>
152+
A decentralized social network with the functionalities you love on
153+
platforms like Twitter, but with privacy, ownership, and
154+
community-driven governance.
155+
</>
156+
),
157+
},
158+
159+
"rzbmc-yiaaa-aaaaq-aabsq-cai": {
160+
// Nuance
161+
twitter: "https://twitter.com/nuancedapp",
162+
description: (
163+
<>
164+
The world's first publishing platform built entirely on-chain. In the
165+
same way DeFi has taken the middleman out of finance, Nuance does the
166+
same for the written word.
167+
</>
168+
),
169+
},
170+
171+
"extk7-gaaaa-aaaaq-aacda-cai": {
172+
// Neutrinite
173+
twitter: "https://twitter.com/ICPCoins",
174+
description: (
175+
<>
176+
Neutrinite SNS DAO for ICPCoins. This platform is dedicated to securely
177+
sourcing data from DEXes, DAOs, and other DeFi applications.
178+
</>
179+
),
180+
},
181+
182+
"ecu3s-hiaaa-aaaaq-aacaq-cai": {
183+
// Trax
184+
twitter: "https://twitter.com/onlyontrax",
185+
description: (
186+
<>A decentralised music platform own and governed by artists and fans.</>
187+
),
188+
},
189+
};
190+
191+
export function dashboardUrlFromRootCanisterId(rootCanisterId: string) {
192+
return `https://dashboard.internetcomputer.org/sns/${rootCanisterId}`;
193+
}

0 commit comments

Comments
 (0)