+3

src/view/main.js

··· 3 3 // ============================================================================ 4 4 5 5 import './styles.css'; 6 6 + import './onboarding.css'; 6 7 import { state, urlParams, paramDid, paramHandle } from './state.js'; 7 8 import { 8 9 resolveHandle, ··· 17 18 import { initGuestbookUI, updateAuthUI } from './guestbook-ui.js'; 18 19 import { initFirehoseUI } from './firehose.js'; 19 20 import { initOAuth, handleOAuthCallback, tryResumeSession } from './oauth.js'; 21 21 + import { initOnboarding } from './onboarding.js'; 20 22 21 23 // ============================================================================ 22 24 // INITIALIZATION ··· 133 135 // Initialize UI components 134 136 initGuestbookUI(); 135 137 initFirehoseUI(); 138 138 + initOnboarding(); 136 139 137 140 // Check guestbook state 138 141 await checkGuestbookState();

+101

src/view/onboarding.css

··· 1 1 + .onboarding-overlay { 2 2 + position: fixed; 3 3 + inset: 0; 4 4 + background: transparent; 5 5 + z-index: 3000; 6 6 + display: none; 7 7 + opacity: 0; 8 8 + transition: opacity 0.3s ease; 9 9 + pointer-events: none; 10 10 + } 11 11 + 12 12 + .onboarding-overlay.active { 13 13 + display: block; 14 14 + opacity: 1; 15 15 + } 16 16 + 17 17 + .onboarding-spotlight { 18 18 + position: absolute; 19 19 + border: 2px solid rgba(255, 255, 255, 0.9); 20 20 + border-radius: 50%; 21 21 + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 255, 255, 0.5); 22 22 + pointer-events: none; 23 23 + transition: all 0.5s ease; 24 24 + } 25 25 + 26 26 + .onboarding-content { 27 27 + position: fixed; 28 28 + background: var(--surface); 29 29 + border: 2px solid var(--border); 30 30 + padding: clamp(1rem, 3vmin, 2rem); 31 31 + max-width: min(400px, 90vw); 32 32 + z-index: 3001; 33 33 + border-radius: 4px; 34 34 + transition: all 0.3s ease; 35 35 + pointer-events: auto; 36 36 + } 37 37 + 38 38 + .onboarding-content h3 { 39 39 + font-size: clamp(0.9rem, 2vmin, 1.1rem); 40 40 + margin-bottom: clamp(0.5rem, 1.5vmin, 0.75rem); 41 41 + color: var(--text); 42 42 + font-weight: 500; 43 43 + } 44 44 + 45 45 + .onboarding-content p { 46 46 + font-size: clamp(0.7rem, 1.5vmin, 0.85rem); 47 47 + color: var(--text-light); 48 48 + line-height: 1.5; 49 49 + margin-bottom: clamp(1rem, 2vmin, 1.25rem); 50 50 + } 51 51 + 52 52 + .onboarding-actions { 53 53 + display: flex; 54 54 + gap: clamp(0.5rem, 1.5vmin, 0.75rem); 55 55 + justify-content: flex-end; 56 56 + } 57 57 + 58 58 + .onboarding-actions button { 59 59 + font-family: inherit; 60 60 + font-size: clamp(0.7rem, 1.5vmin, 0.8rem); 61 61 + padding: clamp(0.4rem, 1vmin, 0.5rem) clamp(0.8rem, 2vmin, 1rem); 62 62 + background: transparent; 63 63 + border: 1px solid var(--border); 64 64 + color: var(--text); 65 65 + cursor: pointer; 66 66 + transition: all 0.2s ease; 67 67 + border-radius: 2px; 68 68 + } 69 69 + 70 70 + .onboarding-actions button:hover { 71 71 + background: var(--surface-hover); 72 72 + border-color: var(--text-light); 73 73 + } 74 74 + 75 75 + .onboarding-actions button.primary { 76 76 + background: var(--surface-hover); 77 77 + border-color: var(--text-light); 78 78 + } 79 79 + 80 80 + .onboarding-progress { 81 81 + display: flex; 82 82 + gap: clamp(0.4rem, 1vmin, 0.5rem); 83 83 + justify-content: center; 84 84 + margin-top: clamp(0.75rem, 2vmin, 1rem); 85 85 + } 86 86 + 87 87 + .onboarding-progress span { 88 88 + width: clamp(6px, 1.5vmin, 8px); 89 89 + height: clamp(6px, 1.5vmin, 8px); 90 90 + border-radius: 50%; 91 91 + background: var(--border); 92 92 + transition: background 0.3s ease; 93 93 + } 94 94 + 95 95 + .onboarding-progress span.active { 96 96 + background: var(--text); 97 97 + } 98 98 + 99 99 + .onboarding-progress span.done { 100 100 + background: var(--text-light); 101 101 + }

