add menu and make possible for admin to edit rule

Reviewed-on: sunwoo1524/krll#1

.env.example

@@ -1,3 +1,7 @@
+NAME=Krll
+HOST=https://krll.me
+CONTACT=mailto:example@gmail.com
+
 POSTGRES_HOST=db:5432
 POSTGRES_DATABASE=postgres
 POSTGRES_USER=postgres

.gitignore

@@ -6,4 +6,6 @@ __pycache__/
 
 docker-compose.yml
 
-postgres/
+postgres/
+
+rule.html

LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) <year> <copyright holders>
+
+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.

README.md

@@ -0,0 +1,24 @@
+# Krll
+Krll, a privacy-friendly open source URL shortener
+
+https://krll.me
+
+## Run
+1. Copy `.env.example` to `.env` and edit it
+- NAME: Krll server's name(ex: Krll)
+- HOST: Krll server's host(ex: https://krll.me)
+- CONTACT: Server operator's contact info
+- POSTGRES_...: PostgreSQL setting(If you'll run postgresql with docker compose, you should edit just 'POSTGRES_PASSWORD', if not, you should edit 'POSTGRES_HOST' to your postgresql's host.)
+
+2. RUN
+```bash
+# with docker compose
+cp docker-compose.example.yml docker-compose.yml
+docker compose up -d
+
+# without docker compose
+python -m venv venv
+source ./venv/bin/activate/
+pip install -r requirements.txt
+uvicorn main:app --reload
+```

main.py

@@ -7,6 +7,17 @@ from fastapi.templating import Jinja2Templates
 from src.database import engine
 from src import models
 from src.routes.url import url_route
+from src.env import NAME, HOST, CONTACT
+
+import os
+
+
+# server's settings
+DEFAULT_CONTEXT = { "name": NAME, "host": HOST, "contact": CONTACT }
+
+# server's rule page
+rule_f = open(os.path.join(os.path.dirname(os.path.abspath(__file__)), "rule.html"))
+RULE = "\n".join(rule_f.readlines())
 
 
 models.Base.metadata.create_all(bind=engine)
@@ -32,12 +43,29 @@ app.mount("/static", StaticFiles(directory="./static"), name="static")
 
 @app.get("/", response_class=HTMLResponse)
 def index(request: Request):
-    return templates.TemplateResponse(request=request, name="index.html")
+    return templates.TemplateResponse(
+        request=request,
+        name="index.html",
+        context=DEFAULT_CONTEXT
+    )
+
+
+@app.get("/rule", response_class=HTMLResponse)
+def rule(request: Request):
+    return templates.TemplateResponse(
+        request=request,
+        name="rule_frame.html",
+        context=DEFAULT_CONTEXT | { "rule": RULE }
+    )
 
 
 @app.get("/about", response_class=HTMLResponse)
 def about(request: Request):
-    return templates.TemplateResponse(request=request, name="about.html")
+    return templates.TemplateResponse(
+        request=request,
+        name="about.html",
+        context=DEFAULT_CONTEXT
+    )
 
 
 app.include_router(url_route.routes)

rule.example.html

@@ -0,0 +1,5 @@
+<h1>Rule</h1>
+<ul>
+    <li>Do not use Krll for spam.</li>
+    <li>Be legal.</li>
+</ul>

src/env.py

@@ -4,6 +4,10 @@ import os
 
 load_dotenv()
 
+NAME = os.environ.get("NAME")
+HOST = os.environ.get("HOST")
+CONTACT = os.environ.get("CONTACT")
+
 POSTGRES_DATABASE = os.environ.get("POSTGRES_DATABASE")
 POSTGRES_USER = os.environ.get("POSTGRES_USER")
 POSTGRES_PASSWORD = os.environ.get("POSTGRES_PASSWORD")

static/about/style.css

