[No QA] add new help site project

help/.gitignore

@@ -0,0 +1,5 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor

help/404.html

@@ -0,0 +1,26 @@
+---
+permalink: /404.html
+layout: default
+---
+
+<style type="text/css" media="screen">
+    .container {
+        margin: 10px auto;
+        max-width: 600px;
+        text-align: center;
+    }
+
+    h1 {
+        margin: 30px 0;
+        font-size: 4em;
+        line-height: 1;
+        letter-spacing: -1px;
+    }
+</style>
+
+<div class="container">
+    <h1>404</h1>
+
+    <p><strong>Page not found :(</strong></p>
+    <p>The requested page could not be found.</p>
+</div>

help/Gemfile

@@ -0,0 +1,35 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.2.2"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", "~> 1.2"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+
+gem "webrick", "~> 1.7"

help/Gemfile.lock

@@ -0,0 +1,83 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (1.10.0)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.2)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-feed (0.16.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (2.2.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    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.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.7)
+    rb-fsevent (0.11.1)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.29.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+    webrick (1.7.0)
+
+PLATFORMS
+  x86_64-darwin-21
+
+DEPENDENCIES
+  http_parser.rb (~> 0.6.0)
+  jekyll (~> 4.2.2)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.1)
+  webrick (~> 1.7)
+
+BUNDLED WITH
+   2.3.17

help/README.md

