haxeflixel.com icon indicating copy to clipboard operation
haxeflixel.com copied to clipboard

HaxeFlixel site not running locally. Should we replace docpad?

Open RichardBray opened this issue 2 years ago • 30 comments

I've been thinking about improving and adding some content to the blog page, maybe creating a community page. I heard it's difficult to get the site up and running locally so, as a full-time web dev I rose to the challenge and have managed to get it working, mostly:

There are two things I haven't been able to figure out.

1. Why the docpad thumbnail plugin doesn't create thumbnails

Screenshot 2022-03-18 at 11 25 49

Lies!!! Thumbnail generation did not complete, see:

Screenshot 2022-03-18 at 11 25 10

2. Why the running docpad run doesn't bring up the server

So far so good:

Screenshot 2022-03-18 at 11 39 02

Where is the site 🤷‍♀️

Screenshot 2022-03-18 at 11 42 15

I've had to get around this by just building the site and using the http-server package

Screenshot 2022-03-18 at 12 36 18

Thoughts

Docpad is pretty old (I mean, who writes coffeescript nowadays), and although we could fix these specific issues with the site, it would be better to move onto a more popular and stable static site generation tool.

But this is all my opinion, it would be good to get the thoughts of others.

RichardBray avatar Mar 18 '22 12:03 RichardBray

Yeah, I agree with that. Maybe I will get some time to do that...

Stilic avatar Mar 18 '22 15:03 Stilic

Yeah, I agree with that. Maybe I will get some time to do that...

Nice, thanks for your help. I think it would also be good to get buy-in from people who can merge code to the repo then we can discuss the best tools/packages to use.

RichardBray avatar Mar 18 '22 15:03 RichardBray

this web dev stuff is pretty over my head, if you think it's a good idea and got some time to implement then I say go for it

Geokureli avatar Mar 22 '22 15:03 Geokureli

Nice okay, I'll see what I can rustle up. I'll mess around with Gatsby for this. I've heard good things about it. @Stilic I don't know if you have any other tools in mind.

RichardBray avatar Mar 23 '22 19:03 RichardBray

Nice okay, I'll see what I can rustle up. I'll mess around with Gatsby for this. I've heard good things about it. @Stilic I don't know if you have any other tools in mind.

I use Svelte for my website actually. I think we can make something like a documentation generator using it. (there is already something like that also)

Stilic avatar Mar 23 '22 19:03 Stilic

I use Svelte for my website actually. I think we can make something like a documentation generator using it. (there is already something like that also)

Ah Svelte is a good shout. I don't have a lot of experience with it although I've heard good things.

For static site generation, I think SvelteKit might have to be used. The docs plugin link you provided looks like it's depreciated.

Ideally, I think something that is easy for people not familiar with web technologies to edit and add to. I don't know if SvelteKit supports markdown, I'm sure it does, but it would be something to look into.

I think the next step from here would be to build a little site in SvelteKit and figure out if it's easy for others to add pages to and easy to deploy. If you're happy to do that @Stilic that would be great, but no worries if not.

RichardBray avatar Mar 24 '22 11:03 RichardBray

I use Svelte for my website actually. I think we can make something like a documentation generator using it. (there is already something like that also)

Ah Svelte is a good shout. I don't have a lot of experience with it although I've heard good things.

For static site generation, I think SvelteKit might have to be used. The docs plugin link you provided looks like it's depreciated.

Ideally, I think something that is easy for people not familiar with web technologies to edit and add to. I don't know if SvelteKit supports markdown, I'm sure it does, but it would be something to look into.

I think the next step from here would be to build a little site in SvelteKit and figure out if it's easy for others to add pages to and easy to deploy. If you're happy to do that @Stilic that would be great, but no worries if not.

I don't have much time to do that now, but I can see if I can do it later.

Stilic avatar Mar 24 '22 12:03 Stilic

Cool beans. I'm moving house (as you'll find out soon if you regularly watch my videos), so I might not get round to this until around May/June ish but I'll ask around the community for help once I start.

RichardBray avatar Mar 28 '22 18:03 RichardBray

take your time, guys, appreciate people looking into this

Geokureli avatar Mar 28 '22 19:03 Geokureli

Going to start that soon since I can now.

Stilic avatar Apr 12 '22 13:04 Stilic

Going to start that soon since I can now.

Nice, let me know how you get on 👍

RichardBray avatar Apr 26 '22 16:04 RichardBray

@RichardBray I recommend going with Next.js if you're looking to re-write. It's built on top of React and has an unrivaled development experience.

gamedevsam avatar May 18 '22 19:05 gamedevsam

