keyframekit 1.0.8 → 1.0.9

package/docs/.vitepress/components/Playground/themes.js

@@ -1,24 +1,24 @@
-
-import githubDark from './themes/githubDark.js';
-import githubLight from './themes/githubLight.js';
-
-export const themes = {
-  dark: {
-    ...githubDark,
-    colors: {
-      ...githubDark.colors,
-      'editor.background':           '#161618', //'#24292e',
-      'editor.lineHighlightBackground': '#202022', //'#2b3036',
-    }
-  },
-
-  light: {
-    ...githubLight,
-    colors: {
-      ...githubLight.colors,
-      'editor.background':                  '#f6f6f7', //'#ffffff',
-      'editor.lineHighlightBackground':     '#efeff1', //'#f6f8fa',
-    }
-  }
-  
-}
+
+import githubDark from './themes/githubDark.js';
+import githubLight from './themes/githubLight.js';
+
+export const themes = {
+  dark: {
+    ...githubDark,
+    colors: {
+      ...githubDark.colors,
+      'editor.background':           '#161618', //'#24292e',
+      'editor.lineHighlightBackground': '#202022', //'#2b3036',
+    }
+  },
+
+  light: {
+    ...githubLight,
+    colors: {
+      ...githubLight.colors,
+      'editor.background':                  '#f6f6f7', //'#ffffff',
+      'editor.lineHighlightBackground':     '#efeff1', //'#f6f8fa',
+    }
+  }
+  
+}

package/docs/.vitepress/config.ts

@@ -1,69 +1,84 @@
-import { defineConfig } from 'vitepress'
-//import monacoEditorPlugin from 'vite-plugin-monaco-editor'
-
-import referenceNavigationItems from './referenceNavigation.ts';
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
-  srcDir: "docs",
-
-  rewrites: {
-    //'reference/:slug*': ':slug*'
-  },
-
-  head: [
-    ['link', { rel: 'icon', href: '/icon.png' }],
-    ['meta', { property: 'og:image', content: '/og-image.png' }],
-    ['meta', { name: 'keywords', content: 'css,js,javascript,animation,keyframe,stylesheet,framework,tools,performance,typescript' }]
-  ],
-    
-  title: "KeyframeKit",
-  description: "Intuitive, powerful and performant tools for working with CSS animations in JavaScript.",
-
-  themeConfig: {
-    outline: [2, 3],
-
-    // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Reference', link: '/reference' }
-    ],
-
-    sidebar: {
-      '/reference/': [
-        {
-          text: 'Reference',
-          link: '/reference',
-          items: referenceNavigationItems
-        }
-      ]
-    },
-
-    search: {
-      provider: 'local'
-    },
-
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/benhatsor/KeyframeKit' }
-    ],
-
-    footer: {
-      message: 'Created by <a href="https://berryscript.com" target="_blank">Ben Hatsor</a>. MIT License.'
-    }
-  },
-
-  vite: {
-    plugins: [
-      /*monacoEditorPlugin({
-        //publicPath: '/'
-        customDistPath: (root, buildOutDir) => `${buildOutDir}/monacoeditorwork`
-      })*/
-    ],
-    ssr: {
-      //noExternal: ['monaco-editor']
-    },
-    optimizeDeps: {
-      //exclude: ['monaco-editor']
-    }
-  }
-})
+import { defineConfig } from 'vitepress'
+//import monacoEditorPlugin from 'vite-plugin-monaco-editor'
+
+import referenceNavigationItems from './referenceNavigation.ts';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  srcDir: "docs",
+
+  rewrites: {
+    //'reference/:slug*': ':slug*'
+  },
+
+  head: [
+    ['link', { rel: 'icon', href: '/icon.png' }],
+    ['meta', { property: 'og:image', content: '/og-image.png' }],
+    ['meta', { name: 'keywords', content: 'css,js,javascript,animation,keyframe,stylesheet,framework,tools,performance,typescript' }],
+
+    [
+      'script',
+      { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-NY6W3XTT8W' }
+    ],
+    [
+      'script',
+      {},
+      `window.dataLayer = window.dataLayer || [];
+       function gtag(){dataLayer.push(arguments);}
+       gtag('js', new Date());
+
+       gtag('config', 'G-NY6W3XTT8W');`
+    ]
+
+  ],
+    
+  title: "KeyframeKit",
+  description: "Intuitive, powerful and lightweight tools for working with CSS animations in JavaScript.",
+
+  themeConfig: {
+    outline: [2, 3],
+
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Reference', link: '/reference' }
+    ],
+
+    sidebar: {
+      '/reference/': [
+        {
+          text: 'Reference',
+          link: '/reference',
+          items: referenceNavigationItems
+        }
+      ]
+    },
+
+    search: {
+      provider: 'local'
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/benhatsor/KeyframeKit' }
+    ],
+
+    footer: {
+      message: 'Created by <a href="https://berryscript.com" target="_blank">Ben Hatsor</a>. MIT License.'
+    }
+  },
+
+  vite: {
+    plugins: [
+      /*monacoEditorPlugin({
+        //publicPath: '/'
+        customDistPath: (root, buildOutDir) => `${buildOutDir}/monacoeditorwork`
+      })*/
+    ],
+    ssr: {
+      //noExternal: ['monaco-editor']
+    },
+    optimizeDeps: {
+      //exclude: ['monaco-editor']
+    }
+  }
+})

