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.jetbrains.annotations.NotNull;
import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration @Configuration
@@ -29,4 +30,11 @@ public class ViewConfig implements WebMvcConfigurer {
.addPathPatterns("/**");*/ .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 @Autowired
private DocumentService documentService; private DocumentService documentService;
/*@GetMapping(path = "/*")
public ModelAndView reader(){
return new ModelAndView("document", map());
}*/
@GetMapping(path = "/*") @GetMapping(path = "/*")
public ModelAndView editor(@RequestParam(required = false) boolean edit, ModelAndView model) { public ModelAndView document(@RequestParam(required = false) boolean edit, ModelAndView model) {
if (edit) { if (edit) {
model.setViewName("edit"); model.setViewName("editor");
} else { } else {
model.setViewName("document"); model.setViewName("document");
} }
@@ -57,7 +52,7 @@ public class DocumentController {
@PostMapping() @PostMapping()
@ResponseStatus(HttpStatus.CREATED) @ResponseStatus(HttpStatus.CREATED)
public String uploadFile(final @RequestParam("file") MultipartFile file, public String uploadFile(final @RequestParam("file") MultipartFile file,
final @NotNull RedirectAttributes redirectAttributes) { final @NotNull RedirectAttributes redirectAttributes) {
//storageService.store(file); //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; 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.SitemapService;
import com.elex_project.asgard.service.SyndicationService; import com.elex_project.asgard.service.SyndicationService;
import com.elex_project.asgard.syndication.SyndicationType; 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.server.ResponseStatusException;
import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.ModelAndView;
import java.io.IOException;
import java.util.Objects;
/** /**
* @link http://www.robotstxt.org/robotstxt.html * @link http://www.robotstxt.org/robotstxt.html
* @link http://humanstxt.org/ * @link http://humanstxt.org/
@@ -51,6 +55,36 @@ public class HomeController {
return "home"; 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 * @return
* @link {https://www.sitemaps.org/ko/protocol.html} * @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; package com.elex_project.asgard.service;
import com.elex_project.asgard.supplements.Markdown;
import lombok.extern.slf4j.Slf4j; import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
@Slf4j @Slf4j
@Service @Service
public class DocumentService { 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 @Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception { ModelAndView modelAndView) throws Exception {
//request.getRequestURI()
if (null != modelAndView) { if (null != modelAndView) {
modelAndView.addObject("title", "Title~!!!"); 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> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}"> <html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head> <head>
<meta charset="utf-8" /> <th:block th:replace="~{fragments :: head_common}"></th:block>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <th:block th:replace="~{fragments :: head_meta}"></th:block>
<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>
</head> </head>
<body> <body>
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible"> <aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
@@ -133,6 +126,9 @@
<blockquote> <blockquote>
Hahaha Hahaha
</blockquote> </blockquote>
<pre><code class="language-java">
console.writeline("Hello");
</code></pre>
<p> <p>
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p> </p>
@@ -158,9 +154,7 @@
</p> </p>
</article> </article>
</main> </main>
<footer class="mdc-layout-grid" th:include="~{fragments :: footer}"> <footer class="mdc-layout-grid" th:include="~{fragments :: footer}"></footer>
<p>Copyright &copy; 2021</p>
</footer>
</div> </div>
</div> </div>
</body> </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"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<title th:text="|${status} - ${message}|">{{status}} - {{message}}</title> <title th:text="|${status} - ${message}|">{{status}} - {{message}}</title>
<meta charset="utf-8"> <th:block th:fragment="meta">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"/>
<link rel="preconnect" href="https://fonts.gstatic.com"> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Ubuntu+Mono&display=swap" rel="stylesheet"> <style> <link rel="preconnect" href="https://fonts.gstatic.com"/>
html {font-family: 'Ubuntu Mono', monospace; font-size: 17px; line-height: 1.3;} <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Ubuntu+Mono&display=swap" rel="stylesheet"/>
body{background-color: #404552; color: #c8c8c8;} <style>
input {background: none; color: inherit; outline: none; border: 0; appearance: none;} html {font-family: 'Ubuntu Mono', monospace; font-size: 17px; line-height: 1.3;}
.green {color: #adff2f;} .blue {color: #5294e2;} body{background-color: #404552; color: #c8c8c8;}
.inline {display:flex;} .inline > *:last-child {flex-grow: 1;} input {background: none; color: inherit; outline: none; border: 0; appearance: none;}
</style> .green {color: #adff2f;} .blue {color: #5294e2;}
.inline {display:flex;} .inline > *:last-child {flex-grow: 1;}
</style>
</th:block>
</head> </head>
<body> <body>
<th:block th:fragment="inputline_1">
<p class="inline"> <p class="inline">
<span class="green">www-user@elex-project.com</span><span>:</span> <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> </p>
</th:block>
<p th:text="|${status} - ${message}|">{{status}} - {{message}}</p> <p th:text="|${status} - ${message}|">{{status}} - {{message}}</p>
<p th:utext="|Trace:<br/> ${trace}|">Trace:<br /> {{trace}}</p> <p th:utext="|Trace:<br/> ${trace}|">Trace:<br /> {{trace}}</p>
<th:block th:fragment="inputline_2">
<p class="inline"> <p class="inline">
<span class="green">www-user@elex-project.com</span><span>:</span> <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"/> <span class="blue" th:text="${path}">{{path}}</span><span>$&nbsp;</span><input type="text"/>
</p> </p>
</th:block>
</body> </body>
</html> </html>

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

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

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

@@ -1,50 +1,183 @@
<!doctype html> <!doctype html>
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org" th:lang="${html_lang}">
<head> <head>
<meta charset="utf-8"> <th:block th:fragment="head_common">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8">
<title th:text="${title}">{{title}}</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<th:block th:fragment="meta"> <title th:text="${title}">{{title}}</title>
<meta property="og:title" content="{{title}}" /> <link rel="preconnect" href="https://fonts.gstatic.com">
<meta property="og:url" content="{{url}}" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"/>
<meta name="description" property="og:description" content="{{description}}" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<meta property="og:locale" content="{{html_lang}}" /> <link href="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/styles/github-dark.min.css" rel="stylesheet"/>
<meta property="og:site_name" content="Elex Project" /> <script src="https://unpkg.com/@highlightjs/cdn-assets@11.2.0/highlight.min.js"></script>
<meta property="og:image" content="{{image}}" /> <link rel="stylesheet" href="/assets/app.css"/>
<meta property="og:type" content="article" /> <script src="/assets/app.js"></script>
<meta property="og:article:section" content="{{section}}" /> <link rel="author" href="/humans.txt"/>
<meta name="keyword" property="og:article:tag" content="{{tag}}" /> <link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
<meta property="og:article:published_time" content="{{published_time}}" /> <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon.png"/>
<meta property="og:article:modified_time" content="{{modified_time}}" /> <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}}"/> <meta name="author" property="og:article:author" content="{{author}}"/>
</th:block> </th:block>
<link rel="stylesheet" href="/persona.min.css" />
<script>
let toggle = function () {
const elem = document.querySelector(".layout");
elem.classList.toggle("closed");
};
</script>
</head> </head>
<body> <body>
<div class="layout"> <aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
<div class="sidebar"> <div class="mdc-drawer__header">
<nav class="nav"> <p>Hello</p>
<ul> </div>
<div class="mdc-drawer__content">
</ul> <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> </nav>
</div> </div>
<header class="header"> </aside>
<span class="icon-button material-icons" onclick="toggle();">menu</span> <div id="layout-content" class="mdc-drawer-app-content">
<h1 class="grow" th:text="${title}">{{title}}</h1> <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> </header>
<div class="main"> <div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
<main> <main class="mdc-layout-grid">
<article>
</article>
</main> </main>
<footer th:fragment="footer"> <footer class="mdc-layout-grid">
Copyright &copy; 2021. Elex. All Rights Reserved. <th:block th:fragment="footer">
<p>Copyright &copy; 2021. Elex. All Rights Reserved.</p>
</th:block>
</footer> </footer>
</div> </div>
</div> </div>

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

@@ -1,39 +1,217 @@
<!doctype html> <!doctype html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}"> <html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head> <head>
<meta charset="utf-8"> <th:block th:replace="~{fragments :: head_common}"></th:block>
<meta name="viewport" content="width=device-width, initial-scale=1"> <th:block th:replace="~{fragments :: head_meta}"></th:block>
<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>
</head> </head>
<body> <body>
<div class="layout"> <aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">
<div class="sidebar"> <div class="mdc-drawer__header">
<nav class="nav"> <p>Hello</p>
<ul> </div>
<div class="mdc-drawer__content">
</ul> <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> </nav>
</div> </div>
<header class="header"> </aside>
<span class="icon-button material-icons" onclick="toggle();">menu</span> <div id="layout-content" class="mdc-drawer-app-content">
<h1 class="grow" th:text="${title}">{{title}}</h1> <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> </header>
<div class="main"> <div id="layout-main" class="mdc-top-app-bar--fixed-adjust">
<main> <main class="mdc-layout-grid">
<p th:text="#{hello.text}">{{#i18n}}hello.text{{/i18n}}</p> <article>
<h1>Heading 1</h1>
<p>...</p> <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> </main>
<footer th:replace="~{fragments :: footer}"> <footer class="mdc-layout-grid" th:include="~{fragments :: footer}"></footer>
</footer>
</div> </div>
</div> </div>
</body> </body>

29
elex-theme/.editorconfig
View File

@@ -1,29 +0,0 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.json]
indent_size = 2
[*.{html,js,md}]
block_comment_start = /**
block_comment = *
block_comment_end = */

23
elex-theme/.gitignore vendored
View File

@@ -1,23 +0,0 @@
## editors
/.idea
/.vscode
## system files
.DS_Store
## npm
/node_modules/
/npm-debug.log
## testing
/coverage/
## temp folders
/.tmp/
# build
/_site/
/dist/
/out-tsc/
storybook-static

21
elex-theme/LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2021 elex-theme
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

30
elex-theme/README.md
View File

@@ -1,30 +0,0 @@
<p align="center">
<img width="200" src="https://open-wc.org/hero.png"></img>
</p>
## Open-wc Starter App
[![Built with open-wc recommendations](https://img.shields.io/badge/built%20with-open--wc-blue.svg)](https://github.com/open-wc)
## Quickstart
To get started:
```sh
npm init @open-wc
# requires node 10 & npm 6 or higher
```
## Scripts
- `start` runs your app for development, reloading on file changes
- `start:build` runs your app after it has been built using the build command
- `build` builds your app and outputs it in your `dist` directory
- `test` runs your test suite with Web Test Runner
- `lint` runs the linter for your project
## Tooling configs
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.

26
elex-theme/custom-elements.json
View File

@@ -1,26 +0,0 @@
{
"version": 2,
"tags": [
{
"name": "elex-theme",
"description": "An application with a title and an action counter",
"properties": [
{
"name": "title",
"type": "String",
"description": "The title of your application",
"default": "Hey there"
},
{
"name": "page",
"type": "String",
"description": "Which page to show",
"default": "main"
}
],
"events": [],
"slots": [],
"cssProperties": []
}
]
}

28
elex-theme/index.html
View File

@@ -1,28 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="Put your description here.">
<base href="/">
<style>
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #ededed;
}
</style>
<title>elex-theme</title>
</head>
<body>
<elex-theme></elex-theme>
<script type="module" src="./out-tsc/src/app.js"></script>
</body>
</html>

84
elex-theme/package.json
View File

@@ -1,84 +0,0 @@
{
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@open-wc/eslint-config": "^4.2.0",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
"@web/dev-server": "^0.1.8",
"babel-loader": "^8.2.2",
"concurrently": "^5.3.0",
"css-loader": "^5.2.0",
"eslint": "^7.21.0",
"eslint-config-prettier": "^7.2.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.4",
"prettier": "^2.2.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.18",
"tslib": "^2.1.0",
"typescript": "^4.2.3",
"webpack": "^5.25.0",
"webpack-cli": "^4.5.0"
},
"scripts": {
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
"build": "webpack"
},
"name": "elex-theme",
"version": "0.0.0",
"description": "Webcomponent elex-theme following open-wc recommendations",
"author": "elex-theme",
"license": "MIT",
"dependencies": {
"@material/mwc-button": "^0.20.0",
"@material/mwc-drawer": "^0.20.0",
"@material/mwc-icon-button": "^0.20.0",
"@material/mwc-top-app-bar": "^0.20.0",
"@material/mwc-top-app-bar-fixed": "^0.20.0",
"easymde": "^2.14.0",
"lit-element": "^2.4.0",
"lit-html": "^1.3.0"
},
"eslintConfig": {
"parser": "@typescript-eslint/parser",
"extends": [
"@open-wc/eslint-config",
"eslint-config-prettier"
],
"plugins": [
"@typescript-eslint"
],
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error"
],
"import/no-unresolved": "off",
"import/extensions": [
"info",
"always",
{
"ignorePackages": true
}
]
}
},
"prettier": {
"singleQuote": true,
"arrowParens": "avoid"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"prettier --write"
]
}
}

79
elex-theme/src/ElexTheme.ts
View File

@@ -1,79 +0,0 @@
import { LitElement, html, css, property, customElement } from 'lit-element';
import { openWcLogo } from './open-wc-logo';
@customElement('elex-theme')
export class ElexTheme extends LitElement {
@property({ type: String }) title = 'My app';
static styles = css`
:host {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-size: calc(10px + 2vmin);
color: #1a2b42;
max-width: 960px;
margin: 0 auto;
text-align: center;
background-color: var(--elex-theme-background-color);
}
main {
flex-grow: 1;
}
.logo > svg {
margin-top: 36px;
animation: app-logo-spin infinite 20s linear;
}
@keyframes app-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.app-footer {
font-size: calc(12px + 0.5vmin);
align-items: center;
}
.app-footer a {
margin-left: 5px;
}
`;
render() {
return html`
<main>
<div class="logo">${openWcLogo}</div>
<h1>${this.title}</h1>
<p>Edit <code>src/ElexTheme.js</code> and save to reload!</p>
<a
class="app-link"
href="https://open-wc.org/guides/developing-components/code-examples"
target="_blank"
rel="noopener noreferrer"
>
Code examples
</a>
</main>
<p class="app-footer">
🚽 Made with love by
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/open-wc"
>open-wc</a
>.
</p>
`;
}
}

9
elex-theme/src/app.ts
View File

@@ -1,9 +0,0 @@
export { ElexTheme } from './ElexTheme';
export * from '@material/mwc-button';
export * from '@material/mwc-icon-button';
export * from '@material/mwc-top-app-bar-fixed';
export * from '@material/mwc-drawer';
//import * as EasyMDE from 'easymde';
//export {EasyMDE};

33
elex-theme/src/open-wc-logo.ts
View File

@@ -1,33 +0,0 @@
import { html } from 'lit-html';
export const openWcLogo = html`
<svg
width="244px"
height="244px"
viewBox="0 0 244 244"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#9B00FF" offset="0%"></stop>
<stop stop-color="#0077FF" offset="100%"></stop>
</linearGradient>
</defs>
<g
id="Page-1"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<path
d="M205.639259,176.936244 C207.430887,174.217233 209.093339,171.405629 210.617884,168.510161 M215.112174,158.724316 C216.385153,155.50304 217.495621,152.199852 218.433474,148.824851 M220.655293,138.874185 C221.231935,135.482212 221.637704,132.03207 221.863435,128.532919 M222,118.131039 C221.860539,114.466419 221.523806,110.85231 221.000113,107.299021 M218.885321,96.8583653 C218.001583,93.4468963 216.942225,90.1061026 215.717466,86.8461994 M211.549484,77.3039459 C209.957339,74.1238901 208.200597,71.0404957 206.290425,68.0649233 M200.180513,59.5598295 C181.848457,36.6639805 153.655709,22 122.036748,22 C66.7879774,22 22,66.771525 22,122 C22,177.228475 66.7879774,222 122.036748,222 C152.914668,222 180.52509,208.015313 198.875424,186.036326"
id="Shape"
stroke="url(#linearGradient-1)"
stroke-width="42.0804674"
></path>
</g>
</svg>
`;

136
elex-theme/templates/document.html
View File

@@ -1,136 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
:root {
--mdc-theme-primary: orange;
}
html, body{
margin:0; border:0; padding:0;
width: 100%; height: 100%;
}
</style>
<script type="module" src="/dist/bundle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const drawer = document.getElementsByTagName('mwc-drawer')[0];
if (drawer) {
const container = drawer.parentNode;
container.addEventListener('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
}
});
</script>
</head>
<body>
<mwc-drawer hasHeader type="dismissible">
<span slot="title">Drawer Title</span>
<div>
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to
ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying
through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our
power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to
be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of
business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore
always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or
else he endures pains to avoid worse pains."
</p>
</div>
<div slot="appContent">
<mwc-top-app-bar-fixed>
<mwc-icon-button slot="navigationIcon" icon="menu"></mwc-icon-button>
<div slot="title">Title</div>
<div>
<p>Hello</p>
<mwc-button raised label="Button"></mwc-button>
<p>
The standard Lorem Ipsum passage, used since the 1500s
"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."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima
veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem
eum fugiat quo voluptas nulla pariatur?"
1914 translation by H. Rackham
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I
will give
you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the
master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
but
because those who do not know how to pursue pleasure rationally encounter consequences that are extremely
painful. Nor
again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
example,
which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has
any right
to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a
pain
that produces no resultant pleasure?"
Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
maxime
placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
aut
officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
recusandae.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
perferendis doloribus asperiores repellat."
1914 translation by H. Rackham
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized
by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are
bound to
ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as
saying
through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour,
when our
power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure
is to
be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the
obligations of
business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man
therefore
always holds in these matters to this principle of selection: he rejects pleasures to secure other greater
pleasures, or
else he endures pains to avoid worse pains."
</p>
</div>
</mwc-top-app-bar-fixed>
</div>
</mwc-drawer>
</body>
</html>

62
elex-theme/templates/editor.html
View File

@@ -1,62 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="../node_modules/easymde/dist/easymde.min.css">
<script src="../node_modules/easymde/dist/easymde.min.js"></script> -->
<style>
:root {
--mdc-theme-primary: orange;
}
html, body{
margin:0; border:0; padding:0;
width: 100%; height: 100%;
}
</style>
<script src="../dist/editor.js"></script>
<script type="module" src="../dist/bundle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
const drawer = document.getElementsByTagName('mwc-drawer')[0];
if (drawer) {
const container = drawer.parentNode;
container.addEventListener('MDCTopAppBar:nav', () => {
drawer.open = !drawer.open;
});
}
let easyMDE = new EasyMDE({ element: document.getElementById('editor') });
});
</script>
</head>
<body>
<mwc-drawer hasHeader type="dismissible">
<span slot="title">Drawer Title</span>
<div>
<p>
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to
ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying
through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our
power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to
be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of
business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore
always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or
else he endures pains to avoid worse pains."
</p>
</div>
<div slot="appContent">
<mwc-top-app-bar-fixed>
<mwc-icon-button slot="navigationIcon" icon="menu"></mwc-icon-button>
<div slot="title">Editor title</div>
</mwc-top-app-bar-fixed>
<div>
<textarea id="editor"></textarea>
</div>
</div>
</mwc-drawer>
</body>
</html>

