search

selfdefined / devsofcolour

A searchable and sortable database to find devs of colour of all skill levels, languages, frameworks.
MIT License
81 stars 7 forks source link

🍑 Spin up SSG #4

Open tatianamac opened 5 years ago

tatianamac commented 5 years ago

Simpler seems better here, something where markdown or another FMD approach can allow for easy profile creation.

tatianamac commented 5 years ago

What about this for approach?

  1. Spin up site.
  2. Create some sort of database that can be contributed to, like we've discussed via .md files or JSON or whatever.
  3. Gather 10 or so user's data so we can start to have some real data to design around.
  4. Design the thing.
  5. Get more users to start stress testing it.
taurean commented 5 years ago

Sounds good to me @tatianamac

cdvillard commented 5 years ago

SSGs like Gatsby and Gridsome offer a simple enough GraphQL setup to work with straight markdown files. I'm new to Eleventy, so I'm not sure how to set one up there, but ultimately, a potential setup could be a directory with markdown files, ${framework}-source-filesystem to set the GraphQL relationship between the markdown and graph, and then programmatically create pages based on a template from there.

taurean commented 5 years ago

Sounds good to me @cdivillard, although I don’t know much about this. Curious, would we want to have stand-alone profile pages that someone could link to?

tatianamac commented 5 years ago

I'd prefer to use as little JS as possible to make this as performant and accessible as possible. If we want to serve communities where internet is slow and folks rely on data, that will be the best way.

Re: standalone pages: Yes, I'd love this to serve as something that folks can link to in lieu of (or in addition to) a website. That reminds me, we should consider adding a slot for Sponsor links (Patreon, GitHub Sponsors, etc)

cdvillard commented 5 years ago

I'm on board with serving as little JS as possible and sponsor links.

Ultimately what I'm suggesting is server-side rendering or rendering at a build step on a service like Netlify. That way all that is served is static files, no unnecessary JS on the page. I believe that's what my GraphQL suggestion would accomplish, though I admit I'm still learning about it a bit. I'm fine with doing the legwork on that to confirm.

On Sat, Aug 31, 2019, 8:25 PM Tatiana Mac notifications@github.com wrote:

I'd prefer to use as little JS as possible to make this as performant and accessible as possible. If we want to serve communities where internet is slow and folks rely on data, that will be the best way.

Re: standalone pages: Yes, I'd love this to serve as something that folks can link to in lieu of (or in addition to) a website. That reminds me, we should consider adding a slot for Sponsor links (Patreon, GitHub Sponsors, etc)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tatianamac/devsofcolour/issues/4?email_source=notifications&email_token=ABPV5ZWLXPNMGOJYG7JDEATQHMDX3A5CNFSM4IH7ZEV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5TXVQQ#issuecomment-526875330, or mute the thread https://github.com/notifications/unsubscribe-auth/ABPV5ZQTTDAAAPS5BAFNWBLQHMDX3ANCNFSM4IH7ZEVQ .

taurean commented 5 years ago

@tatianamac love the sponsor link idea.

How did we feel as a group with that codepen mockup thing I did? Should we keep tweaking that or should I do something in a similar style for standalone pages?

BboyAkers commented 5 years ago

Can you link the codepen mockup please?

taurean commented 5 years ago

https://codepen.io/taurean/pen/eqJOVy

BboyAkers commented 5 years ago

I dig it! Sorry for the late response. I can get cracking on building out some stuff if we get some tasks labeled. What do we want to use for the frontend?

tatianamac commented 5 years ago

Love it! I did a small remix on it. Mostly trying to make it more concise. I am trying not to get too precious about the design right now so we can reexamine it after we do some testing down the road.

https://codepen.io/tatianamac/pen/yLBKYaP?editors=1100

cdvillard commented 5 years ago

@taurean, I'm digging the general style of your mockup as an aesthetic, but I agree with @tatianamac's point that this can be always be rehashed down the road.

That said, assuming the attention is turning back to architecture, it sounds like Eleventy will be the SSG of choice. Is there a consensus on that? If so, how should we handle data?

(Also, sorry if I'm sounding off too much. I'm into the project, still learning the etiquette of these sorts of greenfield open-source projects.)

BboyAkers commented 5 years ago

Ya'll want to hop on a slack/skype/discord call? If so email me at me@austinakers.com

tatianamac commented 5 years ago

Sorry—notifications have been turned off for me so I missed these messages!

I'd ideally like to use Eleventy for its performant nature (doesn't require JS out of box), data infrastructure, that it strips the end-rendered site of any Eleventy junk.

Data-wise, it seems like some way for people to modify a JSON file might be the best? Using a PR to add themselves? We can try to make this easier down the line, too, integrating Netlify forms or CMS to remove the need for someone to know how to use Git to contribute.

