fix: відносні шляхи для підтримки хостингу в підпапці

src/footer/footer.hbs

@@ -62,7 +62,7 @@
       </nav>
 
       <a
-        href="{{ htmlWebpackPlugin.options.content.langPrefix }}/supportus"
+        href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}supportus"
         class="footer-support-us"
         >{{ htmlWebpackPlugin.options.content.translations.support_us_button }}</a
       >

src/header/header.hbs

@@ -18,7 +18,7 @@
   {{/isEqual}}
   <div class="header-container">
     <div class="header-title">
-      <a href="{{ htmlWebpackPlugin.options.content.langPrefix }}/" class="logo">Ш++</a>
+      <a href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}" class="logo">Ш++</a>
       <div class="mobile-menu">
         <button class="mobile-menu-open" type="button" onclick="programmingOrgUa.openMobileMenu()">
           <i class="fa fa-bars"></i>
@@ -57,7 +57,7 @@
       </nav>
       <div class="authenticate">
         <a
-          href="{{ htmlWebpackPlugin.options.content.langPrefix }}/anketa"
+          href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}anketa"
           class="button-primary sign-up"
           >{{ htmlWebpackPlugin.options.content.translations.anketa }}</a
         >
@@ -67,13 +67,13 @@
       </div>
       <ul class="languages">
         <li class="language ru">
-          <a href="/ru/{{ pageRoute }}">RU</a>
+          <a href="{{ htmlWebpackPlugin.options.content.baseHref }}ru/{{ pageRoute }}">RU</a>
         </li>
         <li class="language uk">
-          <a href="/{{ pageRoute }}">UA</a>
+          <a href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ pageRoute }}">UA</a>
         </li>
         <li class="language en">
-          <a href="/en/{{ pageRoute }}">EN</a>
+          <a href="{{ htmlWebpackPlugin.options.content.baseHref }}en/{{ pageRoute }}">EN</a>
         </li>
       </ul>
     </div>

src/pages/about-us-page/index.hbs

@@ -54,7 +54,7 @@
           <div class="history-slider-wrapper swiper-wrapper">
             {{#each htmlWebpackPlugin.options.content.translations.about.history.events}}
             <div class="history-event swiper-slide">
-              <img src="/img/history-slider/{{ this.image }}.jpg" alt="{{ this.description }}" />
+              <img src="{{ htmlWebpackPlugin.options.content.baseHref }}img/history-slider/{{ this.image }}.jpg" alt="{{ this.description }}" />
               <div class="history-event-text">
                 <div class="history-event-date">{{ this.date }}</div>
                 <div>{{ this.description }}</div>
@@ -101,7 +101,7 @@
           </div>
           <div class="philosophy-card-image">
             <img
-              src="/img/philosophy.jpg"
+              src="{{ htmlWebpackPlugin.options.content.baseHref }}img/philosophy.jpg"
               alt="{{ htmlWebpackPlugin.options.content.translations.philosophy }}"
             />
           </div>

src/pages/contacts-page/index.hbs

@@ -9,8 +9,8 @@
     <main>
       <section class="images">
         <a href="https://g.page/shpp-kr">
-          <img src="/img/ourmap-cropped.jpg" alt="" />
-          <img src="/img/shpp-location.jpg" alt="" />
+          <img src="{{ htmlWebpackPlugin.options.content.baseHref }}img/ourmap-cropped.jpg" alt="" />
+          <img src="{{ htmlWebpackPlugin.options.content.baseHref }}img/shpp-location.jpg" alt="" />
         </a>
       </section>
 

src/pages/courses-page/index.hbs

@@ -16,7 +16,7 @@
           <p>{{{ this }}}</p>
           {{/each}}
           <a
-            href="{{ htmlWebpackPlugin.options.content.langPrefix }}/anketa"
+            href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}anketa"
             class="button-primary sign-up"
           >
             {{ htmlWebpackPlugin.options.content.translations.anketa }}

src/pages/feedbacks-page/index.hbs

@@ -15,7 +15,7 @@
           </h2>
           <a
             class="button-primary feedbacks-form-button"
-            href="{{ htmlWebpackPlugin.options.content.langPrefix }}/feedback-form"
+            href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}feedback-form"
           >
             {{ htmlWebpackPlugin.options.content.translations.feedback_button }}
           </a>

src/pages/index-page/index.hbs

@@ -29,7 +29,7 @@
           <div class="banner-courses">
             <a
               class="banner-course"
