Import a Markdownfile with external links in Hugo

[Joerg]

I would like to insert the automatically created CHANGELOG.md in /content/en/changelog.md. This works so far, only the horizontal line in the h2 header is not imported. On the other pages, this line is also not displayed in the h1 header and h2 header. I would like the CHANGELOG.md, which is located in the root directory, to be displayed with the horizontal line. Can the line be inserted into the page via the frontmatter? What should the shortcode include.html look like?

2nd question: The Hugo website will run on GitLab Pages. The links work fine in Gitlab itself. The links in the /content/en/changelog.md have to be rewritten.

Here is an urlPatternCommit = 'https://gitlab.com/%s/%s/commit/%s' from @jomooring. This could be an idea?

## 0.0.1 (2024-05-30)

### FIX: Delete CHANGELOG.md (1 change)

- [FIX: Delete CHANGELOG.md](username/developer@5934b6c87abb7e84b50ad7c38f78b48e7b4391a4)

The link should be overwritten from:

- [FIX: Delete CHANGELOG.md](username/developer@5934b6c87abb7e84b50ad7c38f78b48e7b4391a4)
to
https://gitlab.com/username/developer/-/commit/5934b6c87abb7e84b50ad7c38f78b48e7b4391a4

/shortcodes/include.html

{{ $file := .Get 0 }}
{{ $file | readFile | safeHTML }}

in content/en/copyright.md

---
title: "Changelog"
params:
  disableGitLabEditLink: true
description: "Changelog"
draft: false
slug: changelog
menu:
    main:
        weight: 2
---

{{< row >}}
{{< column col-md-12 >}}
{{< include "CHANGELOG.md" >}}
{{< /column >}}
{{< /row >}}

gitlab-ci.yml

stages:
  - prepare
  - release

prepare_job:
  stage: prepare
  rules:
  - if: '$CI_COMMIT_TAG =~ /^v?\d+\.\d+\.\d+$/'
  script:
    - 'curl -H "PRIVATE-TOKEN: $CI_API_TOKEN" "$CI_API_V4_URL/projects/$CI_PROJECT_ID/repository/changelog?version=$CI_COMMIT_TAG" | jq -r .notes > release_notes.md'
    - 'curl -H "PRIVATE-TOKEN: $CI_API_TOKEN" -X POST "$CI_API_V4_URL/projects/$CI_PROJECT_ID/repository/changelog?version=$CI_COMMIT_TAG"'
    - cat release_notes.md
  artifacts:
    paths:
    - release_notes.md

release_job:
  stage: release
  image: registry.gitlab.com/gitlab-org/release-cli:latest
  needs:
    - job: prepare_job
      artifacts: true
  rules:
  - if: '$CI_COMMIT_TAG =~ /^v?\d+\.\d+\.\d+$/'
  script:
    - echo "Creating release"
  release:
    name: 'Release $CI_COMMIT_TAG'
    description: release_notes.md
    tag_name: '$CI_COMMIT_TAG'
    ref: '$CI_COMMIT_SHA'
    assets:
      links:
        - name: 'Container Image $CI_COMMIT_TAG'
          url: "https://$CI_REGISTRY_IMAGE/$CI_COMMIT_REF_SLUG:$CI_COMMIT_SHA"

[chrillek]

I doubt that the MD file contains a horizontal line at all.

Use CSS for styling, perhaps setting an appropriate border-bottom property for your headings.

[Joerg]

Markdown automatically creates a horizontal line for h1 and h2 headers. Hugo does not display this line. I only want this line to be displayed in /content/en/changelog.md.

Here is the original file from GitLab.

Here is the file after the import into Hugo:

[chrillek]

That is not an „original“ MD file. It’s rendered as HTML. Which is styled using CSS.

Have a look at the MD source.

Also, Hugo does not display markdown. It converts it to HTML. Which is then styled with CSS.

[irkode]

I would guess the md file contains a hr tag and your final html has a comment inside “raw html omitted”

More details here:

Raw HTML Omitted in templates

I just found this code that I am adapting for my summaries. When I add the code below to it, I get raw HTML Omitted message where  should be. How can this be rectified? | replaceRE `(\d+)\^(st|nd|rd|th)` "$1^$2"

[irkode]

For the link you might need to implement your own link render hook taking care of the gitlab links

Link render hooks

[chrillek]

Well, that’s a possibility. But the OP doesn’t show us the source. What I found online (angular/CHANGELOG.md at main · angular/angular · GitHub) certainly does not include a hr element.

And there’s the minimum CSS here

sindresorhus/github-markdown-css/blob/main/github-markdown.css

which uses a border-bottom. It’s all about CSS.

[Joerg]

I have added the source code. I don’t know how to include the <hr> in the shortcodes. I have added the source code. I don’t know how to include the <hr> in the shortcodes.

[chrillek]

I told you already. There is no hr element. Nowhere. Use CSS and border-bottom.

And this is not related to Hugo, not even remotely. There are tons of sources on the Net regarding HTML and CSS.

[Joerg]

Here is my css. Now all h2 headings have a line. That is not what I want. I only want the changelog file to have the new h2 heading. How do I do this correctly?

h2 {
	font-size: 1.5em;
	font-weight: 600;
	margin: 24px 0 16px;
	padding-bottom: .3em;
	border-bottom: 1px solid #bfbfc3;
	color: #333238;
}

[chrillek]

That’s still not on-topic here.

[Joerg]

It’s a real shame that you don’t want to answer what you consider to be a simple question.

[chrillek]

I don’t want to diene any more time on your problem, which is still not on-topic here. That’s all.

[jmooring]

You can use markdown attributes.

main.css

.bb {
  border-bottom: 1px solid #bfbfc3;
}

markdown

## Section 1

foo

## Section 2 {.bb}

bar

The second h2 element will have a bottom border.

If you can’t modify the file, you’ll have to add a class to the body element in order to target the page with a CSS selector. Something like…

{{ $classes := printf "type-%s kind-%s path-%s" .Type .Kind (anchorize .Path) }}
<body class="{{ $classes }}">

When you view http://localhost:1313/foo/changelog/ it looks like:

<body class="type-foo kind-page path-foochangelog">

Then in your CSS you can do this:

.path-foochangelog h2 {
  border-bottom: 1px solid #bfbfc3;
}

Obvioulsy, this will break if you later decide to move or rename the changelog file.

[Joerg]

Thank you for your help. Great solution.