Explanations intro

WordPress · Aug 30, 2024 · e401f21 · e401f21
1 parent 89d6538
commit e401f21
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/_app/public/index.html b/_app/public/index.html
@@ -8,6 +8,27 @@
 	</head>
 	<body>
 		<noscript>Habilita JavaScript para usares esta app.</noscript>
+		<div class="intro">
+			<p class="main">
+				Dynamic table of examples at
+				<a
+					href="https://github.com/WordPress/block-development-examples"
+				>
+					WordPress/block-development-examples
+				</a>
+			</p>
+			<p>
+				In <code>list</code> layout, click on any example to see its
+				demo (powered by
+				<a href="https://wordpress.org/playground/"
+					>WordPress Playground</a
+				>) on the right side
+			</p>
+			<p>
+				Filters applied by <code>tags</code> generate a unique link that
+				can be bookmarked or shared
+			</p>
+		</div>
 		<div id="root"></div>
 	</body>
 </html>
diff --git a/_app/src/HomePage.js b/_app/src/HomePage.js
@@ -205,18 +205,6 @@ const Examples = () => {
 
 	return (
 		<>
-			<div className="intro">
-				<p>
-					Dynamic table of examples at
-					<a
-						href={
-							'https://github.com/WordPress/block-development-examples'
-						}
-					>
-						WordPress/block-development-examples
-					</a>
-				</p>
-			</div>
 			{ activeLayout === 'list' ? (
 				<div className="viewsContainer">
 					<div className="dataViewsContainer">

diff --git a/_app/src/styles.scss b/_app/src/styles.scss
@@ -20,10 +20,18 @@ body {
 
 .intro {
 	padding: 0 50px;
-	font-weight: 700;
 
-	a {
-		margin: 0 5px;
+	.main {
+		font-weight: 700;
+
+		a {
+			margin: 0 5px;
+		}
+	}
+
+	code {
+		background-color: rgb(239, 235, 235);
+		padding: 2px;
 	}
 }