true3dco · DanielHabib · May 28, 2021 · May 28, 2021 · May 28, 2021
diff --git a/examples/form_cta.py b/examples/form_cta.py
@@ -1,5 +1,6 @@
 from splashgen import launch
-from splashgen.components import SplashSite, Form, TextInput, EmailInput, SelectInput
+from splashgen.templates import SplashSite
+from splashgen.components import Form, TextInput, EmailInput, SelectInput
 
 site = SplashSite(title="Form example")
 site.headline = "Form example"

diff --git a/examples/splashgen_site.py b/examples/splashgen_site.py
@@ -1,5 +1,6 @@
 from splashgen import launch
-from splashgen.components import SplashSite, CTAButton
+from splashgen.templates import SplashSite
+from splashgen.components import CTAButton
 
 
 site = SplashSite(title="Splashgen - Splash Pages Built In Python",

diff --git a/examples/splashgen_site_2.py b/examples/splashgen_site_2.py
@@ -0,0 +1,26 @@
+from splashgen import launch
+from splashgen.components import CTAButton, CTAButtonSecondary, Link
+from splashgen.templates import SplashSite2
+
+site = SplashSite2(title="Splashgen 2 - Splash Pages Built In Python",
+                   theme="dark")
+
+site.nav_bar_center_link = Link(
+    "https://github.com/true3dco/splashgen", "About Us"
+)
+site.nav_bar_right_link = Link(
+    "https://github.com/true3dco/splashgen", "Sign Up"
+)
+
+site.headline = "Build your splash page 2 in python effortlessly"
+site.subtext = """
+In less than 20 lines of python, create clean and beautiful splash pages with
+Splashgen. Don't waste time with no-code tools when you already know how to
+code.
+"""
+site.primary_call_to_action = CTAButton(
+    "https://github.com/true3dco/splashgen", "View on GitHub")
+site.secondary_call_to_action = CTAButtonSecondary(
+    "https://github.com/true3dco/splashgen", "View on GitHub")
+
+launch(site)
diff --git a/examples/zenweb.py b/examples/zenweb.py
@@ -1,6 +1,6 @@
 from os import path
 from splashgen import MetaTags, launch
-from splashgen.components import SplashSite
+from splashgen.templates import SplashSite
 from splashgen.integrations import MailchimpSignup
 
 site = SplashSite(title="ZenWeb – Python Internal Web Apps",

diff --git a/setup.py b/setup.py
@@ -31,5 +31,5 @@
             "splashgen=splashgen.cli:main",
         ]
     },
-    package_data={'splashgen': ['templates/*.jinja', 'assets/*.png']},
+    package_data={'splashgen': ['jinja_templates/*.jinja', 'assets/*.png']},
 )
diff --git a/splashgen/__init__.py b/splashgen/__init__.py
@@ -6,8 +6,8 @@
 
 from jinja2 import Environment, PackageLoader
 
-
-jinja = Environment(loader=PackageLoader("splashgen"), autoescape=False)
+jinja = Environment(loader=PackageLoader(
+    "splashgen", "jinja_templates"), autoescape=False)
 
 _assigned_component = None
 

diff --git a/splashgen/assets/video-default.mp4 b/splashgen/assets/video-default.mp4
diff --git a/splashgen/components/__init__.py b/splashgen/components/__init__.py
@@ -1,3 +1,4 @@
-from .SplashSite import SplashSite
-from .CTAButton import CTAButton
+from .cta_button import CTAButton
+from .cta_button_secondary import CTAButtonSecondary
 from .form import Form, TextInput, EmailInput, SelectInput
