Edit on GitHub - Website Button (#1318)

* Added edit on GitHub button to documentation/blog * Updated styles for view on GitHub buttons * Fixed failing tests
flow-php · Jan 2, 2025 · 9bdf060 · 9bdf060
1 parent 9aea5a1
commit 9bdf060
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 11 deletions.
diff --git a/documentation/quick-start.md b/documentation/quick-start.md
@@ -47,7 +47,9 @@ The `data_frame()` function is the entry point to the Flow ETL DSL.
 
 It creates a new instance of the `Flow\ETL\Flow` class, which is the main class of the ETL. 
 
-## Extraction
+[Data Frame Examples](/data_frame/#example)
+
+## Extraction - Reading
 
 The first step in creating a data processing pipeline is to read the data from a data source.
 Extractors are responsible for reading data from a data source and converting it into a format that can be processed by Flow ETL.
@@ -67,6 +69,8 @@ data_frame()
     ->read(from_csv(__DIR__ . '/reports/*.csv'))
 ```  
 
+[Extractors Examples](/data_reading/#example)
+
 ## Transformation
 
 Extractors by default are going to read all columns from the data source, you can use the `select()` function to select only the columns you need.
@@ -95,9 +99,11 @@ You can find all available functions in the [DSL](../src/core/etl/src/Flow/ETL/D
 > [!TIP]
 > DSL is nothing more than a set of functions that return instances of Flow PHP objects. 
 > You can always create objects directly, but DSL is a more convenient way to build a pipeline.
-> All available ETL functions can be found in the [Function](../src/core/etl/src/Flow/ETL/Function) namespace.
+> All available ETL functions can be found in the [Function](/src/core/etl/src/Flow/ETL/Function) namespace.
 
-## Loading
+[Transformations Examples](/transformations/#example)
+
+## Loading - Writing
 
 Loading, also writing to a data source, is the last step in the data processing pipeline.
 There can be more than one writer in the pipeline
@@ -128,6 +134,8 @@ There are three save modes available:
 > Append mode is not really appending anything to existing files, instead it creates a folder in which it stores outputs under randomized file names. 
 > It can be later read using glob-pattern, for example `from_csv('/path/to/folder/*.csv')`.
 
+[Loaders Examples](/data_writing/#example)
+
 ## Lazy Execution
 
 Flow ETL is using lazy execution, which means that the pipeline will not be executed until you call the `run()` function.
@@ -137,5 +145,5 @@ Flow ETL is using lazy execution, which means that the pipeline will not be exec
 ```
 
 There are few more triggering functions, like `fetch()`, you can find which functions are `@lazy` or `@trigger` looking at
-the [DataFrame](../src/core/etl/src/Flow/ETL/DataFrame.php) source code.
+the [DataFrame](/src/core/etl/src/Flow/ETL/DataFrame.php) source code.
 
diff --git a/web/landing/assets/styles/app.css b/web/landing/assets/styles/app.css
@@ -24,6 +24,18 @@ html {
     @apply list-disc pl-6;
 }
 
+.btn {
+    @apply font-medium text-white dark:text-white py-1 px-2 rounded;
+}
+
+.btn-primary {
+    @apply bg-blue-200 dark:bg-blue-100 hover:bg-blue-300 dark:hover:bg-blue-200;
+}
+
+.btn img {
+    @apply inline-block;
+}
+
 
 nav a {
     @apply font-medium text-white dark:text-white hover:underline;

diff --git a/web/landing/src/Flow/Website/Controller/BlogController.php b/web/landing/src/Flow/Website/Controller/BlogController.php
@@ -17,6 +17,8 @@ public function post(string $date, string $slug) : Response
         return $this->render('blog/posts/' . $date . '/' . $slug . '/post.html.twig', [
             'template_folder' => 'blog/posts/' . $date . '/' . $slug,
             'post' => (new Posts())->findByDateAndSlug($date, $slug),
+            'date' => $date,
+            'slug' => $slug,
         ]);
     }
 

diff --git a/web/landing/src/Flow/Website/Model/Documentation/Page.php b/web/landing/src/Flow/Website/Model/Documentation/Page.php
@@ -23,6 +23,11 @@ public function description() : ?string
         return $result->getFrontMatter()['seo_description'] ?? 'Documentation';
     }
 
+    public function editOnGitHubUrl() : string
+    {
+        return 'https://github.com/flow-php/flow/edit/1.x/documentation/' . ltrim($this->path, '/');
+    }
+
     public function title() : ?string
     {
         $frontMatterParser = new FrontMatterParser(new SymfonyYamlFrontMatterParser());

diff --git a/web/landing/templates/blog/post.html.twig b/web/landing/templates/blog/post.html.twig
@@ -22,6 +22,13 @@
             </li>
         </ul>
     </section>
+    <div class="mt-5 mb-5 sm:px-4 mx-auto max-w-screen-xl">
+        <a class="btn btn-primary" href="https://github.com/flow-php/flow/edit/1.x/web/landing/templates/blog/posts/{{ date }}/{{ slug }}/post.html.twig" target="_blank">
+            Edit
+            <img src="{{ asset('images/icons/github.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
+        </a>
+    </div>
+
     {{ block('article') }}
     <section class="mb-10 px-2 sm:px-4 mx-auto max-w-screen-xl">
         <script src="https://giscus.app/client.js"

diff --git a/web/landing/templates/documentation/dsl.html.twig b/web/landing/templates/documentation/dsl.html.twig
@@ -97,9 +97,9 @@
                                     </h4>
                                 </div>
                                 <div class="text-right">
-                                    <a href="{{ definition.githubUrl }}" target="_blank" class="text-blue-500 ml-4 inline" title="View on GitHub" data-dsl-source-link>
-                                        <img src="{{ asset('images/icons/github.svg') }}" width="16" height="16" alt="feature" class="inline">
-                                        source
+                                    <a class="btn btn-primary" href="{{ definition.githubUrl }}" target="_blank" data-dsl-source-link>
+                                        View
+                                        <img src="{{ asset('images/icons/github.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
                                     </a>
                                 </div>
                             </div>

diff --git a/web/landing/templates/documentation/dsl/function.html.twig b/web/landing/templates/documentation/dsl/function.html.twig
@@ -33,10 +33,12 @@
                 <article data-dsl-function>
                 <h1 id="dsl-function" class="font-bold text-4xl mb-4">Definition</h1>
                     <hr class="text-blue-100 my-4 border-t-2 rounded" />
-                    <a href="{{ definition.githubUrl }}" target="_blank" class="text-blue-500 block mb-2" title="View on GitHub" data-dsl-source-link>
-                        <img src="{{ asset('images/icons/github.svg') }}" width="16" height="16" alt="feature" class="inline">
-                        source
-                    </a>
+                    <div class="mb-2">
+                        <a class="btn btn-primary" href="{{ definition.githubUrl }}" target="_blank" data-dsl-source-link>
+                            View
+                            <img src="{{ asset('images/icons/github.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
+                        </a>
+                    </div>
                     <div class="rounded shadow-2xl shadow-gray rounded border-gray border-2 mb-4">
                         {% apply spaceless %}
                         <pre class="overflow-auto !m-0">

diff --git a/web/landing/templates/documentation/example.html.twig b/web/landing/templates/documentation/example.html.twig
@@ -22,6 +22,13 @@
                 <hr class="lg:hidden"/>
                 <h1>Example: {{ currentExample|humanize }}</h1>
                 <h3>Topic: {{ currentTopic|humanize }}</h3>
+                <div class="mb-5 text-left">
+                    <a class="btn btn-primary" href="https://github.com/flow-php/flow/tree/1.x/examples/topics/{{ currentTopic }}/{{ currentExample }}" target="_blank">
+                        View
+                        <img src="{{ asset('images/icons/github.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
+                    </a>
+                </div>
+
                 <hr class="hidden lg:block"/>
                 {% if description %}
                     <h2 class="text-xl mt-5 mb-5">Description</h2>

diff --git a/web/landing/templates/documentation/page.html.twig b/web/landing/templates/documentation/page.html.twig
@@ -34,6 +34,13 @@
                 </script>
             </section>
 
+            <div class="mb-3 text-left">
+                <a class="btn btn-primary" href="{{ page.editOnGitHubUrl }}" target="_blank">
+                    Edit
+                    <img src="{{ asset('images/icons/github.svg') }}" alt="external resource" width="16" height="16" class="ml-1">
+                </a>
+            </div>
+
             {{ page.content|markdown_to_html }}
 
             <hr class="!mt-8 !mb-8"/>