[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"navigation_docs":3,"-integrations-atmosphere":84,"-integrations-atmosphere-surround":427},[4,21,57,73],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide:rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide:house",{"title":16,"path":17,"stem":18,"icon":19},"Quick Start","/getting-started/quick-start","1.getting-started/2.quick-start","i-lucide:zap",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guide","i-lucide:book-open","/guide","2.guide",[27,32,37,42,47,52],{"title":28,"path":29,"stem":30,"icon":31},"Features","/guide/features","2.guide/1.features","i-lucide:sparkles",{"title":33,"path":34,"stem":35,"icon":36},"Keyboard Shortcuts","/guide/keyboard-shortcuts","2.guide/2.keyboard-shortcuts","i-lucide:keyboard",{"title":38,"path":39,"stem":40,"icon":41},"URL Structure","/guide/url-structure","2.guide/3.url-structure","i-lucide:link",{"title":43,"path":44,"stem":45,"icon":46},"VS Code Extension","/guide/vscode-extension","2.guide/4.vscode-extension","i-simple-icons-visualstudiocode",{"title":48,"path":49,"stem":50,"icon":51},"Semver Ranges","/guide/semver-ranges","2.guide/5.semver-ranges","i-lucide-filter",{"title":53,"path":54,"stem":55,"icon":56},"Badges","/guide/badges","2.guide/6.badges","i-lucide:badge",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":20},"FAQ","i-lucide:circle-help","/faq","3.faq",[63,68],{"title":64,"path":65,"stem":66,"icon":67},"Troubleshooting","/faq/troubleshooting","3.faq/1.troubleshooting","i-lucide:wrench",{"title":69,"path":70,"stem":71,"icon":72},"Comparison","/faq/comparison","3.faq/2.comparison","i-lucide:git-compare",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":20},"Integrations","i-lucide:cable","/integrations","4.integrations",[79],{"title":80,"path":81,"stem":82,"icon":83},"Atmosphere","/integrations/atmosphere","4.integrations/1.atmosphere","i-lucide:cloudy",{"id":85,"title":80,"body":86,"description":420,"extension":421,"links":422,"meta":423,"navigation":424,"path":81,"seo":425,"stem":82,"__hash__":426},"docs/4.integrations/1.atmosphere.md",{"type":87,"value":88,"toc":403},"minimark",[89,94,106,109,112,116,119,172,181,185,199,208,212,215,221,246,260,263,266,271,279,282,289,292,295,300,315,318,329,332,338,340,344,347,373,375,379],[90,91,93],"h2",{"id":92},"whats-the-atmosphere","What's the Atmosphere?",[95,96,97,98,105],"p",{},"The Atmosphere is the interconnected web of apps that store and access data using the ",[99,100,104],"a",{"href":101,"rel":102},"https://atproto.com/",[103],"nofollow","AT Protocol"," (atproto) – an open, decentralized network for building social applications.",[95,107,108],{},"For npmx, this means we can tap into a social graph shared by tens of millions of people. That gives us social features – comments, likes, threads – without having to build (or silo) a social network from scratch.",[110,111],"hr",{},[90,113,115],{"id":114},"architecture","Architecture",[95,117,118],{},"Here's what makes npmx work as an Atmosphere app:",[120,121,122,136,142,148,154,160,166],"ol",{},[123,124,125,129,130,135],"li",{},[126,127,128],"strong",{},"Client"," – the ",[99,131,134],{"href":132,"rel":133},"https://npmx.dev",[103],"npmx.dev"," site itself",[123,137,138,141],{},[126,139,140],{},"OAuth"," – how we authenticate with the network",[123,143,144,147],{},[126,145,146],{},"Constellation"," – a global atproto backlink index",[123,149,150,153],{},[126,151,152],{},"Lexicons"," – schema definitions for our data",[123,155,156,159],{},[126,157,158],{},"PDS"," – Personal Data Server for account hosting",[123,161,162,165],{},[126,163,164],{},"Standard Site Sync"," – keeps app data in sync with PDS",[123,167,168,171],{},[126,169,170],{},"Bluesky Social Graph"," – pulls in posts, comments, and threads",[95,173,174,175,180],{},"For the full picture, see the ",[99,176,179],{"href":177,"rel":178},"https://atproto.com/guides/the-at-stack",[103],"official atproto stack overview",".",[182,183,128],"h3",{"id":184},"client",[95,186,187,188,193,194,198],{},"The npmx app is a third-party browser for the ",[99,189,192],{"href":190,"rel":191},"https://www.npmjs.com",[103],"npm registry",", built around great developer experience and native-like performance. In Atmosphere terms, it's the 'client' – the place where you interact with your ",[195,196,197],"code",{},"@npmx.social"," profile and everything else.",[95,200,201,202,207],{},"See the ",[99,203,206],{"href":204,"rel":205},"https://atproto.com/guides/the-at-stack#app-views",[103],"atproto App Views docs"," for more on how this fits together.",[182,209,211],{"id":210},"personal-data-servers-pds","Personal Data Servers (PDS)",[95,213,214],{},"Your PDS is your home on the network – it hosts your account, stores your data, and handles identity.",[216,217,218],"blockquote",{},[95,219,220],{},"Personal data servers, or PDSes, are your home in the cloud. They host your data, distribute it, manage your identity, and orchestrate requests to other services to give you your views.",[95,222,223,224,229,230,235,236,241,242,245],{},"Want to migrate to npmx's self-hosted PDS? The easiest way is ",[99,225,228],{"href":226,"rel":227},"https://pdsmoover.com/moover/npmx.social",[103],"PDS MOOver",", built by ",[99,231,234],{"href":232,"rel":233},"https://bsky.app/profile/baileytownsend.dev",[103],"@baileytownsend.dev",". If you need help, hop into our ",[99,237,240],{"href":238,"rel":239},"https://chat.npmx.dev",[103],"Discord"," and check out the ",[195,243,244],{},"#pds"," channel.",[95,247,248,249,254,255,180],{},"See who's already on npmx.social on the ",[99,250,253],{"href":251,"rel":252},"https://npmx.dev/pds",[103],"PDS community page",". For the protocol details, see the ",[99,256,259],{"href":257,"rel":258},"https://atproto.com/guides/the-at-stack#pds",[103],"atproto PDS docs",[182,261,140],{"id":262},"oauth",[95,264,265],{},"To do anything on the Atmosphere, you need to prove who you are. We use OAuth so your identity is verified against your personal data server – npmx never sees your credentials.",[216,267,268],{},[95,269,270],{},"OAuth is the primary mechanism in atproto for clients to make authorized requests to PDS instances.",[95,272,201,273,278],{},[99,274,277],{"href":275,"rel":276},"https://atproto.com/specs/oauth",[103],"atproto OAuth spec"," for the details.",[182,280,146],{"id":281},"constellation",[95,283,284,288],{},[99,285,146],{"href":286,"rel":287},"https://constellation.microcosm.blue/",[103]," is our API orchestration layer and backend indexer. It bridges npmx's data structures with the wider atproto network – indexing backlinks, aggregating app-view data, and caching things so we don't hammer individual PDS instances during traffic spikes.",[182,290,152],{"id":291},"lexicons",[95,293,294],{},"Lexicons are the glue that makes npmx data understandable to other atproto apps. We define custom lexicons for our record types – social features, package reviews, documentation comments, and so on.",[216,296,297],{},[95,298,299],{},"Lexicon is a schema definition language used to describe atproto records, HTTP endpoints (XRPC), and event stream messages.",[95,301,302,303,308,309,314],{},"You can browse our Lexicons ",[99,304,307],{"href":305,"rel":306},"https://github.com/npmx-dev/npmx.dev/tree/main/lexicons",[103],"in the repo",". We'll publish the formal schemas as they stabilize. See the ",[99,310,313],{"href":311,"rel":312},"https://atproto.com/specs/lexicon",[103],"atproto Lexicon spec"," for background.",[182,316,164],{"id":317},"standard-site-sync",[95,319,320,324,325,328],{},[99,321,164],{"href":322,"rel":323},"https://standard.site",[103]," is the layer that translates npmx content – like a new blog post written in Markdown – into valid atproto records and pushes them to a PDS. It keeps everything in sync so that content you create on ",[99,326,134],{"href":132,"rel":327},[103]," lives permanently in your data repository.",[182,330,170],{"id":331},"bluesky-social-graph",[95,333,334,335,180],{},"We pull from the Bluesky App View via Constellation to surface social interactions right inside npmx. That means posts, comments, and threads show up on blog posts, you can like packages, and more. Down the road, we'd love to attach relevant articles to packages and show likes or reposts on technical content – all without leaving ",[99,336,134],{"href":132,"rel":337},[103],[110,339],{},[90,341,343],{"id":342},"why-the-atmosphere","Why the Atmosphere?",[95,345,346],{},"Here's what being on the Atmosphere brings to an app like npmx:",[120,348,349,355,361,367],{},[123,350,351,354],{},[126,352,353],{},"Blog posts"," – we can share short and long-form thoughts and have them live on the open network",[123,356,357,360],{},[126,358,359],{},"Comments"," – anyone can join the conversation on our content",[123,362,363,366],{},[126,364,365],{},"Discovery"," – people find npmx through the social graph, not just search engines",[123,368,369,372],{},[126,370,371],{},"Engagement"," – likes, reposts, and threads create a feedback loop between the app and the community",[110,374],{},[90,376,378],{"id":377},"resources","Resources",[380,381,382,389,396],"ul",{},[123,383,384],{},[99,385,388],{"href":386,"rel":387},"https://atproto.com",[103],"AT Protocol docs",[123,390,391],{},[99,392,395],{"href":393,"rel":394},"https://github.com/at-microcosm/microcosm-rs/tree/main/constellation",[103],"Constellation repo",[123,397,398],{},[99,399,402],{"href":400,"rel":401},"https://bsky.app/",[103],"Bluesky",{"title":404,"searchDepth":405,"depth":405,"links":406},"",2,[407,408,418,419],{"id":92,"depth":405,"text":93},{"id":114,"depth":405,"text":115,"children":409},[410,412,413,414,415,416,417],{"id":184,"depth":411,"text":128},3,{"id":210,"depth":411,"text":211},{"id":262,"depth":411,"text":140},{"id":281,"depth":411,"text":146},{"id":291,"depth":411,"text":152},{"id":317,"depth":411,"text":164},{"id":331,"depth":411,"text":170},{"id":342,"depth":405,"text":343},{"id":377,"depth":405,"text":378},"npmx's role in the Atmosphere","md",null,{},{"icon":83},{"title":80,"description":420},"biaQWHYmDZ4E8ZLE53Get0dUFBLqTs3J4XgW_2aVXrw",[428,422],{"title":69,"path":70,"stem":71,"description":429,"icon":72,"children":-1},"How npmx.dev compares to npmjs.com",1775090645112]