@gamedevsam yeah I'm more of a React dev myself but I want to go with something that the open-source community will feel the most comfortable with contributing to. If that happens to be Next.js then so be it.

RichardBray avatar May 19 '22 06:05 RichardBray

Outside of plain vanilla JS, React has pretty much won the front end framework battle. Next.js includes a bunch of extra utilities and has an opinionated project structure that eliminates a lot of decisions you'd otherwise need to make. It also has support for static site generation, so it's a good option to convert markdown into distinct webpages for example. A full re-write of the site seems really ambitious to me, but honestly if we don't modernize it, it's likely to never get any significant updates.

I used this Next.js repo as an inspiration for my own site, it has a lot of goodies and best practices, might be a good place to start: https://github.com/leerob/leerob.io

gamedevsam avatar May 20 '22 03:05 gamedevsam

@Stilic if you've already started a Svelte implementation, don't let me stop you :-P

Everyone is going to have their favorite framework, it's just the nature of the ecosystem at the moment.

If you're open to the idea I still encourage you and Richard to look into Next.js since it really does simplify a lot of things for you (and it has amazing docs, which is really important).

PS: I checked out your website, you should check out Zorin OS if you're looking for a sweet Linux distro ;) PPS: Before messing with dual booting linux, you should really have a Macrium Reflect Rescue USB - it will help you restore the windows boot loader to a good state in case something goes wrong.

PM me on Twitter if you want to connect on Discord or something: https://twitter.com/gamedevsam

gamedevsam avatar May 20 '22 04:05 gamedevsam

@Stilic if you've already started a Svelte implementation, don't let me stop you :-P

Everyone is going to have their favorite framework, it's just the nature of the ecosystem at the moment.

If you're open to the idea I still encourage you and Richard to look into Next.js since it really does simplify a lot of things for you (and it has amazing docs, which is really important).

PS: I checked out your website, you should check out Zorin OS if you're looking for a sweet Linux distro ;) PPS: Before messing with dual booting linux, you should really have a Macrium Reflect Rescue USB - it will help you restore the windows boot loader to a good state in case something goes wrong.

PM me on Twitter if you want to connect on Discord or something: https://twitter.com/gamedevsam

I already used React in the past, for some hobby projects. But I am OK to use Next!

By the way, thanks for the suggestion!

Stilic avatar May 20 '22 04:05 Stilic

haxeflixel website we write it in haxe 🤝 https://github.com/massive-oss/haxe-react https://github.com/MVCoconut/coconut.ui

ninjamuffin99 avatar Jul 15 '22 05:07 ninjamuffin99

haxeflixel website we write it in haxe 🤝 https://github.com/massive-oss/haxe-react https://github.com/MVCoconut/coconut.ui

As cool as that would be I don't know if it's a route we want to go down.

Based on what Sam suggested NextJS would be the react framework of choice for this re-write and we're hoping to go down the static-site generation route. NextJS is quite well maintained for JS/TS so I have faith that will be around for the next 5 years (no pun intended).

However, I'm not sure about the Haxe + React support will be around that long, let alone the support for NextJS in Haxe. Also when it comes to doing things like writing markdown in NextJS, I don't know if the plugins for that will be supported in Haxe and if this is something that needs to be done myself dts2hx style myself each time there is a package update I don't know how maintainable that is.

But this is something I haven't tried before and maybe it's super simple 🤷

RichardBray avatar Jul 15 '22 07:07 RichardBray

haxeflixel website we write it in haxe 🤝 https://github.com/massive-oss/haxe-react https://github.com/MVCoconut/coconut.ui

As cool as that would be I don't know if it's a route we want to go down.

Based on what Sam suggested NextJS would be the react framework of choice for this re-write and we're hoping to go down the static-site generation route. NextJS is quite well maintained for JS/TS so I have faith that will be around for the next 5 years (no pun intended).

However, I'm not sure about the Haxe + React support will be around that long, let alone the support for NextJS in Haxe. Also when it comes to doing things like writing markdown in NextJS, I don't know if the plugins for that will be supported in Haxe and if this is something that needs to be done myself dts2hx style myself each time there is a package update I don't know how maintainable that is.

But this is something I haven't tried before and maybe it's super simple 🤷

The idea of using NextJS is good, but with Haxe, I don't see what it adds...

Stilic avatar Jul 15 '22 09:07 Stilic

The idea of using NextJS is good, but with Haxe, I don't see what it adds...

I believe the thought was that a site written in Haxe would be more accessible to HaxeFlixel contributors who want to add to the site. I'm all for enabling contributors, but if the tech stack isn't stable we'll be having the same problem in no time

