Migation/vitepress

.github/workflows/deploy.yml

@@ -0,0 +1,65 @@
+# Sample workflow for building and deploying a VitePress site to GitHub Pages
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [main]
+
+  # Also run when a pull request is closed (we'll check merged==true in the job)
+  pull_request:
+    types: [closed]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    if: ${{ github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true && github.event.pull_request.base.ref == 'main') }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: bun install
+      - name: Build with VitePress
+        run: bun run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: .vitepress/dist
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.vitepress/.gitignore

@@ -0,0 +1 @@
+cache/

.vitepress/config.mts

@@ -0,0 +1,70 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  srcDir: 'site',
+  title: 'Vasak Group',
+  description:
+    'En Vasak Group, nos especializamos en crear soluciones de software personalizadas que se adaptan a las necesidades únicas de tu negocio. Desde aplicaciones web y móviles hasta plataformas escalables, utilizamos las metodologías ágiles más actuales para garantizar resultados rápidos y efectivos.',
+  head: [
+    [
+      'meta',
+      {
+        name: 'keywords',
+        content:
+          'aplicaciones, desarrollo, apps, software, programas, paginas, pagina, webs, web, design, sistemas, economico, developer, lynx, software, desing, diseño, it, hardware, empresas, pymes, chicas, seo, maps, playstore, goole maps, posicionamiento, vasak, group, grupo'
+      }
+    ],
+    [
+      'meta',
+      {
+        name: 'description',
+        content:
+          'Vasak Group es una empresa que busca contribuir con el crecimiento tecnologico y economico de otras empresas PYMES y emprendimientos.'
+      }
+    ],
+    ['meta', { name: 'msvalidate.01', content: '50FC0630FC73B0D400248B28FF40E60A' }],
+    ['meta', { name: 'author', content: 'Vasak Group' }],
+    ['meta', { name: 'copyright', content: 'Vasak Group' }],
+    ['meta', { name: 'robots', content: 'index,follow' }],
+    ['meta', { name: 'googlebot', content: 'index,follow' }],
+    ['meta', { 'http-equiv': 'Content-Type', content: 'text/html; ISO-8859-1' }],
+    ['meta', { name: 'DC.Language', scheme: 'RFC1766', content: 'Spanish' }],
+    ['meta', { name: 'AUTHOR', content: 'Vasak Group' }],
+    ['meta', { name: 'REPLY-TO', content: 'info@vasak.net.ar' }],
+    ['meta', { name: 'Resource-type', content: 'Document' }],
+    ['link', { rev: 'made', href: 'mailto:info@vasak.net.ar' }],
+
+    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }],
+    ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }],
+    ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }],
+    ['link', { rel: 'manifest', href: '/site.webmanifest' }],
+    ['link', { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#f6bb31' }],
+    ['meta', { name: 'msapplication-TileColor', content: '#f6bb31' }],
+    ['meta', { name: 'theme-color', content: '#f6bb31' }]
+  ],
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Inicio', link: '/' },
+      { text: 'Nosotros', link: '/about' },
+      { text: 'Servicios', link: '/services' },
+      { text: 'Herramientas', link: '/tools' }
+    ],
+    sidebar: [
+      {
+        text: 'Examples',
+        items: [
+          { text: 'Markdown Examples', link: '/markdown-examples' },
+          { text: 'Runtime API Examples', link: '/api-examples' }
+        ]
+      }
+    ],
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Vasak-Group' },
+      { icon: 'instagram', link: 'https://www.instagram.com/vasakgroup/' },
+      { icon: 'facebook-f', link: 'https://facebook.com/vasakgroup' },
+      { icon: 'linkedin', link: 'https://www.linkedin.com/company/vasakgroup/' }
+    ]
+  } as any
+});

