Deploy website - based on 7af718b834

docs/development/getting-started/index.html

@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">getting-started | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="getting-started | NodeGui"><meta data-react-helmet="true" name="description" content="Getting started"><meta data-react-helmet="true" property="og:description" content="Getting started"><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/development/getting-started"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/development/getting-started"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.8a4b7f45.js" as="script">
-<link rel="preload" href="/runtime~main.ba2f7d7b.js" as="script">
+<link rel="preload" href="/runtime~main.2fe3ab35.js" as="script">
 <link rel="preload" href="/main.b901d774.js" as="script">
 <link rel="preload" href="/1.4ff98c55.js" as="script">
 <link rel="preload" href="/2.8de76750.js" as="script">
@@ -28,7 +28,7 @@ Check the corresponding JS file for the addon here <code>src/lib/QtWidgets/QLabe
 So if you take a look at NLabel you will see, it inherits from QLabel and NodeWidget. NodeWidget inturn inherits from YogaWidget and EventWidget. Event widget adds event handling support. YogaWidget is a class that contains the magic that enables a regular Qt Widget to have Yoga node. A Yoga node is an instance used by yoga library to calculate a widgets position on the screen. Yoga is a library that will layout the widget on the screen. To do so we will specify the flex properties like alignitems, justify content, margin, paddings etc on the Yoga node of the widget. Apart from adding yoga node, YogaWidget adds support for specifying those yoga properties via Qt&#x27;s stylesheet. (This is done by using Q_PROPERTY). To make this work we need to use something called as Q_OBJECT inside the class which is a C++ macro. Q_OBJECT will be expanded to relevant code by the compiler. In Qt whenever we add Q_OBJECT to a header file, we need to use a pre compiler called Qt MOC (Meta Object Compiler). The way we use it is</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">moc headername.h -o headername_moc.cpp --include &lt;any_include_file_which_contains_macro&gt;  // example : ../../core/YogaWidget/yogawidget.h</span></div></div></div></div></div><p>So for nlabel I would run it as:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">moc nlabel.h -o nlabel_moc.cpp --include ../../core/YogaWidget/yogawidget.h</span></div></div></div></div></div><p>This will run moc on <code>headername.h</code> and generate <code>headername_moc.cpp</code>. We will include <code>headername_moc.cpp</code> in <code>config/moc.gypi</code>. If you dont do this. Then it will give a symbol not found error.</p><p>I hope QLabel&#x27;s example is enough for now. For more examples and inspirations we can take a look at other wrapped widgets.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="learning-materials"></a>Learning Materials<a aria-hidden="true" tabindex="-1" class="hash-link" href="#learning-materials" title="Direct link to heading">#</a></h2><ol><li>Beginners guide to NodeJS Addon - <a href="https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f" target="_blank" rel="noopener noreferrer">https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f</a></li><li>First read this: N-API in nodejs docs</li><li><a href="https://www.youtube.com/watch?v=-Oniup60Afs&amp;feature=youtu.be" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=-Oniup60Afs&amp;feature=youtu.be</a></li><li>See samples at <a href="https://github.com/nodejs/abi-stable-node-addon-examples/" target="_blank" rel="noopener noreferrer">https://github.com/nodejs/abi-stable-node-addon-examples/</a>
 4.1. You can see the readme of <a href="https://github.com/nodejs/node-addon-api.git/" target="_blank" rel="noopener noreferrer">https://github.com/nodejs/node-addon-api.git/</a></li><li>See node-qt implementation. It is implemented in Nan (explained in video).</li><li>Now try to match the implementation in node-qt and convert to N-API using examples from samples.</li><li>Implementations not in node-qt need to be done with effort.</li></ol></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/development/getting-started.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started" class="table-of-contents__link">Getting started</a></li><li><a href="#code-structure" class="table-of-contents__link">Code Structure</a></li><li><a href="#wrapping-a-widget" class="table-of-contents__link">Wrapping a widget</a></li><li><a href="#learning-materials" class="table-of-contents__link">Learning Materials</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.8a4b7f45.js"></script>
-<script src="/runtime~main.ba2f7d7b.js"></script>
+<script src="/runtime~main.2fe3ab35.js"></script>
 <script src="/main.b901d774.js"></script>
 <script src="/1.4ff98c55.js"></script>
 <script src="/2.8de76750.js"></script>