valaxy-theme-press 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 云游君 YunYouJun <me@yunyoujun.cn>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/PressArticle.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useFrontmatter, usePostList } from 'valaxy'
+const frontmatter = useFrontmatter()
+
+const route = useRoute()
+const posts = usePostList()
+
+function findCurrentIndex() {
+  return posts.value.findIndex(p => p.href === route.path)
+}
+
+const nextPost = computed(() => posts.value[findCurrentIndex() - 1])
+const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
+</script>
+
+<template>
+  <article class="xl:divide-y xl:divide-gray-200">
+    <header class="pt-6 xl:pb-10 space-y-1 text-center">
+      <PressDate :date="frontmatter.date" />
+      <h1
+        class="
+          text-3xl
+          leading-9
+          font-extrabold
+          text-gray-900
+          tracking-tight
+          sm:text-4xl sm:leading-10
+          md:text-5xl md:leading-14
+        "
+      >
+        {{ frontmatter.title }}
+      </h1>
+    </header>
+
+    <div
+      class="
+        divide-y
+        xl:divide-y-0
+        divide-gray-200
+        xl:grid xl:grid-cols-4 xl:gap-x-10
+        pb-16
+        xl:pb-20
+      "
+      style="grid-template-rows: auto 1fr"
+    >
+      <PressAuthor v-if="frontmatter.author" :frontmatter="frontmatter" />
+      <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
+        <router-view />
+      </div>
+
+      <footer
+        class="
+          text-sm
+          font-medium
+          leading-5
+          divide-y divide-gray-200
+          xl:col-start-1 xl:row-start-2
+        "
+      >
+        <div v-if="nextPost" class="py-8">
+          <h2 class="text-xs tracking-wide uppercase text-gray-500">
+            Next Article
+          </h2>
+          <div class="link">
+            <a :href="nextPost.href">{{ nextPost.title }}</a>
+          </div>
+        </div>
+        <div v-if="prevPost" class="py-8">
+          <h2 class="text-xs tracking-wide uppercase text-gray-500">
+            Previous Article
+          </h2>
+          <div class="link">
+            <a :href="prevPost.href">{{ prevPost.title }}</a>
+          </div>
+        </div>
+        <div class="pt-8">
+          <a class="link" href="/">← Back to the blog</a>
+        </div>
+      </footer>
+    </div>
+  </article>
+</template>

package/components/PressArticleCard.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+
+defineProps<{
+  post: Post
+}>()
+</script>
+
+<template>
+  <article class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
+    <PressDate :date="post.date" />
+    <div class="space-y-5 xl:col-span-3">
+      <div class="space-y-6">
+        <h2 class="text-2xl leading-8 font-bold tracking-tight">
+          <a class="text-gray-900" :href="post.path">{{ post.title }}</a>
+        </h2>
+        <div
+          v-if="post.excerpt"
+          class="prose max-w-none text-gray-500"
+          v-html="post.excerpt"
+        />
+      </div>
+      <div class="text-base leading-6 font-medium">
+        <a class="link" aria-label="read more" :href="post.path">Read more →</a>
+      </div>
+    </div>
+  </article>
+</template>

package/components/PressAuthor.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Post } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+}>()
+</script>
+
+<template>
+  <dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200">
+    <dt class="sr-only">
+      Authors
+    </dt>
+    <dd>
+      <ul
+        class="
+          flex
+          justify-center
+          xl:block
+          space-x-8
+          sm:space-x-12
+          xl:space-x-0 xl:space-y-8
+        "
+      >
+        <li class="flex items-center space-x-2">
+          <img
+            v-if="frontmatter.gravatar"
+            :src="`https://gravatar.com/avatar/${frontmatter.gravatar}`"
+            alt="author image"
+            class="w-10 h-10 rounded-full"
+          >
+          <dl class="text-sm font-medium leading-5 whitespace-nowrap">
+            <dt class="sr-only">
+              Name
+            </dt>
+            <dd class="text-gray-900">
+              {{ frontmatter.author }}
+            </dd>
+            <dt v-if="frontmatter.twitter" class="sr-only">
+              Twitter
+            </dt>
+            <dd v-if="frontmatter.twitter">
+              <a
+                :href="`https://twitter.com/${frontmatter.twitter}`"
+                target="_blank"
+                rel="noopnener noreferrer"
+                class="link"
+              >{{ frontmatter.twitter }}</a>
+            </dd>
+          </dl>
+        </li>
+      </ul>
+    </dd>
+  </dl>
+</template>