19
elex-theme/tsconfig.json
View File

@@ -1,19 +0,0 @@
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"moduleResolution": "node",
"noEmitOnError": true,
"lib": ["es2017", "dom"],
"strict": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"importHelpers": true,
"outDir": "out-tsc",
"sourceMap": true,
"inlineSources": true,
"rootDir": "./"
},
"include": ["**/*.ts", "src/app.ts"]
}

28
elex-theme/web-dev-server.config.mjs
View File

@@ -1,28 +0,0 @@
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
/** Use Hot Module replacement by adding --hmr to the start command */
const hmr = process.argv.includes('--hmr');
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
nodeResolve: true,
open: '/',
watch: !hmr,
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
// esbuildTarget: 'auto'
/** Set appIndex to enable SPA routing */
// appIndex: 'demo/index.html',
/** Confgure bare import resolve plugin */
// nodeResolve: {
// exportConditions: ['browser', 'development']
// },
plugins: [
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
],
// See documentation for all available options
});

41
elex-theme/webpack.config.js
View File

@@ -1,41 +0,0 @@
const path = require("path");
const webpack = require("webpack");
module.exports = {
mode: "development",
entry: {
bundle: "./src/app.ts",
editor: ["./node_modules/easymde/dist/easymde.min.js",
"./node_modules/easymde/dist/easymde.min.css"]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.(ts|js)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
{
loader: 'ts-loader'
}
]
},{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
],
},
plugins: [new webpack.ProgressPlugin()],
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
};

