Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Cleanup setup and base css #27

Open
wants to merge 10 commits into
base: production
Choose a base branch
from
4 changes: 4 additions & 0 deletions .vscode/settings.json
Copy link
Contributor

@0x5c 0x5c Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"editor.tabSize": 2,
"editor.detectIndentation": false
}
3 changes: 1 addition & 2 deletions content/about.md
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Watch this short documentary film [_Repurpose_](https://www.youtube.com/watch?v=

We were also featured in a <a href="https://www.tiktok.com/@radpointca/video/7349272602185059590" target="_blank">short Radio-Canada segment from March 2024</a>:

<center><video src="/media/video/about/radpointca-foulab-2024.mp4" controls="1" height="400"></video></center>
{{< centered-video src="radpointca-foulab-2024.mp4" controls="1" height="400" disableautoplay="1" >}}

<br/>

Expand Down Expand Up @@ -94,4 +94,3 @@ Don’t forget that to err is human. Blaming each other doesn’t get us anywher
<p><strong>Any Foulab member may address and deal with any issue at their own discretion with input from the community.</strong></p>
</li>
</ul>

15 changes: 6 additions & 9 deletions layouts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,24 @@
{{ partial "article.html" . }}
{{ end }}

<a href="./news/">» See all articles</a>
<a href="./news/"><span style="font-size: 1.5em;">»</span> See all articles</a>

<script>
eslachance marked this conversation as resolved.
Show resolved Hide resolved
(function () {
<script type="text/javascript">
const icaldebug = (new URLSearchParams(location.search)).get('icaldebug') != null;

// JSON-LD is only useful to Google crawler, so save some resources (network
// + CPU) for real users.
//
// https://developers.google.com/search/docs/crawling-indexing/overview-google-crawlers
if (navigator.userAgent.indexOf('Google') != -1 || icaldebug) {
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('DOMContentLoaded', function () {
let script = document.createElement('script');
script.src = window.baseRoot + '/js/ical2jsonld.js';
script.src = '/js/ical2jsonld.js';
script.addEventListener('load', function () {
ical2jsonld();
ical2jsonld();
});
document.body.appendChild(script);
});
});
}
})();
</script>

{{ end }}
4 changes: 1 addition & 3 deletions themes/foulab-2018/layouts/404.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,5 @@
<b>foulab.org</b> /// <b>3Rr0|2</b> // <b>.type[ 404 ]</b> /~.*
{{ end }}
{{ define "main" }}
<center>
<img src="{{ .Site.BaseURL }}/img/foubot.png">
</center>
<img src="/img/foubot.png" style="display: block; margin: 0 auto;" alt="The Foubot cannot find your page">
{{ end }}
4 changes: 1 addition & 3 deletions themes/foulab-2018/layouts/502.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,5 @@
CountDown();
/*]]>*/ </script>
<meta http-equiv="refresh" content="10" />
<center>
<img src="{{ .Site.BaseURL }}/img/foubot.png">
</center>
<img src="/img/foubot.png" style="display: block; margin: 0 auto;" alt="The Foubot can't seem to parse this page">
{{ end }}
85 changes: 26 additions & 59 deletions themes/foulab-2018/layouts/_default/baseof.html
Copy link
Contributor

@0x5c 0x5c Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

old
image

new
image

Original file line number Diff line number Diff line change
@@ -1,73 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ block "title" . }}{{ default .GitInfo.Subject .Title | default "Welcome to Foulab! - foulab.org" }}{{ end }}</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
image

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:
image

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 🤣

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

<link rel="shortcut icon" href="{{ .Site.BaseURL }}/favicon.ico" type="image/vnd.microsoft.icon" />
<meta property="og:image" content="{{ .Site.BaseURL }}/img/logo.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1124" />
<meta property="og:image:height" content="1126" />

