Skip to content

Commit d37935a

Browse files
RoyalIcingRoyalIcing
committed
Update page copy and designs
1 parent 6f526e4 commit d37935a

File tree

4 files changed

+171
-68
lines changed

4 files changed

+171
-68
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,16 @@
66

77
@tailwind utilities;
88

9+
html {
10+
@apply bg-gray-900;
11+
}
12+
13+
.container {
14+
@apply max-w-5xl mx-auto px-4;
15+
}
16+
17+
.text-shadow {
18+
text-shadow: 0.0625em 0.0625em 0.125em rgba(0,0,0,0.25);
19+
}
20+
921
/* @import "./phoenix.css"; */

‎apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,28 @@
88
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
99
</head>
1010
<body>
11-
<header>
12-
<section class="container">
13-
<nav role="navigation">
14-
<ul>
15-
<li><a href="/">Home</a></li>
16-
<li><a href="/swiftui">SwiftUI</a></li>
11+
<header class="bg-gray-900 text-white">
12+
<section class="container flex flex-row items-center">
13+
<a href="/" class="block py-4 text-base font-bold text-purple-200 uppercase tracking-wide">
14+
<span class="py-1 border-b-2 border-purple-900">Components.Guide</span>
15+
</a>
16+
<nav role="navigation" class="flex-grow px-16 text-lg">
17+
<ul class="flex flex-row justify-around">
18+
<li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a></li>
19+
<li><a href="/react" class="block py-4 font-bold"><%= "React + TypeScript" %></a></li>
20+
<li><a href="/rxj" class="block py-4 font-bold">RxJS</a></li>
1721
</ul>
1822
</nav>
19-
<strong><a href="/">Components.Guide</a></strong>
2023
</section>
2124
</header>
22-
<main role="main" class="container">
25+
<main role="main">
2326
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
2427
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
2528
<%= render @view_module, @view_template, assigns %>
2629
</main>
30+
<footer class="container pt-4 pb-6 text-gray-600">
31+
<p><small>Copyright © 2019 Patrick Smith</small></p>
32+
</footer>
2733
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
2834
</body>
2935
</html>

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

Lines changed: 58 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,59 @@
1-
<section class="phx-hero">
2-
<h1><%= "Great apps start with great components. Learn how here." %></h1>
3-
<p><%= "SwiftUI · React · Preact · lit-html · Figma · Sketch" %></p>
4-
<p><%= "Maintainable · Clarity · Performance · Responsive · Design Teams" %></p>
5-
</section>
1+
<%= if false do %>
2+
<div class="bg-purple-700 text-white">
3+
<section class="container px-6 pt-12 pb-16">
4+
<h1 class="mx-auto max-w-4xl text-5xl text-center leading-snug font-bold text-shadow">
5+
<%= "Great apps need great components. Learn how to make them in SwiftUI and React." %>
6+
</h1>
7+
<p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-purple-100 text-shadow">
8+
<%= "Learn the techniques that have worked best across a range of component systems." %>
9+
</p>
10+
<p class="mx-auto py-2 max-w-4xl text-xl text-center">
11+
Topics include:
12+
<%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
13+
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-red-500 hover:bg-red-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
14+
<% end %>
15+
</p>
16+
</section>
17+
</div>
18+
<% else %>
19+
<div class="bg-purple-100 text-purple-700">
20+
<section class="container px-6 pt-12 pb-16">
21+
<h1 class="mx-auto max-w-5xl text-5xl text-center leading-snug font-bold">
22+
<%= "Great apps need great components. Learn how to make them in SwiftUI & React." %>
23+
</h1>
24+
<p class="mt-6 mb-8 mx-auto max-w-3xl text-4xl text-center italic leading-snug text-purple-700">
25+
<%#= "Learn the techniques that have worked best across a range of component systems." %>
26+
<%= "Learn the techniques that have worked best for modern component systems." %>
27+
</p>
28+
<p class="mx-auto py-2 max-w-4xl text-xl text-center">
29+
Topics include:
30+
<%= for {text, index} <- Enum.with_index(["SwiftUI", "React", "Combine", "RxJS", "Figma", "Sketch", "Performance", "Clarity", "Documentation", "Responsive", "Design Teams"]) do %>
31+
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white <%= if index <= 5, do: "text-blue-500 hover:bg-blue-600", else: "text-red-500 hover:bg-red-600" %> hover:text-white rounded shadow-xl"><%= text %></a>
32+
<% end %>
33+
</p>
34+
</section>
35+
</div>
36+
<% end %>
637

