Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added key features to the landing page #971

Merged
merged 3 commits into from
Feb 7, 2024
Merged

Added key features to the landing page #971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
355f87d
Added key features to the landing page
owsiakl Feb 7, 2024
f529919
added lazy attr to clipboard controller
owsiakl Feb 7, 2024
6ec049f
added new flow svg with inline styles
owsiakl Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions web/landing/assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import '@fontsource-variable/cabin/index.min.css';
import 'highlight.js/styles/github-dark.min.css';
import '@oddbird/popover-polyfill';
import './bootstrap.js';
import 'htmx.org'
import 'clipboard'
1 change: 1 addition & 0 deletions web/landing/assets/controllers/clipboard_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Controller} from '@hotwired/stimulus';
import ClipboardJS from 'clipboard';

/* stimulusFetch: 'lazy' */
export default class extends Controller
{
connect()
Expand Down
6 changes: 4 additions & 2 deletions web/landing/assets/controllers/syntax_highlight_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import {Controller} from '@hotwired/stimulus';
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.min.css';
import php from 'highlight.js/lib/languages/php';
import hljs from 'highlight.js/lib/core';

/* stimulusFetch: 'lazy' */
export default class extends Controller
{
static afterLoad(identifier, application)
initialize()
{
hljs.registerLanguage('php', php);
}
Expand Down
11 changes: 11 additions & 0 deletions web/landing/assets/images/icons/flow.svg
View file
Open in desktop
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 web/landing/assets/images/icons/tools.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion web/landing/assets/styles/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@tailwind utilities;

body {
font-family: "Cabin Variable", sans-serif;
font-family: "Cabin Variable", system-ui;
}

.unset {
Expand Down
12 changes: 9 additions & 3 deletions web/landing/src/Flow/Website/Controller/DefaultController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ public function example(string $topic, string $example) : Response
$examples = $this->examples->examples($currentTopic);
$currentExample = $example;

return $this->render('main/index.html.twig', [
return $this->render('example/index.html.twig', [
'contributors' => $this->github->contributors(),
'topics' => $topics,
'examples' => $examples,
Expand All @@ -38,13 +38,19 @@ public function example(string $topic, string $example) : Response
#[Route('/', name: 'main')]
public function main() : Response
{
// TODO: uncomment and remove below code when frontpage features will be available
// return $this->render('main/index.html.twig', [
// 'contributors' => $this->github->contributors(),
// 'topics' => $this->examples->topics(),
// ]);

$topics = $this->examples->topics();
$currentTopic = \current($topics);

$examples = $this->examples->examples($currentTopic);
$currentExample = \current($examples);

return $this->render('main/index.html.twig', [
return $this->render('example/index.html.twig', [
'contributors' => $this->github->contributors(),
'topics' => $topics,
'examples' => $examples,
Expand All @@ -63,7 +69,7 @@ public function topic(string $topic) : Response
$examples = $this->examples->examples($currentTopic);
$currentExample = \current($examples);

return $this->render('main/index.html.twig', [
return $this->render('example/index.html.twig', [
'contributors' => $this->github->contributors(),
'topics' => $topics,
'examples' => $examples,
Expand Down
75 changes: 68 additions & 7 deletions web/landing/templates/base.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
<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" fetchpriority="high" href="{{ asset('vendor/@fontsource-variable/cabin/files/cabin-latin-wght-normal.woff2') }}" as="font" crossorigin>

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}
Expand All @@ -30,38 +32,38 @@
</script>
<body class="scroll-smooth 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 ">
<div class="mx-auto max-w-screen-xl px-4 flex items-center justify-between">
<a href="{{ path('main') }}">
<img src="{{ asset('images/logo.svg') }}" alt="flow php" class="w-44 h-12">
<img src="{{ asset('images/logo.svg') }}" alt="flow php" width="176" height="48">
</a>

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

<nav popover id="main-nav" class="max-sm:absolute border-0 p-0 m-0 max-sm:top-0 max-sm:right-0 sm:relative 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">
<img src="{{ asset('images/icons/close.svg') }}" alt="close">
</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/github.svg') }}" alt="external resource" class="w-4 ml-0.5">
<img src="{{ asset('images/icons/github.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
</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">
<img src="{{ asset('images/icons/external.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
</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">
<img src="{{ asset('images/icons/external.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
</a>
</li>
</ul>
Expand All @@ -70,7 +72,66 @@
</header>

<main>
<div class="mx-auto max-w-screen-xl px-2 sm:px-4 relative max-lg:py-10 p-[116px]">
<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>
{% apply spaceless %}
<code class="w-fit py-2 px-3 before:content-['$'] before:mr-2 bg-orange-100 rounded">
<span id="command">composer require flow-php/etl</span>
<button class="ml-2 [&.copied]:after:content-['Copied!'] after:absolute after:translate-x-6 select-none" title="copy command" data-clipboard-target="#command" {{ stimulus_controller('clipboard') }}>
<img src="{{ asset('images/icons/copy.svg') }}" alt="copy command" width="20" height="20" class="inline">
</button>
</code>
{% endapply %}
<img src="{{ asset('images/elephant.svg') }}" alt="elephant" width="720" class="max-lg:hidden absolute right-0 top-0">
</div>

<div class="bg-blue-200">
<div class="mx-auto max-w-screen-xl py-4 flex sm:items-start justify-center text-center max-sm:flex-col lg:pr-[550px]">
<div class="basis-1/3">
<img src="{{ asset('images/icons/extract.svg') }}" alt="extract" width="64" height="64" class="inline">
<h2 class="my-2 text-2xl font-semibold tracking-wide">Extracts</h2>
<p>Read from various data sources.</p>
</div>

<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" width="32" height="32" class="max-sm:rotate-90 max-sm:my-4 mx-2 self-center">

<div class="basis-1/3">
<img src="{{ asset('images/icons/transform.svg') }}" alt="transform" width="64" height="64" class="inline">
<h2 class="my-2 text-2xl font-semibold tracking-wide">Transforms</h2>
<p>Shape and optimize for your needs</p>
</div>

<img src="{{ asset('images/icons/arrow-right.svg') }}" alt="arrow right" width="32" height="32" class="max-sm:rotate-90 max-sm:my-4 mx-2 self-center">

<div class="basis-1/3">
<img src="{{ asset('images/icons/load.svg') }}" alt="load" width="64" height="64" class="inline">
<h2 class="my-2 text-2xl font-semibold tracking-wide">Loads</h2>
<p>Store and secure in one of many available data sinks.</p>
</div>
</div>
</div>

{% block main %}{% endblock %}

<div class="bg-blue-200">
<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">
Join us on GitHub
<img src="{{ asset('images/icons/external.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
</a>
</div>

<div class="grid gap-1 sm:gap-2 lg:gap-4 grid-cols-8 lg:grid-cols-12">
{% for contributor in contributors %}
<a href="{{ contributor.html_url }}" rel="nofollow" target="_blank">
<img loading="lazy" src="{{ contributor.avatar_url }}" alt="{{ contributor.login }}" width="56" height="56" title="{{ contributor.login }}" class="rounded-full">
</a>
{% endfor %}
</div>
</section>
</div>
</main>

<footer class="text-center bg-orange-100">
Expand Down
49 changes: 49 additions & 0 deletions web/landing/templates/example/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{% extends 'base.html.twig' %}

{%- block description -%}
Flow PHP '{{ currentTopic|humanize|lower }}' topic showing '{{ currentExample|humanize|lower }}' code example.
{%- endblock -%}

{% block main %}
<div class="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 %}
<li class="grow">
<a href="{{ path('topic', {topic: topic}) }}#example" class="{% if currentTopic == topic %}active {% elseif currentTopic is null and loop.first %}active {% endif %}inline-block leading-10 px-4 py-2 w-full [&.active]:bg-orange-300 rounded">
{{ topic|humanize }}
</a>
</li>
{% endfor %}
</ul>
</nav>

<div class="-mt-20 pt-20">
<nav>
<ul class="flex whitespace-nowrap overflow-auto py-4">
{% for example in examples %}
<li>
<a href="{{ path('example', {topic: currentTopic, example: example}) }}#example" class="{% if currentExample == example %}active {% elseif currentExample is null and loop.first %}active {% endif %}w-max tracking-wide flex items-center leading-8 px-2 [&.active]:bg-orange-300 rounded">
<img src="{{ asset('images/icons/flow.svg') }}" alt="flow php icon" width="16" height="16" class="mr-2">
{{ example|humanize }}
</a>
</li>
{% endfor %}
</ul>
</nav>

<div id="example" class="-mt-36 pt-36">
{% apply spaceless %}
<pre class="rounded p-4 overflow-auto shadow-2xl shadow-gray rounded border-gray border-2 relative">
<button class="absolute top-0 right-0 bg-orange-100 rounded px-4 leading-9 [&.copied]:before:content-['Copied!'] before:absolute before:-translate-x-24" title="copy code" data-clipboard-target="#code" {{ stimulus_controller('clipboard') }}>
<img src="{{ asset('images/icons/copy.svg') }}" alt="copy code" width="20" height="20" class="inline">
</button>
<code id="code" class="language-php !p-0 !bg-transparent" {{ stimulus_controller('syntax_highlight') }}>
{{- code | escape('html') -}}
</code>
</pre>
{% endapply %}
</div>
</div>
</div>
{% endblock %}
Loading
Loading