package/components/PressDate.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { formatDate } from 'valaxy'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  date?: Date | number | string
+}>()
+
+const datetime = computed(() => formatDate(props.date || ''))
+</script>
+
+<template>
+  <dl>
+    <dt class="sr-only">
+      Published on
+    </dt>
+    <dd class="text-base leading-6 font-medium text-gray-500">
+      <time :datetime="datetime">{{ datetime }}</time>
+    </dd>
+  </dl>
+</template>

package/components/PressHeader.vue

@@ -0,0 +1,26 @@
+<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/components/PressNav.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useThemeConfig } from '../composables'
+
+const route = useRoute()
+const isIndex = computed(() => route.path.replace(/index.html$/, '') === '/')
+
+const config = useConfig()
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <nav w="full" class="flex justify-between items-center py-10 font-bold">
+    <a class="text-xl" href="/" :aria-label="config.title">
+      <img
+        class="inline-block mr-2"
+        style="width: 50px; height: 35px"
+        alt="logo"
+        :src="config.favicon"
+      >
+      <span v-if="!isIndex" class="hidden md:inline">{{ config.title }}</span>
+    </a>
+    <div class="text-sm text-gray-500 leading-5">
+      <template v-for="(item, i) in themeConfig.nav" :key="i">
+        <a
+          class="hover:text-gray-700"
+          :href="item.link"
+          target="_blank"
+          rel="noopener"
+        >{{ item.text }}</a>
+
+        <span v-if="i !== themeConfig.nav.length - 1" class="mr-2 ml-2">·</span>
+      </template>
+    </div>
+  </nav>
+</template>

package/components/PressPostList.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Post } from 'valaxy'
+import { usePostList } from 'valaxy'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  posts?: Post[]
+  curPage?: number
+}>(), {
+  curPage: 1,
+})
+
+const routes = usePostList({ type: props.type || '' })
+const posts = computed(() => props.posts || routes.value)
+</script>
+
+<template>
+  <ul class="divide-y divide-gray-200">
+    <Transition v-for="post, i in posts" :key="i" name="fade">
+      <li class="py-12">
+        <PressArticleCard :post="post" />
+      </li>
+    </Transition>
+  </ul>
+</template>

package/components/PressToggleLocale.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useLocale } from 'valaxy'
+
+const { t, locale } = useI18n()
+const { toggleLocales } = useLocale()
+</script>
+
+<template>
+  <button class="yun-icon-btn" :title="t('button.toggle_langs')" style="color:var(--va-c-text)" @click="toggleLocales">
+    <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
+  </button>
+</template>

package/components/ValaxyMain.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { PageData, Post } from 'valaxy'
+import { useConfig } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+  data?: PageData
+}>()
+const config = useConfig()
+</script>
+
+<template>
+  <main>
+    <div w="full" flex="~">
+      <slot name="main">
+        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
+          <slot name="main-header" />
+          <slot name="main-header-after" />
+
+          <slot name="main-content">
+            <div class="markdown-body prose max-w-none pb-8">
+              <ValaxyMd :frontmatter="frontmatter">
+                <slot name="main-content-md" />
+                <slot />
+              </ValaxyMd>
+            </div>
+            <slot name="main-content-after" />
+          </slot>
+        </div>
+
+        <slot name="main-nav-before" />
+
+        <slot name="main-nav" />
+
+        <slot name="main-nav-after" />
+
+        <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment" />
+
+        <slot name="footer" />
+      </slot>
+    </div>
+
+    <slot name="aside" />
+  </main>
+</template>

package/composables/config.ts

@@ -0,0 +1,12 @@
+import { computed } from 'vue'
+import { useConfig } from 'valaxy'
+import type { ThemeConfig } from '../types'
+
+/**
+ * getThemeConfig
+ * @returns
+ */
+export function useThemeConfig<T = ThemeConfig>() {
+  const config = useConfig<T>()
+  return computed(() => config!.value.themeConfig)
+}

