home code examples

Author: Archmonger

docs/overrides/home-code-examples/add-interactivity.py

@@ -0,0 +1,30 @@
+from reactpy import component, html, use_state
+
+
+def filter_videos(videos, search_text):
+    return None
+
+
+def search_input(dictionary, value):
+    return None
+
+
+def video_list(videos, empty_heading):
+    return None
+
+
+@component
+def searchable_video_list(videos):
+    search_text, set_search_text = use_state("")
+    found_videos = filter_videos(videos, search_text)
+
+    return html._(
+        search_input(
+            {"on_change": lambda new_text: set_search_text(new_text)},
+            value=search_text,
+        ),
+        video_list(
+            videos=found_videos,
+            empty_heading=f"No matches for “{search_text}”",
+        ),
+    )

docs/overrides/home-code-examples/code-block.html

@@ -0,0 +1,8 @@
+<div class="tabbed-set tabbed-alternate" data-tabs="{{ num }}:1"
+	style="--md-indicator-x: 18px; --md-indicator-width: 84px">
+	<input checked="checked" id="__tabbed_{{ num }}_1" name="__tabbed_{{ num }}" type="radio" />
+	<div class="tabbed-labels"><label for="__tabbed_{{ num }}_1">app.py</label></div>
+	<div class="tabbed-content">
+		<img src="assets/img/{{ image }}">
+	</div>
+</div>

docs/overrides/home-code-examples/create-user-interfaces.py

@@ -0,0 +1,22 @@
+from reactpy import component, html
+
+
+def thumbnail(video):
+    return None
+
+
+def like_button(video):
+    return None
+
+
+@component
+def video(video):
+    return html.div(
+        thumbnail(video),
+        html.a(
+            {"href": video.url},
+            html.h3(video.title),
+            html.p(video.description),
+        ),
+        like_button(video),
+    )

docs/overrides/home-code-examples/write-components-with-python.py

@@ -0,0 +1,15 @@
+from reactpy import component, html
+
+
+@component
+def video_list(videos, empty_heading):
+    count = len(videos)
+    heading = empty_heading
+    if count > 0:
+        noun = "Videos" if count > 1 else "Video"
+        heading = f"{count} {noun}"
+
+    return html.section(
+        html.h2(heading),
+        [video(video) for video in videos],
+    )

docs/overrides/home.html

@@ -1,3 +1,4 @@
+<!-- TODO: Use markdown code blocks whenever mkdocs starts supported markdown embeds -->
 {% extends "main.html" %}
 
 <!-- Set the content block to empty -->
@@ -6,6 +7,28 @@
 <!-- Override the tabs block to create the homepage -->
 {% block tabs %}
 <style>
