You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you’re interested in a more in-depth tutorial check
78
-
out <strong><CTALinkctaEventName='heroku-tutorial-react-app'href={g.herokuLightingReactAppUrl[0].url}target="_blank">Christophe Coenraets’ GitHub project</CTALink></strong>.
77
+
out <strong><ahref={g.herokuLightingReactAppUrl[0].url}target="_blank">Christophe Coenraets’ GitHub project</a></strong>.
79
78
His project is a reference application built with the
80
79
{g.displayName}, React, Node, Postgres, and Heroku. For a
81
80
static example, please continue with the steps below!
@@ -84,30 +83,30 @@ export default (
84
83
<p>In this tutorial, we’ll assume that you have some knowledge of the following:</p>
If, for any reason, you wish to bypass the steps to manually create this project, clone the basic setup <CTALinkctaEventName='heroku-tutorial-static-starter'href={g.herokuLightingReactAppUrl[1].url}target="_blank">here</CTALink>. Once you clone the starter respository, <code>npm install</code>. Then, you can skip to <CTALinkctaEventName='heroku-tutorial-step-7-deploy-to-heroku'href="#step-5-download-slds-assets">Step 5: Download {g.displayName}</CTALink>.
109
+
If, for any reason, you wish to bypass the steps to manually create this project, clone the basic setup <ahref={g.herokuLightingReactAppUrl[1].url}target="_blank">here</a>. Once you clone the starter respository, <code>npm install</code>. Then, you can skip to <ahref="#step-5-download-slds-assets">Step 5: Download {g.displayName}</a>.
<p><strong>Sanity Checkpoint:</strong> Run <code>node server.js</code> in your terminal and your project will be served on <CTALinkctaEventName='heroku-tutorial-step-7-deploy-to-heroku'href="http://localhost:8080/"target="_blank">http://localhost:8080/</CTALink>. You may also run <code>npm run start</code> as it will yield the same results.</p>
222
+
<p><strong>Sanity Checkpoint:</strong> Run <code>node server.js</code> in your terminal and your project will be served on <ahref="http://localhost:8080/"target="_blank">http://localhost:8080/</a>. You may also run <code>npm run start</code> as it will yield the same results.</p>
<imgclassName={pf('image tutorial-image')}src="/assets/images/tutorial/heroku/image1.png"alt="Sanity checkpoint of static text."/>
226
225
</figure>
227
226
228
227
<Headingtype="h2"id="step-5-download-slds-assets"className="site-text-heading--large">Step 5: Download the {g.displayName}</Heading>
229
-
<p><CTALinkctaEventName='heroku-tutorial-download-slds-assets'href="/resources/downloads/">Download the {g.displayName} CSS framework</CTALink></p>
228
+
<p><Linkto="/resources/downloads/">Download the {g.displayName} CSS framework</Link></p>
230
229
<p>Once you unzip the CSS framework, you need to move a few things into the correct location. Grab the <code>assets/</code> folder and put it in your <code>demo_slds_heroku/public/</code> folder. Your project should have a similar file structure to the following:</p>
<p>Replace the text inside the <code>body</code> tags with the following. You can find the markup on the <CTALinkctaEventName='heroku-tutorial-grid-system-component-link'href="/components/grid-system#order"target="_blank">Grid System component page</CTALink>.</p>
274
+
<p>Replace the text inside the <code>body</code> tags with the following. You can find the markup on the <ahref="/components/grid-system#order"target="_blank">Grid System component page</a>.</p>
<p>Swap the text <strong>Page Header Component</strong> with the markup from the example on the <CTALinkctaEventName='heroku-tutorial-page-header-component-link'href="/components/page-headers#record-home"target="_blank">Page Header component page</CTALink>.</p>
330
+
<p>Swap the text <strong>Page Header Component</strong> with the markup from the example on the <ahref="/components/page-headers#record-home"target="_blank">Page Header component page</a>.</p>
332
331
333
332
<h3className="site-text-heading--medium">C. Add a Fun Image</h3>
334
333
<p>Swap the text <code>Image</code> with an image.</p>
@@ -339,16 +338,16 @@ demo_slds_heroku/
339
338
</div>
340
339
341
340
<h3className="site-text-heading--medium">D. Use the Tabs Component</h3>
342
-
<p>Swap the text <code>Tab Component</code> with the markup from the example on the <CTALinkctaEventName='heroku-tutorial-tabs-component-link'href="/components/tabs#default"target="_blank">Tabs component page</CTALink></p>
341
+
<p>Swap the text <code>Tab Component</code> with the markup from the example on the <ahref="/components/tabs#default"target="_blank">Tabs component page</a></p>
343
342
344
343
<h3className="site-text-heading--medium">E. Use the Activity Timeline Component</h3>
345
-
<p>Swap the <code>H2</code> tags and its contents <code>Item One Content</code> with the markup from the example on the <CTALinkctaEventName='heroku-tutorial-activity-timeline-link'href="/components/activity-timeline#base"target="_blank">Activity Timeline component page</CTALink>.</p>
344
+
<p>Swap the <code>H2</code> tags and its contents <code>Item One Content</code> with the markup from the example on the <ahref="/components/activity-timeline#base"target="_blank">Activity Timeline component page</a>.</p>
346
345
347
346
<h3className="site-text-heading--medium">F. Use the Card Component (Base)</h3>
348
-
<p>Swap the text <code>Card Component</code> with the markup from the example on the <CTALinkctaEventName='heroku-tutorial-card-component-link'href="/components/cards#base"target="_blank">Card component page</CTALink>.</p>
347
+
<p>Swap the text <code>Card Component</code> with the markup from the example on the <ahref="/components/cards#base"target="_blank">Card component page</a>.</p>
349
348
350
349
<h3className="site-text-heading--medium">G. Things are looking kind of squashed!</h3>
351
-
<p>If you feel kind of cramped, check out the <CTALinkctaEventName='heroku-tutorial-utilities-spacing-link'href="/components/utilities/spacing"target="_blank">Utilities</CTALink> page for spacing classes.</p>
350
+
<p>If you feel kind of cramped, check out the <ahref="/components/utilities/spacing"target="_blank">Utilities</a> page for spacing classes.</p>
0 commit comments