package/docs/.vitepress/referenceNavigation.ts

@@ -1,37 +1,37 @@
-
-import type { DefaultTheme } from 'vitepress';
-
-import type {
-  NavigationJSON,
-  NavigationItem as NavigationJSONItem
-} from 'typedoc-plugin-markdown';
-
-
-import navigationJSON from '../docs/reference/navigation.json' with { type: 'json' };
-
-
-const navigationJSONItems: NavigationJSON = navigationJSON;
-
-const sidebarItems = navigationJSONItems.map(convertItem);
-
-export default sidebarItems;
-
-
-function convertItem(
-  inputItem: NavigationJSONItem
-): DefaultTheme.SidebarItem {
-
-  const link = inputItem.path ?? undefined;
-
-  const items = inputItem.children?.map(convertItem);
-
-  let outputItem: DefaultTheme.SidebarItem = {
-    text: inputItem.title,
-    link: link,
-    items: items,
-    base: '/reference/'
-  };
-
-  return outputItem;
-
-}
+
+import type { DefaultTheme } from 'vitepress';
+
+import type {
+  NavigationJSON,
+  NavigationItem as NavigationJSONItem
+} from 'typedoc-plugin-markdown';
+
+
+import navigationJSON from '../docs/reference/navigation.json' with { type: 'json' };
+
+
+const navigationJSONItems: NavigationJSON = navigationJSON;
+
+const sidebarItems = navigationJSONItems.map(convertItem);
+
+export default sidebarItems;
+
+
+function convertItem(
+  inputItem: NavigationJSONItem
+): DefaultTheme.SidebarItem {
+
+  const link = inputItem.path ?? undefined;
+
+  const items = inputItem.children?.map(convertItem);
+
+  let outputItem: DefaultTheme.SidebarItem = {
+    text: inputItem.title,
+    link: link,
+    items: items,
+    base: '/reference/'
+  };
+
+  return outputItem;
+
+}

package/docs/.vitepress/theme/base-styles.css

