Help:Shortcode Download

Let users download a file.

Download
Shortcode
Description
TypeHTML Shortcode
Nested?false
Shortcodedownload
Return TypeHTML
Short Description
Display a download box with metadata information, such as as a title, the file size and checksums in md5, sha1 and sha256.
Development
MaintainerMichael Sasser

To allow a user to download a file, you need to create a file either the directory, your page is located (make sure you create a page bundle) or anywhere else in project, relative to the project root. If you create the file in the static directory, for example ./static/favicon.svg, the path parameter must be prefixed with an /, followed by relative path from there, and the file name. The path in this case would be /static/favicon.svg. If the file your_file.py is in your page bundle, which might look like this one, where your page is index.md:

# tree of ./content/en/docs/contributing/
...
├── contributing/
│   ├── shortcodes/
│   │   ├── index.md
│   │   └── hello_world.py
│   └── _index.md
└── _index.md

you would use the path your_file.py. To give the file a title, use the title parameter.

The file size and checksums are created automatically for you.

Filetypes

When you want to commit a big or non human readable file, like a binary, which wouldn’t typically committed with git, you must ensure the file is tracked by git-lfs instead of git. To do that, use git lfs track "*.ytd".

To see, which file extensions are currently tracked by git-lfs run git lfs track.

Parameters

The download shortcode has the following parameters:

ParameterOptionalDescription
pathNoThe path to the file, either relative from your page bundle or with the /-prefix relative to the project root
titleYesAn optional title for the file

Examples

<!-- Without title and a path relative to the project roots static directory -->

{{< download path="/static/favicon.svg" >}}

<!-- Same as the first, but with a title -->

{{< download title="Our Favicon" path="/static/favicon.svg" >}}

<!-- With a title and relative to the page-bundle -->

{{< download title="Page-Bundle Example" path="hello_world.py" >}}
Rendered
  • favicon.svg
    favicon.svg3.10 KB
  • md5   c6bacfc3903ea1e93f16cc29b025faa9
  • sha1   6fd247916a0f11ebe062adcb621d5d42fa5bc1a7
  • sha256   0bf3b2a1f379a2612f47c7d367b6f2fdbe06193bb17a0d0e49c57d75099c1f68
  • Our Favicon
    favicon.svg3.10 KB
  • md5   c6bacfc3903ea1e93f16cc29b025faa9
  • sha1   6fd247916a0f11ebe062adcb621d5d42fa5bc1a7
  • sha256   0bf3b2a1f379a2612f47c7d367b6f2fdbe06193bb17a0d0e49c57d75099c1f68
  • Page-Bundle Example
    hello_world.py140.00 Bytes
  • md5   73f5000f64fd2b9ed0b8f54abc597962
  • sha1   694588cf1ad9ff1d4f54612494d0cb00c921a1d9
  • sha256   062431dde51ef71353dd6a01f7f63410680ed063044a5299c469afea74ef37c4

Code

Below you find the implementation of the shortcode.

HTML

Defined in: /layouts/shortcodes/download.html

This code is licensed under the MIT license.
<!-- 

  Download Shortcode 
  ==================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/download.html
  STYLE:  /assets/scss/components/_shortcode_download.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Download/index.md

  Description
  -----------

  Use the download shortcode to display a download box with metadata
  information, such as as a title, the file size and checksums in md5, sha1 
  and sha256.

  Changelog
  =========

  Version 1
  ---------

  Initial release

-->

{{ $path := .Get "path"}}     <!-- Mandatory parameter -->
{{ $title := .Get "title" }}  <!-- Optional parameter -->

<!-- The quantities used to calculate the value and quantity of the file size 

The quantitis are starting with Bytes (which is already in quantity).
-->
{{ $quantities := slice "KB" "MB" "GB" "TB" "PB" "EB" "ZB" }}
{{ $quantity := "Bytes" }}

<!-- Check if resource is in <project_root>/static/.

Resources, by definition, are in <project_root>/ when their path
starts with /
-->
{{ $static := false }}
{{ if hasPrefix $path "/" }}
  {{ $static = true }}
{{ end }}

<!-- Create the full_path.

The full_path is the path to the resource before compiling the project.
This means, it is the path, used by the compiler, and not the rendered 
website.
-->
{{ $full_path := "" }}
{{ if $path }}
  {{ if $static }}
    {{ $full_path = $path }}
  {{ else }}
    {{ $full_path = (path.Join (path.Dir .Page.File.Path) $path) }}
  {{ end }}
{{ else }}
{{ end }}

