Skip to content

Commit

Permalink
Fix images and download links in tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
codytodonnell committed Jun 13, 2024
1 parent 98c6839 commit 04b0706
Show file tree
Hide file tree
Showing 15 changed files with 6 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ npm start

This will start up a local server to run your application from the browser. Once it finishes running, you should be able to open the home page (`src/pages/index.tsx`) of your app by opening a browser and navigating to [http://localhost:5174/](http://localhost:5174/).

![Screenshot of home page in a browser](/img/start-home-page.png)
![Screenshot of home page in a browser](/img/tutorial/start-home-page.png)

In the future, when you run your app, you will not need to perform the install step -- just `npm start`. In fact, the development server that this runs is able to update the app "live" as you change the code in this directory, so you don't need to stop and restart the app for each change.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ pages: {

Save this file. You should now have a fully functioning Explore Data Task Flow page when you navigate to the `/solar-system` route. Test this out by navigating your browser to http://localhost:5173/solar-system.

![Screenshot of solar system Task Flow in a browser](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/images/start-explore-data-2.png?raw=true)
![Screenshot of solar system Task Flow in a browser](/img/tutorial/start-explore-data-2.png)

This is great, but it would be good to be able to access this page from the navbar instead. Let's add a link to the Solar System page in the top navigation bar.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,9 @@ Refresh the page. You should see the planet name at the top of the preview panel

In this step you will add an image for each planet and display it in the preview panel. First, create a new `images` directory inside the `public/` directory at the top level of the app.

Then, download the `planets.zip` file from the strudel-kit GitHub:
Then, download the `planets.zip` file using the link below:

[Click to download planets.zip from GitHub](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/images/planets.zip?raw=true)

To download the raw zip file, click the download icon or the "Raw" button on the right side of the page.
[Click to download planets.zip](/img/tutorial/planets.zip)

Double-click the `planets.zip` file you downloaded to unpack the files, then drill into the `planets` directory and copy the 8 files. There should be one file for each planet.

Expand Down Expand Up @@ -217,7 +215,7 @@ To make sure the images are accessible, add alt text to the `img` tag. Alt text

Refresh your page and make sure the images are smaller and all the same height.

![Screenshot of planet images in the preview panel](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/images/mid-preview-panel-2.png?raw=true)
![Screenshot of planet images in the preview panel](/img/tutorial/mid-preview-panel-2.png)

Woohoo! You're done with task flow customizations for now.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ Refresh the page and watch the Explore link change color when you mouse over it.

Now, let's replace the "Tutorial Science App" title in the navigation bar with a logo for a project. First, download the tutorial app logo from GitHub:

[Click to download example-logo.png from GitHub](https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/images/example-logo.png?raw=true)
[Click to open example-logo.png](/img/tutorial/example-logo.png). Then right-click the image and click "Save Image As..."

Place `example-logo.png` in the `public` folder alongside your other images.

Expand Down
Binary file not shown.
Binary file not shown.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes

0 comments on commit 04b0706

Please sign in to comment.