create-openclass-uniminuto 1.4.0

package/template/slides.md

@@ -0,0 +1,65 @@
+---
+theme: ./theme/uniminuto
+title: Curso Open Class de ejemplo — Open Class
+favicon: /favicon.png
+codeCopy: true
+transition: fade
+routerMode: hash
+drawings:
+  persist: false
+layout: slide-01-portada
+---
+
+::title::
+Curso Open Class de ejemplo
+
+::week::
+Open Class
+
+::date::
+2026
+
+---
+layout: slide-08-titulo-texto
+---
+
+::title::
+Descripción general del curso
+
+::content::
+Curso demostrativo para probar la plantilla OpenClass Template UNIMINUTO. Edita este texto en openclass.config.json para adaptarlo al curso real.
+
+---
+layout: slide-08-titulo-texto
+---
+
+::title::
+Ruta de aprendizaje
+
+::content::
+El curso se organiza en semanas. Cada semana cuenta con un lanzador raíz y un archivo interno en la carpeta `semanas/`.
+
+Las presentaciones activas se controlan desde `openclass.config.json` mediante el campo `generation.activeWeeks`.
+
+---
+layout: slide-10-titulo-dos-columnas
+---
+
+::title::
+Presentaciones disponibles
+
+::left::
+### **Semana 1**
+
+<a href="./semanas/demo_semana1/#/1" target="_self">Semana de ejemplo</a>
+
+<a href="./descargas/demo_semana1.pdf" download>Descargar PDF</a> · <a href="./descargas/demo_semana1.pptx" download>Descargar PPTX</a>
+
+::right::
+### Próximamente
+
+Activa más semanas en `openclass.config.json` y ejecuta `npm run config`.
+
+---
+layout: slide-12-cierre
+---

package/template/snippets/external.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-console */
+
+// #region snippet
+// Inside ./snippets/external.ts
+export function emptyArray<T>(length: number) {
+  return Array.from<T>({ length })
+}
+// #endregion snippet
+
+export function sayHello() {
+  console.log('Hello from snippets/external.ts')
+}

package/template/theme/uniminuto/README-AutoFit.md

@@ -0,0 +1,28 @@
+# Ajuste automático de texto para layouts UNIMINUTO
+
+Esta versión usa `AutoFitText.vue` para ajustar el tamaño del texto al espacio disponible.
+
+## Reglas rápidas
+
+- Ajuste fino de posición: edita `left`, `top`, `width`, `height` en cada layout.
+- Ajuste fino de tamaño: edita `:min`, `:max` y `line-height` en cada `<AutoFitText>`.
+- Para contenido muy largo, el texto se reducirá hasta `min`. Si aun así no cabe, el excedente quedará oculto para proteger el diseño.
+- Para bloques de código largos, es mejor dividir el código en varias diapositivas.
+
+## Ejemplo
+
+```vue
+<AutoFitText tag="h1" class="title" :min="20" :max="42" line-height="1.05">
+  <slot name="title">Agrega un título</slot>
+</AutoFitText>
+```
+
+## Debug visual
+
+Puedes activar temporalmente la caja de medición agregando `debug`:
+
+```vue
+<AutoFitText debug tag="div" :min="16" :max="32">
+  <slot name="content" />
+</AutoFitText>
+```

package/template/theme/uniminuto/components/AutoFitText.vue

