From 91bb3f0b26c789aeb1c127e7b1f55d2f203d0b54 Mon Sep 17 00:00:00 2001
From: Alek Petuskey <alek@pynecone.io>
Date: Mon, 5 Dec 2022 00:40:35 -0800
Subject: [PATCH] Added Meta for Pages (#29)

* Added meta changes.


Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local>
---
 pynecone/app.py                               |  6 +++-
 pynecone/compiler/utils.py                    | 21 +++++++++----
 pynecone/components/base/__init__.py          |  2 +-
 .../components/base/{title.py => meta.py}     | 30 +++++++++++++++++--
 pynecone/constants.py                         |  6 ++++
 5 files changed, 56 insertions(+), 9 deletions(-)
 rename pynecone/components/base/{title.py => meta.py} (53%)

diff --git a/pynecone/app.py b/pynecone/app.py
index 7d50a760f..694b12223 100644
--- a/pynecone/app.py
+++ b/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)
diff --git a/pynecone/compiler/utils.py b/pynecone/compiler/utils.py
index 4c506e32e..b8498ffad 100644
--- a/pynecone/compiler/utils.py
+++ b/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
diff --git a/pynecone/components/base/__init__.py b/pynecone/components/base/__init__.py
index 4ec1d7775..3f5be972a 100644
--- a/pynecone/components/base/__init__.py
+++ b/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
diff --git a/pynecone/components/base/title.py b/pynecone/components/base/meta.py
similarity index 53%
rename from pynecone/components/base/title.py
rename to pynecone/components/base/meta.py
index b8e4da3c7..4c9864064 100644
--- a/pynecone/components/base/title.py
+++ b/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"
diff --git a/pynecone/constants.py b/pynecone/constants.py
index 2ac3f43fc..60d9c3bed 100644
--- a/pynecone/constants.py
+++ b/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.