👷🏼‍♂️ Added more custom options

Alexander Bilz

17.33.2020 43c00a38685cc0f10f083a0a150c5ee65c2fb84a

👷🏼‍♂️ Added more custom options

- Added option for custom Javascript (Closes #39 )
- Changed handling of custom CSS files to be inline with JavaScript

 README.md

@@ -22,6 +22,7 @@
- MIT License
- Fontawesome icons
- Custom CSS (optional)
- Custom JavaScript (optional)
- Medium like zoom for images
- Compliant to strict CSP
- Uses Hugo pipes to process assets
@@ -120,11 +121,34 @@


### Custom CSS
You can add your custom CSS files with the `customCss` parameter of the configuration file. Put your files into the `static/css` directory.
You can add your custom CSS files with the `customCss` parameter of the configuration file. Put your files into the `assets/css` directory.

```toml
customCss = ["css/custom1.css", "css/custom2.css"]
customCss = ["css/custom.css", "css/styles.css"]
```
On the user-side it will look like this:
```text
.
└── assets
    └── css
        ├── custom.css
        └── styles.css
```
### Custom JavaScript
You can add your custom JS files with the `customJs` parameter of the configuration file. Put your files into the `assets/js` directory.
```toml
[params]
customJs = ["js/hello.js", "js/world.js"]
```
On the user-side it will look like this:
```text
.
└── assets
    └── js
        ├── hello.js
        └── world.js
```
`hello.js` and `world.js` will be bundled into a `custom.min.js`.

### Content Security Policy
The theme is compliant with most strict CSP policies out of the box. A sample CSP for an Anatole-based site would look something like this:

 exampleSite/config.toml

@@ -21,6 +21,7 @@
keywords = ""
favicon = "favicons/"
customCss = []
customJs = []
mainSections = ["post"]
images = ["images/site-feature-image.png"]


 layouts/partials/head.html

@@ -6,9 +6,11 @@
    <meta name="description" content="{{ .Site.Params.description }}">
    {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" type="text/css">
    {{ range .Site.Params.customCss -}}
    <link rel="stylesheet" href="{{ . | absURL }}" type="text/css">
    {{- end }}
    {{- $css := "" -}}
    {{- range .Site.Params.customCss -}}
    {{ $css := resources.Get . | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous" type="text/css">
    {{- end -}}
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Favicons -->
    <link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}favicon.ico" type="image/x-icon">
@@ -22,5 +24,25 @@
    {{ $anatole := resources.Get "js/anatole-header.js" }}
    {{ $secureJS := $anatole |  resources.Minify | resources.Fingerprint }}
    <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}" crossorigin="anonymous"></script>
    
    
    {{- $js := "" -}}
    {{- range .Site.Params.customJs -}}
      {{- $customJS := resources.Get . -}}
      {{- if $customJS -}}
        {{- if eq $js "" -}}
          {{- $js = $customJS -}}
        {{- else -}}
          {{- $js = slice $js $customJS | resources.Concat "js/custom.js" -}}
        {{- end -}}
      {{- end -}}
    {{- end -}}
    
    {{- if ne $js "" -}}
    {{- $secureJS := $js |  resources.Minify | resources.Fingerprint -}}
    <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}" crossorigin="anonymous"></script>
    {{- end -}}

    <!-- Twitter Cards -->
    {{ template "_internal/twitter_cards.html" . }}
</head>