🍑 Spin up SSG

[tatianamac]

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

[tatianamac]

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]

Sounds good to me @tatianamac

[cdvillard]

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]

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]

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]

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 ***@***.***> 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 <#4>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABPV5ZQTTDAAAPS5BAFNWBLQHMDX3ANCNFSM4IH7ZEVQ> .

[taurean]

@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]

Can you link the codepen mockup please?

[taurean]

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

[BboyAkers]

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]

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]

@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]

Ya'll want to hop on a slack/skype/discord call? If so email me at [email protected]

[tatianamac]

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]

@taurean Do you feel comfortable spinning something up?

[BboyAkers]

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

[tatianamac]

@BboyAkers Thanks, Austin!

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

[taurean]

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]

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]

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

[aarongustafson]

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]

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

[aarongustafson]

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

[jjziv]

@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]

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]

@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]

what slack group? 👀

[tatianamac]

@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]

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]

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

[WilHall]

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:

• Users own their own data; they can update it or remove it at any time
• The only thing we store and maintain is a list of GitHub usernames
• The setup can be entirely hosted on Netlify (Something like this example?)
• There would be very little JS required
• Adding or removing profile data fields doesn't require maintaining or migrating a database schema

Drawbacks:

• We would need to make sure we sanitize text properly when generating the markdown files to avoid XSS
• We would need either an allowlist/denylist or pending/approved mechanism to ensure people don't submit inappropriate or malicious content

I would love others' thoughts on this!

[BboyAkers]

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

[tatianamac]

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.