Minor config changes & style tweaks.

Author: toddbirchard

Makefile

@@ -1,6 +1,8 @@
 PROJECT_NAME := $(shell basename $CURDIR)
 VIRTUAL_ENV := $(CURDIR)/.venv
 LOCAL_PYTHON := $(VIRTUAL_ENV)/bin/python3
+LOCAL_NODE_JS := $(shell which node)
+LOCAL_LESS_JS := $(shell which lessc)
 
 define HELP
 Manage $(PROJECT_NAME). Usage:
@@ -23,12 +25,19 @@ all help:
 	@echo "$$HELP"
 
 env: $(VIRTUAL_ENV)
+node-env: $(LOCAL_NODE_JS)
 
 $(VIRTUAL_ENV):
 	if [ ! -d $(VIRTUAL_ENV) ]; then \
 		echo "Creating Python virtual env in \`${VIRTUAL_ENV}\`"; \
 		python3 -m venv $(VIRTUAL_ENV); \
-	fi
+	fi;
+
+$(LOCAL_NODE_JS):
+	if [ ! -f $(LOCAL_LESS_JS) ]; then \
+		echo "Installing lessc"; \
+		npm install -g lessc; \
+	fi;
 
 .PHONY: run
 run: env

flask_assets_tutorial/assets.py

@@ -3,11 +3,13 @@
 from flask_assets import Bundle, Environment
 
 
