Merge pull request #10 from excitoon/enabled-turning-contact-form-off

Extensibility improvements: custom sections, reordering and disabling.

exampleSite/config.toml

@@ -37,75 +37,87 @@ googleAnalytics = ""
   # If it's disabled you could change the background to overwrite the bg.png and overlay.png to set the background.
   backgroundpersection = true
 
-  # Hero Section
+  # hero Section
   [params.hero]
+    type = "hero"
     title = "Highlights"
     description = "a fun litte { responsive } single Pager by [HTML5UP](//html5up.net)"
     buttontext = "begin"
 
   # about section
-  [params.about]
-    enable = true
+  [[params.block]]
+    id = "about"
+    type = "text"
     title = "Who am I"
     description = "Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum."
     buttontext = "next"
     # the picture is storead at static/images/
     picture = "pic01.jpg"
 
   # skill section
-  [params.skill_list]
-    enable = true
+  [[params.block]]
+    id = "skills"
+    type = "list"
     title = "Stuff I do"
     description = "Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet vulputate."
     buttontext = "next"
     # the picture is storead at static/images/
     picture = "pic02.jpg"
 
-    [[params.skills]]
+    [[params.block.item]]
       icon = "fa-camera-retro"
       title = "Magna Etiam"
 
-    [[params.skills]]
+    [[params.block.item]]
       icon = "fa-pencil"
       title = "Lorem Ipsum"
 
-    [[params.skills]]
+    [[params.block.item]]
       icon = "fa-code"
       title = "Nulla Tempus"
 
-    [[params.skills]]
+    [[params.block.item]]
       icon = "fa-coffee"
       title = "Sed Feugiat"
+
   # infos section
-  [params.infos]
-    enable = true
+  [[params.block]]
+    id = "infos"
+    type = "text"
     title = "One more thing"
     description = "Aliquam ante ac id. Adipiscing interdum lorem praesent fusce pellentesque arcu feugiat. Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet integer vulputate phasellus lorem ipsum dolor lorem magna consequat sed etiam adipiscing interdum."
     # the picture is storead at static/images/
     picture = "pic03.jpg"
 
-  # footer section
-  # this section includes
-  #
-  # - the contact form
-  # - social icons
-  #
-  # It's possible to disable the whole footer or disable only social icons or contact form
-
-  [params.footer]
-    enable = true
+#  # custom section
+#  [[params.block]]
+#    id = "important"
+#    # to make custom section copy <theme>/layouts/partials/text.html to /layouts/partials/custom.html and edit it according to your needs.
+#    type = "custom"
+#    title = "Don't forget"
+#    description = "Curabitur massa ante, semper at massa et, semper pellentesque velit. Duis tempor est nisi, a gravida risus malesuada eget. Nunc rutrum arcu laoreet mauris sodales vehicula. Nunc iaculis felis ac dui egestas, vel ullamcorper tellus bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia sem porttitor, fringilla metus at, convallis quam. Integer convallis a justo non pellentesque."
+#    # the picture is storead at static/images/
+#    picture = "pic04.jpg"
+
+  # contact form
+  [[params.block]]
+    id = "contact"
+    type = "contact"
     title = "Get in Touch"
+    picture = "pic05.jpg"
 
-    # contact form
-    [params.footer.contact]
-      enable = true
-
-    [params.footer.contact.form]
+    [params.block.form]
       name = "Name"
       email = "Your Email"
       message = "Your Message"
       buttontext = "send message"
 
+  # footer section
+  # this section includes last block and social icons
+
+  [params.footer]
+    enable = true
+
     # social icons
     [params.footer.social_list]
       enable = true

layouts/index.html

@@ -9,32 +9,25 @@
 		{{ partial "head.html" . }}
 	</head>
 	<body>
-		{{ partial "hero.html" . }}
-
-		{{ if .Site.Params.about.enable }}
-			{{ partial "about.html" . }}
-		{{ end }}
-
-		{{ if .Site.Params.skill_list.enable }}
-			{{ partial "skills.html" . }}
-		{{ end }}
-
-		{{ if .Site.Params.infos.enable }}
-			{{ partial "infos.html" . }}
-		{{ end }}
-
-		{{ if .Site.Params.footer.enable }}
-
-			{{"<!-- Footer -->" | safeHTML}}
+		{{ $list := .Site.Params.block }}
+		{{ partial "hero.html" (dict "block" .Site.Params.hero "params" $.Site.Params "next" (index $list 0)) }}
+		{{ range $index, $element := $list }}
+			{{ $last := eq $index (sub (len $list) 1) }}
+			{{ if and $.Site.Params.footer.enable $last }}
+				{{"<!-- Footer -->" | safeHTML}}
 				<section id="footer">
