{"instances":{"application":{"persistent":false},"Header/0-0-0-0":{"expanded":false,"persistent":false,"locale":"en-US","i18n":{"home":{"title":"Nullstack","href":"/"},"links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Documentation","href":"/getting-started"},{"title":"Examples","href":"/examples"},{"title":"Contributors","href":"/contributors"},{"title":"F.A.Q","href":"/frequently-asked-questions"},{"title":"Waifu","href":"/waifu"}],"menu":{"title":"Toggle Menu"},"action":{"title":"Get Started","href":"/getting-started"},"search":{"title":"Search [ctrl + k]"},"language":{"title":"Português","href":"/pt-br"},"mode":{"dark":"Night Mode","light":"Day Mode"}}},"Article/0-0-0-18/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","persistent":true,"locale":"en-US","i18n":{"lead":"Have any questions or suggestions?","cta":"Join our Discord","next":"Next Step","learn":"Learn more about"},"description":"Nullstack comes with it's set of logos built-in","topics":[{"title":"About Nullstack","links":[{"title":"What is Nullstack?","href":"/what-is-nullstack"},{"title":"Getting started","href":"/getting-started"}]},{"title":"Core Features","links":[{"title":"Stateless Components","href":"/stateless-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":"Two-way bindings","href":"/two-way-bindings"},{"title":"JSX elements","href":"/jsx-elements"},{"title":"Refs","href":"/refs"},{"title":"Styles","href":"/styles"},{"title":"Persistent Components","href":"/persistent-components"}]},{"title":"Context Keys","links":[{"title":"Routes and params","href":"/routes-and-params"},{"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":"Server request and response","href":"/server-request-and-response"},{"title":"Service Worker","href":"/service-worker"}]},{"title":"Advanced concepts","links":[{"title":"Proxy","href":"/proxy"},{"title":"Application Startup","href":"/application-startup"},{"title":"Script runner","href":"/script-runner"},{"title":"How to customize Webpack","href":"/how-to-customize-webpack"},{"title":"Transpilation and Security","href":"/transpilation-and-security"},{"title":"TypeScript","href":"/typescript"}]},{"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":"Other","links":[{"title":"Nullstack Logo","href":"/nullstack-logo"},{"title":"How to deploy","href":"/how-to-deploy-a-nullstack-application"}]}]},"GoogleAnalytics/0-0-0-19":{"persistent":false},"Loader/0-0-0-21":{"persistent":false},"Footer/0-0-0-22":{"persistent":false,"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,"locale":"en-US","title":"Nullstack Logo - Nullstack","description":"Nullstack comes with it's set of logos built-in"}}