✨ Feat: add noscript warning banner (#194)

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes to this project will be documented in this file.
 - :sparkles: Feat(highlight): add full support for Chroma highlighting languages in the [list](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages)
 - :sparkles: Feat: add optional parameter `noreferrer` for the shortcode `link`
 - :sparkles: Feat: update echarts theme config
+- :sparkles: Feat: add noscript warning banner ([#194](https://github.com/hugo-fixit/FixIt/issues/194))
 - :zap: Perf: remove extra spaces in plugin link
 - :wheelchair: Feat(accessibility): use `aria-hidden=true` on icons that AT should ignore
 - :recycle: Refactor: image rendering

assets/css/_partials/_widgets.scss

@@ -1,5 +1,6 @@
 @import '_widgets/cookieconsent';
 @import '_widgets/fixed-button';
 @import '_widgets/github-corner';
+@import '_widgets/noscript-warning';
 @import '_widgets/reading-progress';
-@import '_widgets/typeit';
+@import '_widgets/typeit';

assets/css/_partials/_widgets/_noscript-warning.scss

@@ -0,0 +1,16 @@
+.noscript-warning {
+  background-color: var(--fi-danger);
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  position: fixed;
+  text-align: center;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 150;
+
+  [data-theme='dark'] & {
+    background-color: var(--fi-danger-dark);
+  }
+}

i18n/de.toml

@@ -25,6 +25,9 @@ other = "Nach oben"
 
 [viewComments]
 other = "Kommentare anzeigen"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/en.toml

@@ -24,6 +24,9 @@ other = "Back to Top"
 
 [viewComments]
 other = "View Comments"
+
+[noscript]
+other = "Theme FixIt works best with JavaScript enabled."
 # === baseof ===
 
 # === Post ===

i18n/es.toml

@@ -25,6 +25,9 @@ other = "Volver arriba"
 
 [viewComments]
 other = "Ver comentarios"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/fr.toml

@@ -25,6 +25,9 @@ other = "Retour en Haut"
 
 [viewComments]
 other = "Afficher les Commentaires"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/it.toml

@@ -25,6 +25,9 @@ other = "Torna all'inizio"
 
 [viewComments]
 other = "Vedi commenti"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/pl.toml

@@ -25,6 +25,9 @@ other = "Powrót do góry"
 
 [viewComments]
 other = "Zobacz komentarze"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/pt-BR.toml

@@ -25,6 +25,9 @@ other = "Voltar ao topo"
 
 [viewComments]
 other = "Ver comentários"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/ro.toml

@@ -25,6 +25,9 @@ other = "Înapoi Sus"
 
 [viewComments]
 other = "Vizualizare Comentarii"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/ru.toml

@@ -25,6 +25,9 @@ other = "Наверх"
 
 [viewComments]
 other = "Посмотреть комментарии"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/sr.toml

@@ -25,6 +25,9 @@ other = "Назад на Врх"
 
 [viewComments]
 other = "Погледај Коментаре"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/vi.toml

@@ -24,6 +24,9 @@ other = "Lên trên"
 
 [viewComments]
 other = "Xem bình luận"
+
+[noscript]
+other = "" # waitting for translation
 # === baseof ===
 
 # === Post ===

i18n/zh-CN.toml

@@ -25,6 +25,9 @@ other = "回到顶部"
 
 [viewComments]
 other = "查看评论"
+
+[noscript]
+other = "FixIt 主题在启用 JavaScript 的情况下效果最佳。"
 # === baseof ===
 
 # === Post ===

i18n/zh-TW.toml

@@ -25,6 +25,9 @@ other = "回到頂部"
 
 [viewComments]
 other = "查看評論"
+
+[noscript]
+other = "FixIt 主題在啟用 JavaScript 的情況下效果最佳。"
 # === baseof ===
 
 # === Post ===

layouts/partials/widgets.html

@@ -44,4 +44,8 @@
         {{- .Position | default "top" -}}: 0;height: {{ .Height | default "2px" }};"></div>
     {{- end -}}
   {{- end -}}
-</div>
+
+  <noscript>
+    <div class="noscript-warning">{{ T `noscript` }}</div>
+  </noscript>
+</div>