Add new Dockerfiles (slim and alpine)

Dockerfile

@@ -1,14 +1,17 @@
-FROM python:3.11
-RUN export DEBIAN_FRONTEND=noninteractive \
-    && apt-get update && apt-get install -y xdg-utils \
-    && apt-get clean -y && rm -rf /var/lib/apt/lists/*
+FROM python:3.11-alpine
+
+RUN apk update && \
+    apk add --no-cache xdg-utils
 
 RUN python -m pip install --upgrade pip
+
 WORKDIR /app
+
 COPY requirements.txt .
 RUN python -m pip install -r requirements.txt
-EXPOSE 8000:8000
+
 COPY . .
 
-# Start the app
-CMD uvicorn app.main:app --host 0.0.0.0 --port 8000
+EXPOSE 8000:8000
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

Dockerfile.full

@@ -0,0 +1,14 @@
+FROM python:3.11
+RUN export DEBIAN_FRONTEND=noninteractive \
+    && apt-get update && apt-get install -y xdg-utils \
+    && apt-get clean -y && rm -rf /var/lib/apt/lists/*
+
+RUN python -m pip install --upgrade pip
+WORKDIR /app
+COPY requirements.txt .
+RUN python -m pip install -r requirements.txt
+EXPOSE 8000:8000
+COPY . .
+
+# Start the app
+CMD uvicorn app.main:app --host 0.0.0.0 --port 8000

Dockerfile.slim

@@ -0,0 +1,18 @@
+FROM python:3.11-slim
+
+RUN export DEBIAN_FRONTEND=noninteractive \
+    && apt-get update && apt-get install -y xdg-utils \
+    && apt-get clean -y && rm -rf /var/lib/apt/lists/*
+
+RUN python -m pip install --upgrade pip
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN python -m pip install -r requirements.txt
+
+COPY . .
+
+EXPOSE 8000
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

app/static/css/main.css

@@ -580,6 +580,14 @@ video {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -880,6 +888,32 @@ video {
   color: rgb(212 212 216 / var(--tw-text-opacity));
 }
 
+.outline {
+  outline-style: solid;
+}
+
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

app/templates/shared/_base.html

@@ -21,6 +21,7 @@
 
   <!-- CSS -->
   <link rel="stylesheet" href="/static/css/main.css" type="text/css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
   <!-- JS -->
   <script src="/static/js/htmx.min.js"></script>

app/templates/username.html

@@ -27,24 +27,29 @@ <h1 >{{login}}
           {% if twitter %}
           <li>
             <a href="{{twitter}}" target="_blank">
-              <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDcuMzksNjguOTRBOCw4LDAsMCwwLDI0MCw2NEgyMDkuNTdBNDguNjYsNDguNjYsMCwwLDAsMTY4LjEsNDBhNDYuOTEsNDYuOTEsMCwwLDAtMzMuNzUsMTMuN0E0Ny45LDQ3LjksMCwwLDAsMTIwLDg4djYuMDlDNzkuNzQsODMuNDcsNDYuODEsNTAuNzIsNDYuNDYsNTAuMzdhOCw4LDAsMCwwLTEzLjY1LDQuOTJjLTQuMzEsNDcuNzksOS41Nyw3OS43NywyMiw5OC4xOGExMTAuOTMsMTEwLjkzLDAsMCwwLDIxLjg4LDI0LjJjLTE1LjIzLDE3LjUzLTM5LjIxLDI2Ljc0LTM5LjQ3LDI2Ljg0YTgsOCwwLDAsMC0zLjg1LDExLjkzYy43NSwxLjEyLDMuNzUsNS4wNSwxMS4wOCw4LjcyQzUzLjUxLDIyOS43LDY1LjQ4LDIzMiw4MCwyMzJjNzAuNjcsMCwxMjkuNzItNTQuNDIsMTM1Ljc1LTEyNC40NGwyOS45MS0yOS45QTgsOCwwLDAsMCwyNDcuMzksNjguOTRabS00NSwyOS40MWE4LDgsMCwwLDAtMi4zMiw1LjE0QzE5NiwxNjYuNTgsMTQzLjI4LDIxNiw4MCwyMTZjLTEwLjU2LDAtMTgtMS40LTIzLjIyLTMuMDgsMTEuNTEtNi4yNSwyNy41Ni0xNywzNy44OC0zMi40OEE4LDgsMCwwLDAsOTIsMTY5LjA4Yy0uNDctLjI3LTQzLjkxLTI2LjM0LTQ0LTk2LDE2LDEzLDQ1LjI1LDMzLjE3LDc4LjY3LDM4Ljc5QTgsOCwwLDAsMCwxMzYsMTA0Vjg4YTMyLDMyLDAsMCwxLDkuNi0yMi45MkEzMC45NCwzMC45NCwwLDAsMSwxNjcuOSw1NmMxMi42Ni4xNiwyNC40OSw3Ljg4LDI5LjQ0LDE5LjIxQTgsOCwwLDAsMCwyMDQuNjcsODBoMTZaIj48L3BhdGg+PC9zdmc+" width="30" height="30" />
+              <i class="fa-brands fa-twitter"></i>
             </a>
           </li>
             {% endif %}
           <li>
             <a href="{{html_url}}" target="_blank">
-              <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMDguMzEsNzUuNjhBNTkuNzgsNTkuNzgsMCwwLDAsMjAyLjkzLDI4LDgsOCwwLDAsMCwxOTYsMjRhNTkuNzUsNTkuNzUsMCwwLDAtNDgsMjRIMTI0QTU5Ljc1LDU5Ljc1LDAsMCwwLDc2LDI0YTgsOCwwLDAsMC02LjkzLDQsNTkuNzgsNTkuNzgsMCwwLDAtNS4zOCw0Ny42OEE1OC4xNCw1OC4xNCwwLDAsMCw1NiwxMDR2OGE1Ni4wNiw1Ni4wNiwwLDAsMCw0OC40NCw1NS40N0EzOS44LDM5LjgsMCwwLDAsOTYsMTkydjhINzJhMjQsMjQsMCwwLDEtMjQtMjRBNDAsNDAsMCwwLDAsOCwxMzZhOCw4LDAsMCwwLDAsMTYsMjQsMjQsMCwwLDEsMjQsMjQsNDAsNDAsMCwwLDAsNDAsNDBIOTZ2MTZhOCw4LDAsMCwwLDE2LDBWMTkyYTI0LDI0LDAsMCwxLDQ4LDB2NDBhOCw4LDAsMCwwLDE2LDBWMTkyYTM5LjgsMzkuOCwwLDAsMC04LjQ0LTI0LjUzQTU2LjA2LDU2LjA2LDAsMCwwLDIxNiwxMTJ2LThBNTguMTQsNTguMTQsMCwwLDAsMjA4LjMxLDc1LjY4Wk0yMDAsMTEyYTQwLDQwLDAsMCwxLTQwLDQwSDExMmE0MCw0MCwwLDAsMS00MC00MHYtOGE0MS43NCw0MS43NCwwLDAsMSw2LjktMjIuNDhBOCw4LDAsMCwwLDgwLDczLjgzYTQzLjgxLDQzLjgxLDAsMCwxLC43OS0zMy41OCw0My44OCw0My44OCwwLDAsMSwzMi4zMiwyMC4wNkE4LDgsMCwwLDAsMTE5LjgyLDY0aDMyLjM1YTgsOCwwLDAsMCw2Ljc0LTMuNjksNDMuODcsNDMuODcsMCwwLDEsMzIuMzItMjAuMDZBNDMuODEsNDMuODEsMCwwLDEsMTkyLDczLjgzYTguMDksOC4wOSwwLDAsMCwxLDcuNjVBNDEuNzIsNDEuNzIsMCwwLDEsMjAwLDEwNFoiPjwvcGF0aD48L3N2Zz4=" width="30" height="30" />
+              <i class="fa-brands fa-github"></i>
             </a>
           </li>
           {% if blog %}
           <li>
             <a href="{{blog}}" target="_blank">
-              <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsMjRBMTA0LDEwNCwwLDEsMCwyMzIsMTI4LDEwNC4xMSwxMDQuMTEsMCwwLDAsMTI4LDI0Wm04OCwxMDRhODcuNjIsODcuNjIsMCwwLDEtNi40LDMyLjk0bC00NC43LTI3LjQ5YTE1LjkyLDE1LjkyLDAsMCwwLTYuMjQtMi4yM2wtMjIuODItMy4wOGExNi4xMSwxNi4xMSwwLDAsMC0xNiw3Ljg2aC04LjcybC0zLjgtNy44NmExNS45MSwxNS45MSwwLDAsMC0xMS04LjY3bC04LTEuNzNMOTYuMTQsMTA0aDE2LjcxYTE2LjA2LDE2LjA2LDAsMCwwLDcuNzMtMmwxMi4yNS02Ljc2YTE2LjYyLDE2LjYyLDAsMCwwLDMtMi4xNGwyNi45MS0yNC4zNEExNS45MywxNS45MywwLDAsMCwxNjYsNDkuMWwtLjM2LS42NUE4OC4xMSw4OC4xMSwwLDAsMSwyMTYsMTI4Wk0xNDMuMzEsNDEuMzQsMTUyLDU2LjksMTI1LjA5LDgxLjI0LDExMi44NSw4OEg5Ni4xNGExNiwxNiwwLDAsMC0xMy44OCw4bC04LjczLDE1LjIzTDYzLjM4LDg0LjE5LDc0LjMyLDU4LjMyYTg3Ljg3LDg3Ljg3LDAsMCwxLDY5LTE3Wk00MCwxMjhhODcuNTMsODcuNTMsMCwwLDEsOC41NC0zNy44bDExLjM0LDMwLjI3YTE2LDE2LDAsMCwwLDExLjYyLDEwbDIxLjQzLDQuNjFMOTYuNzQsMTQzYTE2LjA5LDE2LjA5LDAsMCwwLDE0LjQsOWgxLjQ4bC03LjIzLDE2LjIzYTE2LDE2LDAsMCwwLDIuODYsMTcuMzdsLjE0LjE0TDEyOCwyMDUuOTRsLTEuOTQsMTBBODguMTEsODguMTEsMCwwLDEsNDAsMTI4Wm0xMDIuNTgsODYuNzgsMS4xMy01LjgxYTE2LjA5LDE2LjA5LDAsMCwwLTQtMTMuOSwxLjg1LDEuODUsMCwwLDEtLjE0LS4xNEwxMjAsMTc0Ljc0LDEzMy43LDE0NGwyMi44MiwzLjA4LDQ1LjcyLDI4LjEyQTg4LjE4LDg4LjE4LDAsMCwxLDE0Mi41OCwyMTQuNzhaIj48L3BhdGg+PC9zdmc+" width="30" height="30" />
+              <i class="fa-solid fa-globe"></i>
             </a>
           </li>
             {% endif %}
         </ul>
         </div>
       </div>
     </div>
+    <style type="text/css">
+      i {
+        font-size: 1.2rem;
+      }
+    </style>
 {% endblock %}