diff --git a/src/components/ui-portal-categories.js b/src/components/ui-portal-categories.js deleted file mode 100644 index 27f310794e..0000000000 --- a/src/components/ui-portal-categories.js +++ /dev/null @@ -1,105 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { LitElement, html, css } from 'lit'; -import { getComponentEntry } from '../content.ts'; - -const tagName = 'ui-portal-categories'; - -export class UIPortalCategories extends LitElement { - static properties = { - entry: { type: String, attribute: 'entry-data' }, - }; - - static styles = [ - css` - ul { - display: flex; - gap: 8em; - } - ul li.active { - border: 3px solid; - } - button.active { - border: 3px solid; - } - `, - ]; - - constructor() { - super(); - this.categoriesData = null; - } - - render() { - return html`
${this._renderNavLevel({ entry: this.entry })}
`; - } - - init() { - const componentName = this.entry.data.component; - this.webComponentEntry = getComponentEntry({ - component: componentName, - platform: 'web', - }); - this.iosComponentEntry = getComponentEntry({ - component: componentName, - platform: 'ios', - }); - this.androidComponentEntry = getComponentEntry({ - component: componentName, - platform: 'android', - }); - this.designComponentEntry = getComponentEntry({ - component: componentName, - category: 'design', - }); - this.changelogComponentEntry = getComponentEntry({ - component: componentName, - category: 'changelog', - }); - this.firstDevelopmentEntry = - this.webComponentEntry || this.androidComponentEntry || this.iosComponentEntry; - this.isDesign = this.entry.data.category === 'design'; - this.isChangelog = this.entry.data.category === 'changelog'; - this.isDevelopment = !!this.entry.data.platform; - } - - _renderNavLevel() { - this.init(); - return html` -
- ${this.isDevelopment && this.webComponentEntry - ? html`` - : ''} - ${this.isDevelopment && this.androidComponentEntry - ? html`` - : ''} - ${this.isDevelopment && this.iosComponentEntry - ? html`` - : ''} -
-
`; - } -} - -customElements.define(tagName, UIPortalCategories); diff --git a/src/pages/components/[component].astro b/src/pages/components/[component].astro new file mode 100644 index 0000000000..164ffb67db --- /dev/null +++ b/src/pages/components/[component].astro @@ -0,0 +1,48 @@ +--- +import { componentInfoEntries, getComponentEntry, getComponentGlob } from '../../content'; +import MainLayout from "../../layouts/MainLayout.astro"; +import ComponentLayout from "../../layouts/partials/ComponentPartial.astro"; +import { UIPortalInpageNav } from "../../components/ui-portal-inpage-nav.js"; + +export async function getStaticPaths() { + return componentInfoEntries.map((entry) => ({ + params: { + component: entry.data.component + }, + props: { entry } + })); +} + +const { entry } = Astro.props; +let config: any = { + component: entry.data.component, + // TODO remove this and update getComponentGlob so that it returns all found entities. + // Then we'll be able to extract headings for each of md file for the particular component + type: 'component-development' +}; + +// TODO here we need to concatenate multiple files under the component folder, excluding info.md +// At this moment there is only one file with such config in the "button" folder. That is why it works now +// TODO update getComponentEntry to getComponentEntries (plural). So that it gives all md files which we can render +// and then concatenate +const componentEntry = getComponentEntry(config); +const componentGlobs = await Astro.glob('/src/content/docs/components/**/*.md'); +const componentGlob = getComponentGlob(componentGlobs, config); +const headers = componentGlob.getHeadings().filter(header => header.depth === 2); +console.log('headers: ', componentGlob.getHeadings()); +const { Content } = await componentEntry.render(); +const inPageNavData = headers.map(header => ({ + name: header.text, + url: `/${componentEntry.slug}#${header.slug}` +})); + +console.log('inPageNavData: ', inPageNavData) +--- + + + + + + + + \ No newline at end of file diff --git a/src/pages/components/[component]/[page].astro b/src/pages/components/[component]/[page].astro deleted file mode 100644 index 70e1b1b5d5..0000000000 --- a/src/pages/components/[component]/[page].astro +++ /dev/null @@ -1,48 +0,0 @@ ---- -import { componentPageEntries, getComponentEntry, getComponentGlob } from '../../../content'; -import MainLayout from "../../../layouts/MainLayout.astro"; -import ComponentLayout from "../../../layouts/partials/ComponentPartial.astro"; -import { UIPortalInpageNav } from "../../../components/ui-portal-inpage-nav.js"; -import { UIPortalCategories } from "../../../components/ui-portal-categories.js"; - -export async function getStaticPaths() { - return componentPageEntries.map((entry) => ({ - params: { - component: entry.data.component, - // components/component-name/[web,ios,android,design,changelog] - page: entry.data.platform ? entry.data.platform : - ((entry.data.category === 'design' || entry.data.category === 'changelog') ? entry.data.category : null) - }, - props: { entry } - })); -} - -const { entry } = Astro.props; -let config: any = { - component: entry.data.component -}; -if (entry.data.platform) { - config.platform = entry.data.platform; -} else if (entry.data.category === 'design' || entry.data.category === 'changelog') { - config.category = entry.data.category; -} - -const componentEntry = getComponentEntry(config); -const componentGlobs = await Astro.glob('/src/content/docs/components/**/*.md'); -const componentGlob = getComponentGlob(componentGlobs, config); -const headers = componentGlob.getHeadings().filter(header => header.depth === 2); -const { Content } = await componentEntry.render(); -const inPageNavData = headers.map(header => ({ - name: header.text, - url: `/${componentEntry.slug}#${header.slug}` -})); ---- - - - - - - - - - \ No newline at end of file diff --git a/src/pages/components/[component]/index.astro b/src/pages/components/[component]/index.astro deleted file mode 100644 index ea7ead4016..0000000000 --- a/src/pages/components/[component]/index.astro +++ /dev/null @@ -1,29 +0,0 @@ ---- -import { componentInfoEntries, getInfoParentSlug } from '../../../content'; - -export async function getStaticPaths() { - return componentInfoEntries.map((entry) => ({ - params: { component: entry.data.component }, - props: { entry }, - })); -} - -let redirectPath = `${getInfoParentSlug(Astro.props.entry)}/${Astro.props.entry.data.defaultSlug}`; -let componentPath = `${getInfoParentSlug(Astro.props.entry)}`; -let defaultSlug = `${Astro.props.entry.data.defaultSlug}`; ---- - - - - \ No newline at end of file