-              href="{{ htmlWebpackPlugin.options.content.langPrefix }}/courses/adults"
+              href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}courses/adults"
             >
               <h3 class="banner-course-type">
                 {{ htmlWebpackPlugin.options.content.translations.home.intro.courses.adults.title }}
@@ -44,7 +44,7 @@
             </a>
             <a
               class="banner-course"
-              href="{{ htmlWebpackPlugin.options.content.langPrefix }}/courses#teens"
+              href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}courses#teens"
             >
               <h3 class="banner-course-type">
                 {{ htmlWebpackPlugin.options.content.translations.home.intro.courses.teens.title }}
@@ -123,12 +123,12 @@
           <div class="swiper-pagination"></div>
           <div class="feedbacks-buttons">
             <a
-              href="{{ htmlWebpackPlugin.options.content.langPrefix }}/feedback-form"
+              href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}feedback-form"
               class="feedbacks-buttons-leave-your-feedback button-primary"
               >{{ htmlWebpackPlugin.options.content.translations.feedback_button }}</a
             >
             <a
-              href="{{ htmlWebpackPlugin.options.content.langPrefix }}/feedback-all"
+              href="{{ htmlWebpackPlugin.options.content.baseHref }}{{ htmlWebpackPlugin.options.content.langPrefixPath }}feedback-all"
               class="feedbacks-buttons-watch-all-responses"
               >{{ htmlWebpackPlugin.options.content.translations.adults.feedbacks.see_all }}</a
             >
@@ -161,27 +161,27 @@
           <div class="partners-slider-wrapper swiper-wrapper">
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="http://roboclub.if.ua/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/roboclub.png" alt="roboclub" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/roboclub.png" alt="roboclub" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://probono.org.ua/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/pbc.png" alt="pbc" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/pbc.png" alt="pbc" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://200x300.com/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/200x300.png" alt="200x300" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/200x300.png" alt="200x300" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="http://www.advection.net/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/advection.png"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/advection.png"
                   alt="advection"
                 />
               </a>
@@ -191,29 +191,29 @@
               <a target="_blank" href="https://bandapixels.com/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/bandapixels.svg"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/bandapixels.svg"
                   alt="bandapixels"
                 />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://canva.com/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/canva.png" alt="canva" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/canva.png" alt="canva" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://codeclub.com.ua/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/codeclub.png" alt="codeclub" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/codeclub.png" alt="codeclub" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://cyberpolice.gov.ua/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/cyberpolice.jpg"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/cyberpolice.jpg"
                   alt="cyberpolice"
                 />
               </a>
@@ -223,7 +223,7 @@
               <a target="_blank" href="http://dynamicstreaming.net/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/dynamic_streaming.png"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/dynamic_streaming.png"
                   alt="dynamic_streaming"
                 />
               </a>
@@ -233,7 +233,7 @@
               <a target="_blank" href="https://www.grammarly.com/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/grammarly.png"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/grammarly.png"
                   alt="grammarly"
                 />
               </a>
@@ -243,65 +243,65 @@
               <a target="_blank" href="https://htmlacademy.ru/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/htmlacademy.png"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/htmlacademy.png"
                   alt="htmlacademy"
                 />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://italent.org.ua/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/italent.png" alt="italent" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/italent.png" alt="italent" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="http://www.jetbrains.com" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/jetbrains-variant-4.svg"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/jetbrains-variant-4.svg"
                   alt="jetbrains"
                 />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://notion.so/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/notion.jpg" alt="notion" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/notion.jpg" alt="notion" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="http://onix-systems.com/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/onix.png" alt="onix" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/onix.png" alt="onix" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://ring-ukraine.com/" class="partners-slide-link">
                 <img
                   class="partners-slide-image"
-                  src="/img/partners/ring_labs.png"
+                  src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/ring_labs.png"
                   alt="ring_labs"
                 />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="https://slack.com/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/slack.png" alt="slack" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/slack.png" alt="slack" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="http://www.techsoup.org/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/techsoup.png" alt="techsoup" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/techsoup.png" alt="techsoup" />
               </a>
             </div>
 
             <div class="partners-slide swiper-slide">
               <a target="_blank" href="http://www.wowza.com/" class="partners-slide-link">
-                <img class="partners-slide-image" src="/img/partners/wowza.png" alt="wowza" />
+                <img class="partners-slide-image" src="{{ htmlWebpackPlugin.options.content.baseHref }}img/partners/wowza.png" alt="wowza" />
               </a>
             </div>
           </div>

src/template-partials/meta.hbs

@@ -16,10 +16,10 @@
 <meta name="twitter:site" content="@shplusplus" />
 <meta name="twitter:title" content="{{ pageTranslations.meta.title }}" />
 <meta name="twitter:description" content="{{ pageTranslations.meta.description }}" />