-def compile_stylesheet_bundles(assets: Environment):
+def compile_stylesheet_bundles(assets: Environment) -> Environment:
     """
     Create minified CSS bundles from LESS styles.
 
     :param Environment assets: Flask `environment` for static assets.
+
+    :returns: Environment
     """
     # Main Stylesheets Bundle
     main_style_bundle = Bundle(
@@ -33,11 +35,13 @@ def compile_stylesheet_bundles(assets: Environment):
     return assets
 
 
-def compile_static_assets(assets: Environment):
+def compile_static_assets(assets: Environment) -> Environment:
     """
     Create minified JS bundles from raw Javascript files.
 
     :param Environment assets: Flask `environment` for static assets.
+
+    :returns: Environment
     """
     main_js_bundle = Bundle("src/js/main.js", filters="jsmin", output="dist/js/main.min.js")  # Main JavaScript Bundle
     assets.register("main_js", main_js_bundle)

flask_assets_tutorial/static/dist/css/account.css

@@ -18,7 +18,7 @@ nav .nav-wrapper .left-nav {
   justify-content: space-between;
   align-items: center;
 }
-nav .nav-wrapper .left-nav img {
+nav .nav-wrapper .left-nav .logo {
   width: 30px;
   margin-right: 40px;
 }
@@ -81,7 +81,7 @@ h1 {
 
 nav {
   background: #fff;
-  padding: 30px;
+  padding: 15px 30px;
   width: auto;
   margin-bottom: 40px;
   box-shadow: 0 0 5px #bec6cf;
@@ -99,9 +99,9 @@ nav .nav-wrapper .left-nav {
   justify-content: space-between;
   align-items: center;
 }
-nav .nav-wrapper .left-nav img {
-  width: 30px;
-  margin-right: 40px;
+nav .nav-wrapper .left-nav .logo {
+  width: 40px;
+  margin-right: 20px;
 }
 nav .nav-wrapper .left-nav a {
   margin-right: 20px;

flask_assets_tutorial/static/dist/css/landing.css

@@ -18,7 +18,7 @@ nav .nav-wrapper .left-nav {
   justify-content: space-between;
   align-items: center;
 }
-nav .nav-wrapper .left-nav img {
+nav .nav-wrapper .left-nav .logo {
   width: 30px;
   margin-right: 40px;
 }
@@ -81,7 +81,7 @@ h1 {
 
 nav {
   background: #fff;
-  padding: 30px;
+  padding: 15px 30px;
   width: auto;
   margin-bottom: 40px;
   box-shadow: 0 0 5px #bec6cf;
@@ -99,9 +99,9 @@ nav .nav-wrapper .left-nav {
   justify-content: space-between;
   align-items: center;
 }
-nav .nav-wrapper .left-nav img {
-  width: 30px;
-  margin-right: 40px;
+nav .nav-wrapper .left-nav .logo {
+  width: 40px;
+  margin-right: 20px;
 }
 nav .nav-wrapper .left-nav a {
   margin-right: 20px;

flask_assets_tutorial/static/src/less/nav.less

@@ -2,10 +2,10 @@
 
 nav {
     background: #fff;
-    padding: 30px;
+    padding: 15px 30px;
     width: auto;
     margin-bottom: 40px;
-    box-shadow: 0 0 5px #bec6cf;
+    box-shadow: 0 0 5px @box-shadow-nav;
 
     .nav-wrapper {
       max-width: 900px;
@@ -20,10 +20,11 @@ nav {
         justify-content: space-between;
         align-items: center;
 
-        img {
-          width: 30px;
-          margin-right: 40px;
+        .logo {
+          width: 40px;
+          margin-right: 20px;
         }
+
         a {
           margin-right: 20px;
           font-weight: 400;
@@ -32,7 +33,7 @@ nav {
     }
 
     a {
-        color: #4d545d;
+        color: @nav-link-color;
         transition: @transition;
         text-decoration: none;
 

flask_assets_tutorial/static/src/less/variables.less

@@ -1,7 +1,10 @@
 // Colors
 @theme-color: #5eb9d7;
 @background-color: #e1eaf5;
+
 @box-shadow: 0 0 5px rgba(65, 67, 144, 0.15);
+@box-shadow-nav: #bec6cf;
+@nav-link-color: #4d545d;
 @header-color: #5f6988;
 
 // Fonts

flask_assets_tutorial/templates/navigation-default.jinja2

@@ -1,13 +1,13 @@
 <nav class="navigation-default">
   <div class="nav-wrapper">
     <div class="left-nav">
-      <img src="{{ url_for('static', filename='dist/img/[email protected]') }}" alt="logo" />
-      <a href="{{ url_for('main_blueprint.home') }}">Home</a>
-      <a href="{{ url_for('main_blueprint.about') }}">About</a>
-      <a href="{{ url_for('main_blueprint.etc') }}">Etc</a>
+      <img class="logo" src="{{ url_for('static', filename='dist/img/[email protected]') }}" alt="logo" />
+      <a class="nav-link" href="{{ url_for('main_blueprint.home') }}">Home</a>
+      <a class="nav-link" href="{{ url_for('main_blueprint.about') }}">About</a>
+      <a class="nav-link" href="{{ url_for('main_blueprint.etc') }}">Etc</a>
     </div>
     <div class="right-nav">
-      <a href="{{ url_for('admin_blueprint.dashboard') }}">My Account</a>
+      <a class="nav-link" href="{{ url_for('admin_blueprint.dashboard') }}">My Account</a>
     </div>
   </div>
 </nav>

gunicorn.conf.py

@@ -18,6 +18,7 @@
     reload = True
     workers = 1
     threads = 1
+    bind = ["127.0.0.1:8000"]
 
 if ENVIRONMENT == "production":
     daemon = True

pyproject.toml

@@ -23,7 +23,7 @@ pytest = "*"
 black = "*"
 isort = "*"
 gunicorn = "*"
-flask-sock = "^0.7.0"
+flask-sock = "*"
 
 [tool.poetry.scripts]
 run = "wsgi:app"

requirements.txt

@@ -5,8 +5,10 @@ colorama==0.4.6 ; python_version >= "3.10" and python_version < "4.0" and (sys_p
 cssmin==0.2.0 ; python_version >= "3.10" and python_version < "4.0"
 exceptiongroup==1.2.0 ; python_version >= "3.10" and python_version < "3.11"
 flask-assets==2.1.0 ; python_version >= "3.10" and python_version < "4.0"
+flask-sock==0.7.0 ; python_version >= "3.10" and python_version < "4.0"
 flask==3.0.0 ; python_version >= "3.10" and python_version < "4.0"
 gunicorn==21.2.0 ; python_version >= "3.10" and python_version < "4.0"
+h11==0.14.0 ; python_version >= "3.10" and python_version < "4.0"
 iniconfig==2.0.0 ; python_version >= "3.10" and python_version < "4.0"
 isort==5.13.2 ; python_version >= "3.10" and python_version < "4.0"
 itsdangerous==2.1.2 ; python_version >= "3.10" and python_version < "4.0"
@@ -22,7 +24,9 @@ pluggy==1.3.0 ; python_version >= "3.10" and python_version < "4.0"
 ply==3.11 ; python_version >= "3.10" and python_version < "4.0"
 pytest==7.4.3 ; python_version >= "3.10" and python_version < "4.0"
 python-dotenv==1.0.0 ; python_version >= "3.10" and python_version < "4.0"
+simple-websocket==1.0.0 ; python_version >= "3.10" and python_version < "4.0"
 tomli==2.0.1 ; python_version >= "3.10" and python_version < "3.11"
 typing-extensions==4.9.0 ; python_version >= "3.10" and python_version < "3.11"
 webassets==2.0 ; python_version >= "3.10" and python_version < "4.0"
 werkzeug==3.0.1 ; python_version >= "3.10" and python_version < "4.0"
+wsproto==1.2.0 ; python_version >= "3.10" and python_version < "4.0"