+from .link import Link
diff --git a/splashgen/components/CTAButton.py → splashgen/components/cta_button.py b/splashgen/components/CTAButton.py → splashgen/components/cta_button.py
diff --git a/splashgen/components/cta_button_secondary.py b/splashgen/components/cta_button_secondary.py
@@ -0,0 +1,10 @@
+from splashgen import Component
+
+
+class CTAButtonSecondary(Component):
+    def __init__(self, link: str, text: str) -> None:
+        self.link = link
+        self.text = text
+
+    def render(self) -> str:
+        return f'<a href="{self.link}" class="btn btn-secondary btn-lg px-4">{self.text}</a>'
diff --git a/splashgen/components/link.py b/splashgen/components/link.py
@@ -0,0 +1,10 @@
+from splashgen import Component
+
+
+class Link(Component):
+    def __init__(self, link: str, text: str) -> None:
+        self.link = link
+        self.text = text
+
+    def render(self) -> str:
+        return f'<a href="{self.link}">{self.text}</a>'
diff --git a/splashgen/templates/form.html.jinja → splashgen/jinja_templates/form.html.jinja b/splashgen/templates/form.html.jinja → splashgen/jinja_templates/form.html.jinja
diff --git a/splashgen/templates/input.html.jinja → splashgen/jinja_templates/input.html.jinja b/splashgen/templates/input.html.jinja → splashgen/jinja_templates/input.html.jinja
diff --git a/...gen/templates/mailchimp_signup.html.jinja → ...nja_templates/mailchimp_signup.html.jinja b/...gen/templates/mailchimp_signup.html.jinja → ...nja_templates/mailchimp_signup.html.jinja
diff --git a/splashgen/templates/splash_site.html.jinja → ...en/jinja_templates/splash_site.html.jinja b/splashgen/templates/splash_site.html.jinja → ...en/jinja_templates/splash_site.html.jinja
diff --git a/splashgen/jinja_templates/splash_site_2.html.jinja b/splashgen/jinja_templates/splash_site_2.html.jinja
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ title }}</title>
+    {% for favicon in favicons %}
+    <link rel="{{favicon['rel']}}" type="{{favicon['type']}}" sizes="{{favicon['size']}}" href="{{favicon['filename']}}" />
+    {% endfor %}
+    <meta name="theme-color" content="{% if theme == 'dark' %}#1eaee0{% else %}#ffffff{% endif %}" />
+    {% if meta %}
+    <meta name="title" content="{{ meta.title }}" />
+    <meta name="description" content="{{ meta.description }}" />
+
+    <meta property="og:type" content="website" />
+    <meta property="twitter:card" content="summary_large_image" />
+    {% if meta.canonical_url %}
+    <meta property="og:url" content="{{ meta.canonical_url }}" />
+    <meta property="twitter:url" content="{{ meta.canonical_url }}" />
+    {% endif %}
+
+    <meta property="og:title" content="{{ meta.title }}" />
+    <meta property="og:description" content="{{ meta.description }}" />
+    <meta property="twitter:title" content="{{ meta.title }}" />
+    <meta property="twitter:description" content="{{ meta.description }}" />
+
+    {% if meta.image %}
+    <meta property="og:image" content="{{ meta.image }}" />
+    <meta property="twitter:image" content="{{ meta.image }}" />
+    {% endif %} {% endif %}
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
+      crossorigin="anonymous"
+    />
+    <style>
+      html,
+      body {
+        height: 100%;
+        {% if theme == "dark" %}
+        background: var(--bs-dark);
+        color: var(--bs-white);
+        {% endif %}
+      }
+
+      {% if hero_video %}
+      #hero-image-container {
+        max-height: 40vh;
+      }
+
+      @media screen and (max-height: 660px) {
+        #hero-image-container {
+          display: none;
+        }
+      }
+
+      @media screen and (max-width: 768px) {
+        #hero-image-container {
+          display: none;
+        }
+      }
+      {% endif %}
+    </style>
+    {% if enable_splashgen_analytics %}
+    <script>(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
+      for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
+      MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
+      mixpanel.init("de3f5d107b7d40401a23cb003a69a492", {
+        batch_requests: true,
+        ip: false,
+        property_blacklist: ['$browser', '$browser_version', '$device', '$device_id', '$user_id', '$current_url', '$initial_referrer', '$initial_referring_domain', '$os', '$referrer', '$referring_domain', '$screen_height', '$screen_width', '$search_engine', 'mp_keyword', 'utm_source', 'utm_referrer', 'utm_campaign']
+      });
+    </script>
+    <script>
+      mixpanel.track('site', {'host': window.location.hostname});
+    </script>
+    {% endif %}
+  </head>
+  <body style="display: grid; place-content: center">
+    <div
+      class="
+        d-flex
+        flex-column
+        align-items-center
+        justify-content-center
+        px-4
+        py-lg-3
+        min-vw-100
+        text-center
+      "
+    >
+    {# Nav bar #}
+    <div>
+      {% if logo %}
+      <img
+        class="d-block mx-auto mb-4"
+        src="{{ logo }}"
+        alt=""
+        width="56"
+        height="56"
+      />
+      {% endif %}
+       {% if nav_bar_center_link %}
+      {{ nav_bar_center_link }}
+      {% endif %}
+      {% if nav_bar_right_link %}
+      {{ nav_bar_right_link }}
+      {% endif %}
+
+      </div>
+      <h1 class="display-5 fw-bold">
+        {{ headline }}
+      </h1>
+      <div class="col-lg-6 mx-auto">
+        <p
+          class="lead mb-4{% if theme == 'light' %} text-muted{% endif %}"
+          {% if theme == "dark" %}style="color: rgba(255, 255, 255, 0.7)"{% endif %}
+        >
+          {{ subtext }}
+        </p>
+      </div>
+
+      {% if primary_call_to_action %}
+      {{ primary_call_to_action }}
+      {% endif %}
+
+      {% if secondary_call_to_action %}
+      {{ secondary_call_to_action }}
+      {% endif %}
+
+      {% if hero_video %}
+      <div class="container px-2 overflow-hidden" id="hero-image-container">
+        <video
+          src="{{ hero_video }}"
+          class="img-fluid"
+          alt="Video depicting the product"
+          loading="lazy"
+        />
+      </div>
+      {% endif %}
+    </div>
+  </body>
+</html>
diff --git a/splashgen/templates/__init__.py b/splashgen/templates/__init__.py
@@ -0,0 +1,2 @@
+from .splash_site import SplashSite
+from .splash_site_2 import SplashSite2
diff --git a/splashgen/components/SplashSite.py → splashgen/templates/base.py b/splashgen/components/SplashSite.py → splashgen/templates/base.py
@@ -1,26 +1,25 @@
-from splashgen import Component, MetaTags
 from os import path
+from typing import Dict
+
 from PIL import Image
+from splashgen import Component, MetaTags
 
 _ASSET_DIR = path.join(path.dirname(__file__), '../assets')
 
 
 # TODO: Render favicons, touch icon, splash icons, etc.
 # TODO: Support BG color?
-class SplashSite(Component):
-    meta: MetaTags
-    headline: str
-    subtext: str
-    call_to_action: Component
-    hero_image: str
+class Template(Component):
+    template = ""
+
     enable_splashgen_analytics: bool
     """Set this to false to disable analytics.
 
     We use analytics in order to better understand product usage, and *never*
     track any personally-identifiable information on users visiting your site.
     """
 
-    def __init__(self, title: str = "Splash Site", logo: str = None, meta: MetaTags = None, theme: str = "light") -> str:
+    def __init__(self, title: str = "Website", logo: str = None, meta: MetaTags = None, theme: str = "light") -> None:
         super().__init__()
         self.title = title
         if not logo:
@@ -31,26 +30,9 @@ def __init__(self, title: str = "Splash Site", logo: str = None, meta: MetaTags
             raise ValueError(
                 "Invalid theme option. Please specify 'light' or 'dark'")
         self.theme = theme
-        self.headline = "Fill out your headline here by assigning to `headline`"
-        self.subtext = "Fill out subtext by assigning to `subtext`"
-        self.call_to_action = None
-        self.hero_image = None
         self.favicon_img = self.logo
         self.enable_splashgen_analytics = True
 
-    def render(self) -> str:
-        logo_url = self.write_asset_to_build(self.logo)
-        if self.hero_image:
-            hero_img_url = self.write_asset_to_build(self.hero_image)
-        else:
-            hero_img_url = None
-        favicons = self._gen_favicons()
-        return self.into_template("splash_site.html.jinja", extras={
-            "logo": logo_url,
-            "favicons": favicons,
-            "hero_image": hero_img_url,
-        })
-
     def _gen_favicons(self):
         favicons = []
         with Image.open(self.favicon_img) as img:
@@ -66,3 +48,19 @@ def _gen_favicons(self):
                              favicon_info["filename"]))
                 favicons.append(favicon_info)
         return favicons
+
+    def render(self) -> str:
+        if not self.template:
+            raise ValueError("A Jinja template path must must be supplied "
+                             "to the template attribute.")
+        logo_url = self.write_asset_to_build(self.logo)
+        favicons = self._gen_favicons()
+        return self.into_template(self.template, extras={
+            "logo": logo_url,
+            "favicons": favicons,
+            **self.prep_extras(),
+        })
+
+    def prep_extras(self) -> Dict:
+        """Override in subclasses to supply extra information to templates"""
+        return {}
diff --git a/splashgen/templates/splash_site.py b/splashgen/templates/splash_site.py
@@ -0,0 +1,29 @@
+from typing import Dict
+from splashgen import Component
+from .base import Template
+
+
+class SplashSite(Template):
+    headline: str
+    subtext: str
+    call_to_action: Component
+    hero_image: str
+
+    template = "splash_site.html.jinja"
+
+    def __init__(self, **kwargs) -> str:
+        super().__init__(**kwargs)
+
+        self.headline = "Fill out your headline here by assigning to `headline`"
+        self.subtext = "Fill out subtext by assigning to `subtext`"
+        self.call_to_action = None
+        self.hero_image = None
+
+    def prep_extras(self) -> Dict:
+        if self.hero_image:
+            hero_img_url = self.write_asset_to_build(self.hero_image)
+        else:
+            hero_img_url = None
+        return {
+            "hero_image": hero_img_url,
+        }
diff --git a/splashgen/templates/splash_site_2.py b/splashgen/templates/splash_site_2.py
@@ -0,0 +1,36 @@
+from typing import Dict
+from splashgen.components import CTAButton, CTAButtonSecondary, Link
+from .base import Template
+
+
+class SplashSite2(Template):
+    nav_bar_center_link: Link
+    nav_bar_right_link: Link
+    headline: str
+    subtext: str
+    primary_call_to_action: CTAButton
+    secondary_call_to_action: CTAButtonSecondary
+    hero_video: str
+
+    template = "splash_site_2.html.jinja"
+
+    def __init__(self, **kwargs) -> str:
+        super().__init__(**kwargs)
+
+        self.headline = "Fill out your headline here by assigning to `headline`"
+        self.subtext = "Fill out subtext by assigning to `subtext`"
+        self.call_to_action = None
+        self.primary_call_to_action = None
+        self.secondary_call_to_action = None
+        self.hero_video = None
+        self.nav_bar_center_link = None
+        self.nav_bar_right_link = None
+
+    def prep_extras(self) -> Dict:
+        if self.hero_video:
+            hero_video_url = self.write_asset_to_build(self.hero_video)
+        else:
+            hero_video_url = None
+        return {
+            "hero_video": hero_video_url,
+        }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		from .splash_site import SplashSite
		from .splash_site_2 import SplashSite2