fix: add getting started page [MDS-173] (#324)

coingaming · Jul 19, 2022 · 680196e · 680196e
1 parent 260ef8b
commit 680196e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/lib/moon_web/components/code_snippet.ex b/lib/moon_web/components/code_snippet.ex
@@ -0,0 +1,15 @@
+defmodule MoonWeb.Components.CodeSnippet do
+  @moduledoc false
+
+  use MoonWeb, :stateless_component
+
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <pre class="moon-design-dark w-full bg-goku-100 overflow-scroll p-4 text-moon-14 text-bulma-100 rounded-moon-s-sm">
+      <#slot />
+    </pre>
+    """
+  end
+end
diff --git a/lib/moon_web/pages/getting_started_page.ex b/lib/moon_web/pages/getting_started_page.ex
@@ -3,9 +3,9 @@ defmodule MoonWeb.Pages.GettingStartedPage do
 
   use MoonWeb, :live_view
 
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
   alias MoonWeb.Components.Page
+  alias MoonWeb.Components.PageSection
+  alias MoonWeb.Components.CodeSnippet
 
   data breadcrumbs, :any,
     default: [
@@ -26,10 +26,21 @@ defmodule MoonWeb.Pages.GettingStartedPage do
   def render(assigns) do
     ~F"""
     <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Getting Started</Heading>
-      </TopToDown>
-      Coming soon
+      <h1 class="text-moon-32 font-semibold">Getting started</h1>
+      <PageSection title="First Section">
+        <p class="text-moon-16">Lorem ipsum dolor sit amet</p>
+        <CodeSnippet>mix something</CodeSnippet>
+        <p class="text-moon-16">Lorem ipsum dolor sit amet</p>
+        <CodeSnippet>mix something.else</CodeSnippet>
+      </PageSection>
+      <PageSection title="Second Section">
+        <p class="text-moon-16">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed quam at augue varius accumsan id in sapien. Suspendisse maximus tortor at urna blandit, et varius nibh maximus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+        </p>
+        <CodeSnippet>iex -S mix phx.something</CodeSnippet>
+        <p class="text-moon-16">Lorem ipsum dolor sit amet</p>
+        <CodeSnippet>iex -S mix phx.another</CodeSnippet>
+      </PageSection>
     </Page>
     """
   end

diff --git a/lib/moon_web/templates/layout/root.html.heex b/lib/moon_web/templates/layout/root.html.heex
@@ -28,15 +28,6 @@
     <link rel="stylesheet" href={static_path(@conn, "/themes/sportsbet-dark.css")} />
     <link rel="stylesheet" href={static_path(@conn, "/themes/sportsbet-light.css")} />
     <link rel="stylesheet" href={static_path(@conn, "/assets/app.css")} />
-
-    <style>
-      pre {
-        font-size: 12px;
-        word-wrap: break-word;
-        overflow-x: scroll;
-      }
-    </style>
-
     <script defer type="text/javascript" src={static_path(@conn, "/assets/app.js")}></script>
   </head>
   <body>