@@ -1,91 +1,100 @@
-
-.monaco-editor .iPadShowKeyboard {
-  display: none;
-}
-
-
-/* override vitepress theme style for '.vp-doc a' in monaco editor
-   (it messes up the autocomplete styles) */
-.vp-doc .monaco-editor a {
-  transition: unset;
-  text-decoration: unset;
-  text-underline-offset: unset;
-  font-weight: unset;
-}
-
-.vp-doc .monaco-editor :not(pre, h1, h2, h3, h4, h5, h6) > code {
-  font-size: unset;
-  color: inherit;
-}
-
-
-.vp-doc h5, .vp-doc h6 {
-  margin: 16px 0;
-}
-
-
-.VPLocalSearchBox {
-
-  --vp-local-search-result-selected-border: var(--vp-c-brand-2);
-
-  .search-bar {
-    background: var(--vp-c-divider);
-  }
-
-  .search-bar:focus-within {
-    border-color: var(--vp-c-brand-2) !important;
-    box-shadow: 0 0 0 1px var(--vp-c-brand-2);
-    /* background: transparent; */
-    background: var(--vp-c-bg-alt);
-  }
-
-  .search-bar .search-input {
-    font-family: inherit;
-  }
-
-  .search-bar .search-actions .clear-button {
-    /* order: -1; */
-
-    &:disabled {
-      display: none;
-    }
-  }
-
-  .search-bar:has(+ .results:empty) .search-actions .toggle-layout-button,
-  .search-bar .search-actions:has(.clear-button:disabled) .toggle-layout-button {
-    display: none;
-  }
-
-  .results:empty,
-  &:has(.search-bar .search-actions .clear-button:disabled) .results {
-    display: none;
-  }
-
-  .search-keyboard-shortcuts {
-    display: none !important;
-  }
-
-}
-
-
-@media (min-width: 768px) {
-
-  .VPNavBarSearchButton {
-
-    height: 38px !important;
-    /* width: 127px; */
-    width: 140px;
-    /* justify-content: center; */
-
-    .keys {
-      display: none;
-    }
-
-  }
-
-}
-
-
-:root {
-  -webkit-tap-highlight-color: transparent;
-}
+
+.monaco-editor .iPadShowKeyboard {
+  display: none;
+}
+
+
+/* override vitepress theme style for '.vp-doc a' in monaco editor
+   (it messes up the autocomplete styles) */
+.vp-doc .monaco-editor a {
+  transition: unset;
+  text-decoration: unset;
+  text-underline-offset: unset;
+  font-weight: unset;
+  color: inherit;
+}
+
+.vp-doc .monaco-editor a:hover {
+  color: inherit;
+}
+
+.vp-doc .monaco-editor :not(pre, h1, h2, h3, h4, h5, h6) > code {
+  font-size: unset;
+  color: inherit;
+}
+
+.vp-doc .monaco-editor li+li {
+  margin-top: 0;
+}
+
+
+.vp-doc h5, .vp-doc h6 {
+  margin: 16px 0;
+}
+
+
+.VPLocalSearchBox {
+
+  --vp-local-search-result-selected-border: var(--vp-c-brand-2);
+
+  .search-bar {
+    background: var(--vp-c-divider);
+  }
+
+  .search-bar:focus-within {
+    border-color: var(--vp-c-brand-2) !important;
+    box-shadow: 0 0 0 1px var(--vp-c-brand-2);
+    /* background: transparent; */
+    background: var(--vp-c-bg-alt);
+  }
+
+  .search-bar .search-input {
+    font-family: inherit;
+  }
+
+  .search-bar .search-actions .clear-button {
+    /* order: -1; */
+
+    &:disabled {
+      display: none;
+    }
+  }
+
+  .search-bar:has(+ .results:empty) .search-actions .toggle-layout-button,
+  .search-bar .search-actions:has(.clear-button:disabled) .toggle-layout-button {
+    display: none;
+  }
+
+  .results:empty,
+  &:has(.search-bar .search-actions .clear-button:disabled) .results {
+    display: none;
+  }
+
+  .search-keyboard-shortcuts {
+    display: none !important;
+  }
+
+}
+
+
+@media (min-width: 768px) {
+
+  .VPNavBarSearchButton {
+
+    height: 38px !important;
+    /* width: 127px; */
+    width: 140px;
+    /* justify-content: center; */
+
+    .keys {
+      display: none;
+    }
+
+  }
+
+}
+
+
+:root {
+  -webkit-tap-highlight-color: transparent;
+}

package/docs/.vitepress/theme/env.d.ts

@@ -1,5 +1,5 @@
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/docs/.vitepress/theme/index.ts

@@ -1,40 +1,40 @@
-import type { EnhanceAppContext } from 'vitepress'
-
-import DefaultTheme from 'vitepress/theme'
-
-import Playground from '../components/Playground/Playground.vue'
-
-import './base-styles.css'
-
-export default {
-  extends: DefaultTheme,
-  enhanceApp({ app }: EnhanceAppContext) {
-
-    /* if (typeof window !== 'undefined') {
-      window.MonacoEnvironment = {
-        getWorkerUrl(_moduleId: string, label: string): string {
-          const base = '/monacoeditorwork/'
-          
-          if (label === 'typescript' || label === 'javascript') {
-            return `${base}ts.worker.bundle.js`
-          }
-          if (label === 'json') {
-            return `${base}json.worker.bundle.js`
-          }
-          if (label === 'css' || label === 'scss' || label === 'less') {
-            return `${base}css.worker.bundle.js`
-          }
-          if (label === 'html' || label === 'handlebars' || label === 'razor') {
-            return `${base}html.worker.bundle.js`
-          }
-          
-          return `${base}editor.worker.bundle.js`
-        }
-      }
-    } */
-
-
-    app.component('Playground', Playground)
-
-  }
+import type { EnhanceAppContext } from 'vitepress'
+
+import DefaultTheme from 'vitepress/theme'
+
+import Playground from '../components/Playground/Playground.vue'
+
+import './base-styles.css'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }: EnhanceAppContext) {
+
+    /* if (typeof window !== 'undefined') {
+      window.MonacoEnvironment = {
+        getWorkerUrl(_moduleId: string, label: string): string {
+          const base = '/monacoeditorwork/'
+          
+          if (label === 'typescript' || label === 'javascript') {
+            return `${base}ts.worker.bundle.js`
+          }
+          if (label === 'json') {
+            return `${base}json.worker.bundle.js`
+          }
+          if (label === 'css' || label === 'scss' || label === 'less') {
+            return `${base}css.worker.bundle.js`
+          }
+          if (label === 'html' || label === 'handlebars' || label === 'razor') {
+            return `${base}html.worker.bundle.js`
+          }
+          
+          return `${base}editor.worker.bundle.js`
+        }
+      }
+    } */
+
+
+    app.component('Playground', Playground)
+
+  }
 }