Update content

4 files changed, 158 insertions, 15 deletions

diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index 8db4c93..575a093 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -5,6 +5,10 @@ date = "2019-02-28"
 aliases = ["about-us","about-hugo","contact"]
 author = "Hugo Authors"
 type = "Page"
+hideMetadata = "true"
+hideAuthorBio = "true"
+hideComments = "true"
+hideSuggestions = "true"
 +++
 
 Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
diff --git a/exampleSite/content/post/configuring-the-theme.md b/exampleSite/content/post/configuring-the-theme.md
new file mode 100644
index 0000000..3db5a88
--- /dev/null
+++ b/exampleSite/content/post/configuring-the-theme.md
@@ -0,0 +1,72 @@
++++
+author = "Bento"
+title = "Configuring the theme"
+date = "2020-07-04"
+description = "A brief post showing all configuration options"
+tags = [
+    "theme",
+]
++++
+
+Sharing the [`config.toml`](https://github.com/leonardofaria/bento/blob/master/exampleSite/config.toml) used in this website:
+
+```toml
+# Better code higlighting
+# via https://discourse.gohugo.io/t/pygmentscodefences-how-to-choose-themes/3842/3
+pygmentsCodefences = true
+pygmentsStyle = "vs"
+
+# Integrations
+googleAnalytics = "UA-XXXXXX-XX"
+disqusShortname = "your-disqus-shortname"
+
+# Hightlight theme
+[markup.highlight]
+  style = "github"
+
+# Allow HTML rendering inside markdown
+[markup.goldmark.renderer]
+  unsafe = true
+
+[params]
+  # Show intro in the home page (with headline and description)
+  intro = true
+  headline = "This is a headline"
+  description = "A minimalist theme for Hugo, build with Tailwind CSS."
+
+  # Copyright note in the footer
+  copyright = "Copyright © 2020 Someone"
+
+  # Image in the homepage. You can setup a different image for social media
+  cover = "images/vancouver.jpg"
+  ogImage = "images/og_image.jpg"
+
+  # Social media usernames
+  github = "XXXX"
+  twitter = "XXXX"
+  linkedin = "https://linkedin.com/in/XXXX"
+  email = "email@xxxx.com"
+
+  # Avatar (shown in the homepage)
+  avatar = "images/avatar.jpg"
+  # Bio is shown in the end of posts
+  authorBio = "Bento is a doggo who likes to code. Follow him on <a href='https://twitter.com/XXX'>Twitter</a>"
+
+# Items in the top menu
+[menu]
+  [[menu.main]]
+      name = "About"
+      url = "/about"
+      weight = 1
+
+  [[menu.main]]
+      name = "Archives"
+      url = "/archives"
+      weight = 1
+
+  [[menu.main]]
+      name = "Source code"
+      url = "https://github.com/leonardofaria/bento"
+      weight = 1
+
+```
\ No newline at end of file
diff --git a/exampleSite/content/post/tips-about-writing-content.md b/exampleSite/content/post/tips-about-writing-content.md
deleted file mode 100644
index df84c15..0000000
--- a/exampleSite/content/post/tips-about-writing-content.md
+++ /dev/null
@@ -1,15 +0,0 @@
-+++
-author = "Bento"
-title = "Tips about writing content"
-date = "2020-07-05"
-description = "A brief post showing all features of the theme"
-tags = [
-    "theme",
-]
-+++
-
-Using the Bento theme, you can be creative and use [TailwindCSS](https://tailwindcss.com/) to create custom content.
-
-Inside a markdown file, you can add any TailwindCSS class and they will be rendered according to the framework. Example:
-
-<div class="shadow-lg leading-normal self-end bg-white w-64 rounded-lg relative" style="width: 26.1782rem;"><div class="hidden p-6" style="display: flex;"><img src="/img/erin-lindford.jpg" alt="" class="h-24 w-24 block mr-6 rounded-full"> <div class="text-gray-800 text-left"><h2 class="text-xl font-normal text-gray-800"><div class="inline-block relative">Erin Lindford</div></h2> <div><div class="inline-block relative text-purple-500">Product Engineer</div></div> <div><div class="inline-block relative text-gray-600">erinlindford@example.com</div></div> <div><div class="inline-block relative text-gray-600">(555) 765-4321</div></div></div></div> <div class="hidden p-6" style="display: none;"><img src="/img/erin-lindford.jpg" alt="" class="h-16 w-16 block mb-4 mx-auto rounded-full"> <div class="text-gray-800 text-center"><h2 class="text-xl font-normal text-gray-800"><div class="inline-block relative">Erin Lindford</div></h2> <div><div class="inline-block relative text-purple-500">Product Engineer</div></div> <div><div class="inline-block relative text-gray-600">erinlindford@example.com</div></div> <div><div class="inline-block relative text-gray-600">(555) 765-4321</div></div></div></div> <div style="padding: 1.5rem; display: none; height: 150px;"><img src="https://tailwindcss.com/img/erin-lindford.jpg" alt="" class="h-16 w-16 block mb-4" style="border-radius: 100%; margin-right: 1.5rem; margin-left: 0px; transform: matrix(1, 0, 0, 1, 0, 0); width: 6rem; height: 6rem;"> <div class="text-gray-800" style="text-align: left; transform: matrix(1, 0, 0, 1, 0, 0);"><h2 class="text-base font-normal text-gray-800" style="font-size: 1.25rem;"><div class="inline-block relative" style="transform: matrix(1, 0, 0, 1, 0, 0);">Erin Lindford</div></h2> <div style="color: rgb(159, 122, 234);"><div class="inline-block relative" style="transform: matrix(1, 0, 0, 1, 0, 0);">Product Engineer</div></div> <div style="color: rgb(100, 114, 135);"><div class="inline-block relative" style="transform: matrix(1, 0, 0, 1, 0, 0);">erinlindford@example.com</div></div> <div style="color: rgb(100, 114, 135);"><div class="inline-block relative" style="transform: matrix(1, 0, 0, 1, 0, 0);">(555) 765-4321</div></div></div></div> <div class="absolute flex inset-y-0 left-0"></div></div>
\ No newline at end of file
diff --git a/exampleSite/content/post/writing-content.md b/exampleSite/content/post/writing-content.md
new file mode 100644
index 0000000..23b0362
--- /dev/null
+++ b/exampleSite/content/post/writing-content.md
@@ -0,0 +1,82 @@
++++
+author = "Bento"
+title = "Writing content"
+date = "2020-07-05"
+description = "A brief post showing all features of the theme"
+tags = [
+    "theme",
+]
++++
+
+Check in this post a few tips to use Bento better :) 
+
+## Hiding design elements
+
+You can hide elements shown in the single page. Check this example - from the [about page](https://github.com/leonardofaria/bento/blob/master/exampleSite/content/about.md):
+
+```
+hideMetadata = "true"
+hideAuthorBio = "true"
+hideComments = "true"
+hideSuggestions = "true"
+```
+
+- `hideMetadata` hides the date about the page title
+- `hideAuthorBio` hides the avatar / author bio
+- `hideComments` hides Disqus comments
+- `hideSuggestions` hides previous/next posts
+
+## Using TailwindCSS
+
+Using the Bento theme, you can use [TailwindCSS](https://tailwindcss.com/) to create custom designs.
+
+Inside a markdown file, add any TailwindCSS class and they will be rendered according to the framework. Example (from their website):
+
+<div class="shadow-lg leading-normal self-end bg-white w-64 rounded-lg relative" style="width: 26.1782rem;">
+  <div class="hidden p-6" style="display: flex;">
+    <img src="https://tailwindcss.com/img/erin-lindford.jpg" alt="" class="h-24 w-24 block mr-6 rounded-full"> 
+    <div class="text-gray-800 text-left">
+      <div class="text-xl font-normal text-gray-800">
+        <div class="inline-block relative">Erin Lindford</div>
+      </div>
+      <div>
+        <div class="inline-block relative text-purple-500">Product Engineer</div>
+      </div>
+      <div>
+        <div class="inline-block relative text-gray-600">erinlindford@example.com</div>
+      </div>
+      <div>
+        <div class="inline-block relative text-gray-600">(555) 765-4321</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+## Creating full-width content
+
+Use the `.full-width` class in elements you want to take the whole viewport width. Example: 
+
+<div class="full-width">
+  <img src="/images/vancouver.jpg" alt="Vancouver" />
+</div>
+
+Code:
+
+```html
+<div class="full-width">
+  <img src="/images/vancouver.jpg" alt="Vancouver" />
+</div>
+```
+
+This will also work for embedded content. Check the example, embedding codepen: 
+
+<div class="full-width">
+  <iframe src="https://codepen.io/leonardofaria/pen/yLLZNrw" class="w-full h-screen"></iframe>
+</div>
+
+```html
+<div class="full-width">
+  <iframe src="https://codepen.io/leonardofaria/pen/yLLZNrw" class="w-full h-screen"></iframe>
+</div>
+
+```
\ No newline at end of file