-					{{ if .Site.Params.footer.contact.enable }}
-						{{ partial "footer-contact.html" . }}
-					{{ end }}
-
-					{{ if .Site.Params.footer.social_list.enable }}
-						{{ partial "footer-social.html" . }}
+			{{ end }}
+			{{ if $last }}
+				{{ partial (print $element.type ".html") (dict "block" $element "params" $.Site.Params) }}
+			{{ else }}
+				{{ partial (print $element.type ".html") (dict "block" $element "params" $.Site.Params "next" (index $list (add $index 1))) }}
+			{{ end }}
+			{{ if and $.Site.Params.footer.enable $last }}
+					{{ if $.Site.Params.footer.social_list.enable }}
+						{{ partial "footer-social.html" $.Site.Params.footer }}
 					{{ end }}
-			  </section>
+				</section>
+			{{ end }}
 		{{ end }}
 
 		{{ partial "scripts.html" . }}

layouts/partials/contact.html

@@ -0,0 +1,29 @@
+{{ print "<!-- " .block.id " -->" | safeHTML }}
+<section id="{{.block.id}}" class="main special">
+  <div class="container">
+    {{ if eq .params.backgroundpersection true }}
+      <span class="image fit primary"><img src="images/{{ with .block.picture }}{{ . }}{{ end }}" alt="" /></span>
+    {{ end }}
+    <div class="content">
+      <header class="major">
+        <h2>{{ with .block.title }}{{ . | markdownify }}{{ end }}</h2>
+      </header>
+      <p>{{ with .block.description }}{{ . | markdownify }}{{ end }}</p>
+      <form method="post" action="//formspree.io/{{ with .params.email }}{{.}}{{ end }}">
+        <div class="row uniform">
+          <div class="6u 12u$(xsmall)"><input type="text" name="name" id="name" placeholder="{{ with .block.form.name }}{{ . }}{{ end }}" /></div>
+          <div class="6u$ 12u$(xsmall)"><input type="email" name="email" id="email" placeholder="{{ with .block.form.email }}{{ . }}{{ end }}" /></div>
+          <div class="12u$"><textarea name="message" id="message" placeholder="{{ with .block.form.message }}{{ . }}{{ end }}" rows="4"></textarea></div>
+          <div class="12u$">
+            <ul class="actions">
+              <li><input type="submit" value="{{ with .block.form.buttontext }}{{ . }}{{ end }}" class="special" /></li>
+            </ul>
+          </div>
+        </div>
+      </form>
+    </div>
+    {{ if .next }}
+      <a href="#{{.next.id}}" class="goto-next scrolly">{{ with .block.buttontext }}{{ . | markdownify }}{{ end }}</a>
+    {{ end }}
+  </div>
+</section>

layouts/partials/footer-social.html

@@ -1,11 +1,11 @@
 <footer>
   <ul class="icons">
-    {{ range .Site.Params.footer.social }}
+    {{ range .social }}
       <li><a href="{{ .link }}" class="icon alt {{ .icon }}"><span class="label">{{ .title }}</span></a></li>
     {{ end }}
   </ul>
   <ul class="copyright">
-    {{ range .Site.Params.footer.copyright.notice }}
+    {{ range .copyright.notice }}
       <li>{{ .text | markdownify }}</li>
     {{ end }}
   </ul>

layouts/partials/hero.html

@@ -1,12 +1,14 @@
-{{ "<!-- Hero -->" | safeHTML}}
+{{ "<!-- header -->" | safeHTML}}
 <section id="header">
   <header class="major 1">
-    <h1>{{ with .Site.Params.hero.title }} {{ . | markdownify }} {{ end }}</h1>
-    <p>{{ with .Site.Params.hero.description }} {{ . | markdownify }} {{ end }}</p>
+    <h1>{{ with $.block.title }} {{ . | markdownify }} {{ end }}</h1>
+    <p>{{ with $.block.description }} {{ . | markdownify }} {{ end }}</p>
   </header>
   <div class="container">
     <ul class="actions">
