valaxy-theme-press 0.0.1 → 0.0.2

package/setup/main.ts

@@ -0,0 +1,90 @@
+import { defineAppSetup } from 'valaxy'
+import { nextTick } from 'vue'
+
+export default defineAppSetup((ctx) => {
+  const { router, isClient } = ctx
+  if (!isClient)
+    return
+
+  window.addEventListener(
+    'click',
+    (e) => {
+      const link = (e.target as Element).closest('a')
+      if (link) {
+        const { protocol, hostname, pathname, hash, target } = link
+        const currentUrl = window.location
+        const extMatch = pathname.match(/\.\w+$/)
+        // only intercept inbound links
+        if (
+          !e.ctrlKey
+            && !e.shiftKey
+            && !e.altKey
+            && !e.metaKey
+            && target !== '_blank'
+            && protocol === currentUrl.protocol
+            && hostname === currentUrl.hostname
+            && !(extMatch && extMatch[0] !== '.html')
+        ) {
+          if (pathname === currentUrl.pathname) {
+            e.preventDefault()
+            // scroll between hash anchors in the same page
+            if (hash && hash !== currentUrl.hash) {
+              history.pushState(null, '', hash)
+              // still emit the event so we can listen to it in themes
+              window.dispatchEvent(new Event('hashchange'))
+              // use smooth scroll when clicking on header anchor links
+              scrollTo(link, hash, link.classList.contains('header-anchor'))
+            }
+          }
+        }
+      }
+    },
+    { capture: true },
+  )
+
+  window.addEventListener('hashchange', (e) => {
+    e.preventDefault()
+  })
+
+  router.beforeEach((to, from) => {
+    if (to.path !== from.path)
+      return
+
+    nextTick(() => {
+      scrollTo(document.body, to.hash, true)
+    })
+  })
+})
+
+function scrollTo(el: HTMLElement, hash: string, smooth = false) {
+  let target: Element | null = null
+
+  try {
+    target = el.classList.contains('header-anchor')
+      ? el
+      : document.querySelector(decodeURIComponent(hash))
+  }
+  catch (e) {
+    console.warn(e)
+  }
+
+  if (target) {
+    const targetPadding = -64
+    const targetTop
+      = window.scrollY
+      + (target as HTMLElement).getBoundingClientRect().top
+      + targetPadding
+
+    // only smooth scroll if distance is smaller than screen height.
+    if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight) {
+      window.scrollTo(0, targetTop)
+    }
+    else {
+      window.scrollTo({
+        left: 0,
+        top: targetTop,
+        behavior: 'smooth',
+      })
+    }
+  }
+}

package/styles/css-vars.scss

@@ -0,0 +1,43 @@
+:root {
+  --pr-c-indigo-lighter: #c9def1;
+}
+
+:root {
+  --pr-c-text-code: #374562;
+
+  // aside
+  --pr-aside-text-1: #213547;
+  --pr-aside-text-2: #3c3c3cb3;
+
+  --pr-aside-divider: rgba(60, 60, 60, 0.122);
+
+  --pr-c-divider-light: rgba(60, 60, 60, 0.12);
+
+  // nav
+  --pr-nav-height: var(--pr-nav-height-mobile);
+  --pr-nav-height-mobile: 60px;
+
+  // z-index
+  --va-z-overlay: var(--pr-z-index-backdrop);
+  --pr-z-index-nav: 8;
+  --pr-z-index-local-nav: 9;
+  --pr-z-index-backdrop: 10;
+  --pr-z-index-sidebar: 11;
+
+  // switch
+  --pr-switch-divider: rgba(60, 60, 60, 0.29);
+  --pr-switch-bg: #f1f1f1;
+}
+
+.dark {
+  --pr-c-text-code: var(--pr-c-indigo-lighter);
+
+  // aside
+  --pr-aside-text-1: #ffffffde;
+  --pr-aside-text-2: #ebebeb99;
+  --pr-aside-divider: rgba(84, 84, 84, 0.48);
+
+  // switch
+  --pr-switch-divider: rgba(84, 84, 84, 0.65);
+  --pr-switch-bg: #3a3a3a;
+}

package/styles/helper.scss