<script type="text/javascript" >
window.baseRoot = {{ .Site.BaseURL | safeHTML }};
</script>
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/status.js"></script>
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/sparkles/twgl-full.min.js"></script>
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/sparkles/static.js"></script>
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/sparkles/clouds.js"></script>
<script type="text/javascript" src="{{ .Site.BaseURL }}/js/sparkles/init.js" defer></script>
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<meta property="og:image" content="/img/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1124">
<meta property="og:image:height" content="1126">
<script type="module" src="/js/status.js"></script>
<script src="/js/sparkles/twgl-full.min.js"></script>
<script src="/js/sparkles/static.js"></script>
<script src="/js/sparkles/clouds.js"></script>
<script src="/js/sparkles/init.js" defer></script>
</head>

<body>
<canvas id="gl_canvas_bg"></canvas>

<div class="wrapper">
{{ block "header" . }}
<div id="main">
{{ partial "header.html" . }}
{{ end }}
<div class="contentwrapper">

<div class="content">
<div class="content-headline">
{{ block "headline" .}}<b>{{ index .Params "topic" | default "foulab.org" }}</b> / {{ index .Params "headline" | default "Welcome to Foulab!" }}{{ end }}
</div>

{{ block "main" . }}

{{ end }}
</div>

{{ partial "navigation.html" . }}

<div id="content-wrapper">
<div id="content">
<div class="content-headline">
{{ block "headline" .}}<b>{{ index .Params "topic" | default "foulab.org" }}</b> / {{ index .Params "headline" | default "Welcome to Foulab!" }}{{ end }}
</div>
{{ block "main" . }}{{ end }}
</div>
{{ partial "navigation.html" . }}
</div>
{{ block "footer" . }}
<div class="footer">
<a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Transitional">
<img src="{{ .Site.BaseURL }}/img/valid_xhtml10_80x15.png" alt="Valid XHTML 1.0 Transitional" />
</a>
<a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS">
<img src="{{ .Site.BaseURL }}/img/valid_css_80x15.png" alt="Valid CSS" />
</a>
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
<img src="{{ .Site.BaseURL }}/img/valid_wai-a_80x15.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" />
</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" title="Creative Commons Non-commercial License with Attribution 3.0">
<img src="{{ .Site.BaseURL }}/img/license_cc_80x15.png" alt="Creative Commons Non-commercial License with Attribution 3.0" />
</a>
<img src="{{ .Site.BaseURL }}/img/madeinquebec_80x15.png" alt="Made in Quebec" title="Made in Quebec" />

<br />
Except where otherwise noted, content on this site is licensed under a Creative Commons Non-Commercial with Attribution 3.0 License.&nbsp;
<a href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Non-commercial Attribution 3.0 License</a>
</div>
{{ partial "footer.html" . }}
</div>
{{ partial "wisdom.html" . }}
{{ end }}

</body>
</html>
19 changes: 8 additions & 11 deletions themes/foulab-2018/layouts/partials/article.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
<ntitle>
<a href="{{ .Permalink }}">
{{ default .GitInfo.Subject .Title }}
</a>
</ntitle>
<br/>
<ntrace>by [{{ default .GitInfo.AuthorName .Params.author_name }}] @ {{ .Lastmod.Format "2006-01-02 15:04:05 -0700" }}</ntrace>

<hr /><br />
<div style="display: flex; flex-direction: column; gap: 2px; margin-bottom: 2em; border-bottom: 1px solid #4a4a4a; padding-bottom: 0.5em;">
<span class="ntitle">
<a href="{{ .Permalink }}">
{{ default .GitInfo.Subject .Title }}
</a>
</span>
<span class="ntrace">by [{{ default .GitInfo.AuthorName .Params.author_name }}] @ {{ .Lastmod.Format "2006-01-02 15:04:05 -0700" }}</span>
</div>

{{ .Content }}

<br style="clear: both;" />
37 changes: 14 additions & 23 deletions themes/foulab-2018/layouts/partials/footer.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,14 @@
<div class="footer">
<a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Transitional">
<img src="https://foulab.org/images/badges/valid_xhtml10_80x15.png" alt="Valid XHTML 1.0 Transitional" />
</a>
<a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS">
<img src="https://foulab.org/images/badges/valid_css_80x15.png" alt="Valid CSS" />
</a>
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
<img src="https://foulab.org/images/badges/valid_wai-a_80x15.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" />
</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" title="Creative Commons Non-commercial License with Attribution 3.0">
<img src="https://foulab.org/images/badges/license_cc_80x15.png" alt="Creative Commons Non-commercial License with Attribution 3.0" />
</a>
<img src="https://foulab.org/images/badges/madeinquebec_80x15.png" alt="Made in Quebec" title="Made in Quebec" />

