Lotusdocs

[noxilixon]

I installed the lotusdoc theme and made some config and content changes for it to work. I tried to rebuild the current state. The docs/ subdirectory with the extra functionality is not used yet. It should be used in the future for some documentation content that is in the wiki right now. What we will put there exactly will be decided in #141.

Preview

Cleanup tasks:

• Fix linting
• checkout the scss workflow and use bootstrap classes where possible
• create single place for additional css

I made small commits in the process. I would squash those before merging.

This closes #93

[FFHener]

Testing on mobile i found the following things:

• Hamburger Menue doesnt work
• Language is inconsistent
  • e.g. in German activity section is in english
  • e.g. in English the activity section header is in german
• Imprint-link on footer links to a site not existing
• I like the grayed out picture, but the text is not that easiely readable
• The header is overlaying the upper half of the page title

Besides that i like the feel and look of the new template

[Noki]

• There are also alignment issues. Text on the homepage/all pages should be aligned left
• Broken image on theparticipate pages
• Poor readability of text placed on header image (accessibility issue)
• Poor contrast ratio for links (Google Lighthouse accessibility test does not pass)
• Very long line length on desktop makes texts hard to read
• Browser console errors (Content Security Policy violation)
• License in the footer might need a discussion

[FFHener]

What kind of feedback do you want for this PR? Only technical ones or design ones as well?

[noxilixon]

I think i addressed all the stuff you commented before. I am not sure about the following accessibility issues:

• Poor contrast ratio for links (Google Lighthouse accessibility test does not pass)
• Very long line length on desktop makes texts hard to read

1. I also ran google lighthouse and got these reports about the links. But when I check them with the chrome inspector it shows me that the links are alright
   

2. Where are those long lines?

[noxilixon]

What kind of feedback do you want for this PR? Only technical ones or design ones as well?

Also design, if it is not about the specific content (e.g. landing page) but about the structure and general layout. Because I think it is of, if the current content looks just ok, and we focus on the future content.

[noxilixon]

I talked with @FFHener and fixed all the issues he mentioned. From my side there is only some cleanup left. I created subtasks for that in the description.

[Noki]

I had a look at this and there are quite some issues:

• The internal links are not correct and there are a lot of 301 redirects due to missing slashes at the end of the URLs
• All pages have identical titles & meta-descriptions
• Images miss width and height attributes and therefore cause layout shifts
• The template misses self referencing canonical tags
• At least for the test environment the language redirect does not work and the homepage is HTML with a meta-refresh redirect
• There are accessibility issues
  • The layout is broken for small resolutions (320x568)
  • The Burger Menu does not work
  • The width of the main content is too wide on large screens and is therefore hard to read (all pages except homepage)
  • The contrast ratio of link colors/background does not fulfill the Web Content Accessibility Guidelines
  • On mobile devices the text in the header is almost impossible to read
• Some pages block resources due to violation of the content security policy
• There are some performance issues
  • Render-Blocking ressources
  • Missing Minification
  • Inefficient Cache Policies for static files

This is far from beeing ready. Please perform Audisto crawls to check and fix the issues and also perform Google Lighthouse Audits to address the accessibility and performance Issues.

[noxilixon]

Thank you for the in depth feedback. There were definitely some issues that I missed. But I think some were fixed already, but were not visible in the dev preview. This is because of the migration to a new host with different webserver. The DNS update takes very long and the github actions already pointed to the new server but not the domain. I now switched the dev domain, so that we have a working setup again, independently of the DNS update. The site is available at: https://freifunk.dev/lotusdocs/

So the following issues are not present with the new web-server

• Missing Minification
• The Burger Menu does not work
• Some pages block resources due to violation of the content security policy
• At least for the test environment the language redirect does not work and the homepage is HTML with a meta-refresh redirect

There were still some problems with the theme. I fixed those an will make some PRs to the theme itselfe, because this is a general problem with the theme.

• All pages have identical titles & meta-descriptions
• The template misses self referencing canonical tags
• On mobile devices the text in the header is almost impossible to read
• The layout is broken for small resolutions (320x568)

You said "The contrast ratio of link colors/background does not fulfill the Web Content Accessibility Guidelines" I could not confirm that, when inspecting the elements, as I wrote in a comment above. It took me some time XD but reading the actual warning closely, it is not about the contrast, but about the missing text decoration, that I now added.

Some issues i would consider as out of scope for this pr, because they were pre existing problems that are not related to the new theme. I fixed some, but this should not be a blocker for this pr.

• Images miss width and height attributes and therefore cause layout shifts
• Inefficient Cache Policies for static files (website: efficient Cache Policies for static files ansible#123)

[Noki]

• There are broken links to /en/imprint/ from all the /en/ pages because that page does not exist.
• Meta-Descriptions are still not properly set
• You crossed of content width from my previous list, but it's still far too long (e.g. https://freifunk.dev/lotusdocs/de/participate/)
• The template misses self referencing canonical tags is still present in the current version
• On mobile devices the text in the header is almost impossible to read is still present in the current version

The rest looks good to me now.

[noxilixon]

I completed the theme related tasks. I created separated issues for the content related tasks that existed before (#154 #121) those should be fixed in an other pr I think.

[Noki]

fell free to merge