This repository has no description
1import React, { useState } from 'react';
2import './Definitions.css';
3import { Link } from 'react-router-dom';
4import RelatedPagesNav from '../common/RelatedPagesNav';
5
6const Definitions = () => {
7 // State to track which definition is expanded
8 const [expandedTerm, setExpandedTerm] = useState(null);
9 // State to track which social status is expanded
10 const [expandedStatus, setExpandedStatus] = useState(null);
11
12 // Toggle function for definitions accordion
13 const toggleTerm = (term) => {
14 if (expandedTerm === term) {
15 setExpandedTerm(null);
16 } else {
17 setExpandedTerm(term);
18 }
19 };
20
21 // Toggle function for social status accordion
22 const toggleStatus = (status) => {
23 if (expandedStatus === status) {
24 setExpandedStatus(null);
25 } else {
26 setExpandedStatus(status);
27 }
28 };
29
30 // Helper function to add UTM parameters to links
31 const addUtmParams = (url, source = "term_definition") => {
32 // Check if URL already has parameters
33 const hasParams = url.includes('?');
34 const connector = hasParams ? '&' : '?';
35
36 // Add UTM parameters
37 return `${url}${connector}utm_source=cred.blue&utm_medium=definitions&utm_campaign=${source}`;
38 };
39
40 // Definitions data with added links
41 const definitions = [
42 {
43 id: "pds",
44 term: "Personal Data Server (PDS)",
45 definition: "A server that hosts your AT Protocol data and content. You can use Bluesky's PDS hosting or choose a third-party PDS host for more control over your data. By default, new Bluesky accounts use Bluesky's PDS hosting, so the vast majority of accounts right now do not use a third-party PDS. Having a third-party PDS host contributes to the further decentralization of the network, but it is currently difficult to do.",
46 learnMoreLink: "https://atproto.com/guides/self-hosting"
47 },
48 {
49 id: "bsky-mushroom",
50 term: "Bluesky Mushroom",
51 definition: "All of Bluesky's PDS hosting servers are named after various types of mushrooms. If your account is on a Bluesky Mushroom, that means you are entrusting Bluesky with holding your data for you. To see a full list of the Bluesky Mushrooms, use the learn more link below.",
52 learnMoreLink: "https://bsky-debug.app/"
53 },
54 {
55 id: "did",
56 term: "DID",
57 definition: "The AT Protocol uses Decentralized Identifiers (DIDs) as persistent, long-term account identifiers. DID is a W3C standard, with many standardized and proposed DID method implementations. There are currently two methods supported by the protocol: did:plc and did:web. New Bluesky accounts use the did:plc method.",
58 learnMoreLink: "https://atproto.com/specs/did"
59 },
60 {
61 id: "lexicon",
62 term: "Lexicon/Collection",
63 definition: "The schema system used by the AT Protocol to define data structures. Lexicons are kind of like a file formats, and different AT Protocol apps can choose which of these file formats to support. Apps can have their own unique file formats as well. Third-party lexicons allow for custom features and extensions to the protocol. Lexicons are written in JSON and are sometimes referred to as collections.",
64 learnMoreLink: "https://atproto.com/guides/lexicon"
65 },
66 {
67 id: "rotation-key",
68 term: "Rotation Key",
69 definition: "A security key that allows you to recover your account if your primary credentials are compromised.",
70 learnMoreLink: "https://atproto.com/guides/account-migration#updating-identity"
71 },
72 {
73 id: "bluesky-eras",
74 term: "Bluesky Eras",
75 definition: "Ever since Bluesky was first incubated from within Twitter in 2019, it has been through numerous different defining eras. Each of these eras has had distinct qualities and even cultures. The main eras are as follows: 1. pre-history (staff, advisors, friends), 2. invite-only (the introduction of the invite system), 3. public release (anyone could create an account)",
76 },
77 {
78 id: "alt-text",
79 term: "Alt Text",
80 definition: "Text descriptions added to images that make content accessible to users with visual impairments or when images fail to load.",
81 learnMoreLink: "https://accessibility.huit.harvard.edu/describe-content-images"
82 },
83 {
84 id: "social-graph",
85 term: "Social Graph",
86 definition: "The network of connections between accounts, including followers, following, and engagement patterns.",
87 learnMoreLink: "https://en.wikipedia.org/wiki/Social_graph"
88 },
89 {
90 id: "labelers",
91 term: "Labelers",
92 definition: "Entities that can apply labels to content on Bluesky for moderation purposes. Users can choose which labelers they trust.",
93 learnMoreLink: "https://docs.bsky.app/docs/advanced-guides/moderation"
94 },
95 {
96 id: "engagement-rate",
97 term: "Engagement Rate",
98 definition: "A metric that measures how much interaction your content receives relative to your audience size.",
99 }
100 ];
101
102 // Social status data with added links
103 const socialStatuses = [
104 {
105 id: "newcomer",
106 name: "Newcomer",
107 description: "Accounts that are new to Bluesky or have minimal activity. These users are just getting started on the platform and beginning to build their presence. After 30 days, Newcomers become Explorers.",
108 },
109 {
110 id: "explorer",
111 name: "Explorer",
112 description: "Users who are actively engaging with the platform, discovering features, and building their initial network. They have established a basic presence but are still growing their connections and potentially finding their community.",
113 },
114 {
115 id: "pathfinder",
116 name: "Pathfinder",
117 description: "Established users who have developed a consistent presence and are actively contributing to conversations. These accounts have a growing influence (1,000+ followers) and solid engagement within their communities.",
118 },
119 {
120 id: "guide",
121 name: "Guide",
122 description: "Well-established users who have significant influence within specific communities (10,000+ followers). They often create valuable content and maintain strong engagement with their followers.",
123 },
124 {
125 id: "leader",
126 name: "Leader",
127 description: "Highly influential accounts with substantial followings (100,000+) and engagement. These users have a broad impact across multiple communities and consistently contribute high-value content to the platform.",
128 }
129 ];
130
131 return (
132 <>
133 <main className="definitions-page">
134 <div className="alt-card">
135 <h1>Definitions</h1>
136
137 <p className="intro-text">
138 This page provides explanations for key terms related to Bluesky, the AT Protocol, and how the cred.blue scoring system works.
139 </p>
140
141 <section className="definitions-section">
142 <h2>Social Statuses</h2>
143 <p>
144 Rather than displaying follower counts on profiles, the cred.blue analysis categorizes each identity into one of five social statuses based on its follower count, social graph ratio, engagement rate, and age.
145 </p>
146 <div className="social-statuses-container definitions-container">
147 {socialStatuses.map((status) => (
148 <div key={status.id} className="definition-item">
149 <dt
150 className="definition-term"
151 onClick={() => toggleStatus(status.id)}
152 role="button"
153 aria-expanded={expandedStatus === status.id}
154 >
155 {status.name}
156 {expandedStatus === status.id ?
157 <span className="toggle-icon" aria-hidden="true">−</span> :
158 <span className="toggle-icon" aria-hidden="true">+</span>
159 }
160 </dt>
161 <dd
162 className={`definition-description ${expandedStatus === status.id ? 'expanded' : ''}`}
163 aria-hidden={expandedStatus !== status.id}
164 >
165 {status.description}
166 {status.learnMoreLink && (
167 <div className="learn-more-link">
168 <a
169 href={addUtmParams(status.learnMoreLink, `social_status_${status.id}`)}
170 target="_blank"
171 rel="noopener noreferrer"
172 >
173 Learn more about {status.name} status →
174 </a>
175 </div>
176 )}
177 </dd>
178 </div>
179 ))}
180 </div>
181 </section>
182
183 <section className="definitions-section">
184 <h2>Bluesky & ATProto Terms</h2>
185 <p>
186 Understanding these terms will help you better navigate the Bluesky ecosystem and interpret your cred.blue score.
187 </p>
188 <div className="definitions-container">
189 {definitions.map((item) => (
190 <div key={item.id} className="definition-item">
191 <dt
192 className="definition-term"
193 onClick={() => toggleTerm(item.id)}
194 role="button"
195 aria-expanded={expandedTerm === item.id}
196 >
197 {item.term}
198 {expandedTerm === item.id ?
199 <span className="toggle-icon" aria-hidden="true">−</span> :
200 <span className="toggle-icon" aria-hidden="true">+</span>
201 }
202 </dt>
203 <dd
204 className={`definition-description ${expandedTerm === item.id ? 'expanded' : ''}`}
205 aria-hidden={expandedTerm !== item.id}
206 >
207 {item.definition}
208 {item.learnMoreLink && (
209 <div className="learn-more-link">
210 <a
211 href={addUtmParams(item.learnMoreLink, `term_${item.id}`)}
212 target="_blank"
213 rel="noopener noreferrer"
214 >
215 Learn more about {item.term} →
216 </a>
217 </div>
218 )}
219 </dd>
220 </div>
221 ))}
222 </div>
223 </section>
224
225 {/* Add the related pages navigation */}
226 <RelatedPagesNav currentPage="definitions" />
227 </div>
228 </main>
229 </>
230 );
231};
232
233export default Definitions;