multilanguage sites

CHANGELOG.md

@@ -6,6 +6,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.11.0] - Unreleased
+### Added
+- Support for multilanguage sites.
+
 ## [0.10.1] - 2024-08-30
 ### Fixed
 - Updated dependencies.
@@ -157,6 +161,7 @@ First version
 [#8]: https://github.com/lumeland/theme-simple-wiki/issues/8
 [#9]: https://github.com/lumeland/theme-simple-wiki/issues/9
 
+[0.11.0]: https://github.com/lumeland/theme-simple-wiki/compare/v0.10.1...HEAD
 [0.10.1]: https://github.com/lumeland/theme-simple-wiki/compare/v0.10.0...v0.10.1
 [0.10.0]: https://github.com/lumeland/theme-simple-wiki/compare/v0.9.3...v0.10.0
 [0.9.3]: https://github.com/lumeland/theme-simple-wiki/compare/v0.9.2...v0.9.3

_config.ts

@@ -1,13 +1,15 @@
 import lume from "lume/mod.ts";
-import notes from "./mod.ts";
+import theme from "./mod.ts";
 import ogimages from "lume/plugins/og_images.ts";
 import metas from "lume/plugins/metas.ts";
 
 const site = lume({
   src: "./src",
 });
 
-site.use(notes());
+site.use(theme({
+  languages: ["en", "gl"],
+}));
 site.use(ogimages());
 site.use(metas());
 

deno.json

@@ -1,7 +1,7 @@
 {
   "imports": {
     "lume/": "https://deno.land/x/[email protected]/",
-    "lume/cms/": "https://cdn.jsdelivr.net/gh/lumeland/cms@0.5.10/"
+    "lume/cms/": "https://cdn.jsdelivr.net/gh/lumeland/cms@v0.5.10/"
   },
   "lock": false,
   "tasks": {

plugins.ts

@@ -1,3 +1,4 @@
+import { merge } from "lume/core/utils/object.ts";
 import postcss from "lume/plugins/postcss.ts";
 import pagefind from "lume/plugins/pagefind.ts";
 import resolveUrls from "lume/plugins/resolve_urls.ts";
@@ -13,6 +14,7 @@ import phosphor, {
   Options as IconOptions,
 } from "https://deno.land/x/[email protected]/phosphor.ts";
 import { alert } from "npm:@mdit/[email protected]";
+import multilanguage from "lume/plugins/multilanguage.ts";
 
 import "lume/types.ts";
 
@@ -26,9 +28,20 @@ export interface Options {
    * Options for the phosphor plugin.
    */
   icons?: IconOptions;
+
+  /**
+   * Language options for the multilanguage plugin.
+   * The first language is the default language.
+   */
+  languages?: string[];
 }
+export const defaults: Options = {
+  languages: ["en"],
+};
+
+export default function (userOptions?: Options) {
+  const options = merge(defaults, userOptions);
 
-export default function (options: Options = {}) {
   return (site: Lume.Site) => {
     site.use(nav())
       .use(title())
@@ -41,6 +54,11 @@ export default function (options: Options = {}) {
       .use(date())
       .use(favicon(options.favicon))
       .use(basePath())
+      .data("languages", options.languages)
+      .use(multilanguage({
+        languages: options.languages,
+        defaultLanguage: options.languages[0],
+      }))
       .use(phosphor({
         ...options.icons,
         name: "icon",

src/_includes/css/menu.css

@@ -44,6 +44,28 @@
     margin-right: 1rem;
   }
 }
+.menu-languages {
+  list-style: none;
+  margin: 0 0 1rem 0;
+  padding: 0;
+  display: flex;
+  gap: .5em;
+  text-transform: uppercase;
+  font: var(--font-small);
+
+  a {
+    color: var(--color-dim);
+    display: block;
+    border-radius: .3em;
+    padding: .25em;
+
+    &[aria-current="page"] {
+      text-decoration: none;
+      color: var(--color-base);
+      background-color: var(--color-line);
+    }
+  }
+}
 
 .menu {
   display: block;

src/_includes/templates/menu.vto

@@ -9,7 +9,19 @@
     {{ /if }}
   {{ /if }}
 
-  <tree-menu class="menu" data-url="{{ '/menu.json' |> url }}"></tree-menu>
+  {{ if alternates.length > 1 }}  
+  <ul class="menu-languages">
+  {{ for alt of alternates }}
+    <li>
+      <a href="{{ alt.url }}" {{ if alt.lang == lang }}aria-current="page"{{ /if }} title="{{ alt.title |> escape }}">
+        {{ alt.lang }}
+      </a>
+    </li>
+  {{ /for }}
+  </ul>
+  {{ /if }}
+
+  <tree-menu class="menu" data-url="{{ `/menu-${lang}.json` |> url }}"></tree-menu>
 
   {{- for link of menu_links }}
     <li>

src/gl/_data.yml

@@ -0,0 +1 @@
+lang: gl

src/gl/index.md

@@ -0,0 +1,7 @@
+---
+id: index
+---
+
+# Simple Wiki
+
+crea arquivos markdown para engadir páxinas.

src/index.md

@@ -1,3 +1,7 @@
+---
+id: index
+---
+
 # Simple Wiki
 
 Create markdown files to add pages.

src/menu.page.ts

@@ -1,7 +1,13 @@
 export const url = "/menu.json";
 
-export default function ({ nav }: Lume.Data) {
-  const menu = nav.menu("/", "", "order=asc basename=asc").children;
+export default function* ({ nav, languages }: Lume.Data) {
+  for (const lang of languages) {
+    const menu =
+      nav.menu("/", `lang=${lang}`, "order=asc basename=asc").children;
 
-  return JSON.stringify(menu, null, 2);
+    yield {
+      url: `/menu-${lang}.json`,
+      content: JSON.stringify(menu, null, 2),
+    };
+  }
 }

src/styles.css

@@ -72,6 +72,10 @@
     > * {
       grid-column: 2;
     }
+
+    &:has(.menu-languages) {
+      grid-template-rows: auto auto minmax(0, 1fr);
+    }
   }
 }
 .container > .toolbar {