Did rough styling of website

Flutter-Bounty-Hunters · Jun 19, 2024 · 77aa1e6 · 77aa1e6
1 parent 4d71f27
commit 77aa1e6
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 13 deletions.
diff --git a/bin/flutter_shaders_com.dart b/bin/flutter_shaders_com.dart
@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:static_shock/static_shock.dart';
 
 Future<void> main(List<String> arguments) async {
@@ -17,7 +19,15 @@ Future<void> main(List<String> arguments) async {
     ..plugin(const TailwindPlugin(
       input: "source/styles/tailwind.css",
       output: "build/styles/tailwind.css",
-    ));
+    ))
+    ..plugin(
+      GitHubContributorsPlugin(
+        authToken: Platform.environment["github_doc_website_token"],
+        repositories: {
+          GitHubRepository(organization: "flutter-bounty-hunters", name: "flutter_shaders"),
+        },
+      ),
+    );
 
   // Generate the static website.
   await staticShock.generateSite();

diff --git a/source/_data.yaml b/source/_data.yaml
@@ -1 +1,3 @@
 homepage_url: https://fluttershaders.com
+
+featured_shader_screenshot: /shaders/riveo-page-curl/riveo_page_curl.png
diff --git a/source/_includes/layouts/shader_page.jinja b/source/_includes/layouts/shader_page.jinja
@@ -40,7 +40,7 @@
   <script>hljs.highlightAll();</script>
 </head>
 
-<body class="bg-[#333333]">
+<body class="bg-[#27b6d6]">
   <header class="py-[128px] flex flex-col justify-center items-center bg-[#FFFFFF] text-[#444444]">
     <div class="absolute top-0 left-0 w-full h-[48px] flex justify-center items-center">
       <a href="/" class="text-[#444444] text-sm font-bold uppercase">Flutter Shaders</a>
@@ -49,7 +49,8 @@
     <img src="{{ shader.screenshot }}" class="max-w-[400px]">
     <h1 class="mt-8 text-4xl font-bold uppercase">{{ shader.title }}</h1>
   </header>
-  <main class="ml-[auto] mr-[auto] max-w-[800px] py-[72px] px-[48px] flex flex-col items-center text-[#AAAAAA]">
+
+  <main class="ml-[auto] mr-[auto] max-w-[800px] py-[72px] px-[48px] flex flex-col items-center text-[#FFFFFFBB]">
     <p class="mb-[72px] max-w-[500px] text-2xl font-bold text-center">{{ shader.description }}</p>
 
     <video width="500" height="400" autoplay loop muted class="rounded-md">

diff --git a/source/how-shaders-work.jinja b/source/how-shaders-work.jinja
@@ -39,8 +39,8 @@ description: Learn how shaders render pixels in Flutter.
 </head>
 
 <body>
-  <main>
-    <h1>TODO</h1>
+  <main class="h-screen flex flex-col justify-center items-center">
+    <h1 class="text-6xl uppercase font-bold">Coming Soon</h1>
   </main>
 </body>
 </html>
diff --git a/source/images/platform-icons.png b/source/images/platform-icons.png
diff --git a/source/index.jinja b/source/index.jinja
@@ -36,24 +36,76 @@ description: An inventory of shaders for Flutter developers to explore.
     <meta name="twitter:image" content="{{ homepage_url }}/images/social.png" />
 
     <link href="/styles/tailwind.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
 
-  <body class="bg-[#333333]">
+  <body class="bg-[#27b6d6]">
     <header  class="py-[128px] flex flex-col justify-center items-center bg-[#FFFFFF] text-[#444444]">
       <div class="max-w-[800px] flex flex-row items-center">
         <div class="flex-1">
           <h1 class="mb-[8px] text-5xl font-bold uppercase">Flutter Shaders</h1>
-          <p class="text-3xl text-[#888888] font-bold">Shaders for every user, on every platform</p>
+          <p class="mb-[24px] text-3xl text-[#27b6d6] font-bold">Shaders for every user, on every platform</p>
+          <img src="/images/platform-icons.png" class="max-w-[275px]">
         </div>
-        <div class="ml-[48px] w-[250px] h-[250px] bg-[#222222]">
-          <!-- featured shader screenshot -->
+        <div class="ml-[48px] w-[250px] h-[250px]">
+          <img src="{{ featured_shader_screenshot }}" class="w-full rounded-xl">
         </div>
       </div>
 
       <a href="/how-shaders-work" class="mt-[72px] text-[#444444] font-bold uppercase no-underline">Learn how shaders work</a>
     </header>