-<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
-<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png" />
-<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png" />
-<link rel="manifest" href="/site.webmanifest" />
+<link rel="apple-touch-icon" sizes="180x180" href="{{ htmlWebpackPlugin.options.content.baseHref }}img/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="{{ htmlWebpackPlugin.options.content.baseHref }}img/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="{{ htmlWebpackPlugin.options.content.baseHref }}img/favicon-16x16.png" />
+<link rel="manifest" href="{{ htmlWebpackPlugin.options.content.baseHref }}site.webmanifest" />
 <title>{{ pageTranslations.meta.title }}</title>
 <link rel="canonical" href="{{ htmlWebpackPlugin.options.content.canonicalUrl }}" />
 {{#each htmlWebpackPlugin.options.content.alternativeLocales}}

utils/handlebars-helpers/headerMenuLink.js

@@ -3,12 +3,13 @@ const Handlebars = require('handlebars/runtime');
 module.exports = function (
   textTranslationKey,
   url,
-  { langPrefix, relativePagePath, translations }
+  { langPrefix, langPrefixPath, baseHref, relativePagePath, translations }
 ) {
   const isActive = relativePagePath.replace(/\/$/, '') === url.replace(/#.+/, '');
   const text = textTranslationKey.split('.').reduce((acc, val) => acc[val], translations);
+  const relativeUrl = url.replace(/^\//, '');
 
   return new Handlebars.SafeString(
-    `<li class="${isActive ? 'active' : ''}"><a href='${langPrefix}${url}'>${text}</a></li>`
+    `<li class="${isActive ? 'active' : ''}"><a href='${baseHref}${langPrefixPath}${relativeUrl}'>${text}</a></li>`
   );
 };

webpack.config.js

@@ -311,6 +311,24 @@ const mediaMentionsConfig = [
   },
 ];
 const BASE_URL = 'https://programming.org.ua';
+const fixPaths = (obj, baseHref) => {
+  if (typeof obj === 'string') {
+    return obj
+      .replace(/href='\/([^']+)'/g, `href='${baseHref}$1'`)
+      .replace(/href="\/([^"]+)"/g, `href="${baseHref}$1"`);
+  } else if (Array.isArray(obj)) {
+    return obj.map((o) => fixPaths(o, baseHref));
+  } else if (obj && typeof obj === 'object') {
+    return Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, fixPaths(v, baseHref)]));
+  }
+  return obj;
+};
+
+const getBaseHref = (filenamePrefix, relativePagePath) => {
+  const fullPath = (filenamePrefix + relativePagePath).replace(/^\//, '').replace(/\/$/, '');
+  const depth = fullPath ? fullPath.split('/').length : 0;
+  return depth === 0 ? './' : '../'.repeat(depth);
+};
 
 module.exports = async (_, { mode = 'development' }) => ({
   entry: {
@@ -332,6 +350,7 @@ module.exports = async (_, { mode = 'development' }) => ({
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
+    publicPath: 'auto',
     clean: true,
   },
   plugins: [
@@ -393,19 +412,24 @@ module.exports = async (_, { mode = 'development' }) => ({
             .filter((l) => l !== lang)
             .map((l) => localesConfig[l]);
 
-          const getCommonContent = (relativePagePath) => ({
-            lang,
-            translations,
-            locale,
-            langPrefix,
-            relativePagePath,
-            canonicalUrl: `${BASE_URL}${filenamePrefix}${relativePagePath}`,
-            alternativeLocales: alternativeLocales.map(({ langPrefix, lang }) => ({
+          const getCommonContent = (relativePagePath) => {
+            const baseHref = getBaseHref(filenamePrefix, relativePagePath);
+            return {
               lang,
-              url: `${BASE_URL}${langPrefix}${relativePagePath}`,
-            })),
-            currentYear: new Date().getFullYear(),
-          });
+              translations: fixPaths(translations, baseHref),
+              locale,
+              langPrefix,
+              baseHref,
+              langPrefixPath: langPrefix ? langPrefix.replace(/^\//, '') + '/' : '',
+              relativePagePath,
+              canonicalUrl: `${BASE_URL}${filenamePrefix}${relativePagePath}`,
+              alternativeLocales: alternativeLocales.map(({ langPrefix, lang }) => ({
+                lang,
+                url: `${BASE_URL}${langPrefix}${relativePagePath}`,
+              })),
+              currentYear: new Date().getFullYear(),
+            };
+          };
 
           return [
             ...htmlWebpackPlugins,