@@ -0,0 +1,44 @@
+.gradient-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.sese-btn {
+  position: relative;
+  z-index: 0;
+
+  @apply transition;
+
+  &:hover {
+    @apply shadow;
+  }
+}
+
+.press-icon-btn {
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  width: 3rem;
+  height: 3rem;
+
+  border-radius: 50%;
+
+  transition: background-color var(--va-transition-duration);
+
+  div {
+    font-size: 1.2rem;
+  }
+
+  &:hover {
+    background-color: rgba(var(--va-c-primary-rgb), 0.08);
+  }
+
+  &:active {
+    background-color: rgba(var(--va-c-primary-rgb), 0.16);
+  }
+}

package/styles/index.scss

@@ -0,0 +1,7 @@
+@use "./helper.scss";
+@use "./markdown.scss";
+
+.layout {
+  display: flex;
+  flex-direction: column;
+}

package/styles/markdown.scss

@@ -0,0 +1,40 @@
+@use "valaxy/client/styles/mixins" as *;
+
+.prose {
+  --un-prose-body: var(--va-c-text);
+  --un-prose-hr: var(--va-c-text);
+  --un-prose-borders: var(--va-c-brand);
+  --un-prose-links: var(--va-c-brand);
+  --un-prose-code: var(--va-c-text);
+  --un-prose-font-mono: var(--va-font-mono);
+
+  blockquote {
+    font-style: normal;
+  }
+
+  a {
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: all 0.4s;
+
+    &:hover {
+      border-bottom-color: var(--va-c-brand);
+    }
+  }
+
+  code:not(pre > code) {
+    color: var(--pr-c-text-code);
+    background-color: var(--va-c-bg-mute);
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-weight: 500;
+  }
+}
+
+@include mobile {
+  .markdown-body {
+    div[class*="language-"] {
+      margin: 0 -1.5rem;
+    }
+  }
+}

package/types/home.d.ts

@@ -0,0 +1,5 @@
+export interface Feature {
+  icon?: string
+  title: string
+  details: string
+}

package/types/{index.ts → index.d.ts}

@@ -1,3 +1,6 @@
+export * from '../composables'
+export * from './home.d'
+
 export namespace DocsTheme {
   export type Config = ThemeConfig
   export type Sidebar = any

package/valaxy.config.ts

@@ -0,0 +1,36 @@
+import type { ResolvedValaxyOptions } from 'valaxy'
+import { defineTheme } from 'valaxy'
+import type { Plugin } from 'vite'
+import type { ThemeConfig } from './types'
+
+function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
+  const themeConfig = options.config.themeConfig!
+
+  return {
+    name: 'valaxy-theme-press',
+    enforce: 'pre',
+    config() {
+      return {
+        css: {
+          preprocessorOptions: {
+            scss: {
+              additionalData: `$c-primary: ${themeConfig.colors?.primary || '#0078E7'} !default;`,
+            },
+          },
+        },
+
+        optimizeDeps: {
+          exclude: ['@docsearch/js'],
+        },
+      }
+    },
+  }
+}
+
+export default defineTheme<ThemeConfig>((options) => {
+  return {
+    vite: {
+      plugins: [ThemeVitePlugin(options)],
+    },
+  }
+})

package/components/PressHeader.vue

@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-import { useConfig } from 'valaxy'
-
-const config = useConfig()
-</script>
-
-<template>
-  <div class="pt-6 pb-8 space-y-2 md:space-y-5">
-    <h1
-      class="
-          text-3xl
-          leading-9
-          font-extrabold
-          text-gray-900
-          tracking-tight
-          sm:text-4xl sm:leading-10
-          md:text-6xl md:leading-14
-        "
-    >
-      {{ config.title }}
-    </h1>
-    <p class="text-lg leading-7 text-gray-500">
-      {{ config.subtitle }}
-    </p>
-  </div>
-</template>

package/pages/index.vue

@@ -1,8 +0,0 @@
-<template>
-  <PressPostList />
-</template>
-
-<route lang="yaml">
-meta:
-  layout: home
-</route>

package/tsup.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig((options) => {
-  return {
-    entry: ['node/index.ts'],
-    // disable for dev watch before valaxy watch
-    clean: !options.watch,
-    dts: true,
-    format: ['cjs', 'esm'],
-    minify: !options.watch,
-    external: [
-      'valaxy',
-      'vite',
-    ],
-  }
-})