Adjusted landing page mobile view + some minor fixes (#967)

flow-php · Feb 4, 2024 · 7fb1c8b · 7fb1c8b
1 parent e86ead6
commit 7fb1c8b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 18 deletions.
diff --git a/web/landing/README.md b/web/landing/README.md
@@ -17,13 +17,13 @@ Otherwise, you can use [https://127.0.0.1:800X](https://127.0.0.1:8000);
 
 ## Building Static Content
 
-```
-comoser build
+```shell
+composer build
 ```
 
 Before opening a pull request, please verify if the build is successful: 
 
-```
+```shell
 php -S localhost:9000 -t build
 ```
 

diff --git a/web/landing/composer.json b/web/landing/composer.json
@@ -78,8 +78,8 @@
             "rm -rf build",
             "APP_ENV=prod bin/console cache:clear",
             "APP_ENV=prod bin/console importmap:install",
-            "APP_ENV=prod bin/console asset-map:compile",
             "APP_ENV=prod bin/console tailwind:build --minify",
+            "APP_ENV=prod bin/console asset-map:compile",
             "APP_ENV=prod bin/console static-content-generator:generate:routes --clean",
             "APP_ENV=prod bin/console static-content-generator:copy:assets -d public"
         ]

diff --git a/web/landing/src/Flow/Website/Service/Github.php b/web/landing/src/Flow/Website/Service/Github.php
@@ -63,6 +63,7 @@ public function contributors() : array
                 ->drop('unpacked', 'data')
                 ->filter(not(ref('login')->endsWith(lit('[bot]'))))
                 ->filter(not(ref('login')->equals(lit('aeon-automation'))))
+                ->withEntry('avatar_url', ref('avatar_url')->concat(lit('&s=128')))
                 ->limit(24)
                 ->write(to_memory($memory = new ArrayMemory()))
                 ->run();

diff --git a/web/landing/templates/base.html.twig b/web/landing/templates/base.html.twig
@@ -2,7 +2,9 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0">
+    <meta name="description" content="{% block description %}{% endblock %}">
+
     <title>Flow ETL - PHP Data Processing Framework</title>
 
     <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('images/favicons/apple-touch-icon.png') }}">

diff --git a/web/landing/templates/main/index.html.twig b/web/landing/templates/main/index.html.twig
@@ -1,39 +1,47 @@
 {% extends 'base.html.twig' %}
 
+{%- block description -%}
+    {%- if app.current_route == 'main' -%}
+        Flow PHP main page with code examples.
+    {%- else -%}
+        Flow PHP '{{ currentTopic | humanize | lower }}' topic showing '{{ currentExample | humanize | lower }}' code example.
+    {%- endif -%}
+{%- endblock -%}
+
 {% block main %}
-    <div class="mx-auto max-w-screen-xl px-4 relative max-lg:py-10 lg:h-[500px] flex flex-col justify-center">
-        <h1 class="font-bold text-6xl tracking-wide leading-[70px] max-w-[450px] mb-8 z-10">UNIFIED DATA PROCESSING FRAMEWORK</h1>
+    <div class="mx-auto max-w-screen-xl px-2 sm:px-4 relative max-lg:py-10 lg:h-[500px] flex flex-col justify-center">
+        <h1 class="font-bold max-sm:text-5xl text-6xl tracking-wide leading-[70px] max-w-[450px] mb-8 z-10">UNIFIED DATA PROCESSING FRAMEWORK</h1>
         <a href="https://packagist.org/packages/flow-php/etl" target="_blank" class="w-fit py-2 px-3 tracking-widest before:content-['$'] before:mr-2 bg-orange-100 rounded">composer require flow-php/etl</a>
         <img src="{{ asset('images/elephant.svg') }}" alt="elephant" class="max-lg:hidden max-w-[720px] absolute right-0 top-2">
     </div>
 
     <div class="bg-blue-200">
-        <div class="mx-auto max-w-screen-xl flex items-center text-center lg:pr-[550px] xl:pr-[650px]">
-            <div class="p-2.5 my-2.5 rounded">
+        <div class="mx-auto max-w-screen-xl flex items-center justify-center text-center max-sm:flex-col lg:pr-[550px] xl:pr-[650px]">
+            <div class="p-2 my-2 rounded">
                 <img src="{{ asset('images/icons/extract.svg') }}" alt="extract" class="inline">
-                <h2 class="my-2.5 text-2xl font-semibold tracking-wide">Extracts</h2>
+                <h2 class="my-2 text-2xl font-semibold tracking-wide">Extracts</h2>
                 <p>Retrieves and verifies data from various sources.</p>
             </div>
 
-            <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right">
+            <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" class="max-sm:rotate-90">
 
-            <div class="p-2.5 my-2.5 rounded">
+            <div class="p-2 my-2 rounded">
                 <img src="{{ asset('images/icons/transform.svg') }}" alt="transform" class="inline">
-                <h2 class="my-2.5 text-2xl font-semibold tracking-wide">Transforms</h2>
+                <h2 class="my-2 text-2xl font-semibold tracking-wide">Transforms</h2>
                 <p>Processes and organizes extracted data so it is usable.</p>
             </div>
 
-            <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right">
+            <img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" class="max-sm:rotate-90">
 
-            <div class="p-2.5 my-2.5 rounded">
+            <div class="p-2 my-2 rounded">
                 <img src="{{ asset('images/icons/load.svg') }}" alt="load" class="inline">
-                <h2 class="my-2.5 text-2xl font-semibold tracking-wide">Loads</h2>
+                <h2 class="my-2 text-2xl font-semibold tracking-wide">Loads</h2>
                 <p>Moves transformed data to a data repository.</p>
             </div>
         </div>
     </div>
 
-    <div class="relative py-10 px-4 mx-auto max-w-screen-xl" data-hx-boost="true">
+    <div class="relative py-10 px-2 sm:px-4 mx-auto max-w-screen-xl" data-hx-boost="true">
         <nav class="font-medium text-center bg-orange-100 rounded">
             <ul class="flex whitespace-nowrap overflow-auto justify-between">
                 {% for topic in topics %}
@@ -73,7 +81,7 @@
     </div>
 
     <div class="bg-blue-200">
-        <section class="mx-auto max-w-screen-xl sm:flex justify-between items-center py-6 px-4">
+        <section class="mx-auto max-w-screen-xl sm:flex justify-between items-center py-6 px-2 sm:px-4">
             <div class="max-sm:mb-6 mr-6 whitespace-nowrap">
                 <h2 class="text-2xl font-semibold tracking-wide">Contributors</h2>
                 <a href="https://github.com/flow-php/flow/graphs/contributors" target="_blank" class="flex items-center">