Skip to content

Commit 884126a

Browse files
RoyalIcingRoyalIcing
committed
Add React & TypeScript Guide
1 parent c58aeb6 commit 884126a

File tree

14 files changed

+444
-32
lines changed

14 files changed

+444
-32
lines changed

‎apps/components_guide_web/assets/css/app.css

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,21 @@
88

99
@import "../node_modules/nprogress/nprogress.css";
1010

11-
html {
11+
:root {
1212
@apply bg-gray-900;
1313

1414
--links-color: currentColor;
15+
16+
--size-xs: .75rem;
17+
--size-sm: .875rem;
18+
--size-base: 1rem;
19+
--size-lg: 1.125rem;
20+
--size-xl: 1.25rem;
21+
--size-2xl: 1.5rem;
22+
--size-3xl: 1.875rem;
23+
--size-4xl: 2.25rem;
24+
--size-5xl: 3rem;
25+
--size-6xl: 4rem;
1526
}
1627

1728
[hidden] {
@@ -38,8 +49,45 @@ a:hover {
3849
text-decoration: var(--hover\:links-decoration);
3950
}
4051

52+
h2, p, li {
53+
margin-left: var(--item-spacing-left);
54+
margin-right: var(--item-spacing-right);
55+
}
56+
h2 {
57+
font-size: var(--heading-2-size);
58+
}
59+
p {
60+
padding: var(--paragraph-padding);
61+
}
62+
li {
63+
padding: var(--listitem-padding);
64+
}
65+
:not(pre) > code {
66+
padding: var(--code-padding);
67+
border-radius: var(--code-radius);
68+
}
69+
4170
input {
42-
outline: none;
71+
outline: none;
72+
}
73+
74+
:not(pre) > code, pre {
75+
color: white;
76+
background-color: #011627;
77+
}
78+
79+
.content {
80+
--item-spacing-left: 1rem;
81+
--item-spacing-right: 1rem;
82+
--heading-2-size: var(--size-3xl);
83+
--paragraph-padding: 0.5rem 0;
84+
--listitem-padding: 0.5rem 0;
85+
--code-padding: 0 0.1875em;
86+
--code-radius: 0.125em;
87+
}
88+
89+
.row {
90+
@apply flex justify-center items-center;
4391
}
4492

4593
.container {
@@ -62,6 +110,11 @@ ul:not([class]) > li > ul:not([class]) {
62110
@apply pl-8;
63111
}
64112

113+
ol:not([class]) {
114+
list-style: decimal;
115+
padding-left: 1em;
116+
}
117+
65118
/* Navigation links */
66119
a[aria-current=page][class*="hover\:border-"] {
67120
border-color: currentColor;

‎apps/components_guide_web/lib/components_guide_web.ex

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ defmodule ComponentsGuideWeb do
9393

9494
import Paredown
9595
alias ComponentsGuideWeb.StylingHelpers, as: Styling
96+
97+
def markdown!(markdown) do
98+
Earmark.as_html!(markdown)
99+
|> raw()
100+
end
96101
end
97102
end
98103

‎apps/components_guide_web/lib/components_guide_web/controllers/accessibility_first_controller.ex

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
66
render(conn, "index.html")
77
end
88

9+
@spec show(Plug.Conn.t(), map) :: Plug.Conn.t()
910
def show(conn, %{"id" => "landmarks"}) do
1011
render(conn, "landmarks.html")
1112
end

‎apps/components_guide_web/lib/components_guide_web/markdown_engine.ex

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
defmodule ComponentsGuideWeb.MarkdownEngine do
2+
@moduledoc false
3+
4+
@behaviour Phoenix.Template.Engine
5+
6+
# require Earmark
7+
8+
def compile(path, _name) do
9+
IO.puts("compile #{path}")
10+
path
11+
|> File.read!()
12+
|> Earmark.as_html!(%Earmark.Options{code_class_prefix: "language-"})
13+
|> EEx.compile_string(engine: Phoenix.HTML.Engine, file: path, line: 1)
14+
end
15+
end

‎apps/components_guide_web/lib/components_guide_web/templates/layout/root.html.leex

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@
1717
<%= render ComponentsGuideWeb.LayoutView, "_contentinfo.html" %>
1818

1919
<!-- Prism syntax highlighting -->
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js" integrity="sha256-NFZVyNmS1YlmiklazBA+TALYJlJtZj/y/i/oADk6CVE=" crossorigin="anonymous"></script>
21-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-css.min.js" integrity="sha256-49Y45o2obU1Yv4zkYDpMDyAa+D9sgKNbNy4ZYGRl/ls=" crossorigin="anonymous"></script>
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-jsx.min.js" integrity="sha256-oKM5pXZjDLVh12SHSa1wtIJV0zF49TOwu+jbqkDfYZA=" crossorigin="anonymous"></script>
23-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-typescript.min.js" integrity="sha256-4ZOSQ1LXG14Swa26SUt2L/IfrwVPjrsvQNLxQiIPi8U=" crossorigin="anonymous"></script>
24-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-tsx.min.js" integrity="sha256-Lu/zMuTtme4f+TbQrXMjj8OQwAb0x4RApaysYdeJBN0=" crossorigin="anonymous"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" integrity="sha256-3teItwIfMuVB74Alnxw/y5HAZ2irOsCULFff3EgbtEs=" crossorigin="anonymous"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-css.min.js" integrity="sha256-4ut/7XCv/zjtcNF9GlQL+Jpy3AuQlLt2ExXNtIjZ8Po=" crossorigin="anonymous"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-jsx.min.js" integrity="sha256-8/v7kGWgyqUEk50QA8aJWC9Biwv9vOKEfFu6Xj2qVgA=" crossorigin="anonymous"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-typescript.min.js" integrity="sha256-JJe+nf0dk2dH1Ie4AimrLS4bAH+gW6N31hpdlVlT+30=" crossorigin="anonymous"></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-tsx.min.js" integrity="sha256-Lu/zMuTtme4f+TbQrXMjj8OQwAb0x4RApaysYdeJBN0=" crossorigin="anonymous"></script>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-go.min.js" integrity="sha256-Og32rFEm2ICsLGNCdEf+nUE/QDhI4nxQ2SLHXD4Yv90=" crossorigin="anonymous"></script>
2526
<!--<link href="https://cdn.jsdelivr.net/gh/PrismJS/prism-themes@8a0b50bd5cef0c86154c22b8b17d97348323b343/themes/prism-a11y-dark.css" rel="stylesheet">-->
26-
<link rel="stylesheet" href="https://unpkg.com/prism-theme-night-owl@1.0.1/style.min.css">
27+
<link rel="stylesheet" href="https://unpkg.com/prism-theme-night-owl@1.4.0/build/style.css">
2728
<script>
2829
//document.querySelectorAll('.post.category-javascript pre code').forEach(el => el.classList.add('language-jsx'));
2930
window.Prism.highlightAll();

‎apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
<div class="text-white" style="background: linear-gradient(-60deg, rgba(206,60,0,1) 0%, rgba(255,40,147,1) 50%, rgba(255,187,50,1) 100%);">
2-
<section class="container px-6 pt-12 pb-12">
3-
<h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
4-
<div class="pb-4 flex items-center justify-center">
5-
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=96 height=96>
1+
<div class="text-white" style="<%= header_styles() %>">
2+
<section class="pt-8 pb-8">
3+
<h1 class="mx-auto max-w-4xl row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
4+
<div class="row">
5+
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
66
<span class="mr-2 text-3xl">❤️</span>
7-
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=96 height=96>
7+
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
88
</div>
9-
<%= "Learn React & TypeScript" %>
9+
<span><%= "React & TypeScript Guide" %></span>
1010
</h1>
11-
<p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 text-shadow">
12-
<%= "Express clear components and data flow more robustly with the live feedback of TypeScript." %>
13-
</p>
14-
<p class="py-2 text-xl text-center">
15-
Topics include:
16-
<%= for text <- ["React", "Hooks", "Reducers", "Data Flow", "Loading APIs", "Composing", "Testing", "Performance", "Clarity", "Documentation", "Device Adapting"] do %>
17-
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white text-blue-600 hover:bg-blue-500 hover:text-white rounded shadow-xl"><%= text %></a>
18-
<% end %>
19-
</p>
2011
</section>
2112
</div>
2213

2314
<div class="bg-white">
15+
<div class="content max-w-4xl mx-auto py-8 text-lg">
16+
<%= render(@view_module, "tips.html") %>
17+
</div>
18+
</div>
19+
20+
<div class="bg-white" hidden>
2421
<section class="container pt-8 pb-16 text-2xl">
2522
<article class="mb-8">
2623
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Atomic design</h2>

0 commit comments

Comments
 (0)