patch of feat: add demo mode and educational content to login page · round #0 · pull #12 · zzstoatzz.io/at-me

src/main.rs

···

       38
       38
        
                   .app_data(web::Data::new(firehose_manager.clone()))

     

       39
       39
        
                   .service(routes::index)

     

       40
       40
        
                   .service(routes::login)

     

       41
       41
       +
                   .service(routes::demo)

     

       42
       42
       +
                   .service(routes::demo_exit)

     

       41
       43
        
                   .service(routes::callback)

     

       42
       44
        
                   .service(routes::client_metadata)

     

       43
       45
        
                   .service(routes::logout)

+47 -3

src/routes.rs

···

       28
       28
        
           let did: Option<String> = session.get("did").unwrap_or(None);

     

       29
       29
        
       

     

       30
       30
        
           match did {

     

       31
       31
       -
               Some(did) => HttpResponse::Ok()

     

       32
       32
       -
                   .content_type("text/html")

     

       33
       33
       -
                   .body(templates::app_page(&did)),

     

       31
       31
       +
               Some(did) => {

     

       32
       32
       +
                   let demo_mode: bool = session.get("demo_mode").unwrap_or(Some(false)).unwrap_or(false);

     

       33
       33
       +
                   let demo_handle: Option<String> = session.get("demo_handle").unwrap_or(None);

     

       34
       34
       +
       

     

       35
       35
       +
                   HttpResponse::Ok()

     

       36
       36
       +
                       .content_type("text/html")

     

       37
       37
       +
                       .body(templates::app_page(&did, demo_mode, demo_handle.as_deref()))

     

       38
       38
       +
               },

     

       34
       39
        
               None => HttpResponse::Ok()

     

       35
       40
        
                   .content_type("text/html")

     

       36
       41
        
                   .body(templates::login_page()),

     
···

       64
       69
        
           }

     

       65
       70
        
       }

     

       66
       71
        
       

     

       72
       72
       +
       #[get("/demo")]

     

       73
       73
       +
       pub async fn demo(session: Session) -> HttpResponse {

     

       74
       74
       +
           let demo_handle = "pfrazee.com";

     

       75
       75
       +
       

     

       76
       76
       +
           // Resolve handle to DID

     

       77
       77
       +
           let resolve_url = format!(

     

       78
       78
       +
               "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle={}",

     

       79
       79
       +
               demo_handle

     

       80
       80
       +
           );

     

       81
       81
       +
       

     

       82
       82
       +
           let did = match reqwest::get(&resolve_url).await {

     

       83
       83
       +
               Ok(response) => match response.json::<serde_json::Value>().await {

     

       84
       84
       +
                   Ok(data) => match data["did"].as_str() {

     

       85
       85
       +
                       Some(did) => did.to_string(),

     

       86
       86
       +
                       None => return HttpResponse::InternalServerError().body("failed to resolve demo handle"),

     

       87
       87
       +
                   },

     

       88
       88
       +
                   Err(_) => return HttpResponse::InternalServerError().body("failed to parse response"),

     

       89
       89
       +
               },

     

       90
       90
       +
               Err(_) => return HttpResponse::InternalServerError().body("failed to resolve demo handle"),

     

       91
       91
       +
           };

     

       92
       92
       +
       

     

       93
       93
       +
           // Store in session with demo flag

     

       94
       94
       +
           session.insert("did", &did).unwrap();

     

       95
       95
       +
           session.insert("demo_mode", true).unwrap();

     

       96
       96
       +
           session.insert("demo_handle", demo_handle).unwrap();

     

       97
       97
       +
       

     

       98
       98
       +
           HttpResponse::SeeOther()

     

       99
       99
       +
               .append_header(("Location", "/"))

     

       100
       100
       +
               .finish()

     

       101
       101
       +
       }

     

       102
       102
       +
       

     

       103
       103
       +
       #[get("/demo/exit")]

     

       104
       104
       +
       pub async fn demo_exit(session: Session) -> HttpResponse {

     

       105
       105
       +
           session.purge();

     

       106
       106
       +
           HttpResponse::SeeOther()

     

       107
       107
       +
               .append_header(("Location", "/?clear_demo=true"))

     

       108
       108
       +
               .finish()

     

       109
       109
       +
       }

     

       110
       110
       +
       

     

       67
       111
        
       #[get("/oauth/callback")]

     

       68
       112
        
       pub async fn callback(

     

       69
       113
        
           params: web::Query<OAuthParams>,

+203 -2

src/templates.rs

···

       170
       170
        
               .hidden { display: none; }

     

       171
       171
        
               .loading { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; }

     

       172
       172
        
       

     

       173
       173
       +
               .demo-btn {

     

       174
       174
       +
                   font-family: inherit;

     

       175
       175
       +
                   font-size: 0.9rem;

     

       176
       176
       +
                   padding: 0.75rem 2rem;

     

       177
       177
       +
                   cursor: pointer;

     

       178
       178
       +
                   background: transparent;

     

       179
       179
       +
                   border: 1px solid rgba(255, 255, 255, 0.15);

     

       180
       180
       +
                   border-radius: 4px;

     

       181
       181
       +
                   color: rgba(255, 255, 255, 0.6);

     

       182
       182
       +
                   transition: all 0.2s;

     

       183
       183
       +
                   width: 100%;

     

       184
       184
       +
                   margin-top: 0.75rem;

     

       185
       185
       +
               }

     

       186
       186
       +
       

     

       187
       187
       +
               .demo-btn:hover {

     

       188
       188
       +
                   background: rgba(10, 10, 15, 0.5);

     

       189
       189
       +
                   border-color: rgba(255, 255, 255, 0.3);

     

       190
       190
       +
                   color: rgba(255, 255, 255, 0.8);

     

       191
       191
       +
               }

     

       192
       192
       +
       

     

       193
       193
       +
               .divider {

     

       194
       194
       +
                   display: flex;

     

       195
       195
       +
                   align-items: center;

     

       196
       196
       +
                   gap: 1rem;

     

       197
       197
       +
                   margin: 1.5rem 0 1rem;

     

       198
       198
       +
                   color: rgba(255, 255, 255, 0.3);

     

       199
       199
       +
                   font-size: 0.7rem;

     

       200
       200
       +
               }

     

       201
       201
       +
       

     

       202
       202
       +
               .divider::before,

     

       203
       203
       +
               .divider::after {

     

       204
       204
       +
                   content: '';

     

       205
       205
       +
                   flex: 1;

     

       206
       206
       +
                   height: 1px;

     

       207
       207
       +
                   background: rgba(255, 255, 255, 0.1);

     

       208
       208
       +
               }

     

       209
       209
       +
       

     

       210
       210
       +
               .info-toggle {

     

       211
       211
       +
                   margin-top: 1.5rem;

     

       212
       212
       +
                   color: rgba(255, 255, 255, 0.5);

     

       213
       213
       +
                   font-size: 0.75rem;

     

       214
       214
       +
                   cursor: pointer;

     

       215
       215
       +
                   border: none;

     

       216
       216
       +
                   background: none;

     

       217
       217
       +
                   padding: 0.5rem;

     

       218
       218
       +
                   transition: color 0.2s;

     

       219
       219
       +
                   text-decoration: underline;

     

       220
       220
       +
                   text-underline-offset: 2px;

     

       221
       221
       +
               }

     

       222
       222
       +
       

     

       223
       223
       +
               .info-toggle:hover {

     

       224
       224
       +
                   color: rgba(255, 255, 255, 0.8);

     

       225
       225
       +
               }

     

       226
       226
       +
       

     

       227
       227
       +
               .info-content {

     

       228
       228
       +
                   max-height: 0;

     

       229
       229
       +
                   overflow: hidden;

     

       230
       230
       +
                   transition: max-height 0.3s ease;

     

       231
       231
       +
                   margin-top: 1rem;

     

       232
       232
       +
               }

     

       233
       233
       +
       

     

       234
       234
       +
               .info-content.expanded {

     

       235
       235
       +
                   max-height: 500px;

     

       236
       236
       +
               }

     

       237
       237
       +
       

     

       238
       238
       +
               .info-section {

     

       239
       239
       +
                   background: rgba(10, 10, 15, 0.6);

     

       240
       240
       +
                   border: 1px solid rgba(255, 255, 255, 0.1);

     

       241
       241
       +
                   border-radius: 4px;

     

       242
       242
       +
                   padding: 1.5rem;

     

       243
       243
       +
                   text-align: left;

     

       244
       244
       +
               }

     

       245
       245
       +
       

     

       246
       246
       +
               .info-section h3 {

     

       247
       247
       +
                   font-size: 0.85rem;

     

       248
       248
       +
                   font-weight: 500;

     

       249
       249
       +
                   margin-bottom: 0.75rem;

     

       250
       250
       +
                   color: rgba(255, 255, 255, 0.9);

     

       251
       251
       +
               }

     

       252
       252
       +
       

     

       253
       253
       +
               .info-section p {

     

       254
       254
       +
                   font-size: 0.7rem;

     

       255
       255
       +
                   line-height: 1.6;

     

       256
       256
       +
                   color: rgba(255, 255, 255, 0.6);

     

       257
       257
       +
                   margin-bottom: 1rem;

     

       258
       258
       +
               }

     

       259
       259
       +
       

     

       260
       260
       +
               .info-section p:last-child {

     

       261
       261
       +
                   margin-bottom: 0;

     

       262
       262
       +
               }

     

       263
       263
       +
       

     

       264
       264
       +
               .info-section strong {

     

       265
       265
       +
                   color: rgba(255, 255, 255, 0.85);

     

       266
       266
       +
               }

     

       267
       267
       +
       

     

       268
       268
       +
               .info-section a {

     

       269
       269
       +
                   color: rgba(255, 255, 255, 0.8);

     

       270
       270
       +
                   text-decoration: underline;

     

       271
       271
       +
                   text-underline-offset: 2px;

     

       272
       272
       +
               }

     

       273
       273
       +
       

     

       274
       274
       +
               .info-section a:hover {

     

       275
       275
       +
                   color: rgba(255, 255, 255, 1);

     

       276
       276
       +
               }

     

       277
       277
       +
       

     

       173
       278
        
               .footer {

     

       174
       279
        
                   position: fixed;

     

       175
       280
        
                   bottom: 1rem;

     
···

       202
       307
        
                       <div class="subtitle">explore the atmosphere</div>

     

       203
       308
        
                       <input type="text" name="handle" placeholder="handle.bsky.social" required autofocus>

     

       204
       309
        
                       <button type="submit">enter</button>

     

       310
       310
       +
       

     

       311
       311
       +
                       <div class="divider">or</div>

     

       312
       312
       +
                       <button type="button" class="demo-btn" id="demoBtn">explore demo</button>

     

       313
       313
       +
       

     

       314
       314
       +
                       <button type="button" class="info-toggle" id="infoToggle">what is this?</button>

     

       315
       315
       +
       

     

       316
       316
       +
                       <div class="info-content" id="infoContent">

     

       317
       317
       +
                           <div class="info-section">

     

       318
       318
       +
                               <h3>visualize your atproto identity</h3>

     

       319
       319
       +
                               <p>see all the apps writing to your <strong>Personal Data Server</strong> and explore the records they've created. your content, your server, your control.</p>

     

       320
       320
       +
       

     

       321
       321
       +
                               <h3>the problem with silos</h3>

     

       322
       322
       +
                               <p>traditional social platforms lock your content in. switching means starting over, losing your network and history. you build their platform, they control everything.</p>

     

       323
       323
       +
       

     

       324
       324
       +
                               <h3>the atproto solution</h3>

     

       325
       325
       +
                               <p>on <a href="https://atproto.com" target="_blank" rel="noopener noreferrer">atproto</a>, you own your data. it lives on <strong>your</strong> server. apps like bluesky, whitewind, and frontpage just read and write to your space. switch apps anytime, take everything with you.</p>

     

       326
       326
       +
       

     

       327
       327
       +
                               <h3>see it yourself</h3>

     

       328
       328
       +
                               <p>this isn't just theory. click "explore demo" to see a real atproto account, or log in to visualize your own identity.</p>

     

       329
       329
       +
                           </div>

     

       330
       330
       +
                       </div>

     

       205
       331
        
                   </form>

     

       206
       332
        
               </div>

     

       207
       333
        
           </div>

     
···

       216
       342
        
           "#

     

       217
       343
        
       }

     

       218
       344
        
       

     

       219
       219
       -
       pub fn app_page(did: &str) -> String {

     

       345
       345
       +
       pub fn app_page(did: &str, demo_mode: bool, demo_handle: Option<&str>) -> String {

     

       346
       346
       +
           let demo_banner = if demo_mode && demo_handle.is_some() {

     

       347
       347
       +
               format!(r#"

     

       348
       348
       +
           <div class="demo-banner" id="demoBanner">

     

       349
       349
       +
               <span>demo mode - viewing <strong>{}</strong></span>

     

       350
       350
       +
               <a href="/demo/exit" class="demo-exit">exit demo</a>

     

       351
       351
       +
           </div>"#, demo_handle.unwrap())

     

       352
       352
       +
           } else {

     

       353
       353
       +
               String::new()

     

       354
       354
       +
           };

     

       355
       355
       +
       

     

       220
       356
        
           format!(r#"

     

       221
       357
        
       <!DOCTYPE html>

     

       222
       358
        
       <html>

     
···

       1304
       1440
        
                       max-width: none;

     

       1305
       1441
        
                   }}

     

       1306
       1442
        
               }}

     

       1443
       1443
       +
       

     

       1444
       1444
       +
               .demo-banner {{

     

       1445
       1445
       +
                   position: fixed;

     

       1446
       1446
       +
                   top: 0;

     

       1447
       1447
       +
                   left: 0;

     

       1448
       1448
       +
                   right: 0;

     

       1449
       1449
       +
                   background: rgba(255, 165, 0, 0.15);

     

       1450
       1450
       +
                   border-bottom: 1px solid rgba(255, 165, 0, 0.3);

     

       1451
       1451
       +
                   padding: 0.5rem 1rem;

     

       1452
       1452
       +
                   display: flex;

     

       1453
       1453
       +
                   align-items: center;

     

       1454
       1454
       +
                   justify-content: center;

     

       1455
       1455
       +
                   gap: 1rem;

     

       1456
       1456
       +
                   z-index: 200;

     

       1457
       1457
       +
                   font-size: 0.7rem;

     

       1458
       1458
       +
                   color: var(--text);

     

       1459
       1459
       +
               }}

     

       1460
       1460
       +
       

     

       1461
       1461
       +
               .demo-banner strong {{

     

       1462
       1462
       +
                   color: var(--text);

     

       1463
       1463
       +
                   font-weight: 600;

     

       1464
       1464
       +
               }}

     

       1465
       1465
       +
       

     

       1466
       1466
       +
               .demo-exit {{

     

       1467
       1467
       +
                   color: var(--text-light);

     

       1468
       1468
       +
                   text-decoration: none;

     

       1469
       1469
       +
                   border: 1px solid var(--border);

     

       1470
       1470
       +
                   padding: 0.25rem 0.75rem;

     

       1471
       1471
       +
                   border-radius: 2px;

     

       1472
       1472
       +
                   transition: all 0.2s ease;

     

       1473
       1473
       +
                   font-size: 0.65rem;

     

       1474
       1474
       +
               }}

     

       1475
       1475
       +
       

     

       1476
       1476
       +
               .demo-exit:hover {{

     

       1477
       1477
       +
                   background: var(--surface);

     

       1478
       1478
       +
                   border-color: var(--text-light);

     

       1479
       1479
       +
                   color: var(--text);

     

       1480
       1480
       +
               }}

     

       1481
       1481
       +
       

     

       1482
       1482
       +
               @media (prefers-color-scheme: dark) {{

     

       1483
       1483
       +
                   .demo-banner {{

     

       1484
       1484
       +
                       background: rgba(255, 165, 0, 0.1);

     

       1485
       1485
       +
                       border-bottom-color: rgba(255, 165, 0, 0.25);

     

       1486
       1486
       +
                   }}

     

       1487
       1487
       +
               }}

     

       1488
       1488
       +
       

     

       1489
       1489
       +
               /* Adjust elements when demo banner is present */

     

       1490
       1490
       +
               .demo-banner ~ .info {{

     

       1491
       1491
       +
                   top: calc(clamp(1rem, 2vmin, 1.5rem) + 2.5rem);

     

       1492
       1492
       +
               }}

     

       1493
       1493
       +
       

     

       1494
       1494
       +
               .demo-banner ~ .watch-live-btn {{

     

       1495
       1495
       +
                   top: calc(clamp(1rem, 2vmin, 1.5rem) + 2.5rem);

     

       1496
       1496
       +
               }}

     

       1497
       1497
       +
       

     

       1498
       1498
       +
               .demo-banner ~ .logout {{

     

       1499
       1499
       +
                   top: calc(clamp(1rem, 2vmin, 1.5rem) + 2.5rem);

     

       1500
       1500
       +
               }}

     

       1501
       1501
       +
       

     

       1502
       1502
       +
               @media (max-width: 768px) {{

     

       1503
       1503
       +
                   .demo-banner ~ .watch-live-btn {{

     

       1504
       1504
       +
                       top: calc(clamp(4rem, 8vmin, 5rem) + 2.5rem);

     

       1505
       1505
       +
                   }}

     

       1506
       1506
       +
               }}

     

       1307
       1507
        
           </style>

     

       1308
       1508
        
       </head>

     

       1309
       1509
        
       <body>

     

       1510
       1510
       +
           {}

     

       1310
       1511
        
           <div class="info" id="infoBtn">?</div>

     

       1311
       1512
        
           <button class="watch-live-btn" id="watchLiveBtn">

     

       1312
       1513
        
               <span class="watch-indicator"></span>

     
···

       1356
       1557
        
           <script src="/static/onboarding.js"></script>

     

       1357
       1558
        
       </body>

     

       1358
       1559
        
       </html>

     

       1359
       1359
       -
           "#, did)

     

       1560
       1560
       +
           "#, demo_banner, did)

     

       1360
       1561
        
       }

