This repository has no description
add definitions page and updated nav
author
damedotblog
date
(Feb 27, 2025, 7:34 PM -0500)
commit
8c17cb07
8c17cb07374c87864e40a9a2f8e73b135678b57b
parent
e8d35a3b
e8d35a3b6656ba97293bbe58119971ebd20debea
+810
-664
+2
src/App.jsx
+2
src/App.jsx
···
8
8
import Home from './components/Home/Home';
9
9
import Leaderboard from './components/Leaderboard/Leaderboard';
10
10
import Supporter from './components/Supporter/Supporter';
11
+
import Definitions from './components/Definitions/Definitions';
11
12
import Shortcut from './components/Shortcut/Shortcut';
12
13
import Resources from './components/Resources/Resources';
13
14
import ScoringMethodology from './components/ScoringMethodology/ScoringMethodology';
···
37
38
<Route path="/terms" element={<Terms />} />
38
39
<Route path="/newsletter" element={<Newsletter />} />
39
40
<Route path="/supporter" element={<Supporter />} />
41
+
<Route path="/definitions" element={<Definitions />} />
40
42
<Route path="/leaderboard" element={<Leaderboard />} />
41
43
<Route path="/resources" element={<Resources />} />
42
44
<Route path="/shortcut" element={<Shortcut />} />
+219
src/components/Definitions/Definitions.css
+219
src/components/Definitions/Definitions.css
···
1
+
.definitions-page {
2
+
margin: 20px auto 20px;
3
+
max-width: 450px;
4
+
padding: 20px;
5
+
}
6
+
7
+
.definitions-page .alt-card {
8
+
text-align: left;
9
+
}
10
+
11
+
.definitions-page ul {
12
+
list-style: none;
13
+
text-align: center;
14
+
margin: 0px auto;
15
+
padding: 0px;
16
+
width: 100%;
17
+
opacity: 0.5;
18
+
}
19
+
20
+
.definitions-page {
21
+
margin: 20px auto 40px;
22
+
max-width: 450px;
23
+
padding: 20px;
24
+
}
25
+
26
+
.definitions-page .alt-card {
27
+
text-align: left;
28
+
}
29
+
30
+
.definitions-page h1 {
31
+
margin-bottom: 20px;
32
+
}
33
+
34
+
.definitions-page h2 {
35
+
margin-top: 30px;
36
+
margin-bottom: 20px;
37
+
}
38
+
39
+
.definitions-page p {
40
+
margin: 15px 0;
41
+
line-height: 1.5;
42
+
}
43
+
44
+
.intro-text {
45
+
margin-bottom: 30px;
46
+
font-size: 1.1em;
47
+
}
48
+
49
+
.back-to-methodology {
50
+
margin: 20px 0;
51
+
}
52
+
53
+
.back-to-methodology a {
54
+
color: var(--button-bg);
55
+
text-decoration: none;
56
+
display: inline-block;
57
+
transition: all 0.2s ease;
58
+
padding: 6px 12px;
59
+
border-radius: 4px;
60
+
background-color: rgba(59, 154, 248, 0.1);
61
+
}
62
+
63
+
.back-to-methodology a:hover {
64
+
background-color: rgba(59, 154, 248, 0.2);
65
+
text-decoration: underline;
66
+
}
67
+
68
+
.definitions-section {
69
+
margin-bottom: 40px;
70
+
}
71
+
72
+
/* Definition accordion styles */
73
+
.definitions-container {
74
+
margin-top: 20px;
75
+
overflow: hidden;
76
+
}
77
+
78
+
.definition-item {
79
+
margin-bottom: 10px;
80
+
border-radius: 6px;
81
+
background-color: var(--navbar-bg);
82
+
overflow: hidden;
83
+
transition: all 0.3s ease;
84
+
border: 1px solid var(--card-border);
85
+
}
86
+
87
+
.definition-term {
88
+
padding: 12px 15px;
89
+
display: flex;
90
+
justify-content: space-between;
91
+
align-items: center;
92
+
font-weight: 600;
93
+
cursor: pointer;
94
+
background-color: var(--navbar-bg);
95
+
color: var(--text);
96
+
transition: background-color 0.3s ease, color 0.3s ease;
97
+
}
98
+
99
+
.toggle-icon {
100
+
font-size: 16px;
101
+
font-weight: bold;
102
+
color: var(--button-bg);
103
+
transition: color 0.3s ease;
104
+
}
105
+
106
+
.definition-description {
107
+
max-height: 0;
108
+
margin-left: 0;
109
+
overflow: hidden;
110
+
padding: 0 15px;
111
+
transition: all 0.3s ease;
112
+
color: var(--text);
113
+
}
114
+
115
+
.definition-description.expanded {
116
+
max-height: 500px;
117
+
padding: 15px;
118
+
border-top: 1px solid var(--card-border);
119
+
margin-left: 0px;
120
+
}
121
+
122
+
.definition-item:hover {
123
+
border-color: var(--button-bg);
124
+
}
125
+
126
+
.definition-term:hover {
127
+
background-color: var(--background);
128
+
}
129
+
130
+
/* Social status styles */
131
+
.social-statuses-container {
132
+
margin-top: 15px;
133
+
margin-bottom: 30px;
134
+
}
135
+
136
+
.social-statuses-container .definition-term {
137
+
font-weight: 700;
138
+
}
139
+
140
+
/* Social status color indicators */
141
+
.social-statuses-container .definition-item:nth-child(1) .definition-term {
142
+
border-left: 4px solid #e2e8f0; /* Lightest - Newcomer */
143
+
}
144
+
145
+
.social-statuses-container .definition-item:nth-child(2) .definition-term {
146
+
border-left: 4px solid #004F84; /* Explorer */
147
+
}
148
+
149
+
.social-statuses-container .definition-item:nth-child(3) .definition-term {
150
+
border-left: 4px solid #3B9AF8; /* Pathfinder */
151
+
}
152
+
153
+
.social-statuses-container .definition-item:nth-child(4) .definition-term {
154
+
border-left: 4px solid #FFA500; /* Guide */
155
+
}
156
+
157
+
.social-statuses-container .definition-item:nth-child(5) .definition-term {
158
+
border-left: 4px solid #FFD700; /* Darkest - Leader */
159
+
}
160
+
161
+
/* Learn more link styles */
162
+
.learn-more-link {
163
+
margin-top: 12px;
164
+
font-size: 0.9em;
165
+
text-align: right;
166
+
}
167
+
168
+
.learn-more-link a {
169
+
color: var(--button-bg);
170
+
text-decoration: none;
171
+
display: inline-block;
172
+
transition: all 0.2s ease;
173
+
padding: 4px 8px;
174
+
border-radius: 4px;
175
+
}
176
+
177
+
.learn-more-link a:hover {
178
+
background-color: rgba(59, 154, 248, 0.1);
179
+
text-decoration: underline;
180
+
}
181
+
182
+
/* Dark mode specific overrides */
183
+
.dark-mode .definition-item {
184
+
background-color: var(--navbar-bg);
185
+
border-color: var(--card-border);
186
+
}
187
+
188
+
.dark-mode .definition-term {
189
+
background-color: var(--navbar-bg);
190
+
}
191
+
192
+
.dark-mode .definition-term:hover {
193
+
background-color: #2d2d2d;
194
+
}
195
+
196
+
.dark-mode .toggle-icon {
197
+
color: var(--button-bg);
198
+
}
199
+
200
+
.dark-mode .definition-description.expanded {
201
+
border-top-color: var(--card-border);
202
+
}
203
+
204
+
.dark-mode .learn-more-link a {
205
+
color: var(--button-bg);
206
+
}
207
+
208
+
.dark-mode .learn-more-link a:hover {
209
+
background-color: rgba(59, 154, 248, 0.15);
210
+
}
211
+
212
+
.dark-mode .back-to-methodology a {
213
+
color: var(--button-bg);
214
+
background-color: rgba(59, 154, 248, 0.15);
215
+
}
216
+
217
+
.dark-mode .back-to-methodology a:hover {
218
+
background-color: rgba(59, 154, 248, 0.25);
219
+
}
+234
src/components/Definitions/Definitions.js
+234
src/components/Definitions/Definitions.js
···
1
+
import React, { useState } from 'react';
2
+
import './Definitions.css';
3
+
import { Link } from 'react-router-dom';
4
+
5
+
const Definitions = () => {
6
+
// State to track which definition is expanded
7
+
const [expandedTerm, setExpandedTerm] = useState(null);
8
+
// State to track which social status is expanded
9
+
const [expandedStatus, setExpandedStatus] = useState(null);
10
+
11
+
// Toggle function for definitions accordion
12
+
const toggleTerm = (term) => {
13
+
if (expandedTerm === term) {
14
+
setExpandedTerm(null);
15
+
} else {
16
+
setExpandedTerm(term);
17
+
}
18
+
};
19
+
20
+
// Toggle function for social status accordion
21
+
const toggleStatus = (status) => {
22
+
if (expandedStatus === status) {
23
+
setExpandedStatus(null);
24
+
} else {
25
+
setExpandedStatus(status);
26
+
}
27
+
};
28
+
29
+
// Helper function to add UTM parameters to links
30
+
const addUtmParams = (url, source = "term_definition") => {
31
+
// Check if URL already has parameters
32
+
const hasParams = url.includes('?');
33
+
const connector = hasParams ? '&' : '?';
34
+
35
+
// Add UTM parameters
36
+
return `${url}${connector}utm_source=cred.blue&utm_medium=definitions&utm_campaign=${source}`;
37
+
};
38
+
39
+
// Definitions data with added links
40
+
const definitions = [
41
+
{
42
+
id: "pds",
43
+
term: "Personal Data Server (PDS)",
44
+
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.",
45
+
learnMoreLink: "https://atproto.com/guides/self-hosting"
46
+
},
47
+
{
48
+
id: "bsky-mushroom",
49
+
term: "Bluesky Mushroom",
50
+
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.",
51
+
learnMoreLink: "https://bsky-debug.app/"
52
+
},
53
+
{
54
+
id: "did",
55
+
term: "DID",
56
+
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.",
57
+
learnMoreLink: "https://atproto.com/specs/did"
58
+
},
59
+
{
60
+
id: "lexicon",
61
+
term: "Lexicon/Collection",
62
+
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.",
63
+
learnMoreLink: "https://atproto.com/guides/lexicon"
64
+
},
65
+
{
66
+
id: "rotation-key",
67
+
term: "Rotation Key",
68
+
definition: "A security key that allows you to recover your account if your primary credentials are compromised.",
69
+
learnMoreLink: "https://atproto.com/guides/account-migration#updating-identity"
70
+
},
71
+
{
72
+
id: "bluesky-eras",
73
+
term: "Bluesky Eras",
74
+
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)",
75
+
learnMoreLink: "https://atproto.com/guides/account-migration#updating-identity"
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 | cred.blue</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
+
<div className="back-to-methodology">
142
+
<Link to="/methodology">← Back to Scoring Methodology</Link>
143
+
</div>
144
+
145
+
<section className="definitions-section">
146
+
<h2>Social Status Definitions</h2>
147
+
<p>
148
+
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. There are additional labels placed before the social status to indicate how engaging the account actually is.
149
+
</p>
150
+
<div className="social-statuses-container definitions-container">
151
+
{socialStatuses.map((status) => (
152
+
<div key={status.id} className="definition-item">
153
+
<dt
154
+
className="definition-term"
155
+
onClick={() => toggleStatus(status.id)}
156
+
role="button"
157
+
aria-expanded={expandedStatus === status.id}
158
+
>
159
+
{status.name}
160
+
{expandedStatus === status.id ?
161
+
<span className="toggle-icon" aria-hidden="true">−</span> :
162
+
<span className="toggle-icon" aria-hidden="true">+</span>
163
+
}
164
+
</dt>
165
+
<dd
166
+
className={`definition-description ${expandedStatus === status.id ? 'expanded' : ''}`}
167
+
aria-hidden={expandedStatus !== status.id}
168
+
>
169
+
{status.description}
170
+
{status.learnMoreLink && (
171
+
<div className="learn-more-link">
172
+
<a
173
+
href={addUtmParams(status.learnMoreLink, `social_status_${status.id}`)}
174
+
target="_blank"
175
+
rel="noopener noreferrer"
176
+
>
177
+
Learn more about {status.name} status →
178
+
</a>
179
+
</div>
180
+
)}
181
+
</dd>
182
+
</div>
183
+
))}
184
+
</div>
185
+
</section>
186
+
187
+
<section className="definitions-section">
188
+
<h2>AT Protocol & Bluesky Terms</h2>
189
+
<p>
190
+
Understanding these terms will help you better navigate the Bluesky ecosystem and interpret your cred.blue score.
191
+
</p>
192
+
<div className="definitions-container">
193
+
{definitions.map((item) => (
194
+
<div key={item.id} className="definition-item">
195
+
<dt
196
+
className="definition-term"
197
+
onClick={() => toggleTerm(item.id)}
198
+
role="button"
199
+
aria-expanded={expandedTerm === item.id}
200
+
>
201
+
{item.term}
202
+
{expandedTerm === item.id ?
203
+
<span className="toggle-icon" aria-hidden="true">−</span> :
204
+
<span className="toggle-icon" aria-hidden="true">+</span>
205
+
}
206
+
</dt>
207
+
<dd
208
+
className={`definition-description ${expandedTerm === item.id ? 'expanded' : ''}`}
209
+
aria-hidden={expandedTerm !== item.id}
210
+
>
211
+
{item.definition}
212
+
{item.learnMoreLink && (
213
+
<div className="learn-more-link">
214
+
<a
215
+
href={addUtmParams(item.learnMoreLink, `term_${item.id}`)}
216
+
target="_blank"
217
+
rel="noopener noreferrer"
218
+
>
219
+
Learn more about {item.term} →
220
+
</a>
221
+
</div>
222
+
)}
223
+
</dd>
224
+
</div>
225
+
))}
226
+
</div>
227
+
</section>
228
+
</div>
229
+
</main>
230
+
</>
231
+
);
232
+
};
233
+
234
+
export default Definitions;
+27
-164
src/components/ScoringMethodology/ScoringMethodology.css
+27
-164
src/components/ScoringMethodology/ScoringMethodology.css
···
35
35
margin: 15px 0;
36
36
line-height: 1.5;
37
37
}
38
-
38
+
39
39
.increase-score-list li {
40
40
margin-bottom: 5px;
41
41
}
42
-
43
-
.social-status-list li {
44
-
margin-bottom: 5px;
45
-
}
46
-
42
+
47
43
.methodology-page-chart .score-gauge {
48
44
margin: auto !important;
49
45
padding-right: 11px;
50
46
padding-bottom: 10.5px;
51
-
}
52
-
53
-
/* Add these styles to your ScoringMethodology.css file */
54
-
55
-
.definitions-container {
56
-
margin-top: 20px;
57
-
overflow: hidden;
58
-
}
59
-
60
-
.definition-item {
61
-
margin-bottom: 10px;
62
-
border-radius: 6px;
63
-
background-color: var(--navbar-bg);
64
-
overflow: hidden;
65
-
transition: all 0.3s ease;
66
-
border: 1px solid var(--card-border);
67
47
}
68
48
69
-
.definition-term {
70
-
padding: 12px 15px;
71
-
display: flex;
72
-
justify-content: space-between;
73
-
align-items: center;
74
-
font-weight: 600;
75
-
cursor: pointer;
76
-
background-color: var(--navbar-bg);
77
-
color: var(--text);
78
-
transition: background-color 0.3s ease, color 0.3s ease;
79
-
}
80
-
81
-
.toggle-icon {
82
-
font-size: 16px;
83
-
font-weight: bold;
84
-
color: var(--button-bg);
85
-
transition: color 0.3s ease;
86
-
}
87
-
88
-
.definition-description {
89
-
max-height: 0;
90
-
margin-left: 0;
91
-
overflow: hidden;
92
-
padding: 0 15px;
93
-
transition: all 0.3s ease;
94
-
color: var(--text);
95
-
}
96
-
97
-
.definition-description.expanded {
98
-
max-height: 500px;
49
+
/* Link to Definitions page */
50
+
.definitions-link-container {
51
+
margin-top: 40px;
99
52
padding: 15px;
100
-
border-top: 1px solid var(--card-border);
101
-
margin-left: 0px;
102
-
}
103
-
104
-
.definition-item:hover {
105
-
border-color: var(--button-bg);
106
-
}
107
-
108
-
.definition-term:hover {
109
-
background-color: var(--background);
53
+
background-color: rgba(59, 154, 248, 0.1);
54
+
border-radius: 8px;
55
+
border-left: 4px solid var(--button-bg);
110
56
}
111
57
112
-
/* Alternative simple style (if you prefer a non-accordion approach) */
113
-
.definitions-simple .definition-item {
114
-
margin-bottom: 20px;
115
-
background-color: transparent;
116
-
border: none;
58
+
.definitions-link {
59
+
display: inline-block;
60
+
margin-top: 10px;
61
+
color: var(--button-bg);
62
+
text-decoration: none;
63
+
padding: 8px 16px;
64
+
border-radius: 4px;
65
+
background-color: rgba(59, 154, 248, 0.15);
66
+
transition: all 0.2s ease;
67
+
font-weight: 500;
117
68
}
118
69
119
-
.definitions-simple .definition-term {
120
-
font-weight: 700;
121
-
margin-bottom: 8px;
122
-
cursor: default;
123
-
background-color: transparent;
124
-
padding: 0;
125
-
color: var(--text);
126
-
}
127
-
128
-
.definitions-simple .definition-description {
129
-
max-height: none;
130
-
padding: 0 0 0 15px;
131
-
border-left: 3px solid var(--button-bg);
132
-
color: var(--text);
70
+
.definitions-link:hover {
71
+
background-color: rgba(59, 154, 248, 0.25);
72
+
text-decoration: underline;
133
73
}
134
74
135
75
/* Dark mode specific overrides */
136
-
.dark-mode .definition-item {
137
-
background-color: var(--navbar-bg);
138
-
border-color: var(--card-border);
139
-
}
140
-
141
-
.dark-mode .definition-term {
142
-
background-color: var(--navbar-bg);
143
-
}
144
-
145
-
.dark-mode .definition-term:hover {
146
-
background-color: #2d2d2d;
147
-
}
148
-
149
-
.dark-mode .toggle-icon {
150
-
color: var(--button-bg);
151
-
}
152
-
153
-
.dark-mode .definition-description.expanded {
154
-
border-top-color: var(--card-border);
155
-
}
156
-
157
-
.dark-mode .definitions-simple .definition-description {
76
+
.dark-mode .definitions-link-container {
77
+
background-color: rgba(59, 154, 248, 0.1);
158
78
border-left-color: var(--button-bg);
159
79
}
160
-
161
-
162
-
/* Add these styles to your ScoringMethodology.css file */
163
-
164
-
/* Make the social statuses container use the same styling as definitions */
165
-
.social-statuses-container {
166
-
margin-top: 15px;
167
-
margin-bottom: 30px;
168
-
}
169
80
170
-
/* Additional style for the social status names to make them stand out */
171
-
.social-statuses-container .definition-term {
172
-
font-weight: 700;
173
-
}
174
-
175
-
/* Add a subtle indicator for the different status levels */
176
-
.social-statuses-container .definition-item:nth-child(1) .definition-term {
177
-
border-left: 4px solid #e2e8f0; /* Lightest - Newcomer */
178
-
}
179
-
180
-
.social-statuses-container .definition-item:nth-child(2) .definition-term {
181
-
border-left: 4px solid #004F84; /* Explorer */
182
-
}
183
-
184
-
.social-statuses-container .definition-item:nth-child(3) .definition-term {
185
-
border-left: 4px solid #3B9AF8; /* Pathfinder */
186
-
}
187
-
188
-
.social-statuses-container .definition-item:nth-child(4) .definition-term {
189
-
border-left: 4px solid #FFA500; /* Guide */
190
-
}
191
-
192
-
.social-statuses-container .definition-item:nth-child(5) .definition-term {
193
-
border-left: 4px solid #FFD700; /* Darkest - Leader */
194
-
}
195
-
196
-
/* Add these styles to your ScoringMethodology.css file */
197
-
198
-
.learn-more-link {
199
-
margin-top: 12px;
200
-
font-size: 0.9em;
201
-
text-align: right;
202
-
}
203
-
204
-
.learn-more-link a {
81
+
.dark-mode .definitions-link {
205
82
color: var(--button-bg);
206
-
text-decoration: none;
207
-
display: inline-block;
208
-
transition: all 0.2s ease;
209
-
padding: 4px 8px;
210
-
border-radius: 4px;
83
+
background-color: rgba(59, 154, 248, 0.2);
211
84
}
212
85
213
-
.learn-more-link a:hover {
214
-
background-color: rgba(59, 154, 248, 0.1);
215
-
text-decoration: underline;
216
-
}
217
-
218
-
/* Make sure links work properly in dark mode */
219
-
.dark-mode .learn-more-link a {
220
-
color: var(--button-bg);
221
-
}
222
-
223
-
.dark-mode .learn-more-link a:hover {
224
-
background-color: rgba(59, 154, 248, 0.15);
86
+
.dark-mode .definitions-link:hover {
87
+
background-color: rgba(59, 154, 248, 0.3);
225
88
}
+10
-201
src/components/ScoringMethodology/ScoringMethodology.js
+10
-201
src/components/ScoringMethodology/ScoringMethodology.js
···
1
-
import React, { useState } from 'react';
1
+
import React from 'react';
2
2
import './ScoringMethodology.css';
3
3
import ScoreGauge from '../UserProfile/ScoreGauge';
4
+
import { Link } from 'react-router-dom';
4
5
5
6
const ScoringMethodology = () => {
6
-
// State to track which definition is expanded
7
-
const [expandedTerm, setExpandedTerm] = useState(null);
8
-
// State to track which social status is expanded
9
-
const [expandedStatus, setExpandedStatus] = useState(null);
10
-
11
-
// Toggle function for definitions accordion
12
-
const toggleTerm = (term) => {
13
-
if (expandedTerm === term) {
14
-
setExpandedTerm(null);
15
-
} else {
16
-
setExpandedTerm(term);
17
-
}
18
-
};
19
-
20
-
// Toggle function for social status accordion
21
-
const toggleStatus = (status) => {
22
-
if (expandedStatus === status) {
23
-
setExpandedStatus(null);
24
-
} else {
25
-
setExpandedStatus(status);
26
-
}
27
-
};
28
-
29
-
// Helper function to add UTM parameters to links
30
-
const addUtmParams = (url, source = "term_definition") => {
31
-
// Check if URL already has parameters
32
-
const hasParams = url.includes('?');
33
-
const connector = hasParams ? '&' : '?';
34
-
35
-
// Add UTM parameters
36
-
return `${url}${connector}utm_source=cred.blue&utm_medium=methodology&utm_campaign=${source}`;
37
-
};
38
-
39
-
// Definitions data with added links
40
-
const definitions = [
41
-
{
42
-
id: "pds",
43
-
term: "Personal Data Server (PDS)",
44
-
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.",
45
-
learnMoreLink: "https://atproto.com/guides/self-hosting"
46
-
},
47
-
{
48
-
id: "bsky-mushroom",
49
-
term: "Bluesky Mushroom",
50
-
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.",
51
-
learnMoreLink: "https://bsky-debug.app/"
52
-
},
53
-
{
54
-
id: "did",
55
-
term: "DID",
56
-
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.",
57
-
learnMoreLink: "https://atproto.com/specs/did"
58
-
},
59
-
{
60
-
id: "lexicon",
61
-
term: "Lexicon/Collection",
62
-
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.",
63
-
learnMoreLink: "https://atproto.com/guides/lexicon"
64
-
},
65
-
{
66
-
id: "rotation-key",
67
-
term: "Rotation Key",
68
-
definition: "A security key that allows you to recover your account if your primary credentials are compromised.",
69
-
learnMoreLink: "https://atproto.com/guides/account-migration#updating-identity"
70
-
},
71
-
{
72
-
id: "bluesky-eras",
73
-
term: "Bluesky Eras",
74
-
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)",
75
-
learnMoreLink: "https://atproto.com/guides/account-migration#updating-identity"
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
7
return (
132
8
<main className="methodology-page">
133
9
<div className="alt-card">
···
186
62
entire community.
187
63
</p>
188
64
189
-
<h2>What are the different social statuses?</h2>
190
-
<p>
191
-
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. There are additional labels placed before the social status to indicate how engaging the account actually is.
192
-
</p>
193
-
<div className="social-statuses-container definitions-container">
194
-
{socialStatuses.map((status) => (
195
-
<div key={status.id} className="definition-item">
196
-
<dt
197
-
className="definition-term"
198
-
onClick={() => toggleStatus(status.id)}
199
-
role="button"
200
-
aria-expanded={expandedStatus === status.id}
201
-
>
202
-
{status.name}
203
-
{expandedStatus === status.id ?
204
-
<span className="toggle-icon" aria-hidden="true">−</span> :
205
-
<span className="toggle-icon" aria-hidden="true">+</span>
206
-
}
207
-
</dt>
208
-
<dd
209
-
className={`definition-description ${expandedStatus === status.id ? 'expanded' : ''}`}
210
-
aria-hidden={expandedStatus !== status.id}
211
-
>
212
-
{status.description}
213
-
{status.learnMoreLink && (
214
-
<div className="learn-more-link">
215
-
<a
216
-
href={addUtmParams(status.learnMoreLink, `social_status_${status.id}`)}
217
-
target="_blank"
218
-
rel="noopener noreferrer"
219
-
>
220
-
Learn more about {status.name} status →
221
-
</a>
222
-
</div>
223
-
)}
224
-
</dd>
225
-
</div>
226
-
))}
65
+
<div className="definitions-link-container">
66
+
<p>
67
+
Looking for explanations of terms used in cred.blue or details about social statuses?
68
+
</p>
69
+
<Link to="/definitions" className="definitions-link">
70
+
View Definitions & Social Status Details →
71
+
</Link>
227
72
</div>
228
-
229
-
<h2>Key Terms and Definitions</h2>
230
-
<div className="definitions-container">
231
-
{definitions.map((item) => (
232
-
<div key={item.id} className="definition-item">
233
-
<dt
234
-
className="definition-term"
235
-
onClick={() => toggleTerm(item.id)}
236
-
role="button"
237
-
aria-expanded={expandedTerm === item.id}
238
-
>
239
-
{item.term}
240
-
{expandedTerm === item.id ?
241
-
<span className="toggle-icon" aria-hidden="true">−</span> :
242
-
<span className="toggle-icon" aria-hidden="true">+</span>
243
-
}
244
-
</dt>
245
-
<dd
246
-
className={`definition-description ${expandedTerm === item.id ? 'expanded' : ''}`}
247
-
aria-hidden={expandedTerm !== item.id}
248
-
>
249
-
{item.definition}
250
-
{item.learnMoreLink && (
251
-
<div className="learn-more-link">
252
-
<a
253
-
href={addUtmParams(item.learnMoreLink, `term_${item.id}`)}
254
-
target="_blank"
255
-
rel="noopener noreferrer"
256
-
>
257
-
Learn more about {item.term} →
258
-
</a>
259
-
</div>
260
-
)}
261
-
</dd>
262
-
</div>
263
-
))}
264
-
</div>
73
+
265
74
</div>
266
75
</main>
267
76
);