Force Partial to respect document indentation

support
1

Long shot this one, but I’ll give it a try. I’m using Hugo to build a snippet / component library. So far this is working great, but one thing that is really bugging me is that partials don’t seem to respect indentitation. This is messing things up for me.

Project structure example

  • content/blocks/pagetitle.html
  • content/pages/layouts/example.html

In a page content type I reference the content of a block content type. I’m doing this with a simple shortcode named file.

shortcode - file.html

{{- $code := .Get "code" -}}{{ $site := $.Site }}{{ with site.GetPage ( $code )}}{{ .Content }}{{ end }}

page content type - example.html

<main class="flex flex-col min-h-screen bg-gray-100">
  <header class="shadow-sm shadow-gray-200">
    {{< file code="blocks/pagetitle.html" >}}
  </header>
  <div class="flex flex-row flex-1 w-full px-6 py-8 mx-auto xl:px-12">
    <div class="flex items-center justify-center w-full px-4 border-4 border-dotted">
     ........
    </div>
  </div>
</main>

block content type - pagetitle.html

---
title: Page title block
layout: full
---
<div class="flex justify-end px-6 py-3 bg-white border-b border-gray-200 sm:justify-between xl:px-12">
  <div class="flex items-center flex-1 space-x-2">
   ......
  </div>
</div>

This is resulting in the following output for example.html. I present this in a highlight code snippet block that people can easily copy and paste.

<main class="flex flex-col min-h-screen bg-gray-100">
  <header class="shadow-sm shadow-gray-200">
    <div class="flex justify-end px-6 py-3 bg-white border-b border-gray-200 sm:justify-between xl:px-12">
  <div class="flex items-center flex-1 space-x-2">
    ....

Notice that the latest div is not properly indented. This is ofcourse not a nice experience when you copy this snippet into your project. Is there any approach to fix this behaviour?

2

This has been proposed and asked often. It’s basically impossible :wink: The partial/shortcode does not know what the indention was when it is called. If you KNOW that it’s 4 spaces then put those 4 spaces everywhere in your partial and it might work out well.

The only way I know how you can do that would be a script that runs AFTER hugo and reformats all HTML files in public/.

Maybe something could be done in your specific use case, but not without knowing how shortcodes/file.html looks like. You could add a parameter to the shortcode with an integer that adds some spaces?

3

There’s a related issue already open, though it’s focused on the highlight shortcode. But the problem regarding the use of a shortcode and indentation is the same.

It’s a looo…oong thread. So here are links to the two solutions so far.

I have been using that first solution for few years now.

2 Likes
4

Not impossible then :tada: I stand corrected.

5

Thank you all for your reactions. The provided options doesn’t seem to work for my specific case.

I’m willing to pay $500 to whoever has the solution to this problem.

6

Whoever gets those $500, please post your solution here :wink:

1 Like
7

@frankspin89 post in the “Services” section. Someone might help.

1 Like
8

For anyone intressed in the sollution. Thanks to @jmooring!

{{- with site.GetPage (.Get "code") -}}
  {{- $content := strings.ReplaceRE `\r` "" .Content -}}
  {{- $content = strings.Trim $content "\n" -}}
  {{- $contentLines := strings.Split $content "\n" -}}
  {{- $paddedContentLines := slice -}}
  {{- $offset := sub $.Position.ColumnNumber 1 -}}
  {{- range $k, $v := $contentLines -}}
    {{- if $k -}}
      {{- $paddedContentLines = $paddedContentLines | append (print (strings.Repeat $offset " ") $v) -}}
    {{- else -}}
      {{- $paddedContentLines = $paddedContentLines | append $v -}}
    {{- end -}}
  {{- end -}}
  {{- $newContent := delimit $paddedContentLines "\n" -}}
  {{- $newContent | safeHTML -}}
{{- end -}}
5 Likes
9

And if you are wondering why I needed this :point_down:

Frank Spin on Twitter: “:fire:I made it work :white_check_mark: Correct indentation :white_check_mark: Source code viewing with highlighting :white_check_mark: Resize previews :white_check_mark: Split up design in separate components :white_check_mark: Copy source code to clipboard :white_check_mark: No performance issues Finally, back to creating more awesome designs. https://t.co/Nes0r5BZtq” / Twitter

2 Likes
10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.