multi language prep

.vercel/build.js

@@ -0,0 +1,20 @@
+let build_app = 1;
+let branch_commit = process.env.VERCEL_GIT_COMMIT_REF || '';
+let branch_check = process.env.BRANCH_CHECK || '';
+let vercel_env = process.env.VERCEL_ENV || 'preview';
+
+// For develop and master branches, always build to make sure everything is updated
+if ((vercel_env == 'preview') && (branch_commit != 'develop')) {
+	// For staging, check if it's a build from a language branch
+	// Cancel if it doesn't match expected branch
+	if (branch_check.includes('l10n_') || branch_commit.includes('l10n_')) {
+		build_app = 0;
+		if (branch_check && (vercel_env == 'preview')) {
+			if (branch_commit == branch_check) {
+				build_app = 1;
+			}
+		}
+	}
+}
+
+process.exit(build_app);

Rakefile

@@ -17,29 +17,53 @@ end
 
 task default: :serve
 
-namespace :docs do
+def jekyll_build(config_file = '_config.yml', lang = 'en')
+  public_folder = './public'
+  # puts `#{config_file}`
+  puts `bundle exec jekyll build --config #{config_file}`
+  if (lang != 'en')
+    index_file = File.join(public_folder, "index_#{lang}.html")
+    FileUtils.copy_file(index_file, File.join('_site', "index.html"))
+  end
+end
+def jekyll_serve(config_file = '_config.yml')
+  if ENV["RACK_ENV"] == 'staging'
+    pipe "bundle exec jekyll s --port 5006 --config #{config_file}"
+  else
+    # Force a clean build of the site and the pipeline assets
+    puts `rm .jekyll-metadata`
+    pipe "bundle exec jekyll s --port 5006 --incremental --config #{config_file},_incremental_config.yml"
+  end
+end
+
+namespace :docs_en do
+  config_file = './_config.yml'
   task :index do
     if ENV["SITE_URL"] == 'https://www.braze.com' && ENV["RACK_ENV"] == 'production'
-      puts `bundle exec jekyll algolia`
+      puts `bundle exec jekyll algolia --config #{config_file}`
     end
   end
   task build: [:index] do
-      puts `bundle exec jekyll build`
+      jekyll_build(config_file, 'en')
   end
   task :serve do
-    if ENV["RACK_ENV"] == 'staging'
-      pipe 'bundle exec jekyll s --port 5006'
-    else
-      # Force a clean build of the site and the pipeline assets
-      puts `rm .jekyll-metadata`
-      pipe 'bundle exec jekyll s --port 5006 --incremental --config _config.yml,_incremental_config.yml'
-    end
+    jekyll_serve(config_file)
+  end
+  task :proxy_serve do
+    pipe 'bundle exec ruby proxy.rb'
   end
 end
 
-namespace :success do
+namespace :docs_fr do
+  config_file = './_config.yml,./_lang/_config_fr.yml'
+  task :build do
+    jekyll_build(config_file, 'fr')
+  end
   task :serve do
-    pipe 'bundle exec ruby proxy.rb'
+    jekyll_serve(config_file)
+  end
+  task :proxy_serve do
+    pipe 'bundle exec ruby proxy.rb fr'
   end
 end
 
@@ -49,6 +73,14 @@ namespace :assets do
   end
 end
 
+multitask fr: [
+  'docs_fr:serve', 'docs_fr:proxy_serve'
+]
+
+multitask en: [
+  'docs_en:serve', 'docs_en:proxy_serve'
+]
+
 multitask serve: [
-  'docs:serve', 'success:serve'
+  'docs_en:serve', 'docs_en:proxy_serve'
 ]

_config.yml

@@ -6,7 +6,7 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "/docs" # the subpath of your site, e.g. /blog
 homeurl: "https://www.braze.com" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: Braze
-github_username:  Appboy
+github_username: braze-inc
 
 language: en
 

_includes/html_include.html

@@ -30,9 +30,17 @@
 <link type="text/css" rel="stylesheet" href="{{site.baseurl}}/assets/css/swiper.css" />
 <link type="text/css" rel="stylesheet" href="{{site.baseurl}}/assets/css/algolia_theme.css"  />
 
