Skip to content

Commit c5b3df5

Browse files
RahicheRahiche
authored
Add "Getting Started" and "How Shaders Work" (#13)
1 parent 3eaedd2 commit c5b3df5

13 files changed

+844
-1
lines changed

‎bin/flutter_shaders_com.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Future<void> main(List<String> arguments) async {
1010
..pick(DirectoryPicker.parse("images"))
1111
..pick(ExtensionPicker("mp4"))
1212
..pick(ExtensionPicker("png"))
13+
..pick(ExtensionPicker("gif"))
1314
// All 3rd party behavior is added through plugins, even the behavior
1415
// shipped with Static Shock.
1516
..plugin(const MarkdownPlugin())

‎source/_includes/layouts/content_page.jinja

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
{{ components.google_analytics() }}
6+
7+
<meta charset="utf-8">
8+
<title>{{ title }} | Flutter Shaders</title>
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
11+
{{ components.favicon() }}
12+
13+
<!-- Open Graph Social Media -->
14+
<meta property="og:url" content="{{ homepage_url }}{{ url }}" />
15+
<meta property="og:title" content="{{ title }} | Flutter Shaders" />
16+
<meta property="og:description" content="{{ description }}" />
17+
<meta property="og:image" content="{{ homepage_url }}/images/branding/social.png" />
18+
<meta property="og:type" content="website" />
19+
20+
<!-- Twitter -->
21+
<meta name="twitter:card" content="summary_large_image" />
22+
<meta name="twitter:site" content="@SuprDeclarative" />
23+
<meta name="twitter:url" content="{{ homepage_url }}{{ url }}" />
24+
<meta name="twitter:title" content="{{ title }} | Flutter Shaders" />
25+
<meta name="twitter:description" content="{{ description }}" />
26+
<meta name="twitter:image" content="{{ homepage_url }}/images/branding/social.png" />
27+
28+
<link href="/styles/tailwind.css" rel="stylesheet">
29+
30+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/obsidian.min.css">
31+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
32+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
33+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/glsl.min.js"></script>
34+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>
35+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/yaml.min.js"></script>
36+
<script>hljs.highlightAll();</script>
37+
38+
<style>
39+
/* Custom styles for content page images */
40+
.prose img {
41+
max-width: 100%;
42+
height: auto;
43+
border-radius: 8px;
44+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
45+
margin: 1.5rem auto;
46+
display: block;
47+
}
48+
49+
/* Ensure GIFs and large images fit properly */
50+
.prose img[src*=".gif"] {
51+
max-width: min(100%, 600px);
52+
}
53+
54+
/* PNG diagrams can be larger */
55+
.prose img[src*=".png"] {
56+
max-width: min(100%, 800px);
57+
}
58+
59+
/* Better spacing around images */
60+
.prose p:has(img) {
61+
text-align: center;
62+
}
63+
</style>
64+
</head>
65+
66+
<body class="bg-[#27b6d6]">
67+
<header class="py-[64px] flex flex-col justify-center items-center bg-[#FFFFFF] text-[#444444]">
68+
<div class="absolute top-0 left-0 w-full h-[48px] flex justify-center items-center">
69+
<a href="/" class="text-[#444444] text-sm font-bold uppercase">Flutter Shaders</a>
70+
</div>
71+
72+
<h1 class="text-4xl font-bold uppercase text-center max-w-[800px] px-4">{{ title }}</h1>
73+
<p class="mt-4 text-lg text-center max-w-[600px] px-4">{{ description }}</p>
74+
</header>
75+
76+
<main class="ml-[auto] mr-[auto] max-w-[1000px] py-[72px] px-[48px] text-[#FFFFFFBB]">
77+
<div class="prose prose-invert prose-lg max-w-none prose-headings:text-white prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-strong:text-white prose-code:text-blue-300 prose-pre:bg-gray-800">
78+
{{ content }}
79+
</div>
80+
</main>
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)