{{ with os.FileExists $full_path }}


  <!-- 
      Download static files from GitLab directly, as they don't exist in
      the compiled version of the website.
  -->
  {{- $vcs_path := $path -}}

  {{- $parts := slice $.Site.Params.docsRepo -}}

  <!-- TODO: Add other VCS providers -->
  {{- if (eq $.Site.Params.repoHost "GitLab") -}}
    {{- $parts = $parts | append "-/raw" $.Site.Params.docsRepoBranch -}}
  {{- end -}}

  {{- if isset $.Site.Params "docsreposubpath" -}}
    {{- if not (eq $.Site.Params.docsRepoSubPath "") -}}
      {{- $parts = $parts | append $.Site.Params.docsRepoSubPath -}}
    {{- end -}}
  {{- end -}}

  {{- $parts = $parts | append $vcs_path "?inline=false" -}}

  {{- $url := delimit $parts "/" -}}

  {{ $url := replace $url "//" "/" }}
  {{ $url := replace $url "https:/" "https://" }}
  <!-- --- -->

  {{ $file_stats := os.Stat $full_path }}
  {{ $file_size := float $file_stats.Size }}
  {{ $file_content := readFile $full_path }}

  <ul class="download list-group py-4">
    <!-- Download "button" -->
    <li class="list-group-item d-flex justify-content-between align-items-center active" aria-current="true">

      <div class="align-middle mb-1 py-2">
        <i class="px-2 fa fa-download fa-lg" aria-hidden="true"></i>
        <!-- Use title if title exists, else use file name -->
        {{ if $title }}
            {{ $title }}
        {{ else }}
            {{ $file_stats.Name }}
        {{ end }}
    <a href="{{ if $static }}{{ $url | relURL }}{{ else }}{{ $full_path | relURL }}{{ end }}" target="_blank"  rel="noopener" class="stretched-link"></a>
      </div>
      <small>
        <!-- Calculate the value and quantity of the file size -->
        {{ range $quantities }}
           {{ if lt (float $file_size) 1000.0 }}
             {{ break }}
           {{ else }}
             {{ $file_size = div (float $file_size) 1000.0 }}
           {{ end }}
           {{ $quantity = . }}
        {{ end }}
        <!-- print file name and file size with quantity -->
        <span class="px-1">{{ $file_stats.Name }}</span> &VerticalSeparator; <span class="px-1">{{ printf "%.2f %s" (float (string $file_size)) $quantity }}</span>
      </small>
    </li>
    <!-- Checksums -->
    <li class="download-data list-group-item d-flex justify-content-between align-items-center">
      <small><span class="badge bg-primary rounded-pill">md5</span></small> &nbsp;
      <small class="text-break">{{ md5 $file_content }}</small>
    </li>
    <li class="download-data list-group-item d-flex justify-content-between align-items-center">
      <small><span class="badge bg-primary rounded-pill">sha1</span></small> &nbsp;
      <small class="text-break">{{ sha1 $file_content }}</small>
    </li>
    <li class="download-data list-group-item d-flex justify-content-between align-items-center">
      <small><span class="badge bg-primary rounded-pill">sha256</span></small> &nbsp;
      <small class="text-break">{{ sha256 $file_content }}</small>
    </li>
  </ul>
{{ else }}
    {{ errorf "Failed to process download shortcode: %s. %s does not exist in \"%s\"." $.Position $path . }}
{{ end }}

Download

Copy the source code above or use the download link below to use this file on your website according to the license.

  • Download Shortcode
    download.html4.74 KB
  • md5   eb3040f0b9ffe9567e9340698ecd2d53
  • sha1   36f68b0208b8c273a0e41827a2204feee1cd9b82
  • sha256   951e54afc0f8a02fa78adbff95072f5b2ced44d9c71602371f76973dca37fcb9

SASS

Defined in: /assets/scss/components/_shortcode_download.scss

This code is licensed under the MIT license.
/*

  Download Shortcode
  ==================

  Contributors: Michael Sasser
  Maintainer: Michael Sasser
  License: MIT
  Version: 1
  Child Shortcodes: None
  Parent Shortcodes: None

  LAYOUT: /layouts/shortcodes/download.html
  STYLE:  /assets/scss/components/_shortcode_download.scss
  DOCS:   /content/<language>/wiki/Help:Shortcode_Download/index.md

*/

@include color-mode(dark) {
  .download .download-data {
    background-color: $body-bg-dark;
    color: $body-color-dark;
    border-color: $border-dark;
  }
}

Download

Copy the source code above or use the download link below to use this file on your website according to the license.

  • Download Style
    _shortcode_download.scss524.00 Bytes
  • md5   b6ef02be7184727d7f102dea8596367f
  • sha1   f407feb6c121edff872cfa1242ae4176dd2c3e18
  • sha256   e0a134779c3a71f95fc70d4165095ad7074223abd2e760974d859eee39f09e07
Top