Render SVG Logo

frontend/components/__init__.py

@@ -1,4 +1,5 @@
 from .authors import authors
 from .logout import logout
 from .login import login
-from .user_greetings import user_greetings
+from .user_greetings import user_greetings
+from .logo import add_logo

frontend/components/login.py

@@ -2,7 +2,6 @@ import json
 import requests
 
 import streamlit as st
-        
 
 def login():
 
@@ -56,7 +55,7 @@ def login():
                     st.error("Signup Failed")
 
     st.divider()                
-    st.subheader(":rainbow[Our Prototype in Action 🎬]")      
+    st.subheader(":rainbow[Our Prototype in Action ]🎬")      
     with st.expander("Demo video 🎬",expanded=True):
         st.video("frontend/images/Showcase.mp4")                
 

frontend/components/logo.py

@@ -1,15 +1,21 @@
 import streamlit as st
 
+import re
 import base64
 import validators
 from pathlib import Path
 
-def add_logo(logo_url: str, height: int = 120):
+def add_logo(logo_url: str, height: int = 100, svg=False):
 
-    if validators.url(logo_url) is True:
-        logo = f"url({logo_url})"
+    if svg:
+        svg_logo = read_svg(logo_url)
+        b64 = base64.b64encode(svg_logo.encode("utf-8")).decode("utf-8")
+        logo = f'url("data:image/svg+xml;base64,{b64}")'
+
+    elif validators.url(logo_url):
+        logo = f'url({logo_url})'
     else:
-        logo = f"url(data:image/png;base64,{base64.b64encode(Path(logo_url).read_bytes()).decode()})"
+        logo = f'url("data:image/png;base64,{base64.b64encode(Path(logo_url).read_bytes()).decode()}")'
 
     st.markdown(
         f"""
@@ -17,11 +23,34 @@ def add_logo(logo_url: str, height: int = 120):
             [data-testid="stSidebarNav"] {{
                 background-image: {logo};
                 background-repeat: no-repeat;
-                background-size: contain;
-                padding-top: {height - 40}px;
-                background-position: 20px 20px
+                background-position: center top; /* Center the logo at the top */
+                background-size: auto {height}px; /* Set the logo height */
             }}
         </style>
         """,
         unsafe_allow_html=True,
-    )
+    )
+
+def read_svg(path_svg):
+    try:
+        with open(path_svg, "r") as file:
+            svg_logo = file.read().splitlines()
+            _maped_list = map(str, svg_logo)
+            svg_logo = "".join(_maped_list)
+            temp_svg_logo = re.findall("<svg.*</svg>", svg_logo, flags=re.IGNORECASE)
+            svg_logo = temp_svg_logo[0]
+    except:
+        svg_logo = '<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 150 1"></svg>'
+    return svg_logo
+
+def render_svg(svg):
+    b64 = base64.b64encode(svg.encode("utf-8")).decode("utf-8")
+    html = (
+        r"""
+        <div align="center">
+        <img src="data:image/svg+xml;base64,%s" alt="Techdocs Logo" style="width: 60em;"/>
+        </div>
+        """
+        % b64
+    )
+    st.markdown(html, unsafe_allow_html=True)

frontend/pages/2_📝_Instructions.py

@@ -5,15 +5,16 @@ from layouts.mainlayout import mainlayout
 
 @mainlayout
 def instructions():
+
     with open("frontend/content/installation.md", "r",encoding='utf-8') as f:
         instructions = f.read()
 
-    with open("frontend/content/working.md", "r",encoding='utf-8') as f:
+    with open("content/working.md", "r",encoding='utf-8') as f:
         working = f.read()
     
 
     st.markdown("### 📝 :rainbow[Using Techdocs via the CLI]")  
-    st.info("Please use the CLI to generate the documentation for your project. The Streamlit app is just a demo to give the user an idea of the project.")  
+    st.info("Please use the CLI to generate the documentation for your project. The Streamlit app is just a demo to give the user an idea of the project.") 
     
     with st.expander("⚙️ Installation and setup"):
         st.markdown(instructions)