Web page - Introduce the concept (#51)

* chore: Work on design of the webpage

* doc: Start working on install

* chore: Started working on a documentation page.

* chore: Started working on a documentation page.

.gitignore

@@ -3,4 +3,5 @@ exemples
 vendor
 build
 ./composer.lock
-var
+var
+/docs/_site/

docs/Gemfile.lock

@@ -0,0 +1,76 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.4)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.0)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.25.5-x86_64-linux)
+    http_parser.rb (0.8.0)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (6.0.1)
+    rake (13.0.6)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    rexml (3.3.8)
+    rouge (4.4.0)
+    safe_yaml (1.0.5)
+    sass-embedded (1.69.5)
+      google-protobuf (~> 3.23)
+      rake (>= 13.0.0)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  x86_64-linux
+
+DEPENDENCIES
+  jekyll (~> 4.3.0)
+  kramdown-parser-gfm
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.0)
+
+BUNDLED WITH
+   2.5.22

docs/_config.yml

@@ -26,6 +26,8 @@ github_username:  oliverde8
 
 # Build settings
 markdown: kramdown
+highlighter: rouge
+input: GFM
 plugins: []
 
 # exclude:

docs/_includes/block/2column.html

@@ -0,0 +1,8 @@
+<div class="ui grid">
+    <div class="eight wide column  description">
+        {{ include.column1 | markdownify }}
+    </div>
+    <div class="eight wide column  description">
+        {{ include.column2 | markdownify }}
+    </div>
+</div>

docs/_includes/block/etl-step.html

@@ -0,0 +1,21 @@
+<div class="ui grid etl-step-block">
+    <div class="ten wide column  description">
+        {{ include.description| markdownify }}
+    </div>
+
+    <div class="six wide column code">
+        <div class="ui card">
+            <div class="content">
+                <div class="description">
+                    {{ include.code| markdownify }}
+                </div>
+            </div>
+            <div class="extra content">
+                <span class="left floated like">
+                  <i class="copy icon"></i>
+                  Copy (WIP)
+                </span>
+            </div>
+        </div>
+    </div>
+</div>

docs/_includes/head.html

@@ -1,2 +1,4 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
 <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
+
+<link rel="stylesheet" href='{{ "/assets/css/custom.css" | absolute_url }}' />

docs/_includes/menu.html

@@ -1,6 +1,6 @@
 
-<div style="width: 16vw; height: 100vh; float: left">
-    <div class="ui vertical inverted menu" style="width: 100%; height: 100%">
+<div id="main-menu">
+    <div class="ui vertical menu">
         <div class="item">
             <!--                        <a class="ui logo icon image" href="/">-->
             <!--                            <img src="/images/logo.png">-->
@@ -9,19 +9,33 @@
         </div>
 
         <div class="item">
-            <div class="header">Getting Started</div>
+            <div class="header">
+                <a href="doc/getting-started.html">Getting Started</a>
+            </div>
             <div class="menu">
+                <a class="item" href="/doc/getting-started/standalone.html">
+                    🐘 Standalone
+                </a>
 
-                <a class="item" href="/getting-started/standalone.html">
-                    Stand Alone
+                <a class="item" href="/doc/getting-started/symfony.html">
+                    🎵 Symfony
                 </a>
 
-                <a class="item" href="/getting-started/symfony.html">
-                    Build Tools
+                <a class="item" href="/doc/getting-started/sylius.html">
+                    🦢 Sylius
+                </a>
+            </div>
+
+            <div class="header">
+                Understanding the ETL
+            </div>
+            <div class="menu">
+                <a class="item" href="/doc/01-understand-the-etl/the-concept.html">
+                    The concept
                 </a>
 
-                <a class="item" href="/getting-started/sylius.html">
-                    Recipes
+                <a class="item" href="/doc/01-understand-the-etl/item-types">
+                    Item types
                 </a>
             </div>
         </div>

docs/_layouts/base.html

@@ -4,13 +4,13 @@
     {% include head.html %}
 </head>
 <body>
-    <div class="main ui container" style="width: 100vw">
+    <div id="main-div" class="main ui container">
         {% include menu.html %}
 
-        <div style="width: 83vw; height: 100vh; float: right">
+        <div id="main-content">
             {% include title-block.html %}
 
-            <div class="ui container">
+            <div class="ui container width-{{page.width}}">
                 <div class="ui hidden divider"></div>
                 {{ content }}
             </div>

docs/assets/css/code.css

@@ -0,0 +1,61 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { color: #000000; font-weight: bold } /* Keyword */
+.highlight .o { color: #000000; font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d01040 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+.highlight .sc { color: #d01040 } /* Literal.String.Char */
+.highlight .sd { color: #d01040 } /* Literal.String.Doc */
+.highlight .s2 { color: #d01040 } /* Literal.String.Double */
+.highlight .se { color: #d01040 } /* Literal.String.Escape */
+.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+.highlight .si { color: #d01040 } /* Literal.String.Interpol */
+.highlight .sx { color: #d01040 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d01040 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

docs/assets/css/custom.css

@@ -0,0 +1,101 @@
+@import "code.css";
+#main-div {
+    width: 100%
+}
+
+.ui.container.width-large {
+    width: 84vw;
+    padding: 0 64px;
+}
+
+#main-menu {
+    width: 16vw;
+    height: 100vmax;
+    float: left;
+
+    > .menu {
+        border-radius: 0;
+    }
+
+    &>.menu {
+        width: 100%;
+        height: 100%
+    }
+
+    .header {
+        margin-top: 8px;
+    }
+}
+
+#main-content {
+    width: 83%;
+    height: 100vh;
+    float: right
+}
+
+.etl-step-block {
+    .ui.card {
+        width: 100%;
+    }
+}
+
+blockquote.block-tip {
+    background-color: #e2ecf5;
+    border: solid 1px #4283b9;
+    border-left: solid 4px #356994;
+    color: #21425d;
+    padding: 4px 12px;
+    width: 100%;
+    margin-left: 0;
+
+    h5::before {
+        margin-right: 4px;
+        content: "💡"
+    }
+}
+
+
+blockquote.block-info {
+    background-color: #e2f5ec;
+    border: solid 1px #42b983;
+    border-left: solid 4px #359469;
+    color: #215d42;
+    padding: 4px 12px;
+    width: 100%;
+    margin-left: 0;
+
+    h5::before {
+        margin-right: 6px;
+        content: "ℹ️"
+    }
+}
+
+blockquote.block-warning {
+    background-color: rgba(255, 229, 100, .25);
+    border: solid 1px #e7c000;
+    border-left: solid 4px #b29400;
+    color: #6b5900;
+    padding: 4px 12px;
+    width: 100%;
+    margin-left: 0;
+
+    h5::before {
+        margin-right: 6px;
+        content: "⚠️"
+    }
+}
+
+blockquote.block-error {
+    background-color: #ffe0e0;
+    border: solid 1px #c00;
+    border-left: solid 4px #c00;
+    color: #600;
+    padding: 4px 12px;
+    width: 100%;
+    margin-left: 0;
+
+    h5::before {
+        margin-right: 6px;
+        content: "‼️"
+    }
+}

docs/doc/01-understand-the-etl/execution-context.md

@@ -0,0 +1,5 @@
+---
+layout: base
+title: PHP-ETL - Understand the ETL 
+subTitle: Execution Context - Why to have an execution context & what it does
+---

docs/doc/01-understand-the-etl/item-types.md

@@ -0,0 +1,6 @@
+---
+layout: base
+title: PHP-ETL - Understand the ETL 
+subTitle: Item types
+---
+