MenSeb · MenSeb · Dec 17, 2023 · Dec 11, 2023 · Dec 12, 2023 · Dec 17, 2023
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -14,8 +14,8 @@ jobs:
             pull-requests: read
         outputs:
             changes: ${{ steps.filter.outputs.changes }}
-            html: ${{ steps.filter.outputs.html }}
             markdown: ${{ steps.filter.outputs.markdown }}
+            markup: ${{ steps.filter.outputs.markup }}
             python: ${{ steps.filter.outputs.python }}
             yaml: ${{ steps.filter.outputs.yaml }}
         steps:
@@ -26,10 +26,10 @@ jobs:
               id: filter
               with:
                   filters: |
-                      html:
-                        - "**.html"
                       markdown:
                         - "**.md"
+                      markup:
+                        - "**.jinja"
                       python:
                         - "**.py"
                       yaml:
@@ -51,12 +51,12 @@ jobs:
               uses: ./.github/actions/virtualenv
               with:
                   groups: --only lint,test
-            - name: Lint HTML
-              if: ${{ needs.filter.outputs.html == 'true' }}
-              run: poetry run djlint . --check --lint
             - name: Lint Markdown
               if: ${{ needs.filter.outputs.markdown == 'true' }}
               run: poetry run pymarkdown scan .
+            - name: Lint Markup
+              if: ${{ needs.filter.outputs.markup == 'true' }}
+              run: poetry run djlint . --check --lint
             - name: Lint YAML
               if: ${{ needs.filter.outputs.yaml == 'true' }}
               run: poetry run yamllint .

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -53,8 +53,11 @@ data_file = "coverage/.coverage"
 omit = ["**/__init__.py", "**/__main__.py"]
 
 [tool.djlint]
-use_gitignore = true
+custom_html = "circle,defs,g,line,path,rect,svg,symbol,text,use"
 ignore = "H006"
+extension = ".jinja"
+profile = "jinja"
+use_gitignore = true
 
 [tool.mypy]
 ignore_missing_imports = true
@@ -118,6 +121,7 @@ html5lib = "^1.1"
 pandas = "^2.1.1"
 aiohttp = "^3.9.1"
 aiodns = "^3.1.1"
+jinja2 = "^3.1.2"
 
 
 [tool.poetry.group.dev.dependencies]

diff --git a/src/html_tracing/server.py b/src/html_tracing/server.py
@@ -35,19 +35,22 @@
     proxies.save_active(proxies=active_proxies)"""
 
 
-app = Flask(
-    import_name=__name__,
-    static_folder="statics",
-    template_folder="templates",
-)
+app = Flask(import_name=__name__)
 
 logger.info_(msg="Server Listening...")
 
 
 @app.route("/")
+@app.route("/home")
 def route_home() -> str:
     """Render route home."""
-    return render_template("index.html")
+    return render_template("pages/home.jinja")
+
+
+@app.route("/spider")
+def route_spider() -> str:
+    """Render route spider."""
+    return render_template("pages/spider.jinja")
 
 
 @app.route("/api/spider", methods=["POST"])

diff --git a/src/html_tracing/static/files/manifest.json b/src/html_tracing/static/files/manifest.json
@@ -0,0 +1,16 @@
+{
+    "id": "PythonPlayground",
+    "name": "PythonPlayground",
+    "short_name": "PythonPlayground",
+    "icons": [
+        {
+            "src": "../images/favicon.ico",
+            "sizes": "32x32",
+            "type": "image/x-icon"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}
diff --git a/src/html_tracing/statics/scripts/index.js → src/html_tracing/static/scripts/index.js b/src/html_tracing/statics/scripts/index.js → src/html_tracing/static/scripts/index.js
diff --git a/src/html_tracing/statics/styles/index.css → src/html_tracing/static/styles/index.css b/src/html_tracing/statics/styles/index.css → src/html_tracing/static/styles/index.css
diff --git a/src/html_tracing/templates/index.html b/src/html_tracing/templates/index.html
diff --git a/src/html_tracing/templates/pages/base.jinja b/src/html_tracing/templates/pages/base.jinja
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Playground for Python language." />
+        <meta name="keywords" content="python, playground" />
+        <title>Python Playground</title>
+        <link rel="manifest"
+              href="{{ url_for('static', filename='files/manifest.json') }}" />
+        <link rel="stylesheet"
+              type="text/css"
+              href="{{ url_for('static', filename='styles/index.css') }}" />
+        <script defer
+                type="module"
+                src="{{ url_for('static', filename='scripts/index.js') }}"></script>
+        {% block head %}
+        {% endblock head %}
+    </head>
+    <body>
+        <header>
+            Python Playground
+        </header>
+        <main>
+            {% block main %}
+            {% endblock main %}
+        </main>
+        <footer>
+            Made with love by MenSeb
+        </footer>
+        {% block body %}
+        {% endblock body %}
+    </body>
+</html>
diff --git a/src/html_tracing/templates/pages/home.jinja b/src/html_tracing/templates/pages/home.jinja
@@ -0,0 +1,6 @@
+{% extends "pages/base.jinja" %}
+{% block main %}
+    <section class="section page-home">
+        HOME
+    </section>
+{% endblock main %}
diff --git a/src/html_tracing/templates/pages/spider.jinja b/src/html_tracing/templates/pages/spider.jinja
@@ -0,0 +1,33 @@
+{% extends "pages/base.jinja" %}
+{% block main %}
+    <section class="section page-spider">
+        <form id="form-spider">
+            <input type="text"
+                   name="url"
+                   placeholder="Type a website URL"
+                   value="https://www.webscraper.io/test-sites" />
+            <button type="submit">crawl website</button>
+        </form>
+        <section class="web-spider">
+            <header class="web-spider-header">
+                <div class="container stats">
+                    <span class="span websites">5</span>
+                    <span class="span urls">45</span>
+                </div>
+            </header>
+            <div class="container canvas">
+                <div class="node"></div>
+            </div>
+            <footer class="web-spider-footer">
+                <div class="container metadata">
+                    <span class="span status">Done/Error/?</span>
+                    <span class="span website">https://webscraper.io/{endpoint}</span>
+                </div>
+                <div class="container controls">
+                    <button class="button" type="button" id="crawl">crawl website</button>
+                    <button class="button" type="button" id="visit">visit website</button>
+                </div>
+            </footer>
+        </section>
+    </section>
+{% endblock main %}