elex/asgard__
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

still under construction

Browse Source
This commit is contained in:
Elex
2021-08-22 12:54:11 +09:00
parent 14af7dfe4e
commit f2a44efb88
38 changed files with 704 additions and 10646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/main/java/com/elex_project/asgard/config/ViewConfig.java
View File

@@ -12,6 +12,7 @@ import com.elex_project.asgard.view.ViewModelInterceptor;
import org.jetbrains.annotations.NotNull;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@@ -29,4 +30,11 @@ public class ViewConfig implements WebMvcConfigurer {
.addPathPatterns("/**");*/
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/assets/**")
.addResourceLocations("classpath:/assets/");
/*registry.addResourceHandler("/{filename:\\w+\\.txt}")
.addResourceLocations("classpath:/static/");*/
}
}

11
app/src/main/java/com/elex_project/asgard/controller/DocumentController.java
View File

@@ -27,15 +27,10 @@ public class DocumentController {
@Autowired
private DocumentService documentService;
/*@GetMapping(path = "/*")
public ModelAndView reader(){
return new ModelAndView("document", map());
}*/
@GetMapping(path = "/*")
public ModelAndView editor(@RequestParam(required = false) boolean edit, ModelAndView model) {
public ModelAndView document(@RequestParam(required = false) boolean edit, ModelAndView model) {
if (edit) {
model.setViewName("edit");
model.setViewName("editor");
} else {
model.setViewName("document");
}
@@ -57,7 +52,7 @@ public class DocumentController {
@PostMapping()
@ResponseStatus(HttpStatus.CREATED)
public String uploadFile(final @RequestParam("file") MultipartFile file,
final @NotNull RedirectAttributes redirectAttributes) {
final @NotNull RedirectAttributes redirectAttributes) {
//storageService.store(file);
// 업로드 후 새로 고침

34
app/src/main/java/com/elex_project/asgard/controller/HomeController.java
View File

@@ -7,6 +7,7 @@
package com.elex_project.asgard.controller;
import com.elex_project.abraxas.IOz;
import com.elex_project.asgard.service.SitemapService;
import com.elex_project.asgard.service.SyndicationService;
import com.elex_project.asgard.syndication.SyndicationType;
@@ -20,6 +21,9 @@ import org.springframework.web.bind.annotation.*;
import org.springframework.web.server.ResponseStatusException;
import org.springframework.web.servlet.ModelAndView;
import java.io.IOException;
import java.util.Objects;
/**
* @link http://www.robotstxt.org/robotstxt.html
* @link http://humanstxt.org/
@@ -51,6 +55,36 @@ public class HomeController {
return "home";
}
@GetMapping(path = "/robots.txt",
produces = {MediaType.TEXT_PLAIN_VALUE})
@ResponseStatus(HttpStatus.OK)
@ResponseBody
public String robots() {
try {
return IOz.readStringFrom(Objects.requireNonNull(getClass()
.getResourceAsStream("/assets/robots.txt")));
} catch (IOException e) {
return "";
}
}
@GetMapping(path = "/humans.txt",
produces = {MediaType.TEXT_PLAIN_VALUE})
@ResponseStatus(HttpStatus.OK)
@ResponseBody
public String humans() {
try {
return IOz.readStringFrom(Objects.requireNonNull(getClass()
.getResourceAsStream("/assets/humans.txt")));
} catch (IOException e) {
return "";
}
}
public String favicon(){
return "";//todo favicon.ico
}
/**
* @return
* @link {https://www.sitemaps.org/ko/protocol.html}

6
app/src/main/java/com/elex_project/asgard/service/DocumentService.java
View File

@@ -7,10 +7,16 @@
package com.elex_project.asgard.service;
import com.elex_project.asgard.supplements.Markdown;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Slf4j
@Service
public class DocumentService {
@Autowired
private Markdown markdown;
}

1
app/src/main/java/com/elex_project/asgard/view/ViewModelInterceptor.java
View File

@@ -18,6 +18,7 @@ public class ViewModelInterceptor implements HandlerInterceptor {
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
//request.getRequestURI()
if (null != modelAndView) {
modelAndView.addObject("title", "Title~!!!");
}

2
app/src/main/resources/static/bundle.css → app/src/main/resources/assets/app.css
View File

File diff suppressed because one or more lines are too long

2
app/src/main/resources/static/bundle.js → app/src/main/resources/assets/app.js
View File

File diff suppressed because one or more lines are too long

0
app/src/main/resources/static/humans.txt → app/src/main/resources/assets/humans.txt
View File

0
app/src/main/resources/static/robots.txt → app/src/main/resources/assets/robots.txt
View File

18
app/src/main/resources/templates/document.html
View File

@@ -1,15 +1,8 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<th:block th:replace="~{fragments :: meta}"></th:block>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="author" href="/humans.txt" />
<link rel="stylesheet" href="/bundle.css" />
<title th:text="${title}">{{title}}</title>
<script src="/bundle.js"></script>
<th:block th:replace="~{fragments :: head_common}"></th:block>
<th:block th:replace="~{fragments :: head_meta}"></th:block>
</head>
<body>
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
@@ -133,6 +126,9 @@
<blockquote>
Hahaha
</blockquote>
<pre><code class="language-java">
console.writeline("Hello");
</code></pre>
<p>
동해물과 백두산이 마르고 닳도록
</p>
@@ -158,9 +154,7 @@
</p>
</article>
</main>
<footer class="mdc-layout-grid" th:include="~{fragments :: footer}">
<p>Copyright &copy; 2021</p>
</footer>
<footer class="mdc-layout-grid" th:include="~{fragments :: footer}"></footer>
</div>
</div>
</body>

161
app/src/main/resources/templates/editor.html Normal file
View File

@@ -0,0 +1,161 @@
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head>
<th:block th:replace="~{fragments :: head_common}"></th:block>
<link href="https://unpkg.com/easymde/dist/easymde.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
</head>
<body>
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__header">
<p>Hello</p>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list mdc-list--dense">
<a
class="mdc-list-item mdc-list-item--activated"
href="#"
aria-current="page"
>
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-2" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text"
>Drafts Drafts Drafts Drafts Drafts Drafts Drafts</span
>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
</nav>
</div>
</aside>
<div id="layout-content" class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-elevation-overlay"></div>
<div class="mdc-top-app-bar__row">
<section
class="
mdc-top-app-bar__section mdc-top-app-bar__section--align-start
"
>
<button
class="
material-icons
mdc-top-app-bar__navigation-icon
mdc-icon-button
"
aria-label="Open navigation menu"
>
menu
</button>
<span class="mdc-top-app-bar__title">Page title.</span>
</section>
<section
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
role="toolbar"
>
<button
class="
material-icons
mdc-top-app-bar__action-item
mdc-icon-button
"
aria-label="Favorite"
>
favorite
</button>
<button
class="
material-icons
mdc-top-app-bar__action-item
mdc-icon-button
"
aria-label="Search"
>
search
</button>
<div class="mdc-menu-surface--anchor">
<button
id="btn-overflow"
class="
material-icons
mdc-top-app-bar__action-item
mdc-icon-button
"
aria-label="Options"
>
more_vert
</button>
<div class="mdc-menu mdc-menu-surface">
<ul
class="mdc-list"
role="menu"
aria-hidden="true"
aria-orientation="vertical"
tabindex="-1"
>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">A Menu Item</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Another Menu Item</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
<div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
<textarea id="editor"></textarea>
<footer class="mdc-layout-grid" th:include="~{fragments :: footer}"></footer>
</div>
</div>
</body>
</html>

31
app/src/main/resources/templates/error.html
View File

@@ -2,27 +2,36 @@
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="|${status} - ${message}|">{{status}} - {{message}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Ubuntu+Mono&display=swap" rel="stylesheet"> <style>
html {font-family: 'Ubuntu Mono', monospace; font-size: 17px; line-height: 1.3;}
body{background-color: #404552; color: #c8c8c8;}
input {background: none; color: inherit; outline: none; border: 0; appearance: none;}
.green {color: #adff2f;} .blue {color: #5294e2;}
.inline {display:flex;} .inline > *:last-child {flex-grow: 1;}
</style>
<th:block th:fragment="meta">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Ubuntu+Mono&display=swap" rel="stylesheet"/>
<style>
html {font-family: 'Ubuntu Mono', monospace; font-size: 17px; line-height: 1.3;}
body{background-color: #404552; color: #c8c8c8;}
input {background: none; color: inherit; outline: none; border: 0; appearance: none;}
.green {color: #adff2f;} .blue {color: #5294e2;}
.inline {display:flex;} .inline > *:last-child {flex-grow: 1;}
</style>
</th:block>
</head>
<body>
<th:block th:fragment="inputline_1">
<p class="inline">
<span class="green">www-user@elex-project.com</span><span>:</span>
<span class="blue" th:text="${path}">{{path}}</span><span>$&nbsp;</span><span th:text="|http get ${path}|">http get {{path}}</span>
<span class="blue" th:text="${path}">{{path}}</span><span>$&nbsp;</span>
<span th:text="|http get ${path}|">http get {{path}}</span>
</p>
</th:block>
<p th:text="|${status} - ${message}|">{{status}} - {{message}}</p>
<p th:utext="|Trace:<br/> ${trace}|">Trace:<br /> {{trace}}</p>
<th:block th:fragment="inputline_2">
<p class="inline">
<span class="green">www-user@elex-project.com</span><span>:</span>
<span class="blue" th:text="${path}">{{path}}</span><span>$&nbsp;</span><input type="text"/>
</p>
</th:block>
</body>
</html>

11
app/src/main/resources/templates/error/404.html
View File

@@ -1,13 +1,12 @@
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="|${status} - ${message}|">{{status}} - {{message}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 - Not Found</title>
<th:block th:replace="~{error :: meta}"></th:block>
</head>
<body>
<p>Oops-404!</p>
<h1 th:text="${status}">{{status}}</h1>
<p th:text="${message}">{{message}}</p>
<th:block th:replace="~{error :: inputline_1}"></th:block>
<p>Sorry, The page you requested does not exist.</p>
<th:block th:replace="~{error :: inputline_2}"></th:block>
</body>
</html>

205
app/src/main/resources/templates/fragments.html
View File

@@ -1,50 +1,183 @@
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.thymeleaf.org" th:lang="${html_lang}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title th:text="${title}">{{title}}</title>
<th:block th:fragment="meta">
<meta property="og:title" content="{{title}}" />
<meta property="og:url" content="{{url}}" />
<meta name="description" property="og:description" content="{{description}}" />
<meta property="og:locale" content="{{html_lang}}" />
<meta property="og:site_name" content="Elex Project" />
<meta property="og:image" content="{{image}}" />
<meta property="og:type" content="article" />
<meta property="og:article:section" content="{{section}}" />
<meta name="keyword" property="og:article:tag" content="{{tag}}" />
<meta property="og:article:published_time" content="{{published_time}}" />
<meta property="og:article:modified_time" content="{{modified_time}}" />
<th:block th:fragment="head_common">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title th:text="${title}">{{title}}</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/github-dark.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<link rel="stylesheet" href="/assets/app.css"/>
<script src="/assets/app.js"></script>
<link rel="author" href="/humans.txt"/>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
<link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon.png"/>
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg"><!-- TODO -->
<script>
const Elex = {
markdownEditor: null,
initHighlightJs: function () {
document.querySelectorAll("article pre code").forEach((el) => {
hljs.highlightElement(el);
});
},
initEditor: function () {
let elem = document.querySelector("#editor");
if (null != elem){
this.markdownEditor = new EasyMDE({
element: elem,
autofocus: true,
indentWithTabs: true,
lineNumbers: true,
lineWrapping: true,
previewClass: "elex-markdown-preview",
promptTexts: {
image: "URL of the image:",
link: "URL of the link:",
},
uploadImage: true,
imageAccept: "image/png, image/jpeg",
imageUploadEndpoint: "",
imageCSRFToken: "",
renderingConfig: {
codeSyntaxHighlighting: true,
},
});
}
},
};
window.addEventListener("DOMContentLoaded", (event) => {
Elex.initHighlightJs();
Elex.initEditor();
});
</script>
</th:block>
<th:block th:fragment="head_meta">
<meta property="og:title" content="{{title}}"/>
<meta property="og:url" content="{{url}}"/>
<meta name="description" property="og:description" content="{{description}}"/>
<meta property="og:locale" content="{{html_lang}}"/>
<meta property="og:site_name" content="Elex Project"/>
<meta property="og:image" content="{{image}}"/>
<meta property="og:type" content="article"/>
<meta property="og:article:section" content="{{section}}"/>
<meta name="keyword" property="og:article:tag" content="{{tag}}"/>
<meta property="og:article:published_time" content="{{published_time}}"/>
<meta property="og:article:modified_time" content="{{modified_time}}"/>
<meta name="author" property="og:article:author" content="{{author}}"/>
</th:block>
<link rel="stylesheet" href="/persona.min.css" />
<script>
let toggle = function () {
const elem = document.querySelector(".layout");
elem.classList.toggle("closed");
};
</script>
</head>
<body>
<div class="layout">
<div class="sidebar">
<nav class="nav">
<ul>
</ul>
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__header">
<p>Hello</p>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list mdc-list--dense">
<a class="mdc-list-item mdc-list-item--activated" href="#" aria-current="page">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-2" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
</nav>
</div>
<header class="header">
<span class="icon-button material-icons" onclick="toggle();">menu</span>
<h1 class="grow" th:text="${title}">{{title}}</h1>
</aside>
<div id="layout-content" class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-elevation-overlay"></div>
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button"
aria-label="Open navigation menu">menu</button>
<span class="mdc-top-app-bar__title" th:text="${title}">Page title.</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
aria-label="Favorite" onclick="">favorite</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
aria-label="Search" onclick="">search</button>
<div class="mdc-menu-surface--anchor">
<button id="btn-overflow" class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
aria-label="Options">more_vert</button>
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">A Menu Item</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Another Menu Item</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
<div class="main">
<main>
<div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
<main class="mdc-layout-grid">
<article>
</article>
</main>
<footer th:fragment="footer">
Copyright &copy; 2021. Elex. All Rights Reserved.
<footer class="mdc-layout-grid">
<th:block th:fragment="footer">
<p>Copyright &copy; 2021. Elex. All Rights Reserved.</p>
</th:block>
</footer>
</div>
</div>

232
app/src/main/resources/templates/home.html
View File

@@ -1,39 +1,217 @@
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title th:text="${title}">{{title}}</title>
<th:block th:replace="~{fragments :: meta}"></th:block>
<link rel="stylesheet" href="/persona.min.css" />
<script>
let toggle = function () {
const elem = document.querySelector(".layout");
elem.classList.toggle("closed");
};
</script>
<th:block th:replace="~{fragments :: head_common}"></th:block>
<th:block th:replace="~{fragments :: head_meta}"></th:block>
</head>
<body>
<div class="layout">
<div class="sidebar">
<nav class="nav">
<ul>
</ul>
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
<div class="mdc-drawer__header">
<p>Hello</p>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list mdc-list--dense">
<a
class="mdc-list-item mdc-list-item--activated"
href="#"
aria-current="page"
>
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Inbox</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Outgoing</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-1" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts Drafts Drafts Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item mdc-list-item--depth-2" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text"
>Drafts Drafts Drafts Drafts Drafts Drafts Drafts</span
>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Drafts</span>
</a>
</nav>
</div>
<header class="header">
<span class="icon-button material-icons" onclick="toggle();">menu</span>
<h1 class="grow" th:text="${title}">{{title}}</h1>
</aside>
<div id="layout-content" class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-elevation-overlay"></div>
<div class="mdc-top-app-bar__row">
<section
class="
mdc-top-app-bar__section mdc-top-app-bar__section--align-start
"
>
<button
class="
material-icons
mdc-top-app-bar__navigation-icon
mdc-icon-button
"
aria-label="Open navigation menu"
>
menu
</button>
<span class="mdc-top-app-bar__title">Page title.</span>
</section>
<section
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
role="toolbar"
>
<button
class="
material-icons
mdc-top-app-bar__action-item
mdc-icon-button
"
aria-label="Favorite"
>
favorite
</button>
<button
class="
material-icons
mdc-top-app-bar__action-item
mdc-icon-button
"
aria-label="Search"
>
search
</button>
<div class="mdc-menu-surface--anchor">
<button
id="btn-overflow"
class="
material-icons
mdc-top-app-bar__action-item
mdc-icon-button
"
aria-label="Options"
>
more_vert
</button>
<div class="mdc-menu mdc-menu-surface">
<ul
class="mdc-list"
role="menu"
aria-hidden="true"
aria-orientation="vertical"
tabindex="-1"
>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">A Menu Item</span>
</li>
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Another Menu Item</span>
</li>
</ul>
</div>
</div>
</section>
</div>
</header>
<div class="main">
<main>
<p th:text="#{hello.text}">{{#i18n}}hello.text{{/i18n}}</p>
<p>...</p>
<div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
<main class="mdc-layout-grid">
<article>
<h1>Heading 1</h1>
<p>Ha<em>Hehe</em>hoho.</p>
<button class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Button</span>
</button>
<div>
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="username-label"
name="username"
/>
<span class="mdc-floating-label" id="username-label"
>Username</span
>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input
type="password"
class="mdc-text-field__input"
aria-labelledby="password-label"
name="password"
/>
<span class="mdc-floating-label" id="password-label"
>Password</span
>
<span class="mdc-line-ripple"></span>
</label>
</div>
<blockquote>Hahaha</blockquote>
<p>동해물과 백두산이 마르고 닳도록</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
<strong>Ut enim ad minim</strong> veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</main>
<footer th:replace="~{fragments :: footer}">
</footer>
<footer class="mdc-layout-grid" th:include="~{fragments :: footer}"></footer>
</div>
</div>
</body>