Demo of a Gatsby based site

[chmac]

After the discussion on #871, and waiting a while for the current site to load today, I decided to see how quickly I could whip up a Gatsby demo. It took <4 hours so far. Here's the current UGLY result:

https://chmac.github.io/open-source-ios/

The design is obviously pretty horrible. It's a rough proof of concept. The big advantage over the current site is speed. It loads near instantly, while even on my desktop, 50Mbit connection, etc, the current site takes a loooooooong time to load.

@dkhamsing If you're interested in this as a direction, I'd be happy to improve the design a bit and submit a PR...

TODO

• Create Netlify account (dkhamsing)
• Change Netlify site name to open-source-ios-apps
• Netlify deploy

[dkhamsing]

@chmac loading fast indeed - please proceed, thank you

[chmac]

@dkhamsing OK, I've done some more on the design, another half day or so of work. I've also spent some time importing the images into Gatsby. It downloads ~900MB of images, then processes them into thumbnails and all kinds of other magic. Then it can load very small versions inline as base64 data urls.

However, this image stuff is breaking the Gatsby build. Not sure what the problem is. Will take more time to investigate / fix. So for now I've hacked it to only download about 100 images. Mostly in the apple watch / developer categories.

I've updated the GitHub build. https://chmac.github.io/open-source-ios/

There's still some stuff to do like changing the favicon and so on. My question is, what more would you like to see before linking this either along side, or instead of, the current site?

[dkhamsing]

@chmac speed is very impressive! Nice work on the images.

1. Could you surface the license info and add a link to the appropriate detail on https://choosealicense.com
2. Is there a way to display and browse tags?

[chmac]

@dkhamsing Sure, license and tags should be easy, hadn't noticed those fields! Well, not as easy as I might think, as always, but definitely doable! The tags makes a lot of sense. I'll make a page per tag, then just link to them.

I might end up having to drop the fancy image stuff if I can't get it to work. A ton of the images are also broken links, etc. But that's a story for another day.

Deployment

Do you have a netlify account? The easiest thing would be to merge the Gatsby code into this repo and use Netlify to build it. It might be possible with GitHub actions, I'm just not personally very familiar with them. Thing is, if the images are 800MB, then the final build could easily be over 1GB. I think that GitHub has some limits on size. Also, it takes ~12 minutes or something to build on Netlify. Their free plan only has 300 free minutes a month. So, maybe 25 builds a month. Potentially with caching that would improve. Otherwise, without importing the images, the whole thing would build pretty fast.

Also, Netlify have an open source plan or something, so we could apply for that.

[dkhamsing]

@chmac thanks for all this work! Exciting

No, I do not have a netlify account and not really familiar with how it would work so I would rely on you. Just let me know how I can help, create account or connect services - thanks!

[chmac]

@dkhamsing OK, I've added tag pages, dropped the Gatsby favicon, switched out the purple, and added licenses plus link. Some of the tag pages are pretty long, but that's something we could optimise later.

What do you think, anything else required before we deploy it?

On the question of deployment, if you don't have a Netlify account, that might work well. Then the build minutes allowance would only be used by this project. If you're happy to do that, you can create an account by signing in with your GitHub oauth at netlify.com. Then I'll submit a PR here which copies the Gatsby site into this repo. If everything goes to plan, after the PR is merged, you should be able to log in to Netlify, click "new", and it'll Just Work™, famous last words!

[dkhamsing]

Nice update! Love the tag links! And the license.

@chmac Could we remove the period from the browse button, change from

Browse Apple TV. to
Browse Apple TV

I will create a netlify account and post back here when done

Thank you!

[chmac]

@dkhamsing Done. Building & deploying now.

I'll get a PR ready then that moves all the Gatsby stuff over into this repo. 👍

[dkhamsing]

I have created my netlify account

[chmac]

@dkhamsing Awesome. If you merge #887 then you should be able to:

• Click the Netlify logo top right
• Click "New site from Git"
• Choose this repo
• Click through, no options to set

[dkhamsing]

@chmac done, what's next? Should I do a deploy ?

[chmac]

@dkhamsing Netlify should auto deploy for you. If you go to the site, and check the deploy list, hopefully it succeeded.

The one thing I would suggest is to change the name of the site.

• Click to your list of site sin Netlify
• Click on the name of this site (probably a random name)
• Click on the "Domain Settings" button
• Click on Edit Site Name

I suggest open-source-ios-apps.netlify.app. I previously had my version at that URL, but I've changed it now, so hopefully that site name is available to you now...

[chmac]

@dkhamsing I'm also @chmac on twitter and my DMs are open there, so if you want to have a real time messaging you could ping me on there...

[dkhamsing]

@chmac I was able to change the netlify site name ✅

[dkhamsing]

Looks like the deploy failed 😅 will msg you on twitter

[chmac]

@dkhamsing Cool, looks like it's live!

It would also be cool to add "last updated" data. Not sure how you source the current star counts, maybe that's automated currently. So maybe getting last updated could be done the same way, but that's all for another day. I'll keep an eye on this issue to see if Gatsby make it easier to figure out which screenshots are breaking the Gatsby stuff. If we can get it working, it'll solve the mixed content warnings.

[dkhamsing]

@chmac star count is updated by a script once a month - thx for creating the gatsby issue - closing this and thank you again!