Nodejs.dev: Integrate Glitch with Getting Started Content

Created on 31 Jan 2019 · 7Comments · Source: nodejs/nodejs.dev

@potch is taking this one – will let him flesh out the ticket.

Source

amiller-gh

Most helpful comment

Here's a screenshot of an embed in action:

screen shot 2019-02-07 at 2 55 12 pm

potch on 7 Feb 2019

❤2

All 7 comments

The big question here is whether how best and where to code the glitch project embeds. The options that present themselves in order of increasing complexity are:

Into the docs themselves, just replacing code blocks with the embed </li> <li>Into a fork/branch of the docs used specifically for this project- preserves existing data</li> <li>Insert glitch references into the docs, turning them into embeds at build time (not sure exactly how this would work, maybe just a sentinel  comment or something?) Does gatsby allow for embed markup?</li> <li>generated dynamically from marked code samples (there's no way this will be doable by deadline, but I want to call it out because we're pursuing it on the glitch as a future feature)</li> </ul> <p>I'll likely start by forking the docs repo and doing inline, just to act as a source of truth, but am very open to adapting if others have ideas.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/253470?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="potch picture"> <strong>potch</strong> <span class="text-muted ml-1">on 1 Feb 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@potch</strong> </p> <blockquote> <p>The big question here is whether how best and where to code the glitch project embeds. The options that present themselves in order of increasing complexity are:</p> <pre><code class="prettyprint">* Into the docs themselves, just replacing code blocks with the embed <iframe> </code></pre> <p>I don’t know if we really want to replace code blocks with naked iframes. That would cost a lot of requests especially if they are not loading on demand. Not the best for UX.<br /> * Into a fork/branch of the docs used specifically for this project- preserves existing data<br /> If I understand you correctly that means we need to split the docs? I think splitting docs from code is generally not a good choice. Since you need to make changes at two different places maintenance gets more complicated. BTW if i remember correctly we wanna pull docs from <a rel="nofollow noopener" target="_blank" href="https://github.com/nodejs/node">node</a> Repo. Please correct me if I'm wrong.</p> </blockquote> <blockquote> <pre><code class="prettyprint">* Insert glitch references into the docs, turning them into embeds at build time (not sure exactly how this would work, maybe just a sentinel comment or something?) Does gatsby allow for embed markup? * generated dynamically from marked code samples (there's no way this will be doable by deadline, but I want to call it out because we're pursuing it on the glitch as a future feature) </code></pre> </blockquote> <p>IMO the combination of last two suggestions is best way to do it. Gatsby allows embed markups though i couldn't find a plugin for Glitch embeds but I consent to help with that.<br /> Biggest advantage about dynamically generated sample codes at glitch side would be, it will be easier to maintain. We don't need to update nothing extra than samples in our docs. I think we can easily solve the problem about request overhead with a embed plugin for Gatsby as well. While loading iframes on demand.</p> <blockquote> <p>I'll likely start by forking the docs repo and doing inline, just to act as a source of truth, but am very open to adapting if others have ideas.</p> </blockquote> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/2481234?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="LaRuaNa picture"> <strong>LaRuaNa</strong> <span class="text-muted ml-1">on 1 Feb 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>@amiller-gh <strong>@MylesBorins</strong> <strong>@argyleink</strong> are you okay with iframes in the short term? I know they're not ideal, but I'm sensitive to our fast-approaching deadline.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/253470?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="potch picture"> <strong>potch</strong> <span class="text-muted ml-1">on 6 Feb 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I'm personally fine with iframes in the short term to hit the deadline, but let's sync again on the long-term solution and track against it over the next month or so! </p> <p>Let's use this issue to track short-term integration. Want to open up a new issue to hash out the long term implementation, RFC style?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7856443?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="amiller-gh picture"> <strong>amiller-gh</strong> <span class="text-muted ml-1">on 7 Feb 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>@amiller-gh that's a good idea, will open a long-term integration issue.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/253470?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="potch picture"> <strong>potch</strong> <span class="text-muted ml-1">on 7 Feb 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Here's a screenshot of an embed in action:</p> <p><img loading="lazy" src="https://user-images.githubusercontent.com/253470/52448333-711cc180-2ae8-11e9-9e95-c5872d87e886.png" alt="screen shot 2019-02-07 at 2 55 12 pm" /></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/253470?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="potch picture"> <strong>potch</strong> <span class="text-muted ml-1">on 7 Feb 2019</span> </div> <div class="col text-right"> ❤<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Thanks for the work on this potch</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/498775?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="MylesBorins picture"> <strong>MylesBorins</strong> <span class="text-muted ml-1">on 19 Feb 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(405336564, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(405336564, 1);" onclick="rate(405336564, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(405336564, 2);" onclick="rate(405336564, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(405336564, 3);" onclick="rate(405336564, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(405336564, 4);" onclick="rate(405336564, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(405336564, 5);" onclick="rate(405336564, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/nodejs-dev/614215839/ci-preview-command-on-second-time-fail">CI: /preview command on second time fail</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/5341334?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="giankotarola picture"> <strong class="pr-1" dir="ltr">giankotarola</strong>  ·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/nodejs-dev/416469146/migrating-to-emotion-10">Migrating to Emotion 10?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/6441326?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="BeniCheni picture"> <strong class="pr-1" dir="ltr">BeniCheni</strong>  ·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/nodejs-dev/417637575/gitbot-to-automate-few-stuffs">gitbot to automate few stuffs.</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1241511?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="antsmartian picture"> <strong class="pr-1" dir="ltr">antsmartian</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/nodejs-dev/714036188/add-releases-for-downloads-table">Add releases for downloads table</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/2952332?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="marcustisater picture"> <strong class="pr-1" dir="ltr">marcustisater</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/nodejs-dev/430444663/edge-case-open-nav-menu-doesn-t-scroll-to-current-topic">Edge Case: Open nav menu doesn't scroll to current topic, after selecting the current topic</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/6441326?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="BeniCheni picture"> <strong class="pr-1" dir="ltr">BeniCheni</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/nodejs/nodejs.dev/issues/1" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>