chore: Cleanup setup and base css #27

eslachance · 2024-11-26T20:26:40Z

Context

This PR makes some cleanup in the theme and layout, to start updating the site code to more modern standards.

There's still a lot of problems and downsides to using Hugo, but at least, now we're less based on 1997 standards. Or at least, it's a start.

Preview

Can be viewed on cloudflare.

Screenshot:

Things that were changed:

Flex is used for the main layout, rather than floats
is long gone (from the layout itself, can't remove it from the markdown content)
Consistent indentation within the source files (the html output isn't significant)
Move to html5 standards. this isn't 1997, XHTML 1.0 Transitional isn't a thing anymore. (removed associated "badge")
Added Mattermost link (let me know if this shouldn't be public)
Very slight stylistic adjustments in the nav, footer, etc. Nothing major.

cpatulea · 2024-11-26T20:33:21Z

Awesome! Thanks a lot for working on this. I will need some time (a few days) to look at this. In the mean time, I also added some people who are closely involved with the site and might want to review.

cpatulea

Overall, looks great, thanks a lot for doing this.

I checked it on desktop and mobile (iPhone Chrome, small screen) and it looks good.

cpatulea · 2024-11-30T23:25:34Z

themes/foulab-2018/layouts/_default/baseof.html

-
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/default/default.css" />
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/default/app.css" />
+    <link rel="stylesheet" href="/css/default/default.css">


Hmm, I'm not a Hugo expert, so I did a bit of research what's the idiomatic way to reference assets.

{{ .Site.BaseURL }}/foo is definitely not the idiomatic way, so thanks for fixing it.

I think the idiomatic way is resources.Get + r.RelPermalink, example: https://github.com/luizdepra/hugo-coder/blob/52b14a50f716cb7e69df8d0804f1b68aeec8a08c/layouts/_default/baseof.html#L41

In the short term, it doesn't give us any immediate value. But long-term:

For JS assets, it makes it very easy to enable minification, if we want.

For image assets, resizing

For all asset types, resource integrity

I think it would also make it easier to serve drafts of the site on non-root URLs (eg example.com/foulab-draft/) just by changing a path in a single config file.

what do you think about switching to resources API throughout?

Maybe let's wait for @0x5c to also chime in.

Would it work with a local deployment? A potential developer's workflow could be putting file:///home/user/foulab-dot-org-hugo/public/index.html into the address bar, as of right now it works pretty well with a slight config override.

I've tried a few things and I'm basically running into different problems every time.

The use of a variable as per the github link just doesn't work at all

{{ $script := resources.Get "js/status.js" }} <script src="{{ $script.RelPermalink }}"></script>

This gives me an error about nil pointer evaluating resource.Resource.RelPermalink

I found alternatives for Site.BaseURL that will basically give me the same problem it did. There's something wrong in Hugo itself, because BaseURL as well as urls.absUrl just somehow don't work as expected.

So, for example, with the following code:

<link rel="stylesheet" href="{{ absLangURL "css/default/default.css" }}"> <link rel="stylesheet" href="{{ absLangURL "css/default/app.css" }}">

And running hugo serve -p 3000 I get a proper server running on http://localhost:3000 but the HTML in the head just... don't care.

Running with a --baseURL=https://c0c01e372d48.ngrok.app/ for example, seems to work except that it doesn't, it forcefully appends the port to the end:

And without a port specified, letting the default, I just get a default port like https://c0c01e372d48.ngrok.app:62492/ (not sure when it decided to move away from 1313 but it sure did decide this), and I can't really test whether this would work or not since rebinding ngrok to a different port generates a new address so now I'm sort of stuck with an infinite loop of "not working".

All in all, my point here is that Hugo's system is pretty broken, and honestly, the only situation right now where this would matter would be if the baseURL somehow isn't on the root of the domain. BaseURLs really only matter when you're on some subfolder in a more complex configuration or if you're on a share hosting where you can't be on the root.

Basically, getting frustrated over trying to go around Hugo's broken system just to fix a non-problem isn't how I want to spend my days 🤣

Would it work with a local deployment? A potential developer's workflow could be putting file:///home/user/foulab-dot-org-hugo/public/index.html into the address bar, as of right now it works pretty well with a slight config override.

Using file:// to locally develop isn't a thing we do in 2024. There are many, many trivial ways to start a proper thin local web server on a local machine, from using python's SimpleHTTPServer module, to VSCode's Live Server, to a ton of single-executable light http servers. This is a non-problem.

many trivial ways to start a proper thin local web server on a local machine

Most trivially, considering we already have to use that tool to build the site; hugo serve which does both the site regeneration and serving, with live updates too

It looks though like there might be a bug in hugo or holes in our config/shortcodes; gohugoio/hugo#8896 and related forum thread

layouts/index.html

themes/foulab-2018/layouts/partials/header.html

themes/foulab-2018/layouts/shortcodes/centered-image.html

kryma-foulab · 2024-12-01T00:55:45Z

themes/foulab-2018/layouts/partials/header.html

+    <a href="mailto:[email protected]" title="Mailing List">
+      <img class="icons" src="/img/eml.png" alt="Link to Mailing List">
+    </a>


Is this still active?

Definitely not a question I can personally answer 😓

Looks like it's been there since inception of the Hugo version of the site, 6 years ago:

foulab-dot-org-hugo/themes/foulab-2018/layouts/partials/header.html

Line 19 in 45b7ad8

<a href="mailto:[email protected]" title="Mailing List">

I don't have any tacit knowledge about this, I don't have admin access to that mailing list, if it even still exists.

So I suggest deleting this. Thanks for checking.

Looking on riseup's list server, it seems there's no longer a list with that name. Should be safe to remove

themes/foulab-2018/static/js/status.js

cpatulea · 2024-12-05T03:28:54Z

@0x5c should we wait for you to look at this and weigh in; or [if we iron out all the kinks] you don't mind if we merge without your feedback?

0x5c · 2024-12-05T18:49:48Z

@0x5c should we wait for you to look at this and weigh in; or [if we iron out all the kinks] you don't mind if we merge without your feedback?

I'm getting to it at the moment

0x5c · 2024-12-05T18:46:54Z

.vscode/settings.json

Would be best to avoid commiting local editor-specific configs to a public repo.
It will create conflicts for anyone who has to locally edit theirs

For those settings which are relevant to style, using EditorConfig is the normal way to automatically communicate them to editors. It is supported out of the box by numerous editors, including VSCode

0x5c · 2024-12-05T19:12:07Z

themes/foulab-2018/static/js/shopifydonation.js

Shouldn't be a blocker for merging, but the question of whether or not (and if so, why) shopify is still needed despite having Zeffy now should be raised with the funding/etc people

0x5c · 2024-12-05T19:14:32Z

themes/foulab-2018/static/img/patreon-logo.svg

I recall hearing some time ago that the lab was trying to move away from patreon, something about payment problems and unneeded complexity. Same as the Shopify code, shouldn't be a blocker but should be raised with the funding people.

0x5c · 2024-12-05T20:11:21Z

content/about.md

At least locally, this page is broken with this PR; everything after the video itself is gone from rendered output

0x5c · 2024-12-05T20:35:47Z

themes/foulab-2018/layouts/_default/baseof.html

-
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/default/default.css" />
-    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/default/app.css" />
+    <link rel="stylesheet" href="/css/default/default.css">


many trivial ways to start a proper thin local web server on a local machine

Most trivially, considering we already have to use that tool to build the site; hugo serve which does both the site regeneration and serving, with live updates too

It looks though like there might be a bug in hugo or holes in our config/shortcodes; gohugoio/hugo#8896 and related forum thread

0x5c · 2024-12-05T21:12:07Z

themes/foulab-2018/static/css/default/app.css

+
+#nav {
+  width: 150px;
+  background-color: grey;


This new background colour makes the nav fail even more on the WCAG contrast guidelines for text
Current: 4.6:1
The PR: 3.94:1

0x5c · 2024-12-05T21:18:10Z

themes/foulab-2018/layouts/partials/header.html

+    <a href="mailto:[email protected]" title="Mailing List">
+      <img class="icons" src="/img/eml.png" alt="Link to Mailing List">
+    </a>


Looking on riseup's list server, it seems there's no longer a list with that name. Should be safe to remove

0x5c · 2024-12-05T21:27:55Z

themes/foulab-2018/layouts/partials/navigation.html

On pages with content shorter than the nav, the page layout shinks to fit the exact contents of the nav. It gets a bit claustrophobic

old

new

0x5c · 2024-12-05T21:37:42Z

themes/foulab-2018/static/css/default/app.css

Is there a specific reason that the site has two CSS files, both seemingly applied globally? This setup dates from the start of the hugo-based website, but is there anything obvious that would prevent merging them? (should not be a blocker)

0x5c · 2024-12-05T21:56:01Z

themes/foulab-2018/layouts/_default/baseof.html

With the PR there's a weird glitch with the page/nav/header width, which also deletes the right border of the nav

old

new

cpatulea · 2025-01-10T04:31:38Z

Hey, still planning on working on this?

eslachance added 6 commits November 26, 2024 11:21

Remove base_url which breaks http tunnels

abe7a78

Cleanup image shortcodes

0d70b4c

Cleanup navigation structure and file dependencies

3f4dd7a

Cleanup center elements and video

e554437

Cleanup header, footer, add mattermost link

726c8f9

Consistent indentation, cleanup menu spacing

80343b4

cpatulea requested review from kryma-foulab and 0x5c November 26, 2024 20:32

eslachance added 3 commits November 26, 2024 16:49

Switch to Flex-based Layout

c46afeb

restored the small change in padding on nav menu hover

e411bf4

Fix some w3c validation issues.

44ff807

cpatulea requested changes Nov 30, 2024

View reviewed changes

kryma-foulab reviewed Dec 1, 2024

View reviewed changes

restore inline loadical, remove mattermost, make status load relatively

4bfdcac

0x5c requested changes Dec 5, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Cleanup setup and base css #27

chore: Cleanup setup and base css #27

eslachance commented Nov 26, 2024 •

edited

Loading

cpatulea commented Nov 26, 2024

cpatulea left a comment

cpatulea Nov 30, 2024

kryma-foulab Dec 1, 2024

eslachance Dec 4, 2024

eslachance Dec 4, 2024

0x5c Dec 5, 2024

kryma-foulab Dec 1, 2024

eslachance Dec 2, 2024

cpatulea Dec 3, 2024

0x5c Dec 5, 2024

cpatulea commented Dec 5, 2024

0x5c commented Dec 5, 2024

0x5c Dec 5, 2024 •

edited

Loading

0x5c Dec 5, 2024 •

edited

Loading

0x5c Dec 5, 2024

0x5c Dec 5, 2024

0x5c Dec 5, 2024

0x5c Dec 5, 2024 •

edited

Loading

0x5c Dec 5, 2024

0x5c Dec 5, 2024

0x5c Dec 5, 2024

0x5c Dec 5, 2024 •

edited

Loading

cpatulea commented Jan 10, 2025

chore: Cleanup setup and base css #27

Are you sure you want to change the base?

chore: Cleanup setup and base css #27

Conversation

eslachance commented Nov 26, 2024 • edited Loading

Context

Preview

Screenshot:

Things that were changed:

cpatulea commented Nov 26, 2024

cpatulea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cpatulea commented Dec 5, 2024

0x5c commented Dec 5, 2024

0x5c Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

0x5c Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0x5c Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0x5c Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

cpatulea commented Jan 10, 2025

eslachance commented Nov 26, 2024 •

edited

Loading

0x5c Dec 5, 2024 •

edited

Loading

0x5c Dec 5, 2024 •

edited

Loading

0x5c Dec 5, 2024 •

edited

Loading

0x5c Dec 5, 2024 •

edited

Loading