-      <li><a href="#about" class="button special scrolly">{{ with .Site.Params.hero.buttontext }} {{ . | markdownify }} {{ end }}</a></li>
+      {{ if .next }}
+        <li><a href="#{{.next.id}}" class="button special scrolly">{{ with .block.buttontext }}{{ . | markdownify }}{{ end }}</a></li>
+      {{ end }}
     </ul>
   </div>
 </section>

layouts/partials/list.html

@@ -0,0 +1,25 @@
+{{ print "<!-- " .block.id " -->" | safeHTML }}
+<section id="{{.block.id}}" class="main special">
+  <div class="container">
+    {{ if eq .params.backgroundpersection true }}
+      <span class="image fit primary"><img src="images/{{ with .block.picture }}{{ . }}{{ end }}" alt="" /></span>
+    {{ end }}
+    <div class="content">
+      <header class="major">
+        <h2>{{ with .block.title}}{{ . | markdownify }}{{ end }}</h2>
+      </header>
+      <p>{{ with .block.description}}{{ . | markdownify }}{{ end }}</p>
+      <ul class="icons-grid">
+        {{ range .block.item }}
+          <li>
+            <span class="icon major {{ .icon }}"></span>
+            <h3>{{ .title }}</h3>
+          </li>
+        {{ end }}
+      </ul>
+    </div>
+    {{ if .next }}
+      <a href="#{{.next.id}}" class="goto-next scrolly">{{ with .block.buttontext }}{{ . | markdownify }}{{ end }}</a>
+    {{ end }}
+  </div>
+</section>

layouts/partials/scripts.html

@@ -1,9 +1,9 @@
 {{ "<!-- Scripts -->" | safeHTML }}
-  <script src="{{ .Site.BaseURL }}js/jquery.min.js"></script>
-  <script src="{{ .Site.BaseURL }}js/jquery.scrollex.min.js"></script>
-  <script src="{{ .Site.BaseURL }}js/jquery.scrolly.min.js"></script>
-  <script src="{{ .Site.BaseURL }}js/skel.min.js"></script>
-  <script src="{{ .Site.BaseURL }}js/util.js"></script>
-  {{ "<!-- [if lte IE 8 ]]> <script src=" | safeHTML }}"{{ .Site.BaseURL }}{{ "js/ie/respond.min.js\"></script><![endif] -->" | safeHTML }}
-  <script src="{{ .Site.BaseURL }}js/main.js"></script>
-  {{ template "_internal/google_analytics.html" . }}
+<script src="{{ .Site.BaseURL }}js/jquery.min.js"></script>
+<script src="{{ .Site.BaseURL }}js/jquery.scrollex.min.js"></script>
+<script src="{{ .Site.BaseURL }}js/jquery.scrolly.min.js"></script>
+<script src="{{ .Site.BaseURL }}js/skel.min.js"></script>
+<script src="{{ .Site.BaseURL }}js/util.js"></script>
+{{ "<!-- [if lte IE 8 ]]> <script src=" | safeHTML }}"{{ .Site.BaseURL }}{{ "js/ie/respond.min.js\"></script><![endif] -->" | safeHTML }}
+<script src="{{ .Site.BaseURL }}js/main.js"></script>
+{{ template "_internal/google_analytics.html" . }}

layouts/partials/text.html

@@ -0,0 +1,17 @@
+{{ print "<!-- " .block.id " -->" | safeHTML }}
+<section id="{{.block.id}}" class="main special">
+  <div class="container">
+    {{ if eq .params.backgroundpersection true }}
+      <span class="image fit primary"><img src="images/{{ with .block.picture }}{{ . }}{{ end }}" alt="" /></span>
+    {{ end }}
+    <div class="content">
+      <header class="major">
+        <h2>{{ with .block.title }}{{ . | markdownify }}{{ end }}</h2>
+      </header>
+      <p>{{ with .block.description }}{{ . | markdownify }}{{ end }}</p>
+    </div>
+    {{ if .next }}
+      <a href="#{{.next.id}}" class="goto-next scrolly">{{ with .block.buttontext }}{{ . | markdownify }}{{ end }}</a>
+    {{ end }}
+  </div>
+</section>