Added Meta for Pages (#29)

* Added meta changes.


Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local>

pynecone/app.py

@@ -179,6 +179,8 @@ class App(Base):
         component: Union[Component, ComponentCallable],
         path: Optional[str] = None,
         title: str = constants.DEFAULT_TITLE,
+        description: str = constants.DEFAULT_DESCRIPTION,
+        image=constants.DEFAULT_IMAGE,
     ):
         """Add a page to the app.
 
@@ -189,6 +191,8 @@ class App(Base):
             component: The component to display at the page.
             path: The path to display the component at.
             title: The title of the page.
+            description: The description of the page.
+            image: The image to display on the page.
         """
         # If the path is not set, get it from the callable.
         if path is None:
@@ -216,7 +220,7 @@ class App(Base):
         component = component if isinstance(component, Component) else component(*args)
 
         # Add the title to the component.
-        compiler_utils.add_title(component, title)
+        compiler_utils.add_meta(component, title, description, image)
 
         # Format the route.
         route = utils.format_route(path)

pynecone/compiler/utils.py

@@ -16,6 +16,8 @@ from pynecone.components.base import (
     Main,
     Script,
     Title,
+    Description,
+    Image,
 )
 from pynecone.components.component import ImportDict
 from pynecone.state import State
@@ -202,15 +204,24 @@ def create_theme(style: Style) -> Dict:
     }
 
 
-def add_title(page: Component, title: str) -> Component:
-    """Add a title to a page.
+def add_meta(page: Component, title, image, description) -> Component:
+    """Add metadata to a page.
 
     Args:
         page: The component for the page.
-        title: The title to add.
+        title: The title of the page.
+        image: The image for the page.
+        description: The description of the page.
 
     Returns:
-        The component with the title added.
+        The component with the metadata added.
     """
-    page.children.append(Head.create(Title.create(title)))
+    page.children.append(
+        Head.create(
+            Title.create(title),
+            Description.create(content=description),
+            Image.create(content=image),
+        )
+    )
+
     return page

pynecone/components/base/__init__.py

@@ -4,4 +4,4 @@ from .body import Body
 from .document import DocumentHead, Html, Main, Script
 from .head import Head
 from .link import Link
-from .title import Title
+from .meta import Title, Description, Image

pynecone/components/base/title.py → pynecone/components/base/meta.py

@@ -3,13 +3,13 @@
 from pynecone.components.base.bare import Bare
 from pynecone.components.component import Component
 from pynecone.components.tags import Tag
+from typing import Optional
 
 
 class Title(Component):
     """A component that displays the title of the current page."""
 
-    def _render(self) -> Tag:
-        return Tag(name="title")
+    tag = "title"
 
     def render(self) -> str:
         """Render the title component.
@@ -23,3 +23,29 @@ class Title(Component):
             self.children[0], Bare
         ), "Title must be a single string."
         return str(tag.set(contents=str(self.children[0].contents)))
+
+
+class Meta(Component):
+    """A component that displays metadata for the current page."""
+
+    tag = "meta"
+
+
+class Description(Meta):
+    """A component that displays the title of the current page."""
+
+    # The description of the page.
+    content: Optional[str] = None
+
+    # The type of the description.
+    name: str = "description"
+
+
+class Image(Meta):
+    """A component that displays the title of the current page."""
+
+    # The image of the page.
+    content: Optional[str] = None
+
+    # The type of the image.
+    property: str = "og:image"

pynecone/constants.py

@@ -102,6 +102,12 @@ DB_NAME = "pynecone.db"
 DB_URL = f"sqlite:///{DB_NAME}"
 # The default title to show for Pynecone apps.
 DEFAULT_TITLE = "Pynecone App"
+# The default description to show for Pynecone apps.
+DEFAULT_DESCRIPTION = "A Pynecone app."
+# The default image to show for Pynecone apps.
+DEFAULT_IMAGE = "favicon.ico"
+
+
 # The name of the pynecone config module.
 CONFIG_MODULE = "pcconfig"
 # The python config file.