Merge pull request #310 from shamshaev/fix-issue-#153-add-footer

[#153] Add footer to website templates
Hexlet · Oct 11, 2024 · 9ed1055 · 9ed1055
2 parents a6eea68 + de41a9b
commit 9ed1055
Show file tree

Hide file tree

Showing 24 changed files with 187 additions and 189 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -38,6 +38,7 @@ dependencies {
     implementation("io.github.jpenren:thymeleaf-spring-data-dialect:3.6.0")
     implementation("org.webjars:webjars-locator-core:0.58")
     implementation("org.webjars:bootstrap:5.2.3")
+    implementation("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.3.0")
     // Database
     runtimeOnly("org.postgresql:postgresql:42.5.4")
     implementation("io.hypersistence:hypersistence-utils-hibernate-60:3.2.0")

diff --git a/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java b/src/main/java/io/hexlet/typoreporter/config/SecurityConfig.java
@@ -84,7 +84,8 @@ public SecurityFilterChain filterChain(HttpSecurity http,
         http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());
 
         http.authorizeHttpRequests(authz -> authz
-                .requestMatchers(GET, "/webjars/**", "/widget/**", "/fragments/**", "/img/**").permitAll()
+                .requestMatchers(GET, "/webjars/**", "/widget/**", "/fragments/**", "/img/**",
+                    "/favicon.ico").permitAll()
                 .requestMatchers("/", "/login", "/signup", "/error", "/about").permitAll()
                 .anyRequest().authenticated()
             )

diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
@@ -127,3 +127,18 @@ text.how-it-works-sub-header2=Add a widget to your site
 text.how-it-works-description2=Add a widget to your site to make it easy for users to report bugs.
 text.how-it-works-sub-header3=Manage your incoming messages
 text.how-it-works-description3=Manage incoming messages and effectively correct typos found.
+
+footer.about=About project
+footer.source-code=Source code
+footer.telegram=Telegram Hexlet channel Volunteers
+footer.help=Help
+footer.blog=Blog
+footer.study=Study for free
+footer.books=Recommended books
+footer.other-projects=Other open source projects
+footer.additionally=Additionally
+
+text.about-header=About project
+text.about-welcome=Welcome to the open-source project FixIT
+text.about-description=The service for notifying website owners about errors and typos. After integration with the site, visitors have the opportunity to highlight an error or a typo and report it to the administrator. The project runs in Java.
+text.about-community=Tasks can be discussed in the community
diff --git a/src/main/resources/messages_ru.properties b/src/main/resources/messages_ru.properties
@@ -125,3 +125,18 @@ text.how-it-works-sub-header2=Добавьте виджет на сайт
 text.how-it-works-description2=Добавьте виджет на сайт, чтобы пользователи могли легко сообщать об ошибках.
 text.how-it-works-sub-header3=Управляйте входящими сообщениями
 text.how-it-works-description3=Управляйте входящими сообщениями и эффективно устраняйте найденные опечатки.
+
+footer.about=О проекте
+footer.source-code=Исходный код
+footer.telegram=Telegram Hexlet канал Волонтеры
+footer.help=Помощь
+footer.blog=Блог
+footer.study=Учиться бесплатно
+footer.books=Рекомендуемые книги
+footer.other-projects=Другие open source проекты
+footer.additionally=Дополнительно
+
+text.about-header=О проекте
+text.about-welcome=Добро пожаловать в open-source проект FixIT
+text.about-description=Сервис для уведомления владельцев сайтов об ошибках и опечатках. После интеграции с сайтом посетители имеют возможность выделить ошибку или опечатку и сообщить об этом администратору. Проект работает на Java.
+text.about-community=Задачи можно обсудить в сообществе
diff --git a/src/main/resources/static/favicon.ico b/src/main/resources/static/favicon.ico
diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html
@@ -1,26 +1,19 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body class="d-flex min-vh-100">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<div class="container-fluid d-flex flex-column p-0 m-0">
-    <div class=" bg-light mx-auto mt-5">
-        <main class="bg-light p-3">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content">
+    <div class="mx-auto mt-5">
+        <main class="p-3">
             <div class="container p-0">
-                <h1 class="my-4">О проекте</h1>
-                <p class="display-6">Добро пожаловать в open-source проект Hexlet-Correction</p>
-                <p>
-                    Сервис для уведомления владельцев сайтов об ошибках и опечатках.
-                    После интеграции с сайтом посетители имеют возможность выделить ошибку
-                    или опечатку и сообщить об этом администратору. Проект работает на Java.
-                </p>
-                <p>Задачи можно обсудить в сообществе
-                    <a href="https://t.me/hexletcommunity/12">telegram</a>
+                <h1 class="my-4" th:text="#{text.about-header}"></h1>
+                <p class="display-6" th:text="#{text.about-welcome}"></p>
+                <p th:text="#{text.about-description}"></p>
+                <p th:inline="text">[[#{text.about-community}]] <a href="https://t.me/hexletcommunity/12">telegram</a>
                 </p>
             </div>
         </main>
     </div>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
 </div>
-</body>
 </html>
diff --git a/src/main/resources/templates/account/acc-info.html b/src/main/resources/templates/account/acc-info.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container" th:object="${accInfo}">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container" th:object="${accInfo}">
     <div class="card mb-3">
         <div class="card-body">
             <h5 class="card-title mb-1" th:text="#{acc-info.card-title.general}"></h5>
@@ -53,6 +53,5 @@ <h5 class="card-title mb-1" th:text="#{acc-info.card-title.workspaces}"></h5>
         </tr>
         </tbody>
     </table>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/account/pass-update.html b/src/main/resources/templates/account/pass-update.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container">
     <div class="row">
         <div class="col">
             <form th:action="@{/account/password}" th:method="put" th:object="${updatePassword}">
@@ -36,6 +36,5 @@
             </form>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/account/prof-update.html b/src/main/resources/templates/account/prof-update.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container">
     <div class="row">
         <div class="col">
             <form th:action="@{/account/update}" th:method="put" th:object="${updateProfile}">
@@ -40,6 +40,5 @@
             </form>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/account/signup.html b/src/main/resources/templates/account/signup.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content" class="container">
     <div class="row">
         <div class="col">
             <form method="post" th:action="@{/signup}" th:object="${signupAccount}">
@@ -50,7 +50,5 @@
             </form>
         </div>
     </div>
-</main>
-
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/create-workspace.html b/src/main/resources/templates/create-workspace.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head th:replace="~{fragments/header :: head}"></head>
-<body style="padding-top: 4.5rem">
-<nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-<main class="container">
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
+
+<div layout:fragment="content">
     <div class="row">
         <div class="col">
             <form method="post" th:action="@{/workspace}" th:object="${createWorkspace}">
@@ -34,6 +34,5 @@
             </form>
         </div>
     </div>
-</main>
-</body>
+</div>
 </html>
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
@@ -1,91 +1,67 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <body class="d-flex min-vh-100">
-<footer th:fragment="footer" class="p-3 bg-dark text-light mt-auto">
+<footer th:fragment="footer" class="p-3 bg-dark bg-gradient text-light mt-auto">
     <div class="container-xl">
         <div class="row justify-content-lg-around">
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <a class="text-dark px-0 py-0 text-decoration-none " href="https://ru.hexlet.io">
-                    <p class="h3 mb-2 text-light">© Hexlet</p>
+                <a class="text-dark px-0 py-0 text-decoration-none" href="https://ru.hexlet.io">
+                    <p class="mb-2 text-light">© Hexlet</p>
                 </a>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" th:href="@{/about}">
-                            О проекте
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" th:href="@{/about}" th:text="#{footer.about}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-correction"
-                           target="_blank">
-                            Исходный код
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://github.com/Hexlet/hexlet-correction"
+                           target="_blank" th:text="#{footer.source-code}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://t.me/hexletcommunity/12"
-                           target="_blank">
-                            Telegram Hexlet канал Волонтеры
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://t.me/hexletcommunity/12"
+                           target="_blank" th:text="#{footer.telegram}"></a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Помощь</p>
+                <p class="mb-2" th:text="#{footer.help}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/blog">
-                            Блог
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/blog" th:text="#{footer.blog}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/webinars">
-                            Учиться бесплатно
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.hexlet.io/webinars" th:text="#{footer.study}"></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light"
-                           href="https://ru.hexlet.io/pages/recommended-books">
-                            Рекомендуемые книги
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted"
+                           href="https://ru.hexlet.io/pages/recommended-books" th:text="#{footer.books}"></a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Другие open-source проекты</p>
+                <p class="mb-2" th:text="#{footer.other-projects}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-cv">
-                            Хекслет-резюме
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://codebattle.hexlet.io/">Codebattle</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-editor">
-                            Хекслет-редактор
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://runit.hexlet.ru/">RunIT</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-friends">
-                            Друзья Хекслета
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://ru.code-basics.com/">Code Basics</a>
                     </li>
                 </ul>
             </div>
             <div class="col-sm-6 col-md-3 col-lg-auto">
-                <p class="h5 mb-3">Дополнительно</p>
+                <p class="mb-2" th:text="#{footer.additionally}"></p>
                 <ul class="nav flex-column">
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://ru.code-basics.com/">
-                            Code Basics
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://guides.hexlet.io/">Hexlet Guides</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://codebattle.hexlet.io/">
-                            Кодбаттл
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://sicp.hexlet.io/ru">Hexlet SICP</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link px-0 py-1 text-light" href="https://guides.hexlet.io/">
-                            Гайды Хекслета
-                        </a>
+                        <a class="nav-link px-0 py-1 text-muted" href="https://cv.hexlet.io/">Hexlet-CV</a>
                     </li>
                 </ul>
             </div>

diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
-    <title>Hexlet Typo Reporter</title>
+    <title>FixIT</title>
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" type="text/css" />

diff --git a/src/main/resources/templates/fragments/panels.html b/src/main/resources/templates/fragments/panels.html
@@ -4,8 +4,8 @@
 
 <body>
 <nav aria-label="Main navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" th:fragment="mainNavbarTop">
-    <div class="container-fluid">
-        <a class="navbar-brand" th:href="@{/workspaces}">Hexlet Typo Reporter</a>
+    <div class="container">
+        <a class="navbar-brand" th:href="@{/workspaces}">FixIT</a>
         <button aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
                 data-bs-target="#mainNavbar" data-bs-toggle="collapse" type="button">
             <span class="navbar-toggler-icon"></span>

diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}">
 
-<head th:replace="~{fragments/header :: head}"></head>
-<body class="d-flex flex-column min-vh-100 bg-light bg-gradient bg-gradient">
+<body class="bg-light bg-gradient">
     <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
         <symbol id="check2" fill="white" viewBox="0 0 16 16">
             <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
@@ -19,9 +20,8 @@
             <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
         </symbol>
     </svg>
-    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
-    <main>
-        <section class="py-5 mt-5" id="heroes">
+    <div layout:fragment="content">
+        <section class="py-5" id="heroes">
             <div class="container my-5">
                 <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border-0 shadow-lg">
                     <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
@@ -106,7 +106,6 @@ <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold" th:text="#{text.how-it-works-s
                 </div>
             </div>
         </section>
-    </main>
-    <footer th:replace="~{fragments/footer :: footer}"></footer>
+    </div>
 </body>
 </html>
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+<head th:replace="~{fragments/header :: head}"></head>
+<body style="padding-top: 4.5rem" class="d-flex flex-column min-vh-100">
+    <nav th:replace="~{fragments/panels :: mainNavbarTop}"></nav>
+    <main class="container mb-5">
+        <div layout:fragment="content">
+        </div>
+    </main>
+    <footer th:replace="~{fragments/footer :: footer}"></footer>
+</body>
+</html>