Skip to content

docs(theme): switch to Trito theme #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hesprs merged 1 commit into from
Feb 14, 2026
Merged

docs(theme): switch to Trito theme #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<br>
</h1>

<h4 align="center"> modern, lightweight, robust and extensible user gesture recognizer </h4>
<h4 align="center"> modern, lightweight, robust and extensible human gesture recognizer </h4>

<p align="center">
<a href="https://github.com/hesprs/pointeract/actions">
Expand Down
13 changes: 9 additions & 4 deletions docs/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import { resolve } from 'node:path';

import { defineConfig } from 'vitepress';
import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
import { ThemeConfig } from 'vitepress-theme-trito';

// https://vitepress.dev/reference/site-config
export default defineConfig({
export default defineConfig<ThemeConfig>({
cleanUrls: true,
lastUpdated: true,
title: 'Pointeract',
Expand Down Expand Up @@ -38,10 +39,11 @@ export default defineConfig({
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'Documentation', link: '/get-started' },
{ text: 'Documentation', link: '/get-started', activeMatch: '/.+' },
],
logo: { src: '/logo-small.svg', alt: 'Pointeract logo' },

logoLarge: { src: '/logo.svg', alt: 'Pointeract logo' },
aside: 'left',
sidebar: [
{
text: 'Introduction',
Expand Down Expand Up @@ -95,7 +97,7 @@ export default defineConfig({
{ icon: 'npm', link: 'https://www.npmjs.com/package/pointeract' },
{ icon: 'github', link: 'https://github.com/hesprs/pointeract' },
],
editLink: { pattern: 'https://github.com/hesprs/pointeract/edit/main/docs/:path' },
editLink: 'https://github.com/hesprs/pointeract/edit/main/docs/:path',
outline: 'deep',
},
markdown: {
Expand All @@ -112,5 +114,8 @@ export default defineConfig({
'@': resolve(__dirname, '..', '..', 'src/'),
},
},
ssr: {
noExternal: ['vitepress-theme-trito'],
},
},
});
11 changes: 2 additions & 9 deletions docs/.vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,5 @@ import './style.css';
import 'virtual:group-icons.css';
import './style.css';

import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import Layout from './layout.vue';

export default {
extends: DefaultTheme,
Layout: Layout,
} satisfies Theme;
import Trito from 'vitepress-theme-trito';
export default Trito;
55 changes: 0 additions & 55 deletions docs/.vitepress/theme/layout.vue
View file
Open in desktop

This file was deleted.

120 changes: 1 addition & 119 deletions docs/.vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,8 @@
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/

/**
* Colors
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create an accent, such as when having inline code block inside
* custom containers.
*
* - `default`: The color used purely for subtle indication without any
* special meanings attached to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */

:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);

--vp-c-brand-1: var(--vp-c-orange-1) !important;
--vp-c-brand-2: var(--vp-c-orange-2) !important;
--vp-c-brand-3: var(--vp-c-orange-3) !important;
--vp-c-brand-soft: var(--vp-c-orange-soft) !important;

--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);

--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);

--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);

--vp-c-orange-3: #f9b44e;
--vp-c-orange-2: #ff9626;
--vp-c-orange-1: #ff6f0f;
--vp-c-yellow-soft: rgba(255, 191, 0, 0.16);
--vp-c-orange-soft: rgba(255, 191, 0, 0.16);
}

html.dark {
Expand All @@ -81,22 +11,6 @@ html.dark {
--vp-c-orange-3: #ff6f0f;
}

/**
* Component: Button
* -------------------------------------------------------------------------- */

:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
}

/**
* Component: Home
* -------------------------------------------------------------------------- */
Expand All @@ -110,36 +24,4 @@ html.dark {
#3bffc1 50%,
#ffc847 50%
) !important;
--vp-home-hero-image-filter: blur(44px) !important;
}

@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}

@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(68px);
}
}

/**
* Component: Custom Block
* -------------------------------------------------------------------------- */

:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}

/**
* Component: Algolia
* -------------------------------------------------------------------------- */

.DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}
7 changes: 2 additions & 5 deletions docs/en/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ layout: home

hero:
name: Pointeract
text: extensible user gesture recognizer
tagline: Just a much more elegant solution than Hammer.js.
text: human gesture recognizer
tagline: modular, composable, elegant
actions:
- theme: brand
text: Get Started
Expand All @@ -15,9 +15,6 @@ hero:
- theme: alt
text: Playground
link: /playground
image:
src: /logo.svg
alt: Pointeract Logo

features:
- title: Modern
Expand Down
17 changes: 9 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "pointeract",
"version": "1.1.1",
"description": "Modern, lightweight, robust and extensible user gesture recognizer.",
"description": "Modern, lightweight, robust and extensible human gesture recognizer.",
"keywords": [
"frontend",
"interaction",
Expand Down Expand Up @@ -47,21 +47,22 @@
"docs:preview": "vitepress preview docs"
},
"devDependencies": {
"@types/node": "^25.2.0",
"@types/node": "^25.2.3",
"@vitest/coverage-v8": "^4.0.18",
"happy-dom": "^20.5.0",
"oxfmt": "^0.28.0",
"oxlint": "^1.43.0",
"oxlint-tsgolint": "^0.11.4",
"happy-dom": "^20.6.1",
"oxfmt": "^0.32.0",
"oxlint": "^1.47.0",
"oxlint-tsgolint": "^0.12.2",
"terser": "^5.46.0",
"tsc-alias": "^1.8.16",
"typescript": "^5.9.3",
"vite": "^7.3.1",
"vitepress": "2.0.0-alpha.16",
"vitepress-plugin-group-icons": "^1.7.1",
"vitepress-theme-trito": "^1.0.1",
"vitest": "^4.0.18",
"vue": "^3.5.27",
"vue": "^3.5.28",
"vue-tsc": "^3.2.4"
},
"packageManager": "pnpm@10.23.0"
"packageManager": "pnpm@10.29.3"
}
Loading