I'm open to other suggestions, but feel like Eleventy is the best option from my POV.

No worries on etiquette—directness is good. It reminds me I need to get a CoC going for this project as we add folks.

tatianamac commented 5 years ago

@taurean Do you feel comfortable spinning something up?

BboyAkers commented 5 years ago

Whoops I just saw this and your last message. I can spin up something this weekend!

tatianamac commented 5 years ago

@BboyAkers Thanks, Austin!

@taurean Are you still able to help with this project?

taurean commented 5 years ago

TLDR; Yes

NTL,DR; finally back to work this week after recovering from surgery. My capacity for stuff like this should increase a lot more as I get caught up with everything. 😄

@BboyAkers I'm not super familiar with 11ty yet but I'm sure I can start contributing code once we have something simple going.

tatianamac commented 5 years ago

Sounds good, @taurean. I hope your surgery went well.

@BboyAkers It may be of help to check out the other OSS project I'm working on, Self-Defined, as it's been set up with collections for words (instead of individuals). We may find the format helpful?

Here is an in-progress PR that features that format.

ovlb commented 5 years ago

Hey, it’s me, author of the linked PR. If any questions pop up, feel free to @ me :)

aarongustafson commented 4 years ago

Bumping this thread in 2020 :-)

Comp looks great!

I’d be happy to help get a first pass of Eleventy together if that’s the route we wanna go.

tatianamac commented 4 years ago

@aarongustafson I say we get that started with what we discussed on DM!

aarongustafson commented 4 years ago

Sounds good. I'll look to carve out some time over the next week to do an initial pass.

jjziv commented 4 years ago

@aarongustafson I'm having issues getting the app to start after installing all the dependencies. If you've got some time to help troubleshoot, I'd appreciate it (I'm not much of a node developer)!

taurean commented 4 years ago

didn't realize anything had been built yet, thanks @aarongustafson! @jjziv I just got it to run locally, maybe I can help. What issue are you facing, can you share the error?

jjziv commented 4 years ago

@taurean Thanks - I figured it out! My version of node wasn't new enough, so eleventy wasn't starting.

We should discuss approach via the Slack group so we can start splitting up tasks and assigning.

taurean commented 4 years ago

what slack group? 👀

tatianamac commented 4 years ago

@taurean Sorry, it only just occurred to me I could have folks working on this be on the Self-Defined slack too to help support each other. I'm very low on energy/time for these two projects these days, so having the support network has been amazing. (Both are built on Eleventy) https://join.slack.com/t/selfdefined/shared_invite/zt-en1u6xn8-CumcehUfprC0GH5lamb1bg

aarongustafson commented 4 years ago

I apologise for my delayed response. Between parental duties and my Mac going into a wicked boot/crash loop and needing to be rebuilt, I've gotten a bit behind in email & such. I'm glad this got sorted. I'll join the Slack too.

tatianamac commented 4 years ago

Note to everyone I migrated this onto the /selfdefined org now.

WilHall commented 4 years ago

I took some time to look into potential solutions for sourcing profile data.

My understanding from reading this thread (and in the general spirit of 11ty) is that we want to minimize development effort, specifically keeping a low profile when it comes to JS.

We also want devs to be able to submit a profile, update it as they please, and have that reflected in the 11ty site.

Looking at existing solutions, 11ty doesn't have much of a story around user signup/authentication, so if we were to have a facility for users to create and update their own profiles on the site it looks like we would have to build that ourselves. A solution like @cdvillard suggested using GraphQL (with something easy like Hasura with GitHub authentication?) could work for that.

However, thinking through how we could do this with just static content and not have to maintain a heavy database and authentication stack, I came up with an alternative idea which could work.

It would look like this:

  1. A GitHub user who wants to add a profile to the site forks a template repository (selfdefined/self-defined-profile)
  2. They update a configuration file in the fork (profile.yml) which contains all the fields they can fill out on their profile
  3. They submit their profile to the 11ty site simply by entering their GitHub username in a single-field form
  4. We store their username in a simple database (maybe FaunaDB?) kick off a task (and/or do this on deploy, or periodically) which looks for username/self-defined-profile and generates a markdown file for the 11ty site placing it into the devs/ collection as username.md

Benefits:

Drawbacks:

I would love others' thoughts on this!

BboyAkers commented 4 years ago

This is really nice! It sounds like it can be SEO friendly as well

tatianamac commented 4 years ago

I for one am fine with the drawbacks of your suggestion. I think anticipating some approval process is necessary in order to keep the quality of profiles robot- and spam-free.

Removing barriers to entry is always a goal of mine, so as long as we could forsee there being a future where someone can use a GUI in the future to do all that, that'd be great!

For Self-Defined, we discussed using Netlify CMS Open Authoring. That, compared with this, could work potentially be an elegant solution.