ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

package/DS1/2-core/ds-viewtoggle.ts

@@ -1,83 +0,0 @@
-import { LitElement, html } from "lit";
-import { getText } from "../utils/language";
-import { getViewMode, setViewMode } from "../utils/viewMode";
-
-/**
- * A component for toggling between text and image view modes
- *
- * @element ds-viewtoggle
- */
-export class ViewToggle extends LitElement {
-  static properties = {
-    _mode: { type: String, state: true },
-  };
-
-  declare _mode: "text" | "image";
-
-  private boundHandlers: {
-    viewModeChanged: EventListener;
-    languageChanged: EventListener;
-  };
-
-  constructor() {
-    super();
-    this._mode = getViewMode();
-    this.boundHandlers = {
-      viewModeChanged: ((e: CustomEvent) => {
-        const mode = e.detail === "image" ? "image" : "text";
-        if (this._mode !== mode) {
-          this._mode = mode;
-        }
-      }) as EventListener,
-      languageChanged: (() => {
-        this.requestUpdate();
-      }) as EventListener,
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener(
-      "view-mode-changed",
-      this.boundHandlers.viewModeChanged
-    );
-    window.addEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "view-mode-changed",
-      this.boundHandlers.viewModeChanged
-    );
-    window.removeEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-  }
-
-  private _toggle = () => {
-    const next = this._mode === "image" ? "text" : "image";
-    setViewMode(next);
-  };
-
-  render() {
-    const label =
-      this._mode === "image" ? getText("hideImage") : getText("viewImage");
-    return html`
-      <ds-button variant="primary" @click=${this._toggle}>${label}</ds-button>
-    `;
-  }
-}
-
-customElements.define("ds-viewtoggle", ViewToggle);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-viewtoggle": ViewToggle;
-  }
-}
-

package/DS1/3-unit/ds-doublenav.ts

@@ -1,106 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-/**
- * A component for double navigation (previous/next)
- *
- * @element ds-doublenav
- * @prop {string} previous - URL for previous link
- * @prop {string} next - URL for next link
- * @prop {string} previousText - Text for previous link
- * @prop {string} nextText - Text for next link
- * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
- */
-export class DoubleNav extends LitElement {
-  static get properties() {
-    return {
-      previous: { type: String, reflect: true },
-      next: { type: String, reflect: true },
-      previousText: { type: String, reflect: true, attribute: "previous-text" },
-      nextText: { type: String, reflect: true, attribute: "next-text" },
-      overlay: { type: String, reflect: true },
-    };
-  }
-
-  declare previous: string;
-  declare next: string;
-  declare previousText: string;
-  declare nextText: string;
-  declare overlay?: string;
-
-  constructor() {
-    super();
-    this.previous = "";
-    this.next = "";
-    this.previousText = "";
-    this.nextText = "";
-    this.overlay = "";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: space-between;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(5px * var(--scaling-factor));
-      text-decoration: none;
-      color: inherit;
-    }
-
-    .nav-previous {
-      justify-self: start;
-    }
-
-    .nav-next {
-      justify-self: end;
-    }
-
-    .nav-previous ds-icon {
-      order: -1;
-    }
-
-    .nav-next ds-icon {
-      padding-top: 3px;
-    }
-
-    .nav-previous ds-icon {
-      padding-top: 3px;
-    }
-  `;
-
-  render() {
-    return html`
-      ${this.previous
-        ? html`
-            <a href="${this.previous}" class="nav-previous">
-              <ds-icon type="left"></ds-icon>
-              <ds-text>${this.previousText || "Previous"}</ds-text>
-            </a>
-          `
-        : html`<div></div>`}
-      ${this.next
-        ? html`
-            <a href="${this.next}" class="nav-next">
-              <ds-text>${this.nextText || "Next"}</ds-text>
-              <ds-icon type="right"></ds-icon>
-            </a>
-          `
-        : html`<div></div>`}
-    `;
-  }
-}
-
-customElements.define("ds-doublenav", DoubleNav);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-doublenav": DoubleNav;
-  }
-}
-

package/DS1/3-unit/ds-panel.ts

@@ -1,27 +0,0 @@
-
-import { LitElement, html, css } from "lit";
-
-export class Panel extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      height: var(--08);
-      align-items: end;
-      gap: var(--025);
-    }
-  `;
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-customElements.define("ds-panel", Panel);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-panel": Panel;
-  }
-}
-

package/DS1/3-unit/ds-singlenav.ts

