Skip to content

Commit

Permalink
feat(omi-templates): upgrade [product-docs] from function component t…
Browse files Browse the repository at this point in the history 
…o custom element
  • Loading branch information
@dntzhang
dntzhang committed Feb 9, 2024
1 parent 159e443 commit 74073a8
Show file tree
Hide file tree
Showing 5 changed files with 215 additions and 190 deletions.
128 changes: 57 additions & 71 deletions packages/omi-templates/src/components/docs-sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { tag, Component } from 'omi'
import { tag, Component, classNames, bind } from 'omi'

type SidebarItem = {
text: string
Expand All @@ -23,6 +23,13 @@ type Props = {
isOpen: boolean
}

const theme = {
base: 'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
unactive:
'text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300',
active: 'font-semibold text-primary before:bg-primary brightness-125',
}

@tag('o-docs-sidebar')
export class Sidebar extends Component<Props> {
static css = `
Expand All @@ -31,82 +38,61 @@ export class Sidebar extends Component<Props> {
}
`

@bind
onClick(item: SidebarItem, evt: MouseEvent) {
this.state.active = item.value
this.update()
this.fire('change', {
item: item,
nativeEvent: evt,
})
}

static defaultProps = {
items: [],
active: '',
}

state = {
active: '',
}

install() {
this.state.active = this.props.active
}

render() {
return (
<nav class="text-base lg:text-sm">
<ul role="list" class="space-y-9">
<li>
<h2 class="font-display font-medium text-zinc-900 dark:text-white">Introduction</h2>
<ul
role="list"
class="mt-2 space-y-2 border-l-2 border-zinc-100 lg:mt-4 lg:space-y-4 lg:border-zinc-200 dark:border-zinc-700"
>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300"
href="/"
>
Getting started
</a>
</li>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full font-semibold text-primary before:bg-primary brightness-125"
href="/docs/installation"
>
Installation
</a>
</li>
</ul>
</li>
<li>
<h2 class="font-display font-medium text-zinc-900 dark:text-white">Core concepts</h2>
<ul
role="list"
class="mt-2 space-y-2 border-l-2 border-zinc-100 lg:mt-4 lg:space-y-4 lg:border-zinc-200 dark:border-zinc-700"
>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300"
href="/docs/understanding-caching"
>
Understanding caching
</a>
</li>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300"
href="/docs/predicting-user-behavior"
>
Predicting user behavior
</a>
</li>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300"
href="/docs/basics-of-time-travel"
>
Basics of time-travel
</a>
</li>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300"
href="/docs/introduction-to-string-theory"
>
Introduction to string theory
</a>
</li>
<li class="relative">
<a
class="block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-zinc-500 before:hidden before:bg-zinc-300 hover:text-zinc-600 hover:before:block dark:text-zinc-400 dark:before:bg-zinc-700 dark:hover:text-zinc-300"
href="/docs/the-butterfly-effect"
{this.props.items.map((item) => {
return (
<li>
<h2 class="font-display font-medium text-zinc-900 dark:text-white">{item.text}</h2>
<ul
role="list"
class="mt-2 space-y-2 border-l-2 border-zinc-100 lg:mt-4 lg:space-y-4 lg:border-zinc-200 dark:border-zinc-700"
>
The butterfly effect
</a>
{item.children.map((child) => {
return (
<li class="relative">
<a
class={classNames(theme.base, {
[theme.active]: this.state.active === child.value,
[theme.unactive]: this.state.active !== child.value,
})}
onClick={(evt: MouseEvent) => this.onClick(child, evt)}
href="javascript:void(0)"
>
{child.text}
</a>
</li>
)
})}
</ul>
</li>
</ul>
</li>
)
})}
</ul>
</nav>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/omi-templates/src/pages/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function Home() {
100+ 免费模板，对外站点、对内管理系统，开箱即用，自由定制，开源免费
</p>
<div class="flex space-x-4">
<o-button tag="a" href="#/product-docs/zh/introduction">
<o-button tag="a" href="#/product-docs/zh/getting-started">
开始使用
</o-button>
<o-button
Expand Down
Loading

0 comments on commit 74073a8

Please sign in to comment.