@@ -1,5 +1,7 @@
 main {
     align-items: center;
+    display: flex;
+    flex-direction:column;
 }
 
 section {
@@ -9,4 +11,5 @@ section {
 
 a {
     text-decoration: none;
+    color: var(--link-color);
 }

static/index/dQw4w9WgXcQ.js

@@ -0,0 +1,26 @@
+// yeah it's a fucking easter egg :P
+export const dQw4w9WgXcQ = {
+    check: (url) => {
+        try {
+            const urlObj = new URL(url);
+            let videoId = "";
+
+            if (urlObj.host.split(".").slice(-2)[0] === "youtube") {
+                if (urlObj.pathname.split("/")[1] === "watch") {
+                    videoId = urlObj.searchParams.get("v");
+                } else {
+                    return false;
+                }
+            } else if (urlObj.host === "youtu.be") {
+                videoId = urlObj.pathname.slice(1);
+            } else {
+                return false;
+            }
+
+            if (videoId ==="dQw4w9WgXcQ") return true;
+            return false;
+        } catch {
+            return false
+        }
+    }
+};

static/index/script.js

@@ -1,21 +1,22 @@
 const url_input = document.getElementById("url");
 const to_shorten_btn = document.getElementById("to-shorten-btn");
-const result_container = document.getElementById("result-container");
 const short_url = document.getElementById("short-url");
 const qr_code = document.getElementById("qr-code");
 const error_message = document.getElementById("error");
 const copy_message = document.getElementById("copied");
 
-to_shorten_btn.addEventListener("click", async () => {
-   const original_url = url_input.value
+const shorten = async () => {
+    const original_url = url_input.value;
+
     // check if the url input is empty
     if (original_url.length === 0) {
         return;
     }
 
-    // Easter egg: rick roll
-    if (rickroll.check(original_url)){
-        window.location.replace("https://youtu.be/dQw4w9WgXcQ");
+    const { dQw4w9WgXcQ } = await import("./dQw4w9WgXcQ.js");
+    if (dQw4w9WgXcQ.check(original_url)) {
+        location.href = "https://youtu.be/dQw4w9WgXcQ";
+        return;
     }
 
     // shorten the long url
@@ -36,7 +37,7 @@ to_shorten_btn.addEventListener("click", async () => {
             error_message.style.display = "block";
             setTimeout(() => error_message.style.display = "none", 5000);
         } else {
-            // there is some problems in the server!
+            // some error is occured in the server!
             alert("Sorry, an error has occured in the server...");
         }
         
@@ -44,7 +45,7 @@ to_shorten_btn.addEventListener("click", async () => {
     }
 
     const data = await response.json();
-    const result = `https://krll.me/${data.key}`
+    const result = `${host}/${data.key}`;
 
     // show the short url
     short_url.innerText = result;
@@ -52,7 +53,10 @@ to_shorten_btn.addEventListener("click", async () => {
     // get the qr code of the short url and show it
     qr_code.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${result}`;
     qr_code.alt = result;
-});
+}
+
+to_shorten_btn.addEventListener("click", shorten);
+addEventListener("keydown", (event) => { if (event.key === "Enter") shorten() });
 
 short_url.addEventListener("click", event => {
     // copy the short url to clipboard
@@ -66,32 +70,3 @@ short_url.addEventListener("click", event => {
         alert("An error has occurred...\n" + error);
     });
 });
-
-const rickroll = {
-    check: (url)=>{
-	try {
-	    const urlObj = new URL(url);
-            let videoId = "";
-            if (urlObj.host.split(".").slice(-2)[0] === "youtube") {
-               if (urlObj.pathname.split("/")[1] === "watch") {
-                   videoId = urlObj.searchParams.get("v");
-               }
-               else {
-                   return false;
-               }
-            }
-	    else if (urlObj.host === "youtu.be") {
-                videoId = urlObj.pathname.slice(1);
-            }
-            else {
-	        return false
-            }
-	    if (videoId ==="dQw4w9WgXcQ") return true
-            return false
-	}
-        catch {
-            return false
-        }
-    }
-}
-

static/index/style.css

@@ -1,5 +1,8 @@
 main {
     align-items: center;
+    padding-top: 100px;
+    display: flex;
+    flex-direction:column;
 }
 
 .input-container {

static/menu.js

@@ -0,0 +1,14 @@
+const menu_btn = document.getElementById("menu-btn");
+const menu = document.getElementById("menu");
+
+menu_btn.onclick = () => {
+    menu.classList.toggle("show");
+}
+
+window.onclick = e => {
+    if (!e.target.matches(".menu-btn")) {
+        if (menu.classList.contains("show")) {
+            menu.classList.remove("show");
+        }
+    }
+}

static/root.css

@@ -2,6 +2,7 @@
 
 * {
     font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
 }
 
 :root {
@@ -13,7 +14,7 @@
     --text-color: light-dark(black, white);
     --footer-text-color: light-dark(rgb(90, 90, 90), rgb(173, 173, 173));
     --button-text-color: white;
-    --link-color: light-dark(#2e2e2e, #7a7a7a);
+    --link-color: light-dark(#797979, #9e9e9e);
 
     --border-color: light-dark(lightgray, gray);
     --border-highlight-color: darkgray;
@@ -28,14 +29,68 @@ body {
     flex-direction: column;
     margin: 0;
     background-color: var(--background-color);
-    padding-top: 100px;
     box-sizing: border-box;
 }
 
-main {
+header ul {
+    padding: 10px;
+    margin: 0;
     display: flex;
-    flex-direction:column;
-    flex: 1 0 auto;
+    align-items: center;
+}
+
+header ul * {
+    margin: 0 5px;
+}
+
+header img {
+    width: 40px;
+    height: 40px;
+    margin-top: 5px;
+}
+
+header button {
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+.menu {
+    display: none;
+    flex-direction: column;
+    font-size: 17px;
+    background-color: var(--input-background-color);
+    position: absolute;
+    margin-top: 5px;
+    margin-left: 5px;
+    border-radius: 5px;
+    width: 200px;
+}
+
+.show {
+    display: flex;
+}
+
+.menu a {
+    text-decoration: none;
+    color: var(--text-color);
+    width: 100%;
+    padding: 20px;
+}
+
+.menu a:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* @media screen and (max-width: 1000px) {
+    .menu {
+        width: 100vw;
+        height: 100%;
+    }
+} */
+
+main {
+    height: 100%;
 }
 
 footer {

static/rule/style.css

@@ -0,0 +1,15 @@
+main {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+section {
+    width: 90%;
+    max-width: 600px;
+}
+
+a {
+    text-decoration: none;
+    color: var(--link-color);
+}

templates/about.html

@@ -1,5 +1,5 @@
 {% extends "layout.html" %}
-{% block title %}Krll - URL Shortener{% endblock %}
+{% block title %}About Krll{% endblock %}
 
 {% block head %}
 {{ super() }}
@@ -10,25 +10,16 @@
 <main>
     <section>
         <h2>About Krll</h2>
-        <p>Krll은 개인정보 수집 없이 URL을 단축하는 서비스입니다. 방해꾼 없이 빠르게 URL을 단축하고 공유하세요.</p>
+        <p>Krll은 개인정보 수집이 없는 오픈 소스 링크 단축 서비스입니다.</p>
 
-        <h2>특징</h2>
-        <ul>
-            <li>개인정보 수집과 광고가 없습니다.</li>
-            <li>단축 시 QR 코드가 함께 생성되어 다른 디바이스로 빠르게 공유할 수 있습니다.</li>
-            <li>크롬, 파이어폭스 확장을 설치하여 웹사이트 내의 하이퍼링크를 우클릭 후 메뉴 선택 만으로 빠르게 단축할 수 있습니다.</li>
-        </ul>
+        <h3>기여하기</h3>
+        <p>Krll은 MIT 라이센스가 적용되어 누구나 코드를 사용하고 이 프로젝트에 기여할 수 있습니다. 하지만 한 가지 부탁 드릴 것이 있습니다. <a href="https://nogithub.codeberg.page/">GitHub에 Krll의 코드를 업로드하지 말아주세요.</a></p>
+        <p><a href="https://git.worldc.one/sunwoo1524/krll">자체 호스팅 중인 Forgejo</a>에서 기여할 수 있습니다.</p>
 
-        <h2>브라우저 확장</h2>
+        <h3>브라우저 확장</h3>
+        <p>크롬, 파이어폭스 확장을 설치하여 웹사이트 내의 하이퍼링크를 우클릭 후 메뉴 선택 만으로 빠르게 단축할 수 있습니다.</p>
         <p><a href="https://github.com/sunwoo1524/krll-chrome-extension">Chrome(스토어에 올라와있지 않아 직접 압축 파일로 다운로드하고 설치해야합니다.)</a></p>
         <p><a href="https://addons.mozilla.org/ko/firefox/addon/krll-url-shortener/">Firefox</a></p>
-
-        <h2>규칙</h2>
-        <p>이것들을 막을 방법은 없지만 안정적인 서비스 운영을 위해서 따라주세요.</p>
-        <ul>
-            <li>대한민국 법에 저촉되는 링크를 단축하지 마세요.</li>
-            <li>스팸을 위해서 사용하지 마세요.</li>
-        </ul>
     </section>
 </main>
 {% endblock %}

templates/index.html

@@ -1,9 +1,9 @@
 {% extends "layout.html" %}
-{% block title %}Krll - URL Shortener{% endblock %}
+{% block title %}Krll URL Shortener{% endblock %}
 
 {% block head %}
 {{ super() }}
-<link rel="stylesheet" href="{{ url_for('static', path='/style.css') }}">
+<link rel="stylesheet" href="{{ url_for('static', path='/index/style.css') }}">
 {% endblock %}
 
 {% block content %}
@@ -21,5 +21,9 @@
     </div>
 </main>
 
-<script src="{{ url_for('static', path='/script.js') }}"></script>
+<script>
+    const host = "{{ host }}";
+</script>
+
+<script src="{{ url_for('static', path='/index/script.js') }}"></script>
 {% endblock %}

templates/layout.html

@@ -5,16 +5,34 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{% endblock %}</title>
-    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="icon" href="{{ url_for('static', path='/favicon.ico') }}">
     <link rel="stylesheet" href="{{ url_for('static', path='/root.css') }}">
+
+    <!-- Import Google Fonts Icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
+
     {% endblock %}
 </head>
 <body>
+    <header>
+        <ul>
+            <button class="menu-btn" id="menu-btn"><span class="menu-btn material-symbols-outlined">menu</span></button>
+            <a href="/"><img src="{{ url_for('static', path='/images/logo.png') }}" alt="Krll Logo"></a>
+        </ul>
+
+        <div class="menu" id="menu">
+            <a href="/">Home</a>
+            <a href="/about">About</a>
+            <a href="https://git.worldc.one/sunwoo1524/krll">Git Repository</a>
+        </div>
+    </header>
+
     {% block content %}{% endblock %}
 
     <footer>
-        <p>스팸이나 불법적인 용도로 사용하지 말아주세요.</p>
-        <p><a href="/about">About Krll</a> · <a href="mailto:maengkkong1524@naver.com">Contact</a></p>
+        <p><a href="/rule">Rule</a> · <a href="/about">About Krll</a> · <a href="{{ contact }}">Contact</a> · <a href="https://git.worldc.one/sunwoo1524/krll">Git Repository</a></p>
     </footer>
+
+    <script src="{{ url_for('static', path='/menu.js') }}"></script>
 </body>
 </html>

templates/rule_frame.html

@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+{% block title %}About Krll{% endblock %}
+
+{% block head %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', path='/rule/style.css') }}">
+{% endblock %}
+
+{% block content %}
+<main>
+    <section>
+        {{ rule|safe }}
+    </section>
+</main>
+{% endblock %}