package/composables/index.ts

@@ -0,0 +1 @@
+export * from './config'

package/config/index.ts

@@ -0,0 +1,29 @@
+import type { ThemeConfig, ThemeUserConfig } from '../types'
+
+export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
+
+/**
+ * Default Config
+ */
+export const defaultThemeConfig: ThemeConfig = {
+  outlineTitle: 'On this page',
+
+  colors: {
+    primary: '#0078E7',
+  },
+
+  nav: [],
+}
+
+export default defaultThemeConfig
+
+/**
+ * generateSafelist by config
+ * @param themeConfig
+ * @returns
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function generateSafelist(themeConfig: ThemeUserConfig) {
+  const safelist: string[] = []
+  return safelist
+}

package/layouts/404.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
+
+<template>
+  <Layout>
+    <template #content>
+      <div text="center">
+        <div text-4xl>
+          <div i-ri-alarm-warning-line inline-block />
+        </div>
+        <router-view />
+        <div>
+          <button btn text-sm m="3 t8" @click="router.back()">
+            {{ t('button.back') }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </Layout>
+</template>

package/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <Layout>
+    <router-view />
+  </Layout>
+</template>

package/layouts/home.vue

@@ -0,0 +1,11 @@
+<template>
+  <Layout>
+    <div class="divide-y divide-gray-200">
+      <PressHeader />
+
+      <slot>
+        <router-view />
+      </slot>
+    </div>
+  </Layout>
+</template>

package/layouts/layout.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="antialiased">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
+      <PressNav />
+    </div>
+
+    <main class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
+      <slot>
+        <router-view v-slot="{ Component }">
+          <component :is="Component">
+            <template #main-header>
+              <slot name="main-header" />
+            </template>
+
+            <template #main-header-after>
+              <slot name="main-header-after" />
+            </template>
+            <template #main>
+              <slot name="main" />
+            </template>
+            <template #main-content>
+              <slot name="main-content" />
+            </template>
+            <template #main-content-after>
+              <slot name="main-content-after" />
+            </template>
+            <template #main-nav-before>
+              <slot name="main-nav-before" />
+            </template>
+            <template #main-nav-after>
+              <slot name="main-nav-after" />
+            </template>
+            <template #aside-custom>
+              <slot name="aside-custom" />
+            </template>
+            <template #footer>
+              <slot name="footer" />
+            </template>
+          </component>
+        </router-view>
+      </slot>
+    </main>
+  </div>
+</template>
+

package/layouts/post.vue

@@ -0,0 +1,5 @@
+<template>
+  <Layout>
+    <PressArticle />
+  </Layout>
+</template>

package/node/index.ts

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

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "valaxy-theme-press",
+  "version": "0.0.1",
+  "description": "Docs Theme for Valaxy",
+  "author": {
+    "email": "me@yunyoujun.cn",
+    "name": "YunYouJun",
+    "url": "https://www.yunyoujun.cn"
+  },
+  "maintainers": [],
+  "homepage": "https://press.valaxy.site",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-press"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@docsearch/css": "^3.1.1",
+    "@docsearch/js": "^3.1.1"
+  },
+  "devDependencies": {
+    "valaxy": "0.9.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsup",
+    "dev": "tsup --watch"
+  }
+}

package/pages/index.vue

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

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  // we need tsconfig.json to compile without
+  // error: This is likely not portable. A type annotation is necessary.
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client",
+      "vue/ref-macros",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ]
+  },
+  "exclude": ["**/dist/**", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+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',
+    ],
+  }
+})

package/types/index.ts

@@ -0,0 +1,30 @@
+export namespace DocsTheme {
+  export type Config = ThemeConfig
+  export type Sidebar = any
+}
+
+/**
+ * Theme Config
+ */
+export interface ThemeConfig {
+  /**
+   * toc title
+   * @default 'On this page'
+   */
+  outlineTitle: string
+
+  colors: {
+    /**
+     * primary color
+     * @default '#0078E7'
+     */
+    primary: string
+  }
+
+  nav: {
+    link: string
+    text: string
+  }[]
+}
+
+export type ThemeUserConfig = Partial<ThemeConfig>