4301
elex-theme/yarn-error.log
View File

File diff suppressed because it is too large Load Diff

5518
elex-theme/yarn.lock
View File

File diff suppressed because it is too large Load Diff

4
mdc-theme/editor.html
View File

@@ -18,9 +18,9 @@
href="https://fonts.googleapis.com/icon?family=Material+Icons" href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="./dist/bundle.css" /> <link rel="stylesheet" href="./dist/app.css" />
<title>Hello</title> <title>Hello</title>
<script src="./dist/bundle.js"></script> <script src="./dist/app.js"></script>
<link <link
rel="stylesheet" rel="stylesheet"

4
mdc-theme/index.html
View File

@@ -18,9 +18,9 @@
href="https://fonts.googleapis.com/icon?family=Material+Icons" href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="stylesheet" href="./dist/bundle.css" /> <link rel="stylesheet" href="./dist/app.css" />
<title>Hello</title> <title>Hello</title>
<script src="./dist/bundle.js"></script> <script src="./dist/app.js"></script>
</head> </head>
<body> <body>
<aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible"> <aside id="layout-drawer" class="mdc-drawer mdc-drawer--dismissible">

2
mdc-theme/package.json
View File

@@ -29,6 +29,6 @@
"scripts": { "scripts": {
"start": "webpack serve", "start": "webpack serve",
"build": "webpack", "build": "webpack",
"dist": "cp ./dist/*.css ./dist/*.js ../app/src/main/resources/static" "dist": "cp ./dist/*.css ./dist/*.js ../app/src/main/resources/assets"
} }
} }

