Adds i18n support to the theme

README.md

@@ -7,7 +7,8 @@ Osprey is a simple, clean, and fast one-page [Hugo](https://gohugo.io/) portfoli
 * Minimalist, clean, and uncluttered theme
 * Portfolio display gallery
 * [Disqus](https://disqus.com) comments
-* [Formspree](https://formspree.io) AJAX contact form
+* [Formspree](https://formspree.io) AJAX contact form (with Formspree Gold)
+* [Basin](https://usebasin.com/) AJAX contact form (free)
 * Responsive Flexbox Grid
 * [SASS](http:https://sass-lang.com/) styling
 * Minimized/compressed CSS and JavaScript files with cachebusting hash setup
@@ -16,13 +17,12 @@ Osprey is a simple, clean, and fast one-page [Hugo](https://gohugo.io/) portfoli
 * [Google Analytics](https://analytics.google.com) and [Google Tag Manager](https://tagmanager.google.com) integration
 * [OpenGraph](http:https://ogp.me/) and [Twitter Cards](https://dev.twitter.com/cards/overview) integration
 * Quick loading speeds
-* Custom CSS
+* Custom CSS option
 
 ## Screenshot
 ![Screenshot](https://github.com/tomanistor/osprey/blob/master/images/tn.png)
 
 ## Installation
-
 ### Option 1: Clone Repository
 In the root of your Hugo site directory run:
 
@@ -60,43 +60,57 @@ disqusShortname = "tomanistor"
 disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies
 
 [Params]
- tagline = "Osprey Example Site"
- author = "Toma Nistor"
- description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
- logoBig = "/images/osprey-logo.png"
- logoSmall = "/images/osprey-logo.png"
- favicon = "favicon.ico"
- opengraphImage = "/images/osprey.png"
- twitter = "TomaNistor"
- linkedin = "tomanistor"
- github = "tomanistor"
- facebook = ""
- email = ""
- googleTagManager = ""
- highlightJS = true
- copyright = true
- credit = true
- customCSS = false
- cacheBustCSS = false
- cacheBustJS = false
- ajaxFormspree = true
+ tagline = "Osprey Example Site"
+ author = "Toma Nistor"
+ description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
+ logoBig = "/images/osprey-logo.png"
+ logoSmall = "/images/osprey-logo.png"
+ favicon = "favicon.ico"
+ opengraphImage = "/images/osprey.png"
+ email = ""
+ googleTagManager = ""
+ customCSS = false
+
+ # Social media links in footer
+ twitter = "TomaNistor"
+ linkedin = "tomanistor"
+ github = "tomanistor"
+ facebook = ""
+
+ # Copyright and theme author credit in footer
+ copyright = false
+ credit = false
+
+ # Cache busting of static resources (additional set up required)
+ cacheBustCSS = true
+ cacheBustJS = true
+
+ # Code highlighting with highlight.js
+ highlightJS = true
+ highlightJSStyle = "" # For custom highlight.js styles, add your /path/to/styles/default.css
+ highlightJSScript = "" # For custom highlight.js languages config, add your /path/to/highlight.pack.js
+
+ # Choose either Formspree contact form or Basin contact form
+ ajaxFormspree = false
+ ajaxFormspreeGold = false
+ ajaxBasin = "https://usebasin.com/f/0eae7044d4c2"
 
 [[menu.main]]
-  name = "About"
-  url = "/#about"
-  weight = 1
+ name = "About"
+ url = "/#about"
+ weight = 1
 [[menu.main]]
-  name = "Work"
-  url = "/#work"
-  weight = 2
+ name = "Work"
+ url = "/#work"
+ weight = 2
 [[menu.main]]
-  name = "Blog"
-  url = "/#blog"
-  weight = 3
+ name = "Blog"
+ url = "/#blog"
+ weight = 3
 [[menu.main]]
-  name = "Contact"
-  url = "/#contact"
-  weight = 4
+ name = "Contact"
+ url = "/#contact"
+ weight = 4
 ```
 
 ## Using Osprey
@@ -138,23 +152,17 @@ link2 = "https://github.com/tomanistor"
 ```
 
 ### Contact Form
-The email address specified in the config.toml file will be one receiving messages sent through the contact form. The contact form is operated by Formspree and requires that the form must be submitted once initially to confirm the email address being used. See instruction [here](https://formspree.io/).
+Two contact forms services are offered as options: Formspree and Basin.
 
-### Contact Form Troubleshooting
-If you have problems with the contact form (doing nothing on submit, seems Formspree ajax implementation works only for paid users), just create a copy of `osprey/layouts/partials/body-bottom.html` file inside `your-site/layouts/partials` and remove or comment lines 4 to 8. 
+#### Formspree
+_Update 4/15/18 - [Formspree no longer offers newly set up AJAX contact forms for free. This is now a Formspree Gold feature.](https://github.com/formspree/formspree/pull/173)_ You can either use the non-AJAX version of Formspree (which redirects to a Captcha page on form submit) by setting the config.toml parameter `ajaxFormspreeGold` to `false`, sign up for Formspree Gold and set the parameter to `true`, or sign up for Basin and use their contact form service for free.
 
-Should look like this.
-```
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
-{{ if .IsHome }}
- <script src="/scripts/{{ if .Site.Params.cacheBustJS }}{{ index .Site.Data.cachedAssets "index.js" }}{{ else }}index.min.js{{ end }}" type="text/javascript"></script>
-{{ else }}
- <script src="/scripts/{{ if .Site.Params.cacheBustJS }}{{ index .Site.Data.cachedAssets "main.js" }}{{ else }}main.min.js{{ end }}" type="text/javascript"></script>
-{{ end }}
-```
-That will override the original osprey body-bottom.html and remove the ajax script. Now you can receive messages through your contact form without any problem.
+The email address specified in the config.toml file will be the one receiving messages sent through the contact form. The contact form is operated by Formspree and requires that the form must be submitted once initially to confirm the email address being used. See instruction [here](https://formspree.io/).
+
+#### Basin
+Basin is an alternative, free AJAX contact form service. To use Basin, [sign up for a free account](https://usebasin.com/users/sign_up) and create a form. Copy and paste your form's URL endpoint to the `ajaxBasin` config.toml parameter. To use this as an AJAX form, remove the `Redirect URL` and select `Submit this form via AJAX` on your Basin dashboard.
 
-PD: This will add an extra step to the contact form, on submitting the user need to fill a captcha before sending the message.
+![Basin AJAX setup](https://github.com/tomanistor/osprey/blob/master/images/basin-ajax-setup.png)
 
 ### Custom CSS
 To implement custom CSS sitewide, change the config.toml parameter `customCSS` from `false` to `true` and then create a `css.html` file in your `layouts/partials/` folder like the example below:

exampleSite/config.toml

@@ -10,40 +10,54 @@ disqusShortname = "tomanistor"
 disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies
 
 [Params]
- tagline = "Osprey Example Site"
- author = "Toma Nistor"
- description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
- logoBig = "/images/osprey-logo.png"
- logoSmall = "/images/osprey-logo.png"
- favicon = "favicon.ico"
- opengraphImage = "/images/osprey.png"
- twitter = "TomaNistor"
- linkedin = "tomanistor"
- github = "tomanistor"
- facebook = ""
- email = ""
- googleTagManger = ""
- highlightJS = true
- copyright = true
- credit = true
- customCSS = false
- cacheBustCSS = false
- cacheBustJS = false
- ajaxFormspree = true
+ tagline = "Osprey Example Site"
+ author = "Toma Nistor"
+ description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
+ logoBig = "/images/osprey-logo.png"
+ logoSmall = "/images/osprey-logo.png"
+ favicon = "favicon.ico"
+ opengraphImage = "/images/osprey.png"
+ email = ""
+ googleTagManger = ""
+ customCSS = false
+
+ # Social media links in footer
+ twitter = "TomaNistor"
+ linkedin = "tomanistor"
+ github = "tomanistor"
+ facebook = ""
+
+ # Copyright and theme author credit in footer
+ copyright = true
+ credit = true
+
+ # Cache busting of static resources (additional set up required)
+ cacheBustCSS = false
+ cacheBustJS = false
+
+ # Code highlighting with highlight.js
+ highlightJS = true
+ highlightJSStyle = "" # For custom highlight.js styles, add your /path/to/styles/default.css
+ highlightJSScript = "" # For custom highlight.js languages config, add your /path/to/highlight.pack.js
+
+ # Choose either Formspree contact form or Basin contact form
+ ajaxFormspree = false
+ ajaxFormspreeGold = false
+ ajaxBasin = "https://usebasin.com/f/0eae7044d4c2"
 
 [[menu.main]]
-  name = "About"
-  url = "/#about"
-  weight = 1
+ name = "About"
+ url = "/#about"
+ weight = 1
 [[menu.main]]
-  name = "Work"
-  url = "/#work"
-  weight = 2
+ name = "Work"
+ url = "/#work"
+ weight = 2
 [[menu.main]]
-  name = "Blog"
-  url = "/#blog"
-  weight = 3
+ name = "Blog"
+ url = "/#blog"
+ weight = 3
 [[menu.main]]
-  name = "Contact"
-  url = "/#contact"
-  weight = 4
+ name = "Contact"
+ url = "/#contact"
+ weight = 4

i18n/en.yaml

@@ -0,0 +1,42 @@
+- id: view
+ translation: "View"
+- id: code
+ translation: "Code"
+- id: viewAll
+ translation: "View All"
+- id: letsChat
+ translation: "Let's Chat"
+- id: name
+ translation: "Name"
+- id: email
+ translation: "Email"
+- id: subject
+ translation: "Subject"
+- id: message
+ translation: "Message"
+- id: send
+ translation: "Send"
+- id: thanksForYourEmail
+ translation: "Thanks for your email!"
+- id: minuteRead
+ translation: "minute read"
+- id: latestPosts
+ translation: "Latest Posts"
+- id: enableJavaScript
+ translation: "Please enable JavaScript to view comments powered by"
+- id: 404Message
+ translation: "WHAT DID YOU DO?!"
+- id: themeDevelopedBy
+ translation: "Theme developed by"
+- id: copyright
+ translation: "Copyright"
+- id: facebook
+ translation: "Facebook"
+- id: github
+ translation: "GitHub"
+- id: linkedin
+ translation: "LinkedIn"
+- id: twitter
+ translation: "Twitter"
+- id: email
+ translation: "Email"

i18n/sv.yaml

@@ -0,0 +1,42 @@
+- id: view
+ translation: "Visa"
+- id: code
+ translation: "Kod"
+- id: viewAll
+ translation: "Visa alla"
+- id: letsChat
+ translation: "Låt oss prata"
+- id: name
+ translation: "Namn"
+- id: email
+ translation: "E-post"
+- id: subject
+ translation: "Rubrik"
+- id: message
+ translation: "Meddelande"
+- id: send
+ translation: "Skicka"
+- id: thanksForYourEmail
+ translation: "Tack för ditt mail!"
+- id: minuteRead
+ translation: "minuters läsning"
+- id: latestPosts
+ translation: "Senaste inläggen"
+- id: enableJavaScript
+ translation: "Vänligen aktivera Javascript för att visa kommentarer med hjälp av"
+- id: 404Message
+ translation: "Vad hände?"
+- id: themeDevelopedBy
+ translation: "Temat utvecklat av"
+- id: copyright
+ translation: "Copyright"
+- id: facebook
+ translation: "Facebook"
+- id: github
+ translation: "GitHub"
+- id: linkedin
+ translation: "LinkedIn"
+- id: twitter
+ translation: "Twitter"
+- id: email
+ translation: "Email"

layouts/404.html

@@ -8,7 +8,7 @@
  <div class="row full center-xs middle-xs">
  <div class="col-xs-12">
  <h1>404!</h1>
- <p>WHAT DID YOU DO?!</p>
+ <p>{{ i18n "404Message" }}</p>
  </div>
  </div>
 

layouts/_default/list.html

@@ -16,7 +16,7 @@
  <article>
  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
  <div class=sub-header>
- {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} minute read
+ {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} {{ i18n "minuteRead" }}
  </div>
  </article>
  {{ end }}

layouts/_default/single.html

@@ -10,7 +10,7 @@
  <h1>{{ if .Params.heading }} {{ .Params.heading }} {{ else }} {{ .Title }} {{ end }}</h1>
 
  <div class="sub-header">
- {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} minute read
+ {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} {{ i18n "minuteRead" }}
  </div>
 
  <article class="entry-content">

layouts/partials/blog.html

@@ -1,22 +1,22 @@
 <section class="blog" id="blog">
  <div class="container">
  <div class="row center-xs">
- <div class="col-xs-12"><h1>Latest Posts</h1></div>
+ <div class="col-xs-12"><h1>{{ i18n "latestPosts" }}</h1></div>
  </div>
  <div class="row">
  <div class="col-xs-12 posts-list">
  {{ range first 5 (where .Data.Pages "Section" "blog") }}
  <article>
  <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
  <div class=sub-header>
- {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} minute read
+ {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} {{ i18n "minuteRead" }}
  </div>
  </article>
  {{ end }}
  </div>
  </div>
  <div class="row center-xs">
- <div class="col-xs-12"><h3><a href="{{ .Site.BaseURL }}/blog/">View All</a></h3></div>
+ <div class="col-xs-12"><h3><a href="{{ .Site.BaseURL }}/blog/">{{ i18n "viewAll" }}</a></h3></div>
  </div>
  </div>
 </section>

layouts/partials/body-bottom.html

@@ -1,10 +1,16 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+{{ if .Site.Params.highlightJS }}
+ {{ if .Site.Params.highlightJSScript }}
+ <script src="{{ .Site.Params.highlightJSScript }}"></script>
+ {{ else }}
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+ {{ end }}
+ <script>hljs.initHighlightingOnLoad();</script>
+{{ end }}
+
 {{ if .IsHome }}
  <script src="/scripts/{{ if .Site.Params.cacheBustJS }}{{ index .Site.Data.cachedAssets "index.js" }}{{ else }}index.min.js{{ end }}" type="text/javascript"></script>
- {{ if .Site.Params.ajaxFormspree }}
- <script>
- {{ partial "scripts/contact.min.js" . | safeJS }}
- </script>
+ {{ if or (and (.Site.Params.ajaxFormspree) (.Site.Params.ajaxFormspreeGold)) (.Site.Params.ajaxBasin) }}
+ <script>{{ partial "scripts/contact.min.js" . | safeJS }}</script>
  {{ end }}
 {{ else }}
  <script src="/scripts/{{ if .Site.Params.cacheBustJS }}{{ index .Site.Data.cachedAssets "main.js" }}{{ else }}main.min.js{{ end }}" type="text/javascript"></script>