Address issues from the first revision of the app

README.md

@@ -37,14 +37,20 @@ To fetch your ButterCMS content, add your API token as an environment variable.
 
 Build the project with the following command
 
-`$ mvn install -DskipTests`
+`$ mvn install`
 
 ### 4. Run the project
 
 To view the app in the browser, you'll need to run the local development server:
 
 `$ mvn spring-boot:run`
 
+Alternatively, you can run it directly via the `java` command
+
+`$ java -jar target/spring-starter-buttercms-*.jar`
+
+where the file name `spring-starter-buttercms` will be appended by the value of the version tag `<version>` in [pom.xml](pom.xml)
+
 Congratulations! Your starter project is now live. To view your project, 
 point your browser to [http://localhost:8080](http://localhost:8080).
 
@@ -61,4 +67,4 @@ and institute a full content workflow connected to your ButterCMS account. Smoot
 
 By default, your starter project is set up to allow previewing of draft changes 
 saved in your ButterCMS.com account. To disable this functionality, set the 
-following value in your .env file: JAVA_BUTTER_CMS_PREVIEW=false
+following value in your .env file: `JAVA_BUTTER_CMS_PREVIEW=false`

src/main/java/com/buttercms/springstarterbuttercms/controller/BlogController.java

@@ -4,10 +4,7 @@
 import com.buttercms.springstarterbuttercms.service.BlogService;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.*;
 
 @Controller
 public class BlogController {
@@ -67,8 +64,8 @@ public String blogByTag(@PathVariable String tagSlug, Model model) {
         return "blogs";
     }
 
-    @PostMapping("/blog/search")
-    public String search(@RequestParam String searchTerm, Model model) {
+    @GetMapping(value = "/blog/search")
+    public String search(@RequestParam(name = "q", required = false, defaultValue = "") String searchTerm, Model model) {
         BlogsDto blogsDto = blogService.searchBlogs(searchTerm);
         model.addAttribute("posts", blogsDto.getPosts());
         model.addAttribute("categories", blogsDto.getCategories());

src/main/java/com/buttercms/springstarterbuttercms/controller/IndexController.java

@@ -1,6 +1,8 @@
 package com.buttercms.springstarterbuttercms.controller;
 
 import com.buttercms.springstarterbuttercms.controller.dto.LandingPageDto;
+import com.buttercms.springstarterbuttercms.model.landingpage.Field;
+import com.buttercms.springstarterbuttercms.model.landingpage.Fields;
 import com.buttercms.springstarterbuttercms.model.landingpage.Section;
 import com.buttercms.springstarterbuttercms.model.landingpage.Seo;
 import com.buttercms.springstarterbuttercms.service.PageCollectionService;
@@ -22,13 +24,12 @@ public IndexController(PageCollectionService pageCollectionService) {
 
     @GetMapping(value =  {"/","/landing-page/{slug}"})
     public String index(@PathVariable(required = false) String slug, Model model) {
-        LandingPageDto landingPage = pageCollectionService.getLandingPage();
+        LandingPageDto landingPage = pageCollectionService.getLandingPage("landing-page", slug);
         Seo seo = landingPage.getFields().getSeo();
-        List<Section> sections = landingPage.extractSections(landingPage.getFields());
         model.addAttribute("posts", landingPage.getPosts());
         model.addAttribute("seoTitle", seo.getTitle());
         model.addAttribute("seoDescription", seo.getDescription());
-        model.addAttribute("sections", sections);
+        model.addAttribute("fields", landingPage.getFields().getFields());
         return "index";
     }
 }

src/main/java/com/buttercms/springstarterbuttercms/controller/dto/ConstDtoValues.java

@@ -4,7 +4,7 @@ public class ConstDtoValues {
     public static String BLOG_SEO_TITLE = "Sample Blog - All Posts";
     public static String BLOG_SEO_DESCRIPTION = "Sample blog powered by ButterCMS, showing all posts.";
     public static String BLOG_CATEGORY_SEO_TITLE = "Sample Blog - category: ";
-    public static String BLOG_CATEGORY_SEO_DESCRIPTION = "Sample Blog - category: ";
+    public static String BLOG_CATEGORY_SEO_DESCRIPTION = "Sample blog powered by ButterCMS, showing category: ";
     public static String BLOG_TAG_SEO_TITLE = "Sample Blog - tag: ";
     public static String BLOG_TAG_SEO_DESCRIPTION = "Sample blog powered by ButterCMS, showing tag: ";
     public static String BLOG_SEARCH_SEO_TITLE = "Sample Blog - search results for ";

src/main/java/com/buttercms/springstarterbuttercms/model/landingpage/Field.java

@@ -1,10 +1,26 @@
 package com.buttercms.springstarterbuttercms.model.landingpage;
 
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import com.fasterxml.jackson.annotation.JsonProperty;
+import com.fasterxml.jackson.annotation.JsonSubTypes;
+import com.fasterxml.jackson.annotation.JsonTypeInfo;
 
 public class Field {
     private String type;
     @JsonProperty("fields")
+    @JsonIgnoreProperties(ignoreUnknown = true)
+    @JsonTypeInfo(
+            use = JsonTypeInfo.Id.NAME,
+            include = JsonTypeInfo.As.EXTERNAL_PROPERTY,
+            property = "type",
+            visible = true
+    )
+    @JsonSubTypes({
+            @JsonSubTypes.Type(value = BasicSection.class, name = "hero"),
+            @JsonSubTypes.Type(value = ImageSection.class, name = "two_column_with_image"),
+            @JsonSubTypes.Type(value = FeaturesSection.class, name = "features"),
+            @JsonSubTypes.Type(value = TestimonialsSection.class, name = "testimonials")
+    })
     private Section section;
 
     public String getType() {

src/main/java/com/buttercms/springstarterbuttercms/model/landingpage/Section.java

@@ -1,24 +1,8 @@
 package com.buttercms.springstarterbuttercms.model.landingpage;
 
-import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
 import com.fasterxml.jackson.annotation.JsonProperty;
-import com.fasterxml.jackson.annotation.JsonSubTypes;
-import com.fasterxml.jackson.annotation.JsonTypeInfo;
 
-@JsonIgnoreProperties(ignoreUnknown = true)
-@JsonTypeInfo(
-        use = JsonTypeInfo.Id.NAME,
-        include = JsonTypeInfo.As.EXISTING_PROPERTY,
-        property = "scroll_anchor_id",
-        visible = true
-)
-@JsonSubTypes({
-        @JsonSubTypes.Type(value = BasicSection.class, name = "home"),
-        @JsonSubTypes.Type(value = ImageSection.class, name = "about"),
-        @JsonSubTypes.Type(value = ImageSection.class, name = "tryit"),
-        @JsonSubTypes.Type(value = FeaturesSection.class, name = "features"),
-        @JsonSubTypes.Type(value = TestimonialsSection.class, name = "testimonials")
-})
+
 public abstract class Section {
     @JsonProperty("scroll_anchor_id")
     private String scrollAnchorId;
@@ -37,4 +21,4 @@ public String getScrollAnchorId() {
     public void setScrollAnchorId(String scrollAnchorId) {
         this.scrollAnchorId = scrollAnchorId;
     }
-}
+}

src/main/java/com/buttercms/springstarterbuttercms/service/PageCollectionService.java

@@ -16,19 +16,22 @@ public class PageCollectionService {
 
     private final IButterCMSClient butterCMSClient;
 
+    private final static String DEFAULT_LANDING_PAGE = "landing-page-with-components";
+
     public PageCollectionService(IButterCMSClient butterCMSClient) {
         this.butterCMSClient = butterCMSClient;
     }
 
-    public LandingPageDto getLandingPage() {
+    public LandingPageDto getLandingPage(String pageType, String slug) {
+        slug = slug == null ? DEFAULT_LANDING_PAGE : slug;
         Map<String, String> queryParams = new HashMap<String, String>() {{
             put("page", "1");
             put("page_size", "2");
         }};
         List<Post> posts = butterCMSClient.getPosts(queryParams).getData();
         Fields landingPage = butterCMSClient.getPage(
-                "*",
-                "landing-page-with-components",
+                pageType,
+                slug,
                 new HashMap<>(),
                 Fields.class
         ).getData().getFields();

src/main/resources/static/js/section-menu.js

@@ -9,7 +9,7 @@
             var val = currLink.getAttribute('href').replaceAll("/", "");
             var refElement = document.querySelector(val);
             var scrollTopMinus = scrollPos + 73;
-            if (refElement.offsetTop <= scrollTopMinus && (refElement.offsetTop + refElement.offsetHeight > scrollTopMinus)) {
+            if (refElement && refElement.offsetTop <= scrollTopMinus && (refElement.offsetTop + refElement.offsetHeight > scrollTopMinus)) {
                 document.querySelector('.page-scroll').classList.remove('active');
                 currLink.classList.add('active');
             } else {

src/main/resources/templates/fragments/blog/categories.html

@@ -3,11 +3,11 @@
 <body>
 <div class="widget categories-widget">
     <h5 class="widget-title">Categories</h5>
-    <ul th:each="category: ${categories}" class="categories-list">
-        <li>
-            <a th:text="${category.name}" th:href="|/blog/category/${category.slug}|"></a>
+    <ul class="categories-list">
+        <li th:each="category: ${categories}">
+            <a th:text="${category.name}" th:href="|/blog/category/${category.slug}/|"></a>
         </li>
     </ul>
 </div>
 </body>
-</html>
+</html>

src/main/resources/templates/fragments/blog/post-preview.html

@@ -4,7 +4,7 @@
 <div class="blog-roll-card">
     <div class="blog-roll-card-meta">
             <h2 class="blog-roll-card-header">
-                <a th:href="|/blog/${post.getSlug()}|">
+                <a th:href="|/blog/${post.getSlug()}/|">
                     [(${post.title})]
                 </a>
             </h2>
@@ -35,7 +35,7 @@ <h2 class="blog-roll-card-header">
         <p th:text="${post.summary}"></p>
     </div>
     <div class="blog-roll-card-footer text-center">
-        <a th:href="|/blog/${post.slug}|" th:target="_blank" class="main-btn btn-hover">Read More</a>
+        <a th:href="|/blog/${post.slug}/|" th:target="_blank" class="main-btn btn-hover">Read More</a>
     </div>
 </div>
 </body>

src/main/resources/templates/fragments/blog/search.html

@@ -4,11 +4,11 @@
 <div th:fragment="search" class="sidebar blog-grid-page">
     <div class="widget search-widget">
         <h5 class="widget-title">Search This Site</h5>
-        <form th:action="@{/blog/search}" method="post">
-            <input type="text" th:value="${searchTerm}" name="searchTerm" placeholder="Search Here..."/>
+        <form th:action="@{/blog/search}" method="get">
+            <input type="text" th:value="${searchTerm}" name="q" placeholder="Search Here..."/>
             <button type="submit"><i class="lni lni-search-alt"></i></button>
         </form>
     </div>
 </div>
 </body>
-</html>
+</html>

src/main/resources/templates/fragments/blog/tag.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <body>
-<a th:href="|/blog/tag/${tag.slug}|">
+<a th:href="|/blog/tag/${tag.slug}/|">
     <i class="lni lni-tag"></i>
     [(${tag.name})]
 </a>
 </body>
-</html>
+</html>

src/main/resources/templates/fragments/common-elements/header.html

@@ -34,4 +34,4 @@
     </div> <!-- navbar area -->
 </header>
 </body>
-</html>
+</html>

src/main/resources/templates/fragments/landing-page/features.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <body>
-<div th:fragment="features (scrollAnchorId)">
-    <section th:id="${scrollAnchorId}" class="feature-section">
+<div th:fragment="features (section)">
+    <section th:id="${section.scrollAnchorId}" class="feature-section">
         <div class="container">
             <div class="row">
                 <div class="col-lg-5 col-md-10">

src/main/resources/templates/fragments/landing-page/home.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <body>
-<div th:fragment="home (scrollAnchorId)">
-    <section th:id="${scrollAnchorId}" class="hero-section">
+<div th:fragment="home (section)">
+    <section th:id="${section.scrollAnchorId}" class="hero-section">
         <div class="container">
             <div class="row align-items-center">
                 <div class="col-xl-6 col-lg-6 col-md-10">

src/main/resources/templates/fragments/landing-page/latest-blogs.html

@@ -34,14 +34,14 @@ <h2>Latest Blog Posts</h2>
                     </div>
                     <div class="blog-body">
                         <h5 class="package-name">
-                            <a th:href="|/blog/${post.getSlug()}|" th:target="_blank">
+                            <a th:href="|/blog/${post.getSlug()}/|" th:target="_blank">
                                 [(${post.title})]
                             </a>
                         </h5>
                         <p th:text="${post.summary}"></p>
                     </div>
                     <div class="blog-footer">
-                        <a th:href="|/blog/${post.getSlug()}|" class="main-btn btn-hover">Read More</a>
+                        <a th:href="|/blog/${post.getSlug()}/|" class="main-btn btn-hover">Read More</a>
                     </div>
                 </div>
             </div>

src/main/resources/templates/fragments/landing-page/testimonials.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <body>
-<div th:fragment="testimonials (scrollAnchorId)">
-    <section th:id="${scrollAnchorId}" class="testimonial-section mt-100">
+<div th:fragment="testimonials (section)">
+    <section th:id="${section.scrollAnchorId}" class="testimonial-section mt-100">
         <div class="container">
             <div class="row justify-content-center">
                 <div class="col-xl-7 col-lg-9">

src/main/resources/templates/fragments/landing-page/try-it.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <body>
-<div th:fragment="tryit (scrollAnchorId)">
-    <section th:id="${scrollAnchorId}" class="cta-section pt-130">
+<div th:fragment="tryit (section)">
+    <section th:id="${section.scrollAnchorId}" class="cta-section pt-130">
         <div class="container">
             <div class="row align-items-center">
                 <div class="col-lg-6 col-md-10">

src/main/resources/templates/fragments/landing-page/two_column_with_image.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
+<body>
+<div th:fragment="about (section)">
+    <section th:id="${section.scrollAnchorId}" class="cta-section">
+        <div class="container">
+            <div th:if='${section.imagePosition.equals("right")}' class="row align-items-center">
+                <div class="col-lg-6 col-md-10">
+                    <div class="cta-content-wrapper">
+                        <div class="section-title">
+                            <h2 th:text="${section.headline}" class="mb-20"></h2>
+                            <p>[(${section.subHeadline})]</p>
+                            <a th:href="${section.buttonUrl}" th:target="_blank" th:text="${section.buttonLabel}"
+                               class="main-btn btn-hover border-btn mt-30"></a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div th:class="|cta-image ${section.imagePosition}-image text-lg-end|">
+                        <img
+                                th:src="${section.image}"
+                                loading="lazy"
+                                alt=""
+                        >
+                    </div>
+                </div>
+            </div>
+            <!-- a lot of it is copy pasted because fragmenting it broke the left / right alignment for a reason I couldn't figure out -->
+            <div th:if='${section.imagePosition.equals("left")}' class="row align-items-center">
+                <div class="col-lg-6 order-last order-lg-first">
+                    <div th:class="|cta-image ${section.imagePosition}-image|">
+                        <img th:src="${section.image}" alt="">
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="cta-content-wrapper">
+                        <div class="section-title">
+                            <h2 th:text="${section.headline}" class="mb-20"></h2>
+                            <p>[(${section.subHeadline})]</p>
+                            <a th:href="${section.buttonUrl}" th:text="${section.buttonLabel}" th:target="_blank"
+                               class="main-btn btn-hover border-btn mt-30"></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+</body>
+</html>