-    <main>
-      <h1>TODO</h1>
+    <main class="py-[96px] text-[#FFFFFFAA]">
+      <div class="max-w-[800px] ml-[auto] mr-[auto] mb-[128px]">
+        <div class="grid grid-cols-3 gap-[48px]">
+          {% for page in pages.byTag("shader") %}
+          <a href="{{ page.data["url"] }}" class="no-underline">
+            <div class="p-[8px] border border-[#FFFFFF10] hover:border-[#FFFFFF33] hover:bg-[#FFFFFF04] rounded-lg">
+              <img
+                src="{{ page.data["directory"] }}{{ page.data["shader"]["screenshot"] }}"
+                class="w-full max-w-[250px] rounded-md"
+                >
+              <p class="mt-[12px] mb-[12px] text-center">{{ page.data["shader"]["title"] }}</p>
+            </div>
+          </a>
+          {% endfor %}
+        </div>
+      </div>
+
+      <h2 class="text-center font-bold uppercase text-xl text-[#FFFFFF]">Contributors</h2>
+      <ol class="mt-[32px] mb-[128px] flex flex-row justify-center list-none text-center">
+        {% set contributors = github["flutter-bounty-hunters"].flutter_shaders %}
+        {% set contributorCount = 15 %}
+        {% for contributor in contributors|take(contributorCount) %}
+        <li class="inline-block mr-[16px] mb-[16px]">
+          <a
+              href="{{ contributor.userUrl }}"
+              target="_blank"
+              title="{{ contributor.userId }}"
+              class="inline-block w-[64px] h-[64px] rounded-full bg-cover bg-no-repeat bg-center"
+              style="background-image: url('{{ contributor.avatarUrl }}');"></a>
+        </li>
+        {% endfor %}
+
+        {% if contributors|length > contributorCount %}
+        <li class="inline-block">
+          <div class="inline-block w-[64px] h-[64px] rounded-full bg-[rgba(255, 255, 255, 0.05)] leading-[64px] text-center align-[middle]">
+            +{{  contributors|length - contributorCount  }}
+          </div>
+        </li>
+        {% endif %}
+      </ol>
+
+      <div class="mb-[128px] text-center">
+        <a
+            href="https://github.com/sponsors/matthew-carroll"
+            target="_blank"
+            title="matthew-carroll"
+            class="inline-block w-[64px] h-[64px] rounded-full bg-cover bg-no-repeat bg-center"
+            style="background-image: url('https://avatars.githubusercontent.com/u/7259036?v=4');"></a>
+        <p class="mt-[8px] mb-[24px] text-sm">Made with ❤️ by <a href="https://superdeclarative.com" target="_blank" class="text-[#FFFF00]">SuperDeclarative!</a></p>
+        <a href="https://github.com/sponsors/matthew-carroll" target="_blank" class="px-[12px] py-[8px] bg-sky-600 hover:bg-sky-400 rounded-lg text-[#FFFFFFDD] hover:text-[#FFFFFFFF] no-underline text-sm"><i class="fa-brands fa-github"></i> Sponsor on GitHub</a>
+      </div>
     </main>
   </body>
 </html>
diff --git a/source/shaders/_data.yaml b/source/shaders/_data.yaml
@@ -1 +1,3 @@
 layout: layouts/shader_page.jinja
+tags:
+  - shader
diff --git a/source/shaders/chaos/index.md b/source/shaders/chaos/index.md
@@ -5,6 +5,8 @@ shader:
   description: This shader generates random lines using noise algorithms. Lines appear when `tapValue` is updated, peaking at 1.0 and hidden at 0.0.
   screenshot: chaos.png
   video: chaos.mp4
+# For the moment we need to record the path to this directory until Static Shock provides this
+directory: shaders/chaos/
 ---
 ```glsl
 // Ported from [@realvjy](https://gist.github.com/realvjy/803f8862adb02a094f96fd07e00917ee) metal shader.

diff --git a/source/shaders/ripple/index.md b/source/shaders/ripple/index.md
@@ -5,6 +5,8 @@ shader:
  description: A water ripple that emanates from the location of a user's tap.
  screenshot: ripple.png
  video: ripple.mp4
+# For the moment we need to record the path to this directory until Static Shock provides this
+directory: shaders/ripple/
 ---
 ```glsl
 /*

diff --git a/source/shaders/riveo-page-curl/index.md b/source/shaders/riveo-page-curl/index.md
@@ -5,6 +5,8 @@ shader:
   description: A 3D-like curling effect that follows the pointer.
   screenshot: riveo_page_curl.png
   video: riveo_page_curl.mp4
+# For the moment we need to record the path to this directory until Static Shock provides this
+directory: shaders/riveo-page-curl/
 ---
 ```glsl
 // Ported from [@wcandillon](https://github.com/wcandillon) skia shader.

diff --git a/source/usage-guide.jinja b/source/usage-guide.jinja
@@ -39,8 +39,8 @@ description: Learn how to use sample code from fluttershaders.com.
 </head>
 
 <body>
-  <main>
-    <h1>TODO</h1>
+  <main class="h-screen flex flex-col justify-center items-center">
+    <h1 class="text-6xl uppercase font-bold">Coming Soon</h1>
   </main>
 </body>
 </html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		homepage_url: https://fluttershaders.com

		featured_shader_screenshot: /shaders/riveo-page-curl/riveo_page_curl.png