-{% css_asset_tag global %}
+
+{%- css_asset_tag global -%}
 - /assets/css/application.scss
-{% endcss_asset_tag %}
+{%- endcss_asset_tag -%}
+
+{%- case site.language -%}
+{%- when "fr" -%}
+{%- css_asset_tag multi_lang -%}
+- /assets/css/_lang_fr.scss
+{%- endcss_asset_tag -%}
+{%- endcase -%}
 
 <script type="text/javascript" src="{{site.baseurl}}/assets/js/clipboard.js"></script>
 <script type='text/javascript' src='{{site.baseurl}}/assets/js/jquery.mark.js' ></script>
@@ -48,13 +56,14 @@
 - /assets/js/contentcards.js
 {% endjavascript_asset_tag %}
 
-<script type='text/javascript' src='{{site.baseurl}}/assets/js/developer_nav.js' ></script>
+<script type='text/javascript' src='{{site.baseurl}}/assets/js/developer_nav.js?{{site.time | date: '%s'}}' ></script>
 <script type='text/javascript' src='{{site.baseurl}}/assets/js/swiper.js' ></script>
 
-<script type='text/javascript' src='{{site.baseurl}}/assets/js/algolia_search.js' ></script>
+<script type='text/javascript' src='{{site.baseurl}}/assets/js/algolia_search.js?{{site.time | date: '%s'}}' ></script>
 
 <script type="text/javascript">
   const page_collection = '{{ page.collection }}';
+  const site_language = '{{ site.language }}';
   const { autocomplete,getAlgoliaResults, createAutocomplete } = window['@algolia/autocomplete-js'];
   const { createAlgoliaInsightsPlugin } = window['@algolia/autocomplete-plugin-algolia-insights'];
   const searchClient = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.algolia_api_key }}');

_includes/search_page.html

@@ -1,10 +1,9 @@
 
 
 {% css_asset_tag search %}
-- /assets/css/search_page.scss
+- /assets/css/search_main.scss
 {% endcss_asset_tag  %}
 
-
 <div id="search_page">
   <div class="container">
     <div class="row flex-xl-nowrap">

_lang/_config_fr.yml

@@ -0,0 +1,67 @@
+# Site settings
+title: Braze Documentation
+email: [email protected]
+description: >- # this means to ignore newlines until "baseurl:"
+  Welcome to Braze Documentation. Braze provides a comprehensive user engagement solution for your mobile apps.
+baseurl: "/docs/fr" # the subpath of your site, e.g. /blog
+homeurl: "https://www.braze.com" # the base hostname & protocol for your site, e.g. http://example.com
+twitter_username: Braze
+github_username:  braze-inc
+
+language: fr
+
+destination: _site/docs/fr
+
+# Source dir
+source: '.'
+
+# Allows the DocSearch element to be inspected. Set to true locally, but don't
+# check in in that state, or it will cause undesirable behavior in prod.
+search_debug: false
+
+# For local testing, set to false to increase build time by not pulling partner api
+# and markdown data. MAKE SURE TO TURN BACK ON PRIOR TO COMMIT.
+partner_api: true
+markdown_api: true
+
+# gitHub config
+github_baseurl: 'https://github.com/braze-inc/braze-docs/blob/develop/_lang/_fr'
+
+# Collections directory
+collections_dir: _lang/_fr
+
+
+collections:
+  home:
+    title: Documentation
+  user_guide:
+    title: User Guide
+  developer_guide:
+    title: Developer Guide
+  api:
+    title: API
+  partners:
+    title: Technology Partners
+  help:
+    title: Help
+  hidden: # Hidden pages not directly linked via navigation
+    title: Braze
+  docs_pages: # Site specific pages. ie main redirects and search
+    title: Braze
+
+
+# Image asset pipeline setting for japr
+asset_pipeline:
+  display_path: docs/fr/assets
+
+# Algolia Search index
+algolia:
+  index_name: "DocSearch_French" # You can replace that with whatever name you want
+  files_to_exclude:
+    - _lang/_fr/_hidden/*
+    - _lang/_fr/_hidden/*/* #exclude hidden subdirectories from indexing
+    - _lang/_fr/_hidden/*/*/* #exclude additional hidden subdirectories from indexing
+    - _lang/_fr/_docs_pages/*
+    - _lang/_fr/_docs_pages/*/* #exclude hidden subdirectories from indexing
+    - _lang/_fr/_docs_pages/*/*/* #exclude additional hidden subdirectories from indexing
+    - _lang/_fr/_home/Styling_Test_Page.md