.vitepress/theme/Layout.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import FooterComponent from './components/FooterComponent.vue';
+import NavBarComponent from './components/NavBarComponent.vue';
+import ToggleTheme from './components/sections/general/ToggleTheme.vue';
+import AboutLayout from './layouts/AboutLayout.vue';
+import HomeLayout from './layouts/HomeLayout.vue';
+import ServicesLayout from './layouts/ServicesLayout.vue';
+import ToolsLayout from './layouts/ToolsLayout.vue';
+
+import { useData } from 'vitepress'
+import { onMounted, watch } from 'vue'
+
+const { frontmatter, site, page } = useData()
+
+function setMeta(selector: string, attr: string, value: string) {
+  let el = document.head.querySelector(selector) as HTMLMetaElement | null
+  if (!el) {
+    el = document.createElement('meta')
+    if (selector.startsWith('meta[name="')) {
+      const name = selector.match(/meta\[name="(.*)"\]/)?.[1]
+      if (name) el.name = name
+    } else if (selector.startsWith('meta[property="')) {
+      const prop = selector.match(/meta\[property="(.*)"\]/)?.[1]
+      if (prop) el.setAttribute('property', prop)
+    }
+    document.head.appendChild(el)
+  }
+  el.setAttribute(attr, value)
+}
+
+function setLinkRel(rel: string, href: string) {
+  let el = document.head.querySelector(`link[rel="${rel}"]`) as HTMLLinkElement | null
+  if (!el) {
+    el = document.createElement('link')
+    el.rel = rel
+    document.head.appendChild(el)
+  }
+  el.href = href
+}
+
+function updateHead() {
+  const s: any = site.value || {}
+  const p: any = page.value || {}
+  const f: any = frontmatter.value || {}
+
+  const siteTitle = s.title || 'Vasak Group'
+  const pageTitle = f.title || p.title || ''
+  const title = pageTitle ? `${pageTitle} — ${siteTitle}` : siteTitle
+
+  const description = f.description || f.info?.description || s.description || ''
+  const image = f.image || f.info?.image || '/img/logo.svg'
+  const siteUrl = s.url || s.siteUrl || ''
+  const url = siteUrl ? (siteUrl.replace(/\/$/, '') + (p.path || p.relativePath || '')) : ''
+
+  // title
+  document.title = title
+
+  // metas
+  try { setMeta('meta[name="description"]', 'content', description) } catch { }
+  try { setMeta('meta[property="og:title"]', 'content', title) } catch { }
+  try { setMeta('meta[property="og:description"]', 'content', description) } catch { }
+  try { setMeta('meta[property="og:type"]', 'content', 'website') } catch { }
+  try { setMeta('meta[property="og:image"]', 'content', image) } catch { }
+  try { setMeta('meta[name="twitter:card"]', 'content', 'summary_large_image') } catch { }
+  try { setMeta('meta[name="twitter:title"]', 'content', title) } catch { }
+  try { setMeta('meta[name="twitter:description"]', 'content', description) } catch { }
+  try { setMeta('meta[name="twitter:image"]', 'content', image) } catch { }
+
+  // canonical
+  if (url) setLinkRel('canonical', url)
+
+  // JSON-LD Organization
+  try {
+    const id = 'vp-org-jsonld'
+    let script = document.head.querySelector(`#${id}`) as HTMLScriptElement | null
+    const json = JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": siteTitle,
+      "url": siteUrl || '',
+      "logo": s.logo || '/img/logo.svg',
+      "sameAs": ((s.themeConfig && s.themeConfig.socialLinks) || []).map((x: any) => x.link).filter(Boolean)
+    })
+    if (!script) {
+      script = document.createElement('script')
+      script.type = 'application/ld+json'
+      script.id = id
+      document.head.appendChild(script)
+    }
+    script.textContent = json
+  } catch (e) { }
+}
+
+onMounted(() => updateHead())
+watch([frontmatter, page, site], () => updateHead())
+</script>
+
+<template>
+  <NavBarComponent />
+  <Transition name="page-fade" mode="out-in" appear>
+    <main v-if="frontmatter.layout === 'home'" :key="frontmatter.layout || 'home'">
+      <HomeLayout />
+    </main>
+    <main v-else-if="frontmatter.layout === 'about'" :key="frontmatter.layout || 'headtitle'">
+      <AboutLayout />
+    </main>
+    <main v-else-if="frontmatter.layout === 'services'" :key="frontmatter.layout || 'services'">
+      <ServicesLayout />
+    </main>
+    <main v-else-if="frontmatter.layout === 'tools'" :key="frontmatter.layout || 'tools'">
+      <ToolsLayout />
+    </main>
+    <main v-else :key="frontmatter.layout || 'content'">
+      <Content />
+    </main>
+  </Transition>
+  <FooterComponent />
+  <ToggleTheme />
+</template>
+
+<style scoped>
+.page-fade-enter-active,
+.page-fade-leave-active {
+  will-change: opacity, transform, filter;
+  transition: opacity 520ms cubic-bezier(.16, .84, .24, 1),
+    transform 520ms cubic-bezier(.16, .84, .24, 1),
+    filter 520ms cubic-bezier(.16, .84, .24, 1);
+}
+
+.page-fade-enter-from,
+.page-fade-leave-to {
+  opacity: 0;
+  transform: translateY(12px) scale(0.992);
+  filter: blur(4px);
+}
+
+.page-fade-enter-to,
+.page-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  filter: blur(0);
+}
+
+.page-fade-enter-from>*,
+.page-fade-leave-to>* {
+  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.06);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  .page-fade-enter-active,
+  .page-fade-leave-active {
+    transition: none !important;
+    filter: none !important;
+    transform: none !important;
+  }
+}
+</style>

