added crossorigin anonymous, resizing for large images, and ko-fi button

README.md

@@ -27,6 +27,28 @@ git clone https://github.com/kimcc/hugo-theme-noteworthy.git themes/noteworthy
 
 Refer to the [Hugo docs](https://gohugo.io/getting-started/quick-start/) for more information.
 
+## Image shortcode for large images
+
+To add images using the resize-image shortcode included with this theme, you will need to create a [Post Bundle](https://gohugo.io/content-management/organization/#page-bundles). Create a folder for your post, put your Markdown file and images inside, and rename your Markdown file `index.md`. For example: 
+
+```
+my-new-post
+- index.md
+- image1.jpg
+- image2.png
+```
+
+Then, you can add an image within your Markdown file by using the shortcode like thist:
+
+```
+{{< resize-image src="image1.jpg" alt="My first image" >}}
+```
+
+Add captions like this: 
+
+```
+{{< resize-image src="image2.png" alt="My second image" caption="My caption" >}}
+```
 
 ## Social media accounts
 
@@ -77,6 +99,17 @@ disqusShortname = ""
 googleAnalytics = "" 
 ```
 
+## Ko-fi donation button
+
+If you'd like to enable a Ko-fi button on your posts, enable it in the config file and add your identifier.
+
+```
+# Set enableKofi to true to enable the Ko-fi support button. Add your Ko-fi
+ID to link to your account.
+enableKofi = true
+kofi = ""
+```
+
 
 ## License
 

assets/css/main.scss

@@ -323,6 +323,15 @@ nav {
     flex: 1 0 auto;
 }
 
+.article-figure {
+    margin: 0 0 1em;
+}
+
+.article-image {
+    max-width: 100%;
+    margin: 0 0 1em;
+}
+
 .canon {
     width: 100%;
     height: auto;
@@ -384,6 +393,10 @@ nav {
 }
 
 // ARTICLE FOOTER
+.kofi-button {
+    margin: 0.75em 0em 0.5em 0em;
+}
+
 .post-footer {
     font-size: 0.95rem;
     color: $gray-light;

exampleSite/config.toml

@@ -27,6 +27,10 @@ disqusShortname = ""
 	# Blog description at the top of the homepage. Supports markdown.
 	description = "Noteworthy is a minimalist Hugo theme, perfect for writers and bloggers."
 
+    # Set enableKofi to true to enable the Ko-fi support button. Add your Ko-fi ID to link to your account.
+    enableKofi = true
+    kofi = ""
+
 	# Add links to your accounts. Remove the ones you don't want to include.
 	# Main
 	email = "#"

layouts/_default/single.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+
 <h1 class="post-title">{{ .Title }}</h1>
     {{ if .Date }}
     <time>{{ .Date.Format "January 2, 2006" }}</time>
@@ -10,6 +11,17 @@
     </div>
     {{ template "_internal/disqus.html" . }}
 
+    {{ if .Site.Params.enableKofi }}
+
+        <script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
+        <script type='text/javascript'>
+            const kofiId = '{{ .Site.Params.Kofi }}';
+            kofiwidget2.init('Support Me on Ko-fi', '#29abe0', kofiId);
+            kofiwidget2.draw();
+        </script> 
+
+    {{ end }}
+
     <div class="page-footer">
         {{if .Params.tags}}
         <hr class="footer-divider">

layouts/partials/footer-mobile.html

@@ -8,5 +8,5 @@
 	</div>
 
 	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
-	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
+	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
 </footer>

layouts/partials/footer.html

@@ -5,5 +5,5 @@
 	<p><a href="https://gohugo.io" target="_blank" rel="noopener">Built with Hugo</a></p>
 
 	{{ $script := resources.Get "js/main.js" | minify | fingerprint -}}
-	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
+	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
 </footer>

layouts/partials/head.html

@@ -30,4 +30,5 @@
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end }}
     {{ template "_internal/google_analytics.html" . }}
+
 </head>

layouts/partials/math.html

@@ -1,6 +1,6 @@
 {{ if or .Page.Params.math .Site.Params.math }}
 <!-- KaTeX -->
-<link rel="stylesheet" type="text/css" href="{{ "css/katex.min.css" | relURL }}">
+<link rel="stylesheet" type="text/css" href="{{ "css/katex.min.css" | relURL }}" crossorigin="anonymous">
-<script type="text/javascript" src="{{ "js/katex.min.js" | relURL }}"></script>
+<script type="text/javascript" src="{{ "js/katex.min.js" | relURL }}" crossorigin="anonymous"></script>
-<script type="text/javascript" src="{{ "js/auto-render.min.js" | relURL }}"onload="renderMathInElement(document.body);"></script>
+<script type="text/javascript" src="{{ "js/auto-render.min.js" | relURL }}"onload="renderMathInElement(document.body);" crossorigin="anonymous"></script>
 {{ end }}

layouts/shortcodes/resize-image.html

@@ -0,0 +1,11 @@
+{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
+
+{{ if .Get "caption"}}
+<figure class="article-figure">
+{{ end }}
+    <img class="article-image" src="{{ $src.RelPermalink }}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
+    {{ if .Get "caption"}}
+        <figcaption>{{ .Get "caption" }}</figcaption>
+</figure>
+{{ end }}
+

resources/_gen/assets/scss/css/main.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"css/main.min.2545a1910010e26a9905276045afab868f812580a1e7482423da6c0c8c214d18.css","MediaType":"text/css","Data":{"Integrity":"sha256-JUWhkQAQ4mqZBSdgRa+rho+BJYCh50gkI9psDIwhTRg="}}
+{"Target":"css/main.min.975b1911c008aee6ab5fb42e51274b8268ebcb65dc15bd4a5f69b9eedb485c3e.css","MediaType":"text/css","Data":{"Integrity":"sha256-l1sZEcAIruarX7QuUSdLgmjry2XcFb1KX2m57ttIXD4="}}