+32

static/login.js

···

       1
       1
       +
       // Check if we're exiting demo mode

     

       2
       2
       +
       const urlParams = new URLSearchParams(window.location.search);

     

       3
       3
       +
       if (urlParams.get('clear_demo') === 'true') {

     

       4
       4
       +
           localStorage.removeItem('atme_did');

     

       5
       5
       +
           // Clear the query param from the URL

     

       6
       6
       +
           window.history.replaceState({}, document.title, '/');

     

       7
       7
       +
       }

     

       8
       8
       +
       

     

       1
       9
        
       // Check for saved session

     

       2
       10
        
       const savedDid = localStorage.getItem('atme_did');

     

       3
       11
        
       if (savedDid) {

     
···

       155
       163
        
       }

     

       156
       164
        
       

     

       157
       165
        
       renderAtmosphere();

     

       166
       166
       +
       

     

       167
       167
       +
       // Info toggle

     

       168
       168
       +
       document.getElementById('infoToggle').addEventListener('click', () => {

     

       169
       169
       +
           const content = document.getElementById('infoContent');

     

       170
       170
       +
           const toggle = document.getElementById('infoToggle');

     

       171
       171
       +
       

     

       172
       172
       +
           if (content.classList.contains('expanded')) {

     

       173
       173
       +
               content.classList.remove('expanded');

     

       174
       174
       +
               toggle.textContent = 'what is this?';

     

       175
       175
       +
           } else {

     

       176
       176
       +
               content.classList.add('expanded');

     

       177
       177
       +
               toggle.textContent = 'close';

     

       178
       178
       +
           }

     

       179
       179
       +
       });

     

       180
       180
       +
       

     

       181
       181
       +
       // Demo mode

     

       182
       182
       +
       document.getElementById('demoBtn').addEventListener('click', () => {

     

       183
       183
       +
           // Store demo flag and navigate

     

       184
       184
       +
           sessionStorage.setItem('atme_demo_mode', 'true');

     

       185
       185
       +
           sessionStorage.setItem('atme_demo_handle', 'pfrazee.com');

     

       186
       186
       +
       

     

       187
       187
       +
           // Navigate to demo - this will trigger the login flow with the demo handle

     

       188
       188
       +
           window.location.href = '/demo';

     

       189
       189
       +
       });