How To Read Content For A URL And Render To Template

support
1

How can I read its entire contents and render in my partial templates? Specifically:

<style amp-custom>
{{- WhatFunction? "/css/bissetii-amp-1-12-4.min.css" | SafeCSS -}}
</style>

I got a static file hosted in /static directory, with the following relative URL to base URL:

/css/bissetii-amp-1-12-4.min.css

Note:

  1. Need not to worry about the version numbering since there is a data processor handles them seamlessly. For simplicity sake, let’s lock it to 1-12-4.

Reason To Do This:

  1. For deploying AMP styling. AMP prohibits users to link a CSS file externally and must embed the contents inside <style amp-custom> tag.
  2. The generated CSS file is mainly for distributing the AMP CSS codes as it is for deployment outside Hugo and Go. It makes no sense to distribute a .html file since user may concat the CSS with his/her own codes.
  3. I’m working in a theme module that is also a CSS framework.
  4. Makes no sense to store the CSS artifact inside /content relative path as there are other sibling like bissetii-main-1-12-4.min.css that caters normal HTML usage using conventional link tag. All of them are stored systematically inside /static/css directory. Also, the multi-language is enabled by default.
  5. Currently, I’m able to duplicate it into /layout/partials but that means there will be duplicates, with minimum of 2 amp CSS file in the repository, per version release.

I tried ReadFile and apparently, it cannot read upper path (e.g. ../static/css/bissetii-amp-1-12-4.min.css). Also, it is relative to the project level directory and not theme level directory so it is very risky to use ReadFile.

Please help. Thanks in adv.

2

Place your CSS file in assets/css instead of static/css, then:

<style amp-custom>
  {{- $style := resources.Get "css/bissetii-amp-1-12-4.min.css" -}}
  {{- $style.Content | safeCSS -}}
</style>
3

But how do I maintain the css availability in /css/bissetii-amp-1-12-4.min.css as a static file for download?

4

For your AMP pages:

<style>
  {{- $style := resources.Get "css/bissetii-amp-1-12-4.min.css" -}}
  {{- $style.Content | safeCSS -}}
</style>

For your non-AMP pages:

{{- $style := resources.Get "css/bissetii-amp-1-12-4.min.css" -}}
<link rel="stylesheet" href="{{ $style.Permalink }}">
5

@jmooring, thank you. I got the idea now.

Facilitating for Hugo

1st: Place all releases under assets/static/releases directory. Then, on Hugo side, one can do this:

on Hugo technology. This will facilitates the static files as such:

/releases/css/bissetii-amp-1-12-4.min.css

Facilitating Non-Hugo Environment

We can make use of the multi-static pathing in config/_default/config.toml where we include:

staticDir = [ ... , "assets/static" ]

Through this way, the static files remains available while Hugo is able to access all the resources.

Alternatively, one can also do this and it would be the recommended way.

6

A newer way of doing this is with mounts. See:
https://gohugo.io/hugo-modules/configuration/#module-config-mounts

7

Outside of topic:

  1. is this the new direction?
  2. will the existing multi static directory be deprecated somewhere in the future?
8

is this the new direction?

See https://gohugo.io/news/0.56.0-relnotes/. “This is the new recommended way of configuring what you earlier put in configDir, staticDir etc.”

will the existing multi static directory be deprecated somewhere in the future?

I have no idea. There are not any related open issues on GitHub.

9

Noted. Will explore somewhere in Q4 2020. This feature is useful for both Hugo sites and theme module hosted in same repository (the first patient: data/ directory).

For now, I will keep the solution first (mainly because I tested it).