diff --git a/README.md b/README.md index ccd224d..66cae6f 100644 --- a/README.md +++ b/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://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://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. -``` - -{{ if .IsHome }} - -{{ else }} - -{{ 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: diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 8f77da0..8f75bda 100644 --- a/exampleSite/config.toml +++ b/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 diff --git a/i18n/en.yaml b/i18n/en.yaml new file mode 100644 index 0000000..94f8c70 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/i18n/sv.yaml b/i18n/sv.yaml new file mode 100644 index 0000000..1b21f13 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/images/basin-ajax-setup.png b/images/basin-ajax-setup.png new file mode 100644 index 0000000..337e34a Binary files /dev/null and b/images/basin-ajax-setup.png differ diff --git a/layouts/404.html b/layouts/404.html index db9ba55..2688968 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -8,7 +8,7 @@

404!

-

WHAT DID YOU DO?!

+

{{ i18n "404Message" }}

diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 47f8488..561db47 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -16,7 +16,7 @@

{{ .Title }}

- {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} minute read + {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} {{ i18n "minuteRead" }}
{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index b595985..318c008 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -10,7 +10,7 @@

{{ if .Params.heading }} {{ .Params.heading }} {{ else }} {{ .Title }} {{ end }}

- {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} minute read + {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} {{ i18n "minuteRead" }}
diff --git a/layouts/partials/blog.html b/layouts/partials/blog.html index 8a79524..29d3e1a 100644 --- a/layouts/partials/blog.html +++ b/layouts/partials/blog.html @@ -1,7 +1,7 @@
-

Latest Posts

+

{{ i18n "latestPosts" }}

@@ -9,14 +9,14 @@

{{ .Title }}

- {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} minute read + {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ .ReadingTime }} {{ i18n "minuteRead" }}
{{ end }}
-

View All

+

{{ i18n "viewAll" }}

diff --git a/layouts/partials/body-bottom.html b/layouts/partials/body-bottom.html index a7beb34..6e73f44 100644 --- a/layouts/partials/body-bottom.html +++ b/layouts/partials/body-bottom.html @@ -1,10 +1,16 @@ - +{{ if .Site.Params.highlightJS }} + {{ if .Site.Params.highlightJSScript }} + + {{ else }} + + {{ end }} + +{{ end }} + {{ if .IsHome }} - {{ if .Site.Params.ajaxFormspree }} - + {{ if or (and (.Site.Params.ajaxFormspree) (.Site.Params.ajaxFormspreeGold)) (.Site.Params.ajaxBasin) }} + {{ end }} {{ else }} diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html index 3b2a13b..05214b0 100644 --- a/layouts/partials/contact.html +++ b/layouts/partials/contact.html @@ -1,24 +1,26 @@ -{{ if .Site.Params.ajaxFormspree }} +{{ if or (.Site.Params.ajaxFormspree) (.Site.Params.ajaxBasin) }}
-

Let's Chat

+

{{ i18n "letsChat" }}

-
+
-
-
-
-
+
+
+
+
+ {{ if .Site.Params.ajaxFormspree }} + {{ end }}
- - + +
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html index d86cb7b..8608efe 100644 --- a/layouts/partials/disqus.html +++ b/layouts/partials/disqus.html @@ -12,5 +12,5 @@ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); - +
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 8953d99..8542224 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,28 +1,32 @@