@@ -0,0 +1,159 @@
+<template>
+  <component
+    :is="tag"
+    ref="boxEl"
+    class="auto-fit-text"
+    :class="{ 'auto-fit-text--debug': debug }"
+    :style="{
+      fontSize: `${fontSize}px`,
+      lineHeight: lineHeight
+    }"
+  >
+    <span ref="contentEl" class="auto-fit-text__content">
+      <slot />
+    </span>
+  </component>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  min: {
+    type: Number,
+    default: 16
+  },
+  max: {
+    type: Number,
+    default: 34
+  },
+  lineHeight: {
+    type: String,
+    default: '1.18'
+  },
+  debug: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const boxEl = ref(null)
+const contentEl = ref(null)
+const fontSize = ref(props.max)
+
+let resizeObserver = null
+let mutationObserver = null
+let rafId = 0
+
+function hasOverflow() {
+  const box = boxEl.value
+  const content = contentEl.value
+  if (!box || !content) return false
+
+  return (
+    content.scrollHeight > box.clientHeight + 1 ||
+    content.scrollWidth > box.clientWidth + 1
+  )
+}
+
+async function fitText() {
+  await nextTick()
+
+  const box = boxEl.value
+  const content = contentEl.value
+  if (!box || !content) return
+  if (box.clientWidth <= 0 || box.clientHeight <= 0) return
+
+  let low = props.min
+  let high = props.max
+  let best = props.min
+
+  for (let i = 0; i < 14; i += 1) {
+    const mid = (low + high) / 2
+    fontSize.value = mid
+
+    await nextTick()
+
+    if (!hasOverflow()) {
+      best = mid
+      low = mid
+    } else {
+      high = mid
+    }
+  }
+
+  fontSize.value = Math.floor(best)
+}
+
+function scheduleFit() {
+  cancelAnimationFrame(rafId)
+  rafId = requestAnimationFrame(() => {
+    fitText()
+  })
+}
+
+onMounted(async () => {
+  await fitText()
+
+  if (boxEl.value) {
+    resizeObserver = new ResizeObserver(scheduleFit)
+    resizeObserver.observe(boxEl.value)
+  }
+
+  if (contentEl.value) {
+    mutationObserver = new MutationObserver(scheduleFit)
+    mutationObserver.observe(contentEl.value, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    })
+  }
+
+  if (document?.fonts?.ready) {
+    document.fonts.ready.then(scheduleFit)
+  }
+
+  window.addEventListener('resize', scheduleFit)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  mutationObserver?.disconnect()
+  cancelAnimationFrame(rafId)
+  window.removeEventListener('resize', scheduleFit)
+})
+
+watch(
+  () => [props.min, props.max, props.lineHeight],
+  () => scheduleFit()
+)
+</script>
+
+<style scoped>
+.auto-fit-text {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.auto-fit-text__content {
+  display: block;
+  width: 100%;
+  font: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+}
+
+.auto-fit-text--debug {
+  outline: 2px dashed rgba(242, 181, 27, 0.85);
+  background: rgba(242, 181, 27, 0.08);
+}
+</style>

package/template/theme/uniminuto/components/Counter.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ main rounded-md">
+    <button
+      border="r main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

package/template/theme/uniminuto/components/FontToggle.vue

@@ -0,0 +1,42 @@
+<template>
+  <button class="font-toggle" @click="toggleFont">
+    {{ isOpenDyslexic ? 'Fuente institucional' : 'OpenDyslexic' }}
+  </button>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+const isOpenDyslexic = ref(false)
+
+function applyFont(value) {
+  isOpenDyslexic.value = value
+  document.documentElement.classList.toggle('opendyslexic', value)
+  localStorage.setItem('slidev-font-opendyslexic', value ? '1' : '0')
+}
+
+function toggleFont() {
+  applyFont(!isOpenDyslexic.value)
+}
+
+onMounted(() => {
+  applyFont(localStorage.getItem('slidev-font-opendyslexic') === '1')
+})
+</script>
+
+<style scoped>
+.font-toggle {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 9999;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid rgba(35, 55, 99, 0.25);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #233763;
+  font-size: 0.72rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+</style>

package/template/theme/uniminuto/layouts/slide-01-portada.vue

@@ -0,0 +1,119 @@
+<script setup>
+import AutoFitText from '../components/AutoFitText.vue'
+</script>
+
+<template>
+  <div class="portada-layout">
+    <img
+      class="portada-bg"
+      src="/fondos/slide-01-portada.png"
+      alt="Fondo portada UNIMINUTO"
+    />
+
+    <div class="titulo-wrap">
+      <AutoFitText
+        tag="h1"
+        class="portada-titulo"
+        :min="34"
+        :max="76"
+        line-height="1.05"
+      >
+        <slot name="title">Título de la presentación</slot>
+      </AutoFitText>
+    </div>
+
+    <div class="meta-wrap">
+      <AutoFitText
+        tag="div"
+        class="portada-semana"
+        :min="18"
+        :max="34"
+        line-height="1.05"
+      >
+        <slot name="week">SEMANA 1</slot>
+      </AutoFitText>
+
+      <AutoFitText
+        tag="div"
+        class="portada-fecha"
+        :min="15"
+        :max="28"
+        line-height="1.05"
+      >
+        <slot name="date">MAYO 03 DE 2026</slot>
+      </AutoFitText>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.portada-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.portada-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.titulo-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 34%;
+  right: 5%;
+  top: 46.5%;
+  height: 27%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 0.5rem;
+  box-sizing: border-box;
+}
+
+.portada-titulo {
+  margin: 0 !important;
+  color: #f2b51b;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+
+.meta-wrap {
+  position: absolute;
+  z-index: 2;
+  right: 19%;
+  bottom: 5%;
+  width: 30%;
+  height: 12%;
+  text-align: right;
+  display: grid;
+  grid-template-rows: 1fr 0.85fr;
+  gap: 0.25rem;
+}
+
+.portada-semana {
+  margin: 0 !important;
+  color: #000000;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+}
+
+.portada-fecha {
+  margin: 0 !important;
+  color: #000000;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+</style>

package/template/theme/uniminuto/layouts/slide-02-titulo.vue

@@ -0,0 +1,63 @@
+<script setup>
+import AutoFitText from '../components/AutoFitText.vue'
+</script>
+
+<template>
+  <div class="slide-02-layout">
+    <img
+      class="slide-bg"
+      src="/fondos/slide-02-titulo.png"
+      alt="Fondo diapositiva título"
+    />
+
+    <div class="titulo-wrap">
+      <AutoFitText
+        tag="h1"
+        class="titulo"
+        :min="20"
+        :max="42"
+        line-height="1.05"
+      >
+        <slot name="title">Título de la presentación</slot>
+      </AutoFitText>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-02-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.titulo-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 33%;
+  top: 52%;
+  width: 43%;
+  height: 7%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.titulo {
+  margin: 0 !important;
+  color: #ffffff !important;
+  font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
+  font-weight: 800;
+}
+</style>

package/template/theme/uniminuto/layouts/slide-03-imagen-izquierda.vue

@@ -0,0 +1,110 @@
+<script setup>
+import AutoFitText from '../components/AutoFitText.vue'
+</script>
+
+<template>
+  <div class="slide-layout">
+    <img
+      class="slide-bg"
+      src="/fondos/slide-03-imagen-izquierda.png"
+      alt="Fondo diapositiva imagen izquierda"
+    />
+
+    <div class="image-wrap">
+      <slot name="image" />
+    </div>
+
+    <div class="title-wrap">
+      <AutoFitText tag="h1" class="title" :min="18" :max="34" line-height="1.05">
+        <slot name="title">Agrega un título</slot>
+      </AutoFitText>
+    </div>
+
+    <div class="content-wrap">
+      <AutoFitText tag="div" class="content-fit" :min="15" :max="28" line-height="1.25">
+        <slot name="content" />
+      </AutoFitText>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.slide-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.image-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 5.5%;
+  top: 15%;
+  width: 39%;
+  height: 78%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-wrap :deep(img),
+.image-wrap :deep(video),
+.image-wrap :deep(iframe) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 0;
+  display: block;
+}
+
+.title-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 49.5%;
+  top: 19.5%;
+  width: 48%;
+  height: 6.8%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+.title {
+  margin: 0 !important;
+  color: #ffffff !important;
+  font-family: var(--font-title, 'Merriweather Sans', Arial, sans-serif);
+  font-weight: 800;
+}
+
+.content-wrap {
+  position: absolute;
+  z-index: 2;
+  left: 50.5%;
+  top: 30%;
+  width: 39%;
+  height: 48%;
+  color: #233763 !important;
+  font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
+}
+
+.content-fit :deep(*) { color: #233763 !important; }
+.content-fit :deep(p) { margin: 0 0 0.7rem 0; }
+.content-fit :deep(ul) { list-style-type: disc !important; list-style-position: outside !important; margin: 0; padding-left: 1.6rem; }
+.content-fit :deep(li) { display: list-item !important; margin-bottom: 0.5rem; }
+.content-fit :deep(li::marker) { color: #233763 !important; font-size: 1em; }
+</style>