<br />
Except where otherwise noted, content on this site is licensed under a Creative Commons Non-Commercial with Attribution 3.0 License.&nbsp;
<a href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Non-commercial Attribution 3.0 License</a>
</div>
</div>
{{ partial "wisdom.html" . }}
</body>
</html>
<div id="footer">
<a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS">
<img src="/img/valid_css_80x15.png" alt="Valid CSS">
</a>
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
<img src="/img/valid_wai-a_80x15.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
</a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" title="Creative Commons Non-commercial License with Attribution 3.0">
<img src="/img/license_cc_80x15.png" alt="Creative Commons Non-commercial License with Attribution 3.0">
</a>
<img src="/img/madeinquebec_80x15.png" alt="Made in Quebec" title="Made in Quebec">
<div>Except where otherwise noted, content on this site is licensed under a Creative Commons Non-Commercial with Attribution 3.0 License.&nbsp;
<a href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Non-commercial Attribution 3.0 License</a></div>
</div>
63 changes: 31 additions & 32 deletions themes/foulab-2018/layouts/partials/header.html
Original file line number Diff line number Diff line change
@@ -1,39 +1,38 @@
<div class="header">
<canvas id="gl_canvas"></canvas>
<div id="header">
<canvas id="gl_canvas"></canvas>

<div id="status">
STATUS
<span style="font-size:8px;font-family:monospace;white-space:pre;">
<div id="status">
STATUS
<span style="font-size:8px;font-family:monospace;white-space:pre;">
██████ ██████ ███████ ███ ██
██ ██ ██ ██ ██ ████ ██
██ ██ ██████ █████ ██ ██ ██
██ ██ ██ ██ ██ ██ ██
██████ ██ ███████ ██ ████
</span>
</div>
</span>
</div>

<div class="tinybar">

<a href="https://github.com/FOULAB" title="Foulab GitHub">
<img id="icons" src="{{ .Site.BaseURL }}/img/git.png"/>
</a>
<a href="https://web.libera.chat/?channels=#foulab" title="IRC Webchat">
<img id="icons" src="{{ .Site.BaseURL }}/img/irc.png"/>
</a>
<a href="https://twitter.com/foulab" title="Twitter">
<img id="icons" src="{{ .Site.BaseURL }}/img/twt.png"/>
</a>
<a href="{{ .Site.BaseURL }}/news/index.xml" title="RSS Feed">
<img id="icons" src="{{ .Site.BaseURL }}/img/rss.png"/>
</a>
<a href="mailto:[email protected]" title="Mailing List">
<img id="icons" src="{{ .Site.BaseURL }}/img/eml.png"/>
</a>
<a href="https://www.facebook.com/groups/144161830009" title="Facebook Group">
<img id="icons" src="{{ .Site.BaseURL }}/img/fb.png"/>
</a>

</div>

</div>

<div class="tinybar">

<a href="https://github.com/FOULAB" title="Foulab GitHub">
<img class="icons" src="/img/git.png" alt="Link to Foulab GitHub">
</a>
<a href="https://web.libera.chat/?channels=#foulab" title="IRC Webchat">
<img class="icons" src="/img/irc.png" alt="Link to IRC Webchat">
</a>
<a href="https://twitter.com/foulab" title="Twitter">
<img class="icons" src="/img/twt.png" alt="Link to Twitter">
</a>
<a href="/news/index.xml" title="RSS Feed">
<img class="icons" src="/img/rss.png" alt="Link to RSS Feed">
</a>
<a href="mailto:[email protected]" title="Mailing List">
<img class="icons" src="/img/eml.png" alt="Link to Mailing List">
</a>
Comment on lines +29 to +31
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this still active?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely not a question I can personally answer 😓

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<a href="https://www.facebook.com/groups/144161830009" title="Facebook Group">
<img class="icons" src="/img/fb.png" alt="Link to Facebook Group">
</a>

</div>

</div>
Loading