_lang/crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /_docs/
+    translation: /_lang/_%two_letters_code%/%original_file_name%

_layouts/broken_page.html

@@ -6,7 +6,7 @@
 ---
 
 
-<script type="text/javascript" src="{% image_buster /assets/js/broken_redirect_list.js %}" ></script>
+<script type="text/javascript" src="{{ site.baseurl }}/assets/js/broken_redirect_list.js?{{site.time | date: '%s'}}" ></script>
 <script type="text/javascript">
 
   function removeleadingslash(str){
@@ -19,14 +19,28 @@
 
 var validurls = (typeof validurls === "undefined")  ? {} : validurls;
 
+// multi language broken link redirects
+if (site_language && (site_language != 'en')){
+  var base_url = '{{ site.baseurl }}';
+  for (var url in validurls) {
+    var adjusted_url = url;
+    var adjusted_destination = validurls[url];
+    if (!adjusted_url.match(/^\/docs\/\w{2}\//)) {
+      adjusted_url = adjusted_url.replace(/^\/docs\//, `\/docs\/${site_language}\/`);
+    }
+    if (!adjusted_destination.match(/^\/docs\/\w{2}\//)) {
+      adjusted_destination = adjusted_destination.replace(/^\/docs\//, `\/docs\/${site_language}\/`);
+    }
+    validurls[adjusted_url] = adjusted_destination;
+  };
+}
 
 (function(){
   //lower case name => path name
 
   var urlpath = removeleadingslash(window.location.pathname);
 
   var pagetype = urlpath.split('/');
-
   function redirecturl(ky,uh,redirect) {
     var val_urls = validurls[ky];
     var hashes = val_urls.split('#');
@@ -131,7 +145,7 @@
 
     <div id="broken-main">
       <div id="broken_banner">
-        <div id="broken_banner_img"><img src="{{ page.broken_image }}" /></div>
+        <div id="broken_banner_img"><img src="{{ page.broken_image | multi_lang }}" /></div>
         <div id="broken_banner_info" class="broken_info">
           <div class="broken_name">
               {{ page.broken_top_header }}

_layouts/dev_guide.html

@@ -58,7 +58,7 @@ <h2 class="guide_featured_title"> {{ page.guide_featured_title }} </h2>
 
       {%- for menu_list in page.guide_featured_list  -%}
         {%- if menu_list.link -%}
-        <a href="{{ menu_list.link }}">
+        <a href="{{ menu_list.link | multi_lang }}">
             {%- endif %}
           <div id="{{ menu_list.name | handle }}" class="guide_item">
             {%- if menu_list.fa_icon -%}
@@ -83,7 +83,7 @@ <h2 class="guide_menu_title"> {{ page.guide_menu_title }} </h2>
 
       {%- for menu_list in page.guide_menu_list  -%}
         {%- if menu_list.link -%}
-        <a href="{{ menu_list.link }}">
+        <a href="{{ menu_list.link | multi_lang }}">
           {%- endif %}
       <div id="{{ menu_list.name | handle }}" class="guide_item">
         {%- if menu_list.fa_icon -%}

_layouts/doc_guide.html

@@ -51,7 +51,7 @@ <h2 class="doc_menu_title"> {{ page.doc_top_header }} </h2>
       <div id="doc_list" class="row justify-content-between">
         {%- for doc_list in page.doc_menu_list  -%}
           {%- if doc_list.link -%}
-          <a href="{{ doc_list.link }}">
+          <a href="{{ doc_list.link | multi_lang }}">
             {%- endif %}
         <div id="{{ doc_list.name | handle }}" class="doc_item">
           <div class="doc_img">
@@ -122,7 +122,7 @@ <h2 class="doc_menu_title"> {{ page.doc_top_header }} </h2>
         <div class="doc_description">
         {%- for doc_list in page.popular_topic_list  -%}
           <div>
-          <a href="{{ doc_list.link }}">{{ doc_list.name }}</a>
+          <a href="{{ doc_list.link | multi_lang }}">{{ doc_list.name }}</a>
           </div>
         {%- endfor -%}
       </div>
@@ -132,7 +132,7 @@ <h2 class="doc_menu_title"> {{ page.doc_top_header }} </h2>
         <div class="doc_description">
         {%- for doc_list in page.helpful_resources_list  -%}
           <div>
-          <a href="{{ doc_list.link }}">{{ doc_list.name }}</a>
+          <a href="{{ doc_list.link | multi_lang }}">{{ doc_list.name }}</a>
           </div>
         {%- endfor -%}
         </div>

_layouts/featured.html

@@ -56,7 +56,7 @@ <h2 class="guide_featured_title"> {{ page.guide_featured_title }} </h2>
 
       {%- for menu_list in page.guide_featured_list  -%}
         {%- if menu_list.link -%}
-        <a href="{{ menu_list.link }}">
+        <a href="{{ menu_list.link | multi_lang }}">
             {%- endif %}
           <div id="{{ menu_list.name | handle }}" class="guide_item">
             {%- if menu_list.fa_icon -%}

_layouts/self_help.html

@@ -5,8 +5,6 @@
 hide_breadcrumb: true
 ---
 
-
-
 {%- comment -%} Assigned variables first by page, then by layout {%- endcomment -%}
 {%- assign hide_nav = page.hide_nav -%}
 
@@ -51,7 +49,7 @@ <h1> {{ page.help_top_header }} </h1>
       <div id="help_list" >
       {%- for help_list in page.resources_list  -%}
         {%- if help_list.link -%}
-        <a href="{{ help_list.link }}">
+        <a href="{{ help_list.link | multi_lang }}">
           {%- endif %}
       <div id="{{ help_list.name | handle }}" class="help_item">
         <div class="help_img" >
@@ -76,7 +74,7 @@ <h1> {{ page.help_top_header }} </h1>
 
       {%- for user_list in page.user_menu_list  -%}
         {%- if user_list.link -%}
-        <a href="{{ user_list.link }}">
+        <a href="{{ user_list.link | multi_lang }}">
           {%- endif %}
       <div id="{{ user_list.name | handle }}" class="user_item">
         <div class="user_img" style="background-color: {{ user_list.bg_color}}">
@@ -104,7 +102,7 @@ <h1> {{ page.help_top_header }} </h1>
             <div class="user_description">
             {%- for user_list in page.popular_topic_list  -%}
               <div>
-              <a href="{{ user_list.link }}">{{ user_list.name }}</a>
+              <a href="{{ user_list.link | multi_lang }}">{{ user_list.name }}</a>
               </div>
             {%- endfor -%}
           </div>

_layouts/user_guide.html

@@ -52,7 +52,7 @@ <h1> {{ page.user_top_header }} </h1>
 
       {%- for user_list in page.user_menu_list  -%}
         {%- if user_list.link -%}
-        <a href="{{ user_list.link }}">
+        <a href="{{ user_list.link | multi_lang }}">
           {%- endif %}
       <div id="{{ user_list.name | handle }}" class="user_item">
         <div class="user_img" style="background-color: {{ user_list.bg_color}}">
@@ -80,7 +80,7 @@ <h1> {{ page.user_top_header }} </h1>
             <div class="user_description">
             {%- for user_list in page.popular_topic_list  -%}
               <div>
-              <a href="{{ user_list.link }}">{{ user_list.name }}</a>
+              <a href="{{ user_list.link | multi_lang }}">{{ user_list.name }}</a>
               </div>
             {%- endfor -%}
           </div>