Port website to Hugo? #50

Open

opened by poVoq · 19 comments

poVoq commented

Owner

There is some ongoing discussion to port the website over to Hugo as some current active contributors prefer that and it would make it a bit easier to maintain the site & translations.

Proposed ToDo (in the spirit of this):

Select suitable theme template
- Documentation not blog focused (but blogs can be a thing as well)
- Translation support
- Light/Dark mode
- Code highlighting for tutorials
- Search function?
Quick mockup page to test theme
Make new repo. for Hugo website
Make overall content structure with easy translations in mind
Port over main landing page
Port over FAQ and tutorials
Make sure translations (fr, nl) are working, fix de translation
Make Ansible scripts for Hugo

There is some ongoing discussion to port the website over to Hugo as some current active contributors prefer that and it would make it a bit easier to maintain the site & translations. Proposed ToDo ([in the spirit of this](https://framablog.org/2022/09/05/de-la-bureau-cratie-a-la-tout-doux-cratie-refonder-la-gouvernance-associative/)): - [x] Select suitable theme template - Documentation not blog focused (but blogs can be a thing as well) - Translation support - Light/Dark mode - Code highlighting for tutorials - Search function? - [x] Quick mockup page to test theme - [x] Make new repo. for Hugo website - [x] Make overall content structure with easy translations in mind - [x] Port over main landing page - [x] Port over FAQ and tutorials - [ ] Make sure translations (fr, nl) are working, fix de translation - [ ] Make Ansible scripts for Hugo

poVoq commented

Poster

Owner

~~My proposal for the theme would be: https://github.com/h-enk/doks~~

Update: This one seems better: https://github.com/onweru/compose

~~My proposal for the theme would be: https://github.com/h-enk/doks~~ Update: This one seems better: https://github.com/onweru/compose

msavoritias commented

Owner

I would add also for the website to work without javascript, as a goal to keep in mind.

pep. commented

Owner

@msavoritias, I'd say it depends what we're trying to achieve.. if someday I get to doing something about #43, I don't see how this is possible without JS, and I firmly believe this will improve many users' experience.

For the most part though, the current website doesn't need JS indeed.

@msavoritias, I'd say it depends what we're trying to achieve.. if someday I get to doing something about #43, I don't see how this is possible without JS, and I firmly believe this will improve many users' experience. For the most part though, the current website doesn't need JS indeed.

👍 2

poVoq commented

Poster

Owner

I just tested the above proposed theme's demo with javascript disabled via ublock origin and while it degrades a bit (dark theme switcher, drop-down menu and search doesn't work) it remains functional for the most part on desktop PCs (mobile might be a different story).

poVoq commented

Poster

Owner

Hmm, so I started playing around with the Doks theme first mentioned above and while it is super easy to get up and running the main landing page is not i18n ready 😞 Thus the landing page can not be easily translated.

msavoritias commented

Owner

Agreed. Of course it would be unrealistic to have it all working without javascript but it should degrade gracefully. Like forgejo or github currently do.

poVoq commented

Poster

Owner

Edit: see newer images below.

Quick functional mockup with this theme:
https://github.com/onweru/compose

Edit: see newer images below. Quick functional mockup with this theme: https://github.com/onweru/compose

👍 1

poVoq referenced this issue

Website logo #51

ltguillaume referenced this issue

Website logo #51

ltguillaume commented

Apart from the colors, it's nice.

I wanted to have a look at the themes gallery, but I opened a bunch of them, getting only connection timeouts, so I gave up.

Apart from the colors, it's nice. I wanted to have a look at the themes gallery, but I opened a bunch of them, getting only connection timeouts, so I gave up.

poVoq commented

Poster

Owner

The colors are super easy to change.

No this is another one where the landing page seems easily translatable.

Strange, the hugo theme gallery works fine for me here.

The colors are super easy to change. No this is another one where the landing page seems easily translatable. Strange, the hugo theme gallery works fine for me here.

👍 1

poVoq commented

Poster

Owner

Mockup with adjusted colors and logo, with working dark-mode

Mockup with adjusted colors and logo, with working dark-mode ![image](/attachments/416797c4-26a3-4202-b638-c22c95db197e)

image.png

141 KiB

👍 3

ltguillaume commented

I like it!

poVoq commented

Poster

Owner

Got the general framework going including translations:

Also added a favicon already.

One problem is that I could not find a way yet to enable a language switcher in the menu and it also does not switch languages automatically it seems.

Once I finalized some stubs for the documentation and the tutorials I will probably upload it to a new repo in case people want to help out already with porting the content.

Got the general framework going including translations: ![grafik](/attachments/84061535-ff6c-40b2-a12b-8723b6651b84) Also added a favicon already. One problem is that I could not find a way yet to enable a language switcher in the menu and it also does not switch languages automatically it seems. Once I finalized some stubs for the documentation and the tutorials I will probably upload it to a new repo in case people want to help out already with porting the content.

grafik.png

151 KiB

ltguillaume commented

One problem is that I could not find a way yet to enable a language switcher in the menu and it also does not switch languages automatically it seems.

https://dev.to/feministclickback/how-to-add-a-language-switcher-to-your-hugo-site-2oh6 maybe?

> One problem is that I could not find a way yet to enable a language switcher in the menu and it also does not switch languages automatically it seems. https://dev.to/feministclickback/how-to-add-a-language-switcher-to-your-hugo-site-2oh6 maybe?

poVoq commented

Poster

Owner

I would like to stick to the upstream theme as much as possible and not customize it over what is easily possible from within Hugo.

But it looks like the author is willing to add this feature: https://github.com/onweru/compose/issues/89

I would like to stick to the upstream theme as much as possible and not customize it over what is easily possible from within Hugo. But it looks like the author is willing to add this feature: https://github.com/onweru/compose/issues/89

ltguillaume commented

Aah that's better :)

What about automatically choosing the language, based either on the request header Accept-Language, or JS navigator.language / navigator.languages?

Aah that's better :) What about automatically choosing the language, based either on the request header `Accept-Language`, or JS `navigator.language` / `navigator.languages`?

pep. commented

Owner

What about automatically choosing the language, based either on the request header Accept-Language, or JS navigator.language / navigator.languages?

This has some pros and cons. I think I'd be fine with using the locale as the default language but allow switching nonetheless.

I've seen too many sites forcing a redirect to whatever lang they thought I wanted to read and it's really frustrating.

> What about automatically choosing the language, based either on the request header Accept-Language, or JS navigator.language / navigator.languages? This has some pros and cons. I think I'd be fine with using the locale as the default language but allow switching nonetheless. I've seen too many sites forcing a redirect to whatever lang they thought I wanted to read and it's really frustrating.

👍 1

poVoq commented

Poster

Owner

So basically the design is done, just needs porting over the content and the above mentioned fix to have the language switcher.

I hope the fix will be added soon, then I will rebase my local copy of the theme and upload it here in a seperate repo.

![image](/attachments/508d6eb8-0438-4d0f-9e3f-ecbf47032153) So basically the design is done, just needs porting over the content and the above mentioned fix to have the language switcher. I hope the fix will be added soon, then I will rebase my local copy of the theme and upload it here in a seperate repo.

image.png

143 KiB

👍 1

ltguillaume commented

This has some pros and cons. I think I'd be fine with using the locale as the default language but allow switching nonetheless.

Yes, absolutely.

I've seen too many sites forcing a redirect to whatever lang they thought I wanted to read and it's really frustrating.

Yeah that's true, although I think those sites that actually "do it wrong" often use your location (IP) for this, instead of just Accept-Language or navigator.language. Those are user preferences.

> This has some pros and cons. I think I'd be fine with using the locale as the default language but allow switching nonetheless. Yes, absolutely. > I've seen too many sites forcing a redirect to whatever lang they thought I wanted to read and it's really frustrating. Yeah that's true, although I think those sites that actually "do it wrong" often use your location (IP) for this, instead of just `Accept-Language` or `navigator.language`. Those are user preferences.

ltguillaume commented

So basically the design is done, just needs porting over the content and the above mentioned fix to have the language switcher.

I hope the fix will be added soon, then I will rebase my local copy of the theme and upload it here in a seperate repo.

Looks great, @poVoq, nicely done! Yesterday, I checked a demo of the theme to get an idea of what the FAQ/Tutorials would look like and it's nice.

> So basically the design is done, just needs porting over the content and the above mentioned fix to have the language switcher. > > I hope the fix will be added soon, then I will rebase my local copy of the theme and upload it here in a seperate repo. Looks great, @poVoq, nicely done! Yesterday, I checked a demo of the theme to get an idea of what the FAQ/Tutorials would look like and it's nice.

This repo is archived. You cannot comment on issues.