Geokureli avatar Jul 15 '22 15:07 Geokureli

Not to mention you'd just add complexity to the stack, keep things simple.

gamedevsam avatar Jul 20 '22 21:07 gamedevsam

Hey all, I know there hasn't been much movement on this and I hope to get started around October this year but I just want to run a few things past you all technology wise before work begins.

Technology wise here's what I'm thinking

  • Node 18
  • NextJS (Static Site Generation)
  • Typescript
  • CSS Modules
  • Conventional commits
  • Deployment via Github actions to Github pages for dev site

I'm thinking of doing a little proof of concept repo to share with you all so you kind of know what to expect. Also so I can check if it's possible to do static site generation with React server components in NextJS 😁

Also, is everyone happy for a new repo to be created for this or should everything be kept in this repo but just on a different branch?

RichardBray avatar Sep 01 '22 14:09 RichardBray

Hey all, I know there hasn't been much movement on this and I hope to get started around October this year but I just want to run a few things past you all technology wise before work begins.

Technology wise here's what I'm thinking

  • Node 18
  • NextJS (Static Site Generation)
  • Typescript
  • CSS Modules
  • Conventional commits
  • Deployment via Github actions to Github pages for dev site

I'm thinking of doing a little proof of concept repo to share with you all so you kind of know what to expect. Also so I can check if it's possible to do static site generation with React server components in NextJS 😁

Also, is everyone happy for a new repo to be created for this or should everything be kept in this repo but just on a different branch?

Maybe create a new repo? Also can we use the latest LTS release of Node instead of Node 18?

Stilic avatar Sep 01 '22 16:09 Stilic

Cool, we can do that. I think once Node 18 becomes LTS it shouldn't be too difficult to upgrade the dependencies.

RichardBray avatar Sep 01 '22 16:09 RichardBray

Hey all, I've started the rebuild of the HaxeFlixel site and you can see my code here https://github.com/RichardBray/hf-site

@Stilic I've already added you as a collaborator. I'm also streaming my progress on YT if you're interested https://www.youtube.com/watch?v=Qz7eAafAgKo&t=2560s

RichardBray avatar Oct 05 '22 12:10 RichardBray

Hey all, I've started the rebuild of the HaxeFlixel site and you can see my code here https://github.com/RichardBray/hf-site

@Stilic I've already added you as a collaborator. I'm also streaming my progress on YT if you're interested https://www.youtube.com/watch?v=Qz7eAafAgKo&t=2560s

Good!

Stilic avatar Oct 05 '22 14:10 Stilic

Hey all, I've started the rebuild of the HaxeFlixel site and you can see my code here https://github.com/RichardBray/hf-site

The concern I have (and I think a few people touched on it above) is: how easy would it be for someone to change or add to the site?

One of the issues with the current site is that things got out of date and 'broken' to the point where no one was sure how to make simple changes to the site. Also, and it's a problem with snippers.haxeflixel.com as well, you have to download and install a bunch of stuff that maybe someone isn't super-familiar with just to submit something simple...

Is there a way that the core site could be configured so that someone with limited experience could contribute with ease?

Specifically: Demos, Showcase, and Tutorials If there was a super-easy method that someone who wanted to add to one of these sections could just commit just a new file in a special Markdown format or something...

I'm familiar with Jekyll, and I've used Hugo a bit, but for something where I might personally only be contributing something tiny once every couple of years it feels bad to have to spend 45m downloading, installing, setting up, and refamiliarizing myself with how the site even works when all I want to do is add a picture and a link to a URL...

I think I'm picturing something as 'simple' as what Haxe.io is doing? I just don't know how to set that up.

Also: could the HaxeFlixel site have something similar to that? a weekly/monthly list of news/releases/info?

SeiferTim avatar Oct 05 '22 19:10 SeiferTim

Next.js is a solid production ready framework for web dev, standing up a local instance of the new site is as easy as running npm install and npm run dev. We can probably use markdown or JSON files to add demos, showcases and tutorials, which case adding content to the site would be super easy. Not sure what @RichardBray is planning to do for the content sections of the site atm.

gamedevsam avatar Oct 05 '22 20:10 gamedevsam

I was under the impression we would keep the existing markdown demos and snippets. I agree it's important that haxe developers should be able contribute content to the site without much webdev knowledge.

Geokureli avatar Oct 05 '22 20:10 Geokureli

Yeah I'll definitely try and keep as much of the old markdown files as I can. I plan to add a lot of documentation, maybe even some videos on how to do those things.

RichardBray avatar Oct 05 '22 21:10 RichardBray