.vitepress/theme/components/FooterComponent.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { useData } from 'vitepress'
+const { site, theme } = useData()
+</script>
+
+<template>
+    <footer
+        class="mt-8 text-center text-sm text-slate-500 dark:text-slate-400 mx-4 rounded-xl p-4 bg-slate-200 dark:bg-slate-900">
+        <img src="/img/logo.svg" :alt="site.title" class="h-14 mb-2 inline-block" />
+
+        <p class="mt-2">
+            <a v-for="social in theme.socialLinks" :key="social.icon" :href="social.link" target="_blank"
+                rel="noopener noreferrer" class="mx-2 text-slate-600 dark:text-slate-300 hover:text-primary text-xl">
+                <FontAwesomeIcon :icon="['fab', social.icon]" />
+            </a>
+        </p>
+    </footer>
+    <div class="text-center my-4">
+        <p>
+            &copy; {{ new Date().getFullYear() }} <span class="vsk-text-gradient vsk-font">{{ site.title }}</span>. All
+            rights reserved.
+        </p>
+    </div>
+
+</template>

.vitepress/theme/components/NavBarComponent.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+const { site } = useData()
+</script>
+
+<template>
+    <nav
+        class="m-4 flex items-center justify-between rounded-xl p-4 bg-slate-200 dark:bg-slate-900 z-50 absolute top-0 left-0 right-0 w-[calc(100%-32px)]">
+        <div class="text-lg font-bold">
+            <a href="/"><img src="/img/logo.svg" :alt="site.title" class="h-10"></a>
+        </div>
+        <div>
+            <a v-for="navItem in site.themeConfig.nav" :key="navItem.text" :href="navItem.link"
+                class="mx-2 hover:text-secondary font-medium">
+                {{ navItem.text }}
+            </a>
+        </div>
+    </nav>
+</template>

.vitepress/theme/components/sections/CTASection.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    title?: string
+    description?: string
+    ctalink?: string
+    ctatitle?: string
+}>()
+</script>
+
+<template>
+    <section class="p-32 text-center">
+        <h2 class="text-3xl font-bold mb-8 text-primary">
+            {{ props.title ?? '¿Listo para comenzar?' }}
+        </h2>
+        <p class="text-lg max-w-2xl mx-auto">
+            {{ props.description ?? '' }}
+        </p>
+        <p class="mt-14">
+            <a :href="props.ctalink ?? '/contact'"
+                class="font-medium rounded-xl text-slate-50 vsk-gradient hover:bg-secondary px-16 py-4">
+                {{ props.ctatitle ?? 'Contacto' }}
+            </a>
+        </p>
+    </section>
+</template>

.vitepress/theme/components/sections/HeadTitleSection.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+
+const props = defineProps<{ title?: string }>()
+
+// fallback to site.title when no prop provided
+const { site } = useData()
+const title = props.title || site.value?.title || 'Title'
+</script>
+<template>
+    <section class="flex vsk-gradient justify-center items-center h-[500px]">
+        <h1 class="text-5xl font-bold">{{ title }}</h1>
+    </section>
+</template>