7-
<section class="row">
8-
<article class="column">
9-
<h2>SwiftUI</h2>
10-
<ul>
11-
<li>
12-
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
13-
</li>
14-
<li>
15-
<a href="https://github.com/phoenixframework/phoenix">Source</a>
16-
</li>
17-
<li>
18-
<a href="https://github.com/phoenixframework/phoenix/blob/v1.4/CHANGELOG.md">v1.4 Changelog</a>
19-
</li>
20-
</ul>
21-
</article>
22-
<article class="column">
23-
<h2>React</h2>
24-
<ul>
25-
<li>
26-
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
27-
</li>
28-
<li>
29-
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
30-
</li>
31-
<li>
32-
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
33-
</li>
34-
</ul>
35-
</article>
36-
</section>
38+
<div class="bg-purple-800">
39+
<section class="pt-12 pb-12 flex items-center justify-center">
40+
<a href="/swiftui" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-orange-100 text-orange-700 border border-orange-800 hover:bg-orange-600 hover:text-white rounded shadow-xl">
41+
<%= "Learn SwiftUI" %>
42+
</a>
43+
</section>
44+
<section class="pt-12 pb-12 flex items-center justify-center">
45+
<a href="#" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-red-100 text-red-700 border border-red-800 hover:bg-red-600 hover:text-white rounded shadow-xl">
46+
<%= "Learn Combine" %>
47+
</a>
48+
</section>
49+
<section class="pt-12 pb-12 flex items-center justify-center">
50+
<a href="#" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-blue-100 text-blue-700 border border-blue-800 hover:bg-blue-600 hover:text-white rounded shadow-xl">
51+
<%= "Learn React" %>
52+
</a>
53+
</section>
54+
<section class="pt-12 pb-12 flex items-center justify-center">
55+
<a href="#" class="inline-block mx-1 mb-3 px-8 py-4 text-3xl font-bold bg-indigo-100 text-indigo-700 border border-indigo-800 hover:bg-indigo-600 hover:text-white rounded shadow-xl">
56+
<%= "Learn TypeScript" %>
57+
</a>
58+
</section>
59+
</div>

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

Lines changed: 87 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,88 @@
1-
<section class="phx-hero">
2-
<img src="<%= Routes.static_path(@conn, "/images/swiftui-96x96_2x.png") %>" alt="SwiftUI logo" width=96 height=96>
3-
<h1>
4-
<%#= "Guides to well-designed components using SwiftUI & app architecture using Combine" %>
5-
<%= "Thinking in components with SwiftUI & Combine best practices for app architecture" %>
6-
</h1>
7-
<p>
8-
<%# The past five years I’ve used React and RxJS to build professional apps. %>
9-
React and RxJS have been my web tools of choice for the past five years.
10-
<br>Learn how these lessons can be applied to the Swift world.
11-
</p>
12-
</section>
1+
<div class="bg-purple-900 text-white">
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+
<img class="inline-block mr-2" src="<%= Routes.static_path(@conn, "/images/swiftui-96x96_2x.png") %>" alt="SwiftUI logo" width=96 height=96>
5+
<%= "Learn SwiftUI & Combine" %>
6+
</h1>
7+
<p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-purple-100 text-shadow">
8+
<%= "Learnings from five years of component systems applied to the Swift world." %>
9+
</p>
10+
<p class="py-2 text-xl text-center">
11+
Topics include:
12+
<%= for text <- ["SwiftUI", "Combine", "Component Design", "Data Flow", "APIs", "Composing", "Testing", "Performance", "Clarity", "Documentation", "Device Adapting"] do %>
13+
<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>
14+
<% end %>
15+
</p>
16+
</section>
17+
</div>
1318

14-
<h2>Topics covered include:</h2>
15-
16-
<ul>
17-
<li>Atomic design</li>
18-
<li>Styling approaches</li>
19-
<li>Reusability trade-offs</li>
20-
<li>Testing components</li>
21-
<li>Testing data flow</li>
22-
<li>Composable component patterns</li>
23-
<li>Handling errors</li>
24-
<li>Caching data</li>
25-
<li>Improving performance in the right areas</li>
26-
</ul>
19+
<div class="bg-white">
20+
<section class="container pt-8 pb-16">
21+
<article class="mb-8">
22+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Atomic design</h2>
23+
<p>
24+
Learn how to name components. Apply the single responsibility principle. Find the indivisible component units, and compose them together into larger molecules.
25+
</p>
26+
</article>
27+
<article class="mb-8">
28+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Styling approaches</h2>
29+
<p>
30+
Extract common styles. Define a style guide. How do you keep styles consistent?
31+
</p>
32+
</article>
33+
<article class="mb-8">
34+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Reusability trade-offs</h2>
35+
<p>
36+
What sort of components should be resuable? How granular should you go?
37+
</p>
38+
</article>
39+
<article class="mb-8">
40+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Pattern libraries</h2>
41+
<p>
42+
When do you need a pattern library? Who are they for? How should you manage them?
43+
</p>
44+
</article>
45+
<article class="mb-8">
46+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Testing components</h2>
47+
<p>
48+
Unit test components. Test the behaviours that matter first. Use type-safety to remove impossible states.
49+
</p>
50+
</article>
51+
<article class="mb-8">
52+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Testing data flow</h2>
53+
<p>
54+
Test your data flow in isolation. Use test-driven design. Mock APIs and other sources.
55+
</p>
56+
</article>
57+
<article class="mb-8">
58+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Composable component patterns</h2>
59+
<p>
60+
Components are <em>really</em> composable. Can we reduce boilerplate? What useful component utilities can we make?
61+
</p>
62+
</article>
63+
<article class="mb-8">
64+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Handling errors</h2>
65+
<p>
66+
Handle errors from publishers. What and when should you show users?
67+
</p>
68+
</article>
69+
<article class="mb-8">
70+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Caching data</h2>
71+
<p>
72+
Learn how to name components. Apply the single responsibility principle. Find the atomic units, and compose them together.
73+
</p>
74+
</article>
75+
<article class="mb-8">
76+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Improving performance in the right areas</h2>
77+
<p>
78+
Learn when you should focus on performance. Measure to be informed. Apply optimization techniques.
79+
</p>
80+
</article>
81+
<article class="mb-8">
82+
<h2 class="mb-2 text-2xl leading-normal text-purple-800">Automating repetitive tasks</h2>
83+
<p>
84+
Produce screenshots across many devices.
85+
</p>
86+
</article>
87+
</section>
88+
</div>

0 commit comments

Comments
 (0)