Skip to content

Commit

Permalink
Added html for a landing page (#945)
Browse files Browse the repository at this point in the history
  • Loading branch information
owsiakl authored Feb 1, 2024
1 parent 6a324b1 commit 6b4f0d9
Show file tree
Hide file tree
Showing 22 changed files with 398 additions and 15 deletions.
Binary file removed src/web/landing/assets/images/banner.png
Binary file not shown.
126 changes: 126 additions & 0 deletions src/web/landing/assets/images/elephant.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
5 changes: 5 additions & 0 deletions src/web/landing/assets/images/icons/arrow-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/web/landing/assets/images/icons/close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/web/landing/assets/images/icons/external.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/web/landing/assets/images/icons/extract.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/web/landing/assets/images/icons/load.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/web/landing/assets/images/icons/menu.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/web/landing/assets/images/icons/transform.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions src/web/landing/assets/images/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion src/web/landing/assets/styles/app.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;

.unset {
inset: unset;
}
2 changes: 1 addition & 1 deletion src/web/landing/config/bundles.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?php
<?php declare(strict_types=1);

return [
Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
Expand Down
6 changes: 3 additions & 3 deletions src/web/landing/config/preload.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<?php
<?php declare(strict_types=1);

if (file_exists(dirname(__DIR__).'/var/cache/prod/Flow_Website_KernelProdContainer.preload.php')) {
require dirname(__DIR__).'/var/cache/prod/Flow_Website_KernelProdContainer.preload.php';
if (\file_exists(\dirname(__DIR__) . '/var/cache/prod/Flow_Website_KernelProdContainer.preload.php')) {
require \dirname(__DIR__) . '/var/cache/prod/Flow_Website_KernelProdContainer.preload.php';
}
4 changes: 2 additions & 2 deletions src/web/landing/public/index.php
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<?php
<?php declare(strict_types=1);

use Flow\Website\Kernel;

require_once dirname(__DIR__).'/vendor/autoload_runtime.php';
require_once \dirname(__DIR__) . '/vendor/autoload_runtime.php';

return function (array $context) {
return new Kernel($context['APP_ENV'], (bool) $context['APP_DEBUG']);
Expand Down
22 changes: 21 additions & 1 deletion src/web/landing/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,27 @@ module.exports = {
"./templates/**/*.html.twig",
],
theme: {
extend: {},
extend: {
colors: {
black: "#1b1925",
gray: "#323232",
orange: {
100: "#ff5547",
200: "#DB4B3D",
300: "#B33D32",
},
blue: {
100: "#806dfe",
200: "#5945d8",
300: "#4026ac",
},
brown: {
100: "#e1761a",
200: "#ad6126",
300: "#8c4716",
}
},
},
},
plugins: [],
}
58 changes: 52 additions & 6 deletions src/web/landing/templates/base.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Flow PHP - strongly typed data processing framework</title>

<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('images/favicons/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('images/favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('images/favicons/favicon-16x16.png') }}">
<link rel="shortcut icon" href="{{ asset('images/favicons/favicon.ico') }}">

<link rel="preload" href="https://fonts.googleapis.com/css?family=Cabin" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin">

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}
Expand All @@ -12,17 +20,55 @@
{{ importmap([]) }}
{% endblock %}
</head>
<body>
<header>
<h1 class="text-center mt-10 mb-10">Flow PHP - strongly typed data processing framework</h1>
<body class="scroll-smooth font-['Cabin'] bg-black text-white">
<header class="py-2 text-white bg-blue-200">
<div class="mx-auto max-w-screen-xl px-4 flex items-center justify-between ">
<a href="{{ url('main') }}">
<img src="{{ asset('images/logo.svg') }}" alt="flow php" class="w-44 h-12">
</a>

<button popovertarget="main-nav" popovertargetaction="show" class="sm:hidden">
<img src="{{ asset('images/icons/menu.svg') }}" alt="menu" class="" >
</button>

<nav popover id="main-nav" class="relative p-0 m-0 max-sm:top-0 max-sm:right-0 sm:block text-white bg-blue-200 unset">
<ul class="sm:flex flex-nowrap whitespace-nowrap">
<li class="sm:hidden text-right">
<button popovertarget="main-nav" popovertargetaction="hide" class="sm:hidden h-16 pr-4">
<img src="{{ asset('images/icons/close.svg') }}" alt="menu">
</button>
</li>
<li>
<a class="p-3 flex items-center" href="https://github.com/flow-php/flow" target="_blank">
Repository
<img src="{{ asset('images/icons/external.svg') }}" alt="external resource" class="w-4 ml-0.5">
</a>
</li>
<li>
<a class="p-3 flex items-center" href="https://github.com/orgs/flow-php/projects/1" target="_blank">
Roadmap
<img src="{{ asset('images/icons/external.svg') }}" alt="external resource" class="w-4 ml-0.5">
</a>
</li>
<li>
<a class="p-3 flex items-center" href="https://github.com/orgs/flow-php/discussions" target="_blank">
Discussion
<img src="{{ asset('images/icons/external.svg') }}" alt="external resource" class="w-4 ml-0.5">
</a>
</li>
</ul>
</nav>
</div>
</header>

<main class="container mx-auto">
<main>
{% block main %}{% endblock %}
</main>

<footer class="text-center mt-10">
&copy; Copyright {{ 'now' | date('Y') }} Flow
<footer class="text-center bg-orange-100">
<div class="py-4 mx-auto max-w-screen-xl">
<a href="https://github.com/flow-php">&copy; Copyright {{ 'now' | date('Y') }} Flow PHP</a>
</div>
</footer>
</body>
</html>
40 changes: 40 additions & 0 deletions src/web/landing/templates/main/example.txt.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{% macro first() %}
<?php
declare(strict_types=1);
use function Flow\ETL\Adapter\Parquet\to_parquet;
use function Flow\ETL\DSL\df;
use function Flow\ETL\DSL\from_array;
use function Flow\ETL\DSL\overwrite;
use function Flow\ETL\DSL\ref;
use Ramsey\Uuid\Uuid;
require __DIR__ . '/../../bootstrap.php';
df()
->read(from_array(
\array_merge(...\array_map(
function (int $i) : array {
$data = [];
$maxItems = \random_int(2, 10);
for ($d = 0; $d < $maxItems; $d++) {
$data[] = [
'id' => Uuid::uuid4()->toString(),
'created_at' => (new \DateTimeImmutable('2020-01-01'))->add(new \DateInterval('P' . $i . 'D'))->setTime(\random_int(0, 23), \random_int(0, 59), \random_int(0, 59)),
'value' => \random_int(1, 1000),
];
}
return $data;
},
\range(1, 300)
))
))
->partitionBy(ref('created_at'))
->saveMode(overwrite())
->write(to_parquet(__FLOW_OUTPUT__ . '/date_partitioned'))
->run();
{% endmacro %}
83 changes: 82 additions & 1 deletion src/web/landing/templates/main/index.html.twig
Original file line number Diff line number Diff line change
@@ -1,5 +1,86 @@
{% extends 'base.html.twig' %}
{% import "main/example.txt.twig" as examples %}

{% block main %}
<img src="{{ asset('images/banner.png') }}" alt="flow php main banner">
{% set topics = [
{id: 'partitioning', name: 'Partitioning'},
{id: 'grouping_and_aggregating', name: 'Grouping and Aggregating'},
{id: 'join_operations', name: 'Join Operations'},
{id: 'sorting', name: 'Sorting'},
{id: 'schema_validation', name: 'Schema Validation'},
{id: 'window_functions', name: 'Window Functions'},
{id: 'caching', name: 'Caching'},
{id: 'low_memory_consumption', name: 'Low Memory Consumption'},
] %}

{% set examples = 1..10 %}

<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>
<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">
<img src="{{ asset('images/icons/extract.svg') }}" alt="extract" class="inline">
<h2 class="my-2.5 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">

<div class="p-2.5 my-2.5 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>
<p>Processes and organizes extracted data so it is usable.</p>
</div>

<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right">

<div class="p-2.5 my-2.5 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>
<p>Moves transformed data to a data repository.</p>
</div>
</div>
</div>

<div class="group/topics relative py-10 px-4 mx-auto max-w-screen-xl">
<nav class="font-medium text-center bg-orange-100 rounded">
<ul class="flex whitespace-nowrap overflow-auto justify-between">
{% for topic in topics %}
<li class="group-[:not(:has(:target))]/topics:first:bg-orange-300 grow rounded">
<a href="#{{ topic.id }}" class="inline-block leading-10 px-4 py-2 w-full [&.active]:bg-orange-300 rounded">{{ topic.name }}</a>
</li>
{% endfor %}
</ul>
</nav>

{% for topic in topics %}
<div id="{{ topic.id }}" class="group/examples hidden target:block has-[:target]:block group-[:not(:has(:target))]/topics:first-of-type:block pb-4 -mt-20 pt-20">
<nav>
<ul class="flex flex-nowrap whitespace-nowrap overflow-auto py-4">
{% for example in examples %}
<li class="group-[:not(:has(:target))]/examples:first:bg-orange-300 rounded">
<a data-topic="#{{ topic.id }}" href="#{{ topic.id }}_example_{{ example }}" class="w-max tracking-wide flex items-center leading-8 px-2 [&.active]:bg-orange-300 rounded">
<img src="{{ asset('images/favicons/favicon-16x16.png') }}" alt="flow php icon" class="mr-2">
example_{{ example }}.php
</a>
</li>
{% endfor %}
</ul>
</nav>

{% for example in examples %}
<div id="{{ topic.id }}_example_{{ example }}" class="-mt-36 pt-36 hidden target:block group-[:not(:has(:target))]/examples:first-of-type:block">
<pre class="rounded p-4 overflow-auto shadow-2xl shadow-gray rounded border-gray border-2"><code class="language-php">
{{- examples.first() | escape('html') -}}
</code></pre>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endblock %}

0 comments on commit 6b4f0d9

Please sign in to comment.