+    /* Variables */
+    [data-md-color-scheme="slate"] {
+        --row-stripe-bg-color: conic-gradient(from 90deg at -10% 100%,
+                #2b303b 0deg,
+                #2b303b 90deg,
+                #16181d 1turn);
+        --row-bg-color: conic-gradient(from -90deg at 110% 100%, #2b303b 0deg, #16181d 90deg, #16181d 1turn);
+        --stripe-border-color: rgba(246, 247, 249, 0.1);
+        --code-block-filter: none;
+    }
+
+    [data-md-color-scheme="default"] {
+        --row-stripe-bg-color: conic-gradient(from 90deg at -10% 100%,
+                #bcc1cd 0deg,
+                #bcc1cd 90deg,
+                #fff 1turn);
+        --row-bg-color: var(--row-stripe-bg-color);
+        --stripe-border-color: rgba(35, 39, 47, 0.1);
+        --code-block-filter: invert(1) contrast(1.3) hue-rotate(180deg) saturate(2);
+        --code-tab-color: rgb(246 247 249);
+    }
+
     /* Application header should be static for the landing page */
     .md-header {
         position: initial;
@@ -20,10 +43,10 @@
         display: none;
     }
 </style>
-<section class="md-typeset">
-    <div class="home-row first">
+<section class="home md-typeset">
+    <div class="row first">
         <img src="https://raw.githubusercontent.com/reactive-python/reactpy/main/branding/svg/reactpy-logo-square.svg"
-            alt="Logo" class="home-logo">
+            alt="ReactPy Logo" class="home-logo">
         <h1>{{ config.site_name }}</h1>
         <p>{{ config.site_description }}</p>
         <div class="home-btns">
@@ -36,50 +59,68 @@ <h1>{{ config.site_name }}</h1>
         </div>
     </div>
 
-    <div class="home-row stripe">
+    <div class="row stripe">
         <h1>Create user interfaces from components</h1>
         <p class="md-grid">
             ReactPy lets you build user interfaces out of individual pieces called components. Create your own ReactPy
             components like <code>thumbnail</code>, <code>like_button</code>, and <code>video</code>. Then combine
             them into entire screens, pages, and apps.
         </p>
+        <div class="code-container">
+            {% with image="create-user-interfaces.png", num=1 %}
+            {% include "home-code-examples/code-block.html" %}
+            {% endwith %}
+        </div>
         <p>
             Whether you work on your own or with thousands of other developers, using React feels the same. It is
             designed to let you seamlessly combine components written by independent people, teams, and
             organizations.
         </p>
     </div>
 
-    <div class="home-row">
-        <h1>Write components with code and markup</h1>
+    <div class="row">
+        <h1>Write components with pure Python code</h1>
         <p>
             ReactPy components are Python functions. Want to show some content conditionally? Use an
             <code>if</code> statement. Displaying a list? Try using
             <a href="https://www.w3schools.com/python/python_lists_comprehension.asp">list comprehension</a>.
             Learning ReactPy is learning programming.
         </p>
+        <div class="code-container">
+            {% with image="write-components-with-python.png", num=2 %}
+            {% include "home-code-examples/code-block.html" %}
+            {% endwith %}
+        </div>
     </div>
 
-    <div class="home-row stripe">
+    <div class="row stripe">
         <h1>Add interactivity wherever you need it</h1>
         <p>
             ReactPy components receive data and return what should appear on the screen. You can pass them new data in
             response to an interaction, like when the user types into an input. ReactPy will then update the screen to
             match the new data.
         </p>
+        <div class="code-container">
+            {% with image="add-interactivity.png", num=3 %}
+            {% include "home-code-examples/code-block.html" %}
+            {% endwith %}
+        </div>
         <p>
             You don't have to build your whole page in ReactPy. Add React to your existing HTML page, and render
             interactive ReactPy components anywhere on it.
         </p>
     </div>
 
-    <div class="home-row">
+    <div class="row">
         <h1>Go full-stack with the Django framework</h1>
         <p>
             ReactPy is a library. It lets you put components together, but it doesn't prescribe how to do routing and
             data fetching. To build an entire app with ReactPy, we recommend a backend framework like
             <a href="https://www.djangoproject.com/">Django</a>.
         </p>
+        <a href="{{ page.next_page.url | url }}" class="md-button md-button--primary">
+            Get Started
+        </a>
     </div>
 </section>
 {% endblock %}

docs/src/assets/css/home.css

@@ -1,89 +1,73 @@
-[data-md-color-scheme="slate"] {
-	--stripe-bg-color: conic-gradient(
-		from 90deg at -10% 100%,
-		#2b303b 0deg,
-		#2b303b 90deg,
-		#16181d 1turn
-	);
-	--stripe-border-color: rgba(246, 247, 249, 0.1);
-}
-
-[data-md-color-scheme="default"] {
-	--stripe-bg-color: conic-gradient(
-		from 90deg at -10% 100%,
-		#bcc1cd 0deg,
-		#bcc1cd 90deg,
-		#fff 1turn
-	);
-	--stripe-border-color: rgba(35, 39, 47, 0.1);
-}
-
 img.home-logo {
 	height: 120px;
 }
 
-.home-row {
+.home .row {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 	padding: 6rem 0.8rem;
 }
 
-.home-row.stripe {
-	background: var(--stripe-bg-color);
+.home .row:not(.first, .stripe) {
+	background: var(--row-bg-color);
+}
+
+.home .row.stripe {
+	background: var(--row-stripe-bg-color);
 	border: 0 solid var(--stripe-border-color);
 	border-top-width: 1px;
 	border-bottom-width: 1px;
 }
 
-.home-row h1 {
+.home .row.first {
+	text-align: center;
+}
+
+.home .row h1 {
 	max-width: 28rem;
 	line-height: 1.15;
 	font-weight: 500;
 	margin-bottom: 0.55rem;
 	margin-top: -1rem;
 }
 
-.home-row.first {
-	text-align: center;
-}
-
-.home-row.first h1 {
+.home .row.first h1 {
 	margin-top: 0.55rem;
 	margin-bottom: -0.75rem;
 }
 
-.home-row p {
+.home .row p {
 	max-width: 35rem;
 	line-height: 1.5;
 	font-weight: 400;
 }
 
-.home-row.first p {
+.home .row.first p {
 	font-size: 32px;
 	font-weight: 500;
 }
 
 /* Desktop Styling */
 @media screen and (min-width: 60em) {
-	.home-row {
+	.home .row {
 		text-align: center;
 	}
-	.home-row p {
+	.home .row p {
 		font-size: 21px;
 	}
-	.home-row h1 {
+	.home .row h1 {
 		font-size: 52px;
 	}
 }
 
 /* Mobile Styling */
 @media screen and (max-width: 60em) {
-	.home-row {
+	.home .row {
 		padding: 4rem 0.8rem;
 	}
-	.home-row.first {
+	.home .row.first {
 		padding-top: 2rem;
 	}
 	.home-btns {
@@ -93,3 +77,23 @@ img.home-logo {
 		gap: 0.5rem;
 	}
 }
+
+/* Code blocks */
+.home .row .tabbed-content {
+	background: #1f1f1f;
+	padding: 20px 18px;
+	width: 610px;
+}
+
+.home .row .tabbed-content img {
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+.home .row .tabbed-content {
+	-webkit-filter: var(--code-block-filter);
+	filter: var(--code-block-filter);
+}

docs/src/assets/css/sidebar.css

@@ -7,16 +7,12 @@
 	margin-left: 0;
 	margin-right: 0;
 	max-width: unset;
-	display: flex;
-	justify-content: center;
+	display: grid;
+	grid-template-columns: auto 1fr auto;
 }
 
-.md-sidebar--primary {
-	margin-right: auto;
-}
-
-.md-sidebar.md-sidebar--secondary {
-	margin-left: auto;
+.md-content {
+	justify-self: center;
 }
 
 /* Desktop Styling */
@@ -101,13 +97,4 @@
 		font-weight: 400;
 		padding-left: 1.25rem;
 	}
-
-	/* Maintain content positioning even if sidebar or TOC is disabled */
-	.md-sidebar {
-		display: block;
-	}
-
-	.md-sidebar[hidden] {
-		visibility: hidden;
-	}
 }

docs/src/assets/img/add-interactivity.png

@@ -94,14 +94,14 @@ extra_javascript:
 
 extra_css:
     - assets/css/main.css
-    - assets/css/home.css
     - assets/css/button.css
     - assets/css/admonition.css
     - assets/css/sidebar.css
     - assets/css/navbar.css
     - assets/css/table-of-contents.css
     - assets/css/code.css
     - assets/css/footer.css
+    - assets/css/home.css
 
 watch:
     - docs