8
mdc-theme/src/_article.scss
View File

@@ -51,12 +51,12 @@ main article {
pre { pre {
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.2; line-height: 1.2;
word-wrap: normal; //word-wrap: normal;
border-radius: 4px; border-radius: 4px;
padding: 1rem; //padding: 1rem;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; //white-space: nowrap;
&.scrollable { &.scrollable {
max-height: 280px; max-height: 280px;
@@ -160,7 +160,7 @@ main article {
pre > code { pre > code {
padding: 0; padding: 0;
background: transparent; background: transparent;
white-space: pre; white-space: normal;
word-break: normal; word-break: normal;
} }
img { img {

134
mdc-theme/src/app.js
View File

@@ -1,73 +1,85 @@
import {MDCRipple} from '@material/ripple'; import { MDCRipple } from "@material/ripple";
import {MDCDrawer} from "@material/drawer"; import { MDCDrawer } from "@material/drawer";
import {MDCTopAppBar} from "@material/top-app-bar"; import { MDCTopAppBar } from "@material/top-app-bar";
import {MDCTextField} from '@material/textfield'; import { MDCTextField } from "@material/textfield";
import {MDCList} from '@material/list'; import { MDCList } from "@material/list";
import {MDCMenu} from '@material/menu'; import { MDCMenu } from "@material/menu";
import autoInit from '@material/auto-init'; import autoInit from "@material/auto-init";
const App = { const App = {
appBar:null, appBar: null,
drawer:null, drawer: null,
init: function(){
autoInit();
document.querySelectorAll('.mdc-list-item').forEach(function(item){
new MDCRipple(item);
});
document.querySelectorAll('.mdc-button').forEach(function(item){
new MDCRipple(item);
});
document.querySelectorAll('.mdc-list').forEach(function(item){
new MDCList(item);
});
document.querySelectorAll('.mdc-text-field').forEach(function(item){
new MDCTextField(item);
});
this.initDrawer(); init: function () {
autoInit();
document.querySelectorAll(".mdc-list-item").forEach(function (item) {
new MDCRipple(item);
});
document.querySelectorAll(".mdc-button").forEach(function (item) {
new MDCRipple(item);
});
document.querySelectorAll(".mdc-list").forEach(function (item) {
new MDCList(item);
});
document.querySelectorAll(".mdc-text-field").forEach(function (item) {
new MDCTextField(item);
});
this.appBar = MDCTopAppBar.attachTo(document.querySelector('#layout-content > header')); this.initDrawer();
this.appBar.setScrollTarget(document.querySelector('#layout-content > #layout-main'));
this.appBar.listen('MDCTopAppBar:nav', () => {
this.drawer.open = !this.drawer.open;
});
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
// item.style.marginTop = this.appBar.;
//});
const menu = new MDCMenu(document.querySelector('.mdc-menu')); this.appBar = MDCTopAppBar.attachTo(
document.querySelector('#btn-overflow').addEventListener('click', function(){ document.querySelector("#layout-content > header")
menu.open = true; );
}); this.appBar.setScrollTarget(
document.querySelector("#layout-content > #layout-main")
);
this.appBar.listen("MDCTopAppBar:nav", () => {
this.drawer.open = !this.drawer.open;
});
//document.querySelectorAll('.mdc-top-app-bar--fixed-adjust').forEach(function(item){
// item.style.marginTop = this.appBar.;
//});
console.log('hello world.'); const menu = new MDCMenu(document.querySelector(".mdc-menu"));
window.addEventListener('resize', this.initDrawer); document
}, .querySelector("#btn-overflow")
.addEventListener("click", function () {
menu.open = true;
});
initDrawer: function(){ //this.initEditor();
const drawerElement = document.querySelector('#layout-drawer'); //this.initHighlightJs();
if (document.body.offsetWidth>600){
drawerElement.classList.remove('mdc-drawer--modal');
drawerElement.classList.add('mdc-drawer--dismissible');
try {
document.removeChild(document.querySelector('mdc-drawer-scrim'));
} catch (ex){ }
} else { console.log("hello world.");
drawerElement.classList.add('mdc-drawer--modal'); window.addEventListener("resize", this.initDrawer);
drawerElement.classList.remove('mdc-drawer--dismissible'); },
const scrimElement = document.createElement('div');
scrimElement.classList.add('mdc-drawer-scrim');
drawerElement.parentNode.insertBefore(scrimElement, drawerElement.nextSibling);
}
this.drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer')); initDrawer: function () {
if (document.body.offsetWidth>600) { const drawerElement = document.querySelector("#layout-drawer");
this.drawer.open = true; if (document.body.offsetWidth > 600) {
} drawerElement.classList.remove("mdc-drawer--modal");
} drawerElement.classList.add("mdc-drawer--dismissible");
try {
document.removeChild(document.querySelector("mdc-drawer-scrim"));
} catch (ex) {}
} else {
drawerElement.classList.add("mdc-drawer--modal");
drawerElement.classList.remove("mdc-drawer--dismissible");
const scrimElement = document.createElement("div");
scrimElement.classList.add("mdc-drawer-scrim");
drawerElement.parentNode.insertBefore(
scrimElement,
drawerElement.nextSibling
);
}
this.drawer = MDCDrawer.attachTo(document.querySelector(".mdc-drawer"));
if (document.body.offsetWidth > 600) {
this.drawer.open = true;
}
},
}; };
window.addEventListener('DOMContentLoaded', (event) => { window.addEventListener("DOMContentLoaded", (event) => {
App.init(); App.init();
}); });

5
mdc-theme/webpack.config.js
View File

@@ -38,11 +38,6 @@ module.exports = [
{ {
entry: { entry: {
app: ["./src/app.scss", "./src/app.js"], app: ["./src/app.scss", "./src/app.js"],
//editor: [
// "./node_modules/easymde/src/css/easymde.css",
// "./node_modules/easymde/src/js/easymde.js",
//],
//hljs: ["./node_modules/highlight.js/lib/index.js"],
}, },
output: { output: {
filename: "[name].js", filename: "[name].js",