@@ -1,79 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-/**
- * A component for single navigation links
- *
- * @element ds-singlenav
- * @prop {string} type - Type of navigation: "projects" or "work"
- * @prop {string} to - Optional custom destination URL
- */
-export class SingleNav extends LitElement {
-  static get properties() {
-    return {
-      type: { type: String, reflect: true },
-      to: { type: String, reflect: true },
-    };
-  }
-
-  declare type: "projects" | "work";
-  declare to?: string;
-
-  constructor() {
-    super();
-    this.type = "work";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: end;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(5px * var(--scaling-factor));
-      text-decoration: none;
-      color: inherit;
-    }
-  `;
-
-  render() {
-    const navConfig = this.getNavConfig();
-    const href = this.to || navConfig.href;
-
-    return html`
-      <a href="${href}">
-        <ds-text key="${navConfig.key}"></ds-text>
-        <ds-icon type="right"></ds-icon>
-      </a>
-    `;
-  }
-
-  private getNavConfig() {
-    switch (this.type) {
-      case "projects":
-        return {
-          href: "/projects",
-          key: "projects",
-        };
-      case "work":
-        return {
-          href: "/",
-          key: "workExperience",
-        };
-    }
-  }
-}
-
-customElements.define("ds-singlenav", SingleNav);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-singlenav": SingleNav;
-  }
-}
-

package/DS1/utils/cdn-loader.ts

@@ -1,208 +0,0 @@
-/**
- * CDN Loader Utility
- * Automatically detects and loads translation JSON files from the same directory as the HTML file
- * for CDN users who want to use external translations
- */
-
-type TranslationData = Record<string, string>;
-type TranslationMap = Record<string, TranslationData>;
-
-declare global {
-  interface Window {
-    DS_ONE_TRANSLATIONS?: TranslationMap;
-    DS_ONE_TRANSLATIONS_FILE?: string;
-  }
-}
-
-// Track if we've already attempted to load
-let loadAttempted = false;
-
-const DEFAULT_TRANSLATION_FILE = "./translations.json";
-
-function normalizeCandidate(path: string): string | null {
-  if (!path) {
-    return null;
-  }
-  const trimmed = path.trim();
-  if (!trimmed) {
-    return null;
-  }
-
-  if (
-    trimmed.startsWith("./") ||
-    trimmed.startsWith("../") ||
-    trimmed.startsWith("/") ||
-    /^https?:\/\//i.test(trimmed)
-  ) {
-    return trimmed;
-  }
-
-  return `./${trimmed}`;
-}
-
-function findAttributeCandidate(): string | null {
-  if (typeof document === "undefined") {
-    return null;
-  }
-
-  const scriptWithAttribute = document.querySelector(
-    "script[data-ds-one-translations]"
-  );
-  const scriptCandidate = scriptWithAttribute?.getAttribute(
-    "data-ds-one-translations"
-  );
-  if (scriptCandidate) {
-    return scriptCandidate;
-  }
-
-  const metaCandidate = document
-    .querySelector('meta[name="ds-one:translations"]')
-    ?.getAttribute("content");
-  if (metaCandidate) {
-    return metaCandidate;
-  }
-
-  const linkCandidate = document
-    .querySelector('link[rel="ds-one-translations"]')
-    ?.getAttribute("href");
-  if (linkCandidate) {
-    return linkCandidate;
-  }
-
-  return null;
-}
-
-function resolveTranslationSources(): string[] {
-  const candidates: string[] = [];
-
-  const windowCandidate =
-    typeof window !== "undefined" ? window.DS_ONE_TRANSLATIONS_FILE : null;
-  const attributeCandidate = findAttributeCandidate();
-
-  // Only use explicitly configured paths, or the single default
-  const windowNormalized = normalizeCandidate(windowCandidate ?? "");
-  if (windowNormalized) {
-    candidates.push(windowNormalized);
-  }
-
-  const attrNormalized = normalizeCandidate(attributeCandidate ?? "");
-  if (attrNormalized && !candidates.includes(attrNormalized)) {
-    candidates.push(attrNormalized);
-  }
-
-  // Only try default if no explicit path was configured
-  if (candidates.length === 0) {
-    candidates.push(DEFAULT_TRANSLATION_FILE);
-  }
-
-  return candidates;
-}
-
-function validateTranslationMap(
-  candidate: unknown
-): candidate is TranslationMap {
-  if (!candidate || typeof candidate !== "object") {
-    return false;
-  }
-
-  return Object.values(candidate).every(
-    (entry) => entry && typeof entry === "object"
-  );
-}
-
-async function fetchTranslationFile(
-  source: string
-): Promise<TranslationMap | null> {
-  try {
-    const response = await fetch(source);
-
-    if (!response.ok) {
-      // 404 is expected if no translations file exists - don't log as error
-      return null;
-    }
-
-    const translations = await response.json();
-
-    if (!validateTranslationMap(translations)) {
-      console.warn(
-        `[DS one] Invalid translation format in ${source}. Expected object with language codes as keys.`
-      );
-      return null;
-    }
-
-    const languages = Object.keys(translations);
-    if (languages.length === 0) {
-      console.warn(`[DS one] No languages found in ${source}`);
-      return null;
-    }
-
-    return translations;
-  } catch {
-    // Silently fail - file likely doesn't exist or isn't valid JSON
-    return null;
-  }
-}
-
-/**
- * Attempts to load translations from a JSON file in the same directory
- */
-export async function loadExternalTranslations(): Promise<boolean> {
-  // Only attempt once
-  if (loadAttempted) {
-    return false;
-  }
-  loadAttempted = true;
-
-  if (typeof window === "undefined") {
-    return false;
-  }
-
-  // Check if translations are already loaded (e.g., by the application)
-  if (
-    window.DS_ONE_TRANSLATIONS &&
-    Object.keys(window.DS_ONE_TRANSLATIONS).length > 0
-  ) {
-    console.log(
-      `[DS one] Translations already loaded (${Object.keys(window.DS_ONE_TRANSLATIONS).length} languages), skipping auto-load`
-    );
-    return true;
-  }
-
-  const sources = resolveTranslationSources();
-
-  for (const source of sources) {
-    const translations = await fetchTranslationFile(source);
-    if (!translations) {
-      continue;
-    }
-
-    window.DS_ONE_TRANSLATIONS = translations;
-
-    const languages = Object.keys(translations);
-    console.log(
-      `[DS one] External translations loaded from ${source}: ${languages.length} language(s) – ${languages.join(", ")}`
-    );
-
-    window.dispatchEvent(new CustomEvent("translations-ready"));
-    return true;
-  }
-
-  console.info(
-    `[DS one] No external translations found at ${sources[0] ?? DEFAULT_TRANSLATION_FILE}. Using bundled translations.`
-  );
-
-  return false;
-}
-
-// Auto-load translations when this module is imported (for CDN bundle)
-if (typeof window !== "undefined") {
-  // Wait a bit to ensure the DOM is ready
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => {
-      loadExternalTranslations();
-    });
-  } else {
-    // DOM is already ready
-    loadExternalTranslations();
-  }
-}

package/DS1/utils/keys.json

@@ -1,41 +0,0 @@
-{
-  "en": {
-    "language": "Language",
-    "theme": "Theme",
-    "home": "Home",
-    "about": "About",
-    "contact": "Contact",
-    "welcome": "Welcome",
-    "description": "Description",
-    "learnMore": "Learn More",
-    "copyright": "© 2025",
-    "siteTitle": "Site Title",
-    "downloadCV": "Download CV"
-  },
-  "da": {
-    "language": "Sprog",
-    "theme": "Tema",
-    "home": "Hjem",
-    "about": "Om",
-    "contact": "Kontakt",
-    "welcome": "Velkommen",
-    "description": "Beskrivelse",
-    "learnMore": "Lær Mere",
-    "copyright": "© 2025",
-    "siteTitle": "Site Titel",
-    "downloadCV": "Download CV"
-  },
-  "ja": {
-    "language": "言語",
-    "theme": "テーマ",
-    "home": "ホーム",
-    "about": "について",
-    "contact": "お問い合わせ",
-    "welcome": "ようこそ",
-    "description": "説明",
-    "learnMore": "詳細を見る",
-    "copyright": "© 2025",
-    "siteTitle": "サイトタイトル",
-    "downloadCV": "CVをダウンロード"
-  }
-}

package/DS1/utils/pricing.ts

@@ -1,24 +0,0 @@
-import type { LanguageCode } from "./language";
-
-type PriceLabelOptions = {
-  language: LanguageCode;
-  country?: string;
-};
-
-const defaultPriceByLanguage: Record<string, string> = {
-  en: "$42", // life, the universe and everything
-  de: "42 €",
-  fr: "42 €",
-  es: "42 €",
-};
-
-export function getPriceLabel({ language, country }: PriceLabelOptions): string {
-  const normalized = language.toLowerCase();
-  const base = defaultPriceByLanguage[normalized] ?? defaultPriceByLanguage.en;
-
-  if (!country) {
-    return base;
-  }
-
-  return `${base} (${country.toUpperCase()})`;
-}