import { defineConfig } from 'astro/config';

import starlight from '@astrojs/starlight';

export default defineConfig({

site: 'https://pionjs.com',

integrations: [

starlight({

title: 'PionJS',

logo: {

dark: './src/assets/logo.svg',

light: './src/assets/logo-navy.svg',

alt: 'PionJS',

replacesTitle: true,

},

social: [

{

label: 'GitHub',

icon: 'github',

href: 'https://github.com/pionjs/pion',

},

],

customCss: ['./src/styles/theme.css'],

components: {

Head: './src/components/Head.astro',

PageFrame: './src/components/PageFrame.astro',

},

sidebar: [

{

label: 'Guides',

collapsed: true,

items: [

{ label: 'Getting Started', slug: 'guides/getting-started' },

{ label: 'Bring Your Own Renderer', slug: 'guides/renderers' },

{ label: 'Styling', slug: 'guides/styling' },

{ label: 'Attributes', slug: 'guides/attributes' },

{ label: 'Properties', slug: 'guides/properties' },

{ label: 'API', slug: 'guides/api' },

{ label: 'Dispatching Events', slug: 'guides/events' },

{ label: 'Virtual Components', slug: 'guides/virtual' },

{ label: 'TypeScript', slug: 'guides/typescript' },

],

},

{

label: 'Hooks',

collapsed: true,

items: [

{ label: 'useCallback', slug: 'hooks/usecallback' },

{ label: 'useContext', slug: 'hooks/usecontext' },

{ label: 'useEffect', slug: 'hooks/useeffect' },

{ label: 'useHost', slug: 'hooks/usehost' },

{ label: 'useLayoutEffect', slug: 'hooks/uselayouteffect' },

{ label: 'useMemo', slug: 'hooks/usememo' },

{ label: 'useProperty', slug: 'hooks/useproperty' },

{ label: 'useReducer', slug: 'hooks/usereducer' },

{ label: 'useRef', slug: 'hooks/useref' },

{ label: 'useState', slug: 'hooks/usestate' },

],

},

],

}),

],

});