docs: improve seo and markup

README.md

@@ -85,25 +85,6 @@ const { r$ } = useRegle({ email: '' }, {
 - <img src="https://raw.githubusercontent.com/victorgarciaesgi/regle/master/.github/images/icons/pinia.svg" alt='pinia'/> Pinia
 
 
-## ☑️ Roadmap
-
-### For v1.0
-
-- [x] Unit tests
-- [x] E2E tests
-- [x] Example repo, Reproduction repl
-- [x] Type tests
-
-### Next iterations
-
-- [ ] `Valibot` support
-- [ ] `Yup` support
-- [ ] TS docs
-
-### 🤔 Maybe in roadmap
-
-- [ ] Typed plugin system (like scrollToError)
-
 ## ⬇️ Quick install
 
 ```bash

docs/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash';
-import type { DefaultTheme, HeadConfig } from 'vitepress';
+import type { DefaultTheme, HeadConfig, PageData } from 'vitepress';
 import { defineConfig } from 'vitepress';
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
 
@@ -109,7 +109,7 @@ const Troubleshooting: DefaultTheme.NavItemWithLink[] = [
 
 export default defineConfig({
   title: 'Regle',
-  description: 'Typescript-first model-based form validation library for Vue 3',
+  description: 'Type safe model-based form validation library for Vue.js',
   sitemap: {
     hostname: 'https://reglejs.dev',
   },
@@ -187,6 +187,40 @@ export default defineConfig({
 
     return head;
   },
+  transformPageData(pageData) {
+    const canonicalUrl = `https://reglejs.dev/${pageData.relativePath}`.replace(/index\.md$/, '').replace(/\.md$/, '/');
+
+    pageData.frontmatter.head ??= [];
+    pageData.frontmatter.head.push(['link', { rel: 'canonical', href: canonicalUrl }]);
+
+    function getJSONLD(pageData: PageData) {
+      if (pageData.relativePath === 'index.md') {
+        return `{
+          "@context":"http://schema.org",
+          "@type":"WebSite",
+          "url":"https:\/\/reglejs.dev\/",
+          "inLanguage":"en",
+          "description":"Type safe model-based form validation library for Vue.js",
+          "name":"${pageData.title}"
+        }`;
+      } else {
+        return `{
+            "@context":"http://schema.org",
+            "@type":"TechArticle",
+            "headline":"${pageData.title}",
+            "inLanguage":"en",
+            "mainEntityOfPage":{
+              "@type":"WebPage",
+              "@id":"${canonicalUrl}"
+            },
+            "keywords":"regle, vue, forms, typescript",
+            "url":"${canonicalUrl}"
+          }`;
+      }
+    }
+
+    pageData.frontmatter.head.push([['script', { type: 'application/ld+json' }, getJSONLD(pageData)]]);
+  },
   head: [
     ['link', { rel: 'icon', href: '/favicon.ico', sizes: '48x48' }],
     ['link', { rel: 'icon', href: '/favicon.svg', sizes: 'any', type: 'image/svg+xml' }],
@@ -211,16 +245,14 @@ export default defineConfig({
       'meta',
       {
         property: 'description',
-        content: `Regle (from the French word for "rule") is a TypeScript-first form validation library made for Vue 3.
-            Regle is about bringing type safety and great DX for both simple and complex forms.
-            It's entirely data-driven and headless, allowing the validation logic to mirror your data structure, enabling a clear separation between the UI and validation logic.`,
+        content: `Regle is a TypeScript-first form validation library made for Vue.js. Regle is about bringing type safety and great DX to forms`,
       },
     ],
     [
       'meta',
       {
         property: 'og:description',
-        content: `Regle is a TypeScript-first form validation library made for Vue 3.`,
+        content: `Regle is a type safe form validation library for Vue.js`,
       },
     ],
     [
@@ -233,10 +265,7 @@ export default defineConfig({
 
     ['meta', { name: 'twitter:site', content: '@regle' }],
     ['meta', { name: 'twitter:domain', content: 'reglejs.dev' }],
-    [
-      'meta',
-      { name: 'twitter:description', content: 'Regle is a TypeScript-first form validation library made for Vue 3.' },
-    ],
+    ['meta', { name: 'twitter:description', content: 'Regle is a type safe form validation library made for Vue.js' }],
     ['meta', { name: 'twitter:url', content: 'https://reglejs.dev' }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'google-site-verification', content: 'mYJKnciAjHTdI7nsB2xame8QO61IeKoXCZeGyWGjs-4' }],

docs/.vitepress/theme/custom.scss

@@ -29,6 +29,7 @@ html.dark {
 .VPFeature .VPImage {
   border-radius: 6px;
   background-color: var(--vp-c-default-soft);
+  padding: 10px;
 }
 
 .vp-doc h3 > code {

docs/src/index.md

@@ -1,15 +1,15 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
-title: Regle - Form validation for Vue.js
+title: Regle - Type safe form validation library for Vue.js
 titleTemplate: :title
 
 hero:
   name: "Regle"
-  text: "TS-first form validation library for Vue.js"
-  tagline: "Type safe, intuitive API and Zod compatible.
+  text: "Type safe form validation library for Vue.js"
+  tagline: "Typescript first, intuitive API and Zod/Valibot compatible.
 
-  The best way to handle your forms in Vue 3"
+  The best way to handle your forms in Vue"
   image:
     dark: /logo-reglejs-favicon-reversed.svg
     light: /logo-reglejs-favicon.svg
@@ -23,10 +23,14 @@ hero:
       link: /examples/simple.md
 
 features:
-  - icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="200px" height="200px" viewBox="0 0 512 512"><rect fill="#3178c6" height="512" rx="50" width="512"/><rect fill="#3178c6" height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"/><script xmlns=""/></svg>
+  - icon: 
+     src: /typescript.svg
+     alt: typescript logo
     title: Type Safe
     details: All types are inferred, providing a pleasant developer experience.
-  - icon: <svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 4C14 4 11 5 11 9C11 13 11 15 11 18C11 21 6 23 6 23C6 23 11 25 11 28C11 31 11 35 11 39C11 43 14 44 16 44" stroke="#048d62" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 4C34 4 37 5 37 9C37 13 37 15 37 18C37 21 42 23 42 23C42 23 37 25 37 28C37 31 37 35 37 39C37 43 34 44 32 44" stroke="#048d62" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  - icon: 
+     src: /model-based.svg
+     alt: model-based icon 
     title:  Model based
     details: You can focus on your validations, not on your DOM.
   - title: Extensible
@@ -35,6 +39,7 @@ features:
   - title: Zod & Valibot support
     icon: 
       src: /zod-valibot.png
+      alt: zod-valibot icon
     details: Use Zod or Valibot to control your validations.
 ---
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@regle/core",
   "version": "0.5.7",
-  "description": "Typescript-first model-based form validation library for Vue 3",
+  "description": "Type safe form validation library for Vue 3",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "tsup",