HackGreenville Nights page

[oliviasculley]

Now that we're rapidly approaching the first HackGreenville Nights event that is hopefully the first of many, it would be great if we could have a page on the site to anchor it as a mainstay for the upstate's tech community. We don't need to add it before the first event, but it would be good to start some discussion about some ideas of what it could look like:

• Maybe a list of previous talks with links to the slides and speakers?
• A button to sign up for future talks?
• A button to sponsor food/venues (could also just be a link to #161)?

Please share if you have any ideas, designs or copy that you'd like to contribute! Thank you!

[allella]

• We could highlight the upcoming speakers.
• We could put an expand / collapse section for each instance of the event on the lower part of a Nights page with highlights of speakers and topics & embedded slide show of photos from the event.
• We could have speaker head shots and/or links to GitHub, LinkedIn, or other professional site / page.

[bogdankharchenko]

Alright - so I'm thinking we should start working on this and I can probably write all of this code - including some sort of admin system - in this repo. We should just pick a design.

We can use a theme from tailwindcss (I know we want to use it more)

Some good candidates

• https://tailwindui.com/templates/spotlight
• https://keynote.tailwindui.com/

Data Driven Management

Ideally we wouldn't have to edit HTML - but can just use an admin tool to manage the events, speakers etc -- sample db structure below

• Speaker (model)
  • name
• Talks (model)
  • name
  • description
  • speaker_id
  • event_id

[allella]

There have been talks of the HG Nights format varying, so it could be premature to get into defining models and UIs to manage it.

We could do an HTML pages for now to promote the upcoming event, and perhaps a collapsible section with HTML to cover past events.

Something similar to the content on the Meetup page would be a good start. https://www.meetup.com/hack-greenville/events/296051672/

What do we think about starting there?

[ThorntonMatthewD]

Is there any specific information about the upcoming event that should be called out on this page, or would keeping things more general be sufficient for the first take?

[allella]

@ThorntonMatthewD we don't have a set schedule, so we've been saying "quarterly-ish".

We could do something like have a card highlighting the last event (link to the Meetup page) and another card saying "Next Event" and say something like "expected to be in January or February 2024".

Thanks

[ThorntonMatthewD]

Sounds good! Is there a particular platform that we would want to point visitors to so that they can "subscribe" to updates and be informed about when the next event is announced? Slack, maybe?

[allella]

Meetup already handles emailing new events, so directing people to join the Meetup group is the current best way to get a push notification.

We have the Slackbot, so people who are in the Slack can use that, but they still need to remember to look at it.

Eventually, I think we can have the weekly digest go to social media, maybe a weekly email option, or even a slimmed down thing in SMS if that's how people want to get notified.

[ThorntonMatthewD]

I came across this a11y meetup's page that includes information around giving talks for their group: https://a11y-meetup-berlin.de/submit/

Since the venue may differ at times for HG Nights I am not sure if equipment can listed, but are there other things that may be helpful to communicate to prospective speakers so that they can prepare accordingly?

[allella]

@ThorntonMatthewD I wouldn't put much, or even any, effort into speaker resources or recruiting.

We'll likely pull many of the speakers from HG Slack conversations, at least for now.

I don't think we're envisioning this like a conference where people from anywhere submit talks and get selected.

If someone wants to do a talk they should likely either be part of the Slack and ask in there about it, or be asked by the organizers of the event.

If we want to put a "Want to speak?" button on the HG Nights page and link that to the existing contact form, then I suspect that's enough to get us covered on speakers looking to engage.

[ThorntonMatthewD]

For sponsorship offers, is the "Contact Us" form also the go-to place on the site to direct people to?

[allella]

Yeah, I think it's the same that we'll more likely be finding the sponsors than them finding us.

[ThorntonMatthewD]

In case the subject of the HG Nights page comes up in discussions I wanted to post what I have been iterating on.

Some things I like:

• The jumbotron image
• The accordion for events

Some things on the wishlist:

• A ^/V icon at the end of accordion cards to signify each card's state.
• Figuring out what to replace "Event data!" with for each talk in the accordion. Will slides and synopses be easily obtained from speakers/volunteers to fill in that kind of information? I'm reticent to add something in that could remain blank most of the time.
• A more in-depth description of the event (touching on the social aspect more, general format, what to expect, etc..)
• Maybe incoporating a more visual logo?

Logo	Image
Name tag
This logo I found on Slack (I do not recall who posted this, but I want to say it came from @oliviasculley )

Some things I don't like:

• The white box around the description in the jumbotron
• Most of the copy. It's the equivalent of styrofoam packing pellets..
• The HG Nights branding put out for the October event was cool :sunglasses:, and this page isn't very cool at all. What can be added to draw in the techie crowd and signal to them that they're going to be in for a fun, insightful time if they attend?

I was anticipating that I would be further along with this before any strategizing meetings occurred, but nonetheless I hope what has been knocked out so far can stir conversation to help us get this page to its eventual final form.

The diff so far in case anyone would like to take a look: https://github.com/hackgvl/hackgreenville-com/compare/develop...ThorntonMatthewD:hackgreenville-com:add-hg-nights-page

[allella]

@ThorntonMatthewD how about instead of the "Event Details" and worrying about the accordion, we have optional speadker and topic links for each speaker.

For example, for Pete, he had a blog for his topic that we could link to and we could link his name to either a LinkedIn or GitHub.

We could do the same for the others, and at least link to their name if their topic doesn't have a web resource.

For topic links, Ryan and Robert's talks have a link, but I don't believe we have anywhere to link Zach's talk, unless he's posted slides online. Similarly, Synergy Mill and HG Labs have links, so we could put topic links on those too.

I have these links in the HG Nights Planning doc, which I'll share on the Slack.

[ThorntonMatthewD]

I'll tinker with that this weekend. Thank you so much!

[allella]

The basic HG Nights page is up at https://hackgreenville.com/hg-nights

Kudos to Matt for getting this roughed in.

We can make tweaks and add additional nice to have features as it makes sense.

[ThorntonMatthewD]

I am not seeing the jumbotron image, and it doesn't look like the responsive font scaling CSS rules are active. Is there a step needed to build/cache static files in order for these appear?

[allella]

We run scripts/handle-deploy-update.sh on deployment, so if something is missing, then it may be it wasn't included or we need to tweak that script.

You mentioned stripping out things. Did the image get inadvertently removed?

[ThorntonMatthewD]

The image looks to have made it in (here and here).

I'll give running that script a shot shortly and attempt to run the application without the vite dev server.

[ThorntonMatthewD]

I think npm run build may need to be run also.

[allella]

Thanks. That worked on stage, but I think we've been using yarn instead of NPM.

@zach2825 Matt suggested running npm run build above to get the CSS and background image to show.

How would you suggest we modify scripts/handle-deploy-update.sh to deal with this step that seems to be needed in some deploys?

[allella]

With the next HG Nights announced, we could probably expand this page to highlight the upcoming event and the past / pilot event.

I feel we can just do raw HTML here to add more info about the speakers and perhaps even mention the food.

If we get to a point where there's a solid pattern we could try to build it into a model, but that seems premature given we're still figuring out things with HG Nights.

[zach2825]

I'm finally getting back into doing stuff again. Sorry for the absence.

Yarn handles package caching better, so installs are faster. I've seen the other commands like build dev and other things run/boot faster too.

I found this article quickly, seems to mention the same basic stuff but with more detail. https://www.copycat.dev/blog/yarn-vs-npm/

That said, besides some slight command differences, yarn is used basically the same way as npm. Packages are installed in node_modules, you need to deploy yarn.lock when deploying to prod so you can run yarn install and get tested packages on deploy, and when you install packages globally with yarn they're still installed in your home dir run yarn global dir to see where

to the original question; npm run build would become yarn build.

[allella]

Now that we have two HG Nights events under our belts, and the videos Olivia and Joey shot and posted on YouTube, we have more content to continue building out the HG Nights page.

I think adding the highlights of the speakers, perhaps with the scheduled slots for reference (?), noting and linking to the sponsor, and linking to any videos and slides would be a good next step. This info is largely available in the Meetup pages, besides the slides, and we'd have to ask the speakers if they have anything worth sharing related to their talk. I think we'd want to link to something they are hosting instead of getting into the business of storing such things on our server, at least for now.

Oct 2023 - https://www.meetup.com/hack-greenville/events/296051672/ Feb 2024 - https://www.meetup.com/hack-greenville/events/299063777/

I feel pretty strongly we should continue for now to build this out as a single HTML page, instead of trying to put everything into a database model before we really have a firm grasp of features or use cases that would be well-defined enough to avoid unnecessary work or rework. If the content gets too big we could always add something like an expand / collapse to keep it more manageable.

Anybody have time to add take such next steps on https://hackgreenville.com/hg-nights

[allella]

Talk submission form and past events have been roughed in on the HG Nights page.

The margins definitely need some work and some other tweaks from someone with more design sense.

https://hackgreenville.com/hg-nights

[allella]

Linking to speaker slides is another potential thing we could do. I'm not sure we want to host such files for now.