@@ -0,0 +1,170 @@
+# Welcome to the Expensify Help site
+
+Expensify Help is mainly composed of static HTML (`.html`) and Markdown (`.md`) files. We use [Jekyll](https://jekyllrb.com/) to generate a static site from those HTML and Markdown files.
+
+# Test locally
+
+## Pre-requisites
+
+- Clone and/or pull the [App repo](https://github.com/Expensify/App) to your local machine.
+- Check the [requirements](https://jekyllrb.com/docs/installation/) to install Jekyll.
+- Install Jekyll locally by running:
+```
+gem install bundler
+cd help
+bundle install
+```
+
+## Steps
+
+1. Open the Terminal command line in macOS.
+2. Navigate to the `help` folder in the command line.
+3. Run `bundle exec jekyll serve --livereload`.
+    - _Note: If you see an error like `Unable to load the EventMachine C Extension...`, try running `gem uninstall eventmachine && bundle install`. If that doesn't work just removing the `--livereload` flag should work._
+4. Open http://localhost:4000 in the browser to see the site running locally.
+5. Modify a `.html` or `.md` file and refresh the page in the browser.
+
+# How the project is structured
+
+The [help](https://github.com/Expensify/App/tree/e6cea38ef22f83ae4730a34a9281d8962388dff8/help) folder will contain the following main folders:
+- *_layouts*: This contains HTML templates used by Jekyll to create pages in the static site. For now it has only one file ([default.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/_layouts/default.html)) which will render the common HTML elements and the assets on every page. It also supports the use of the [liquid template language](https://shopify.github.io/liquid/).
+- *_includes*: Contains HTML content that can be reused on different pages. For now, it contains various html elements that are used to populate the left-hand-nav (LHN).
+- *assets*: it will contain the three sub-folders css, images, and js.
+  - The css folder can contain either .css or .sass files (where SASS files will be processed by Jekyll and it will generate a CSS file in an output folder also generated by Jekyll).
+  -  In order to organize the image files, we're going to have multiple sub-folders grouped by subject in the images folder.
+- *hubs*: it will contain two HTML files that will have the content of the `Request Money` and `Send Money` hub pages respectively.
+- *articles*: it will contain sub-folders for each stage and each of them will contain all the articles related to that stage or subsection.
+- *_site*: this will be the output folder that will contain the generated HTML files. This is the default name by Jekyll but can be changed.
+index.html: it will have the homepage content.
+
+More details about the Jekyll project structure can be found [here](https://jekyllrb.com/docs/structure/).
+
+# How to add a new Article
+
+## Add content
+
+Copy the [template](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/TEMPLATE.md) file and rename it with the name of the article title, i.e. [SmartScan.md](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/articles/request-money/request-money/SmartScan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page).
+
+The sections of the article will be filled and nested automatically in the LHN, just ensure to use the [heading markdown tags](https://www.markdownguide.org/cheat-sheet/) correctly.
+
+## Add a new entry in the hub page
+
+There are 3 main components in the hub page: 1. Stage title, 2. Row of Card buttons and 3. Card buttons.
+
+```html
+<!-- 1. Stage title -->
+<h2 id="request-money">
+    Request Money
+</h2>
+
+<!-- 2. Row of Card buttons -->
+<div class="cards-row">
+
+    <!-- 3. Card buttons -->
+
+    <div class="card" onclick="openArticle('./request-money/SmartScan')">
+        <div class="body">
+            <div class="title">SmartScan</div>
+        </div>
+        <div class="right-icon">
+            <i class="fa-solid fa-angle-right caret-icon"></i>
+        </div>
+    </div>
+
+    <div class="card" onclick="openArticle('./request-money/AnotherArticle')">
+        <div class="body">
+            <div class="title">Another Article</div>
+        </div>
+        <div class="right-icon">
+            <i class="fa-solid fa-angle-right caret-icon"></i>
+        </div>
+    </div>
+
+    <!-- More Card buttons here... -->
+
+</div>
+```
+### Add a Stage title (optional)
+
+In order to add a new stage title in the hub page just copy and paste the following HTML block in the respective hub page and modify the values accordingly:
+
+```html
+<h2 id="request-money">
+    Request Money
+</h2>
+```
+
+Where `id` is an arbitrary value that will help us to anchor this title to the LHN element.
+
+### Add a Row of Card buttons (optional)
+
+If it's required, you can add a new row of Card buttons with the following HTML block:
+
+```html
+<div class="cards-row">
+    <!-- Add Cards components here -->
+</div>
+```
+
+### Add a Card button
+
+A card button is the box that contains the article title and the caret right icon `>`. It navigates to the article when it's pressed.
+
+In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/articles/send-money/index.html) or [request-money/index.html](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/articles/request-money/index.html)) just copy and pase the following Card element:
+
+```html
+<div class="card" onclick="openArticle('./request-money/SmartScan')">
+    <div class="body">
+        <div class="title">SmartScan</div>
+    </div>
+    <div class="right-icon">
+        <i class="fa-solid fa-angle-right caret-icon"></i>
+    </div>
+</div>
+```
+
+Then replace the article title accordingly (in this case replace the value `SmartScan` with the new article title) and add a link to the relative path of the article (in this case replace `./request-money/SmartScan` accordingly to the path of the new article file without the file extension).
+
+## Add a new entry in the LHN page
+
+There are 2 main components in the LHN page associated with the hub you're adding an article to:
+  1. Stage title anchor: which navigates the Stage title in the hub page and contains an unordered list of Article links.
+  2. Article links: which navigate to the corresponding article page.
+
+```html
+<!-- 1.Stage title anchor -->
+<li><a href="#request-money">Request Money</a>
+    <!-- 2. Article links -->
+    <ul>
+        <li><a href="./request-money/SmartScan">SmartScan</a></li>
+        <li><a href="./request-money/AnotherArticle">Another Article</a></li>
+        <!-- More Article links here... -->
+    </ul>
+</li>
+
+<!-- More Stage title anchors here... -->
+```
+
+### Add a new Stage title anchor (optional)
+
+Just add copy and paste the following HTML block in the corresponding navigation tree file (either for [Request Money](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/_includes/request-money-navigation-tree.html) or [Send Money](https://github.com/Expensify/App/blob/e6cea38ef22f83ae4730a34a9281d8962388dff8/help/_includes/send-money-navigation-tree.html)):
+
+```
+<li><a href="#request-money">Request Money</a>
+    <!-- Article links will be here -->
+</li>
+```
+
+Where `"#request-money"` is the ID of Stage title in the hub page (the same as in the example of the `Add a Stage title (optional)` section).
+
+### Add a new Article link
+
+Add the next HTML block inside of the corresponding Stage title anchor:
+
+```
+<ul>
+    <li><a href="./request-money/SmartScan">SmartScan</a></li>
+</ul>
+```
+
+Where `./request-money/SmartScan` will be the relative path of the file name (exactly the same as in the `Add a Card button` example above).

help/TEMPLATE.md

@@ -0,0 +1,41 @@
+---
+---
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# About
+<!--
+This short blurb provides all the context the user might need to know what the feature is and why they'd use it. If there are particular best practices embedded in the design, we'd explain why they're best practices here.
+
+What advantages does this feature provide in general?
+What is unique about this feature in terms of our specific implementation of it in Expensify?
+-->
+
+# How-to
+<!--
+This section covers the most essential information a user needs to operate a feature i.e. what to click on. We’ll go over any action the user might take when configuring or using the feature, starting from configuration and moving to usage.
+
+What options does a user have when configuring this feature?
+What options does a user have then interacting with this feature?
+What elements of this feature are pay-walled vs. free?
+-->
+
+# FAQ
+<!--
+This section covers the useful but not as vital information, it should capture commonly queried elements which do not organically form part of the About or How-to sections.
+
+- What's idiosyncratic or potentially confusing about this feature?
+- Is there anything unique about how this feature relates to billing/activity?
+- If this feature is released, are there any common confusions that can't be solved by improvements to the product itself?
+- Similarly, if this feature hasn't been released, can you predict and pre-empt any potential confusion?
+- Is there any general troubleshooting for this feature?
+ - Note: troubleshooting should generally go in the FAQ, but if there is extensive troubleshooting, such as with integrations, that will be housed in a separate page, stored with and linked from the main page for that feature.
+-->
+
+# Deep Dive
+<!--
+This section will be the final nice-to-know section which covers additional Best Practices that apply to niche use-cases, alternate setup configurations, and in-depth details for parts of a feature that do not apply to all users. These will likely only be required for very complex features with high configurability.
+
+- Is the feature multi-layered (contains features within features) and needs further explanation in this section? Example: Managing Domains.
+- Does the feature have several different variables that can cause different outcomes for different customers? Example: Billing.
+- Does the feature have optional enhancements that can be used in different ways depending on the use case? Example: Category-specifc rules.
+-->

help/_config.yml

@@ -0,0 +1,7 @@
+
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+    values:
+      layout: "default"
+exclude: [README.md, TEMPLATE.md]

help/_includes/home-navigation-tree.html

@@ -0,0 +1,13 @@
+<ul class="main-navigation-tree">
+    <li>
+        <a href="/index.html">Home</a>
+    </li>
+    <li>
+        <i class="fa-solid fa-angle-right caret-icon"></i>
+        <a href="/hubs/send-money">Send Money</a>
+    </li>
+    <li>
+        <i class="fa-solid fa-angle-right caret-icon"></i>
+        <a href="/hubs/request-money">Request Money</a>
+    </li>
+</ul>