{"instances": {"application":{},"n-0-0-0-0":{"expanded":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"Documentation","href":"/getting-started"},{"title":"Components","href":"/components"},{"title":"Contributors","href":"/contributors"},{"title":"Waifu","href":"/waifu"}],"action":{"title":"Get Started","href":"/getting-started"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"n-0-0-0-12/nullstack-logo":{"title":"Nullstack Logo","html":"<p>Nullstack comes with it's set of logos built-in to be used as components:<\/p>\n<pre><code class=\"language-jsx\"><span class=\"token keyword\">import<\/span> Nullstack <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack'<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> Logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">'nullstack/logo'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Application<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Nullstack<\/span> <span class=\"token punctuation\">{<\/span>\n\n <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">monotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span><span class=\"token class-name\">Logo<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">30<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token attr-name\">light<\/span> <span class=\"token attr-name\">duotone<\/span> <span class=\"token punctuation\">/><\/span><\/span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/<\/span>main<\/span><span class=\"token punctuation\">><\/span><\/span>\n <span class=\"token punctuation\">)<\/span>\n <span class=\"token punctuation\">}<\/span>\n\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Application<span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<p>The above components and it's attributes generates the following logos:<\/p>\n<p><img src=\"/nullstack-logos.png\" alt=\"Nullstack Logos\"><\/p>\n<p>The Logo uses full width and has color <code>duotone<\/code> by default.<\/p>\n","description":"Nullstack comes with it's set of logos built-in","topics":[{"title":"Core concepts","links":[{"title":"Getting started","href":"/getting-started"},{"title":"Renderable components","href":"/renderable-components"},{"title":"Stateful components","href":"/stateful-components"},{"title":"Full-stack lifecycle","href":"/full-stack-lifecycle"},{"title":"Server functions","href":"/server-functions"},{"title":"Context","href":"/context"},{"title":"Routes and params","href":"/routes-and-params"},{"title":"Two-way bindings","href":"/two-way-bindings"}]},{"title":"Advanced concepts","links":[{"title":"Application Startup","href":"/application-startup"},{"title":"Functional Components","href":"/functional-components"},{"title":"Persistent Components","href":"/persistent-components"},{"title":"Context data","href":"/context-data"},{"title":"Context instances","href":"/context-instances"},{"title":"Context environment","href":"/context-environment"},{"title":"Context page","href":"/context-page"},{"title":"Context project","href":"/context-project"},{"title":"Context settings","href":"/context-settings"},{"title":"Context secrets","href":"/context-secrets"},{"title":"Instance self","href":"/instance-self"},{"title":"Server request and response","href":"/server-request-and-response"},{"title":"Styles","href":"/styles"},{"title":"NJS file extension","href":"/njs-file-extension"},{"title":"Service Worker","href":"/service-worker"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]},{"title":"Build Modes","links":[{"title":"Server-side rendering","href":"/server-side-rendering"},{"title":"Static site generation","href":"/static-site-generation"},{"title":"Single page applications","href":"/single-page-applications"}]},{"title":"Examples","links":[{"title":"How to use MongoDB","href":"/how-to-use-mongodb-with-nullstack"},{"title":"How to use Google Analytics","href":"/how-to-use-google-analytics-with-nullstack"},{"title":"How to use Facebook Pixel","href":"/how-to-use-facebook-pixel-with-nullstack"}]}]},"n-0-0-0-13":{},"n-0-0-0-15":{},"n-0-0-0-16":{"locale":"en-US","i18n":{"links":[{"title":"YouTube","href":"https://www.youtube.com/channel/UCUNPaxoppH3lu6JTrUX78Ww"},{"title":"Twitter","href":"https://twitter.com/nullstackapp"},{"title":"GitHub","href":"https://github.com/nullstack"}],"star":{"story":"Want to show your love and help us spread the word?","action":"Leave a star on GitHub"}}}}, "page": {"image":"/image-1200x630.png","status":200,"title":"Nullstack Logo - Nullstack","description":"Nullstack comes with it's set of logos built-in"}}