+186

src/view/onboarding.js

··· 1 1 + // Onboarding overlay for first-time users 2 2 + const ONBOARDING_KEY = 'atme_onboarding_seen'; 3 3 + 4 4 + const steps = [ 5 5 + { 6 6 + target: '.identity', 7 7 + title: 'this is you', 8 8 + description: 'your global identity and handle. your data is hosted at your <a href="https://atproto.com/guides/overview" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: underline;">Personal Data Server (PDS)</a>.', 9 9 + position: 'bottom' 10 10 + }, 11 11 + { 12 12 + target: '.canvas', 13 13 + title: 'atproto applications', 14 14 + description: 'these apps use your global identity to write public records to your PDS. they can also read records you\'ve created.', 15 15 + position: 'center' 16 16 + }, 17 17 + { 18 18 + target: '.app-view', 19 19 + title: 'explore your records', 20 20 + description: 'click any app to see what records it has written to your PDS.', 21 21 + position: 'bottom' 22 22 + } 23 23 + ]; 24 24 + 25 25 + let currentStep = 0; 26 26 + 27 27 + function showOnboarding() { 28 28 + const overlay = document.getElementById('onboardingOverlay'); 29 29 + if (!overlay) return; 30 30 + 31 31 + overlay.style.display = 'block'; 32 32 + setTimeout(() => { 33 33 + overlay.style.opacity = '1'; 34 34 + showStep(0); 35 35 + }, 50); 36 36 + } 37 37 + 38 38 + function hideOnboarding() { 39 39 + const overlay = document.getElementById('onboardingOverlay'); 40 40 + const spotlight = document.getElementById('onboardingSpotlight'); 41 41 + const content = document.getElementById('onboardingContent'); 42 42 + 43 43 + if (overlay) { 44 44 + overlay.style.opacity = '0'; 45 45 + setTimeout(() => { 46 46 + overlay.style.display = 'none'; 47 47 + }, 300); 48 48 + } 49 49 + 50 50 + if (spotlight) spotlight.classList.remove('active'); 51 51 + if (content) content.classList.remove('active'); 52 52 + 53 53 + localStorage.setItem(ONBOARDING_KEY, 'true'); 54 54 + } 55 55 + 56 56 + function showStep(stepIndex) { 57 57 + if (stepIndex >= steps.length) { 58 58 + hideOnboarding(); 59 59 + return; 60 60 + } 61 61 + 62 62 + currentStep = stepIndex; 63 63 + const step = steps[stepIndex]; 64 64 + const target = document.querySelector(step.target); 65 65 + 66 66 + if (!target) { 67 67 + console.warn('Onboarding target not found:', step.target); 68 68 + showStep(stepIndex + 1); 69 69 + return; 70 70 + } 71 71 + 72 72 + const spotlight = document.getElementById('onboardingSpotlight'); 73 73 + const content = document.getElementById('onboardingContent'); 74 74 + 75 75 + // Position spotlight on target 76 76 + const rect = target.getBoundingClientRect(); 77 77 + const padding = step.target === '.canvas' ? 100 : 20; 78 78 + 79 79 + spotlight.style.left = `${rect.left - padding}px`; 80 80 + spotlight.style.top = `${rect.top - padding}px`; 81 81 + spotlight.style.width = `${rect.width + padding * 2}px`; 82 82 + spotlight.style.height = `${rect.height + padding * 2}px`; 83 83 + spotlight.classList.add('active'); 84 84 + 85 85 + // Position content 86 86 + const isLastStep = stepIndex === steps.length - 1; 87 87 + content.innerHTML = ` 88 88 + <h3>${step.title}</h3> 89 89 + <p>${step.description}</p> 90 90 + <div class="onboarding-actions"> 91 91 + ${!isLastStep ? '<button id="skipOnboarding" class="onboarding-skip">skip</button>' : ''} 92 92 + <button id="nextOnboarding" class="onboarding-next"> 93 93 + ${isLastStep ? 'got it' : 'next'} 94 94 + </button> 95 95 + </div> 96 96 + <div class="onboarding-progress"> 97 97 + ${steps.map((_, i) => `<span class="${i === stepIndex ? 'active' : i < stepIndex ? 'done' : ''}"></span>`).join('')} 98 98 + </div> 99 99 + `; 100 100 + 101 101 + // Position content relative to spotlight 102 102 + let contentTop, contentLeft; 103 103 + const contentMaxWidth = Math.min(400, window.innerWidth * 0.9); 104 104 + const contentHeight = 250; 105 105 + const margin = Math.max(20, window.innerWidth * 0.05); 106 106 + 107 107 + if (step.position === 'bottom') { 108 108 + contentTop = rect.bottom + padding + margin; 109 109 + contentLeft = rect.left + rect.width / 2; 110 110 + 111 111 + if (contentTop + contentHeight > window.innerHeight) { 112 112 + contentTop = rect.top - padding - contentHeight - margin; 113 113 + } 114 114 + } else if (step.position === 'center') { 115 115 + contentTop = window.innerHeight / 2 - contentHeight / 2; 116 116 + contentLeft = window.innerWidth / 2; 117 117 + } else { 118 118 + contentTop = rect.top - padding - contentHeight - margin; 119 119 + contentLeft = rect.left + rect.width / 2; 120 120 + 121 121 + if (contentTop < margin) { 122 122 + contentTop = rect.bottom + padding + margin; 123 123 + } 124 124 + } 125 125 + 126 126 + // Ensure content stays on screen horizontally 127 127 + const halfWidth = contentMaxWidth / 2; 128 128 + if (contentLeft - halfWidth < margin) { 129 129 + contentLeft = halfWidth + margin; 130 130 + } else if (contentLeft + halfWidth > window.innerWidth - margin) { 131 131 + contentLeft = window.innerWidth - halfWidth - margin; 132 132 + } 133 133 + 134 134 + // Ensure content stays on screen vertically 135 135 + if (contentTop < margin) { 136 136 + contentTop = margin; 137 137 + } else if (contentTop + contentHeight > window.innerHeight - margin) { 138 138 + contentTop = window.innerHeight - contentHeight - margin; 139 139 + } 140 140 + 141 141 + content.style.top = `${contentTop}px`; 142 142 + content.style.left = `${contentLeft}px`; 143 143 + content.style.transform = 'translate(-50%, 0)'; 144 144 + content.classList.add('active'); 145 145 + 146 146 + // Add event listeners 147 147 + const skipBtn = document.getElementById('skipOnboarding'); 148 148 + if (skipBtn) { 149 149 + skipBtn.addEventListener('click', hideOnboarding); 150 150 + } 151 151 + document.getElementById('nextOnboarding').addEventListener('click', () => { 152 152 + showStep(stepIndex + 1); 153 153 + }); 154 154 + } 155 155 + 156 156 + export function initOnboarding() { 157 157 + const seen = localStorage.getItem(ONBOARDING_KEY); 158 158 + 159 159 + if (!seen) { 160 160 + // Wait for app circles to render 161 161 + setTimeout(() => { 162 162 + showOnboarding(); 163 163 + }, 1000); 164 164 + } 165 165 + } 166 166 + 167 167 + export function restartOnboarding() { 168 168 + localStorage.removeItem(ONBOARDING_KEY); 169 169 + const infoModal = document.getElementById('infoModal'); 170 170 + const overlay = document.getElementById('overlay'); 171 171 + if (infoModal) infoModal.classList.remove('visible'); 172 172 + if (overlay) overlay.classList.remove('visible'); 173 173 + setTimeout(() => { 174 174 + showOnboarding(); 175 175 + }, 300); 176 176 + } 177 177 + 178 178 + // ESC key handler 179 179 + document.addEventListener('keydown', (e) => { 180 180 + if (e.key === 'Escape') { 181 181 + const overlay = document.getElementById('onboardingOverlay'); 182 182 + if (overlay && overlay.style.display === 'block') { 183 183 + hideOnboarding(); 184 184 + } 185 185 + } 186 186 + });

+5

view.html

··· 134 134 <div id="guestbookContent"></div> 135 135 </div> 136 136 137 137 + <div class="onboarding-overlay" id="onboardingOverlay"> 138 138 + <div class="onboarding-spotlight" id="onboardingSpotlight"></div> 139 139 + <div class="onboarding-content" id="onboardingContent"></div> 140 140 + </div> 141 141 + 137 142 <div class="canvas"> 138 143 <div class="identity"> 139 144 <img class="identity-avatar" id="identityAvatar" />