diff --git a/.vitepress/config.mts b/.vitepress/config.mts index a07c29b3..59daade8 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -1,6 +1,8 @@ +import tailwindcss from "@tailwindcss/vite"; +import path from "path"; import { defineConfig } from "vitepress"; +import { componentMarkdownUtils } from "./theme/utils/ComponentMarkdownUtils"; -// TODO: Review this links when releasing the site const links = { playground: "https://stackblitz.com/fork/github/nativescript-vue/nativescript-vue/tree/main/packages/stackblitz-template?file=src%2Fcomponents%2FHome.vue&title=NativeScript%20Starter%20Vue3", @@ -12,13 +14,19 @@ const links = { nativescriptDocs: "https://docs.nativescript.org/", }; -// https://vitepress.dev/reference/site-config export default defineConfig({ + vite: { + plugins: [tailwindcss()], + resolve: { + alias: { + "@components": path.resolve(__dirname, "./theme/components"), + "@data": path.resolve(__dirname, "./theme/data"), + }, + }, + }, srcDir: "content", title: "NativeScript-Vue", description: "Delightful mobile app development.", - - // todo: remove when content is ready ignoreDeadLinks: true, cleanUrls: true, themeConfig: { @@ -142,7 +150,11 @@ export default defineConfig({ options: { _render(src, env, md) { if (env.path.includes("archived-docs")) return ""; - return md.render(src, env); + + return md.render( + componentMarkdownUtils.processSearchableVueContent(src), + env + ); }, }, }, diff --git a/.vitepress/theme/components/ComponentList.vue b/.vitepress/theme/components/ComponentList.vue new file mode 100644 index 00000000..21460bd6 --- /dev/null +++ b/.vitepress/theme/components/ComponentList.vue @@ -0,0 +1,16 @@ + + diff --git a/.vitepress/theme/components/ComponentListItem.vue b/.vitepress/theme/components/ComponentListItem.vue new file mode 100644 index 00000000..b3184cd8 --- /dev/null +++ b/.vitepress/theme/components/ComponentListItem.vue @@ -0,0 +1,22 @@ + + + diff --git a/.vitepress/theme/components/match_markdown/H2Title.vue b/.vitepress/theme/components/match_markdown/H2Title.vue new file mode 100644 index 00000000..3e8e43dd --- /dev/null +++ b/.vitepress/theme/components/match_markdown/H2Title.vue @@ -0,0 +1,15 @@ + + diff --git a/.vitepress/theme/components/match_markdown/HeaderAnchorPermanentLink.vue b/.vitepress/theme/components/match_markdown/HeaderAnchorPermanentLink.vue new file mode 100644 index 00000000..e517a16d --- /dev/null +++ b/.vitepress/theme/components/match_markdown/HeaderAnchorPermanentLink.vue @@ -0,0 +1,13 @@ + + diff --git a/.vitepress/theme/data/DataComponents.ts b/.vitepress/theme/data/DataComponents.ts new file mode 100644 index 00000000..038c0f56 --- /dev/null +++ b/.vitepress/theme/data/DataComponents.ts @@ -0,0 +1,260 @@ +const nativescriptUIbaseUrl = "https://docs.nativescript.org/ui"; + +export interface DataComponent { + name: string; + description: string; + url: string; + vModel?: string; + img?: string; +} +export interface SectionComponent { + name: string; + views: DataComponent[]; +} + +export const dataComponents: SectionComponent[] = [ + { + name: "Layout Containers​", + views: [ + { + name: "StackLayout", + description: "Stacks views vertically or horizontally", + url: `${nativescriptUIbaseUrl}/stack-layout`, + img: "https://art.nativescript.org/layouts/wrap_layout_horizontal.svg", + }, + { + name: "GridLayout", + description: "Arranges views in a grid of rows and columns", + url: `${nativescriptUIbaseUrl}/grid-layout`, + img: "https://art.nativescript.org/layouts/grid_layout.svg", + }, + { + name: "RootLayout", + description: "Dynamically positions views relative to parent edges", + url: `/docs/elements/components/root-layout`, + img: "/images/components/root_layout.png", + }, + { + name: "FlexboxLayout", + description: "Layouts views with CSS Flexbox properties", + url: `${nativescriptUIbaseUrl}/flexbox-layout`, + img: "https://art.nativescript.org/layouts/flexbox_layout_row_stretch.svg", + }, + { + name: "WrapLayout", + description: "Wraps views onto multiple lines", + url: `${nativescriptUIbaseUrl}/wrap-layout`, + img: "https://art.nativescript.org/layouts/wrap_layout_horizontal.svg", + }, + { + name: "DockLayout", + description: "Positions views at edges of the container", + url: `${nativescriptUIbaseUrl}/dock-layout`, + img: "https://art.nativescript.org/layouts/dock_layout_stretch.svg", + }, + { + name: "AbsoluteLayout", + description: "Places views at explicit x/y coordinates", + url: `${nativescriptUIbaseUrl}/absolute-layout`, + img: "https://art.nativescript.org/layouts/absolute_layout_grid.svg", + }, + ], + }, + { + name: "Navigation Components​​", + views: [ + { + name: "Frame", + description: "Root container for app navigation", + url: `${nativescriptUIbaseUrl}/frame`, + }, + { + name: "Page", + description: "Represents a single screen", + url: `${nativescriptUIbaseUrl}/page`, + }, + { + name: "ActionBar", + description: "Top app bar for navigation and actions", + url: `${nativescriptUIbaseUrl}/action-bar`, + }, + { + name: "ActionItem", + description: "Item within ActionBar for specific actions", + url: `${nativescriptUIbaseUrl}/action-item`, + }, + { + name: "NavigationButton", + description: "Button for navigation in ActionBar", + url: `${nativescriptUIbaseUrl}/navigation-button`, + }, + ], + }, + { + name: "Dialogs​​​", + views: [ + { + name: "Alert", + description: "Displays an alert message", + url: `${nativescriptUIbaseUrl}/alert`, + img: "/images/components/alert.png", + }, + { + name: "Action", + description: "Shows multiple selectable options", + url: `${nativescriptUIbaseUrl}/action`, + img: "/images/components/action.png", + }, + { + name: "Confirm", + description: "Requests user confirmation", + url: `${nativescriptUIbaseUrl}/confirm`, + img: "/images/components/confirm.png", + }, + { + name: "Prompt", + description: "Requests text input from user", + url: `${nativescriptUIbaseUrl}/prompt`, + img: "/images/components/prompt.png", + }, + { + name: "Login", + description: "Dialog for username/password input", + url: `${nativescriptUIbaseUrl}/login`, + img: "/images/components/login.png", + }, + ], + }, + { + name: "Components​", + views: [ + { + name: "ActivityIndicator", + description: "Shows a loading spinner", + url: `${nativescriptUIbaseUrl}/activity-indicator`, + img: "/images/components/activity_indicator.png", + }, + { + name: "Button", + description: "Touchable button component", + url: `${nativescriptUIbaseUrl}/button`, + img: "/images/components/button.png", + }, + { + name: "DatePicker", + description: "Allows date selection", + vModel: "date", + url: `${nativescriptUIbaseUrl}/date-picker`, + img: "/images/components/date_picker.png", + }, + { + name: "HtmlView", + description: "Renders HTML content", + url: `${nativescriptUIbaseUrl}/html-view`, + img: "/images/components/html_view.png", + }, + { + name: "Image", + description: "Displays an image", + url: `${nativescriptUIbaseUrl}/image`, + img: "/images/components/image.png", + }, + { + name: "Label", + description: "Displays text content", + url: `${nativescriptUIbaseUrl}/label`, + img: "/images/components/label.png", + }, + { + name: "ListPicker", + description: "Dropdown to pick items", + vModel: "selectedIndex", + url: `${nativescriptUIbaseUrl}/list-picker`, + img: "/images/components/list_picker.png", + }, + { + name: "ListView", + description: "Scrollable list of items", + url: `/docs/elements/components/list-view`, + img: "/images/components/list_view.png", + }, + { + name: "Placeholder", + description: "Container for dynamic views", + url: `${nativescriptUIbaseUrl}/placeholder`, + img: "/images/components/placeholder.png", + }, + { + name: "Progress", + description: "Shows progress indicator", + url: `${nativescriptUIbaseUrl}/progress`, + img: "/images/components/progress.png", + }, + { + name: "ScrollView", + description: "Scrollable container for content", + url: `${nativescriptUIbaseUrl}/scroll-view`, + img: "/images/components/scroll_view.png", + }, + { + name: "SearchBar", + description: "Input for search queries", + url: `${nativescriptUIbaseUrl}/search-bar`, + img: "/images/components/search_bar.png", + }, + { + name: "SegmentedBar", + description: "Horizontal bar with segments", + url: `${nativescriptUIbaseUrl}/segmented-bar`, + img: "/images/components/segmented_bar.png", + }, + { + name: "Slider", + description: "Lets users pick a value within range", + vModel: "value", + url: `${nativescriptUIbaseUrl}/slider`, + img: "/images/components/slider.png", + }, + { + name: "Switch", + description: "Toggle switch control", + vModel: "checked", + url: `${nativescriptUIbaseUrl}/switch`, + img: "/images/components/switch.png", + }, + { + name: "TabView", + description: "View with tab-based navigation", + url: `${nativescriptUIbaseUrl}/tab-view`, + img: "/images/components/tab_view.png", + }, + { + name: "TextField", + description: "Single-line text input", + vModel: "text", + url: `${nativescriptUIbaseUrl}/text-field`, + img: "/images/components/text_field.png", + }, + { + name: "TextView", + description: "Multi-line text input", + vModel: "text", + url: `${nativescriptUIbaseUrl}/text-view`, + img: "/images/components/text_view.png", + }, + { + name: "TimePicker", + description: "Allows time selection", + vModel: "time", + url: `${nativescriptUIbaseUrl}/time-picker`, + img: "/images/components/time_picker.png", + }, + { + name: "WebView", + description: "Displays web content", + url: `${nativescriptUIbaseUrl}/web-view`, + img: "/images/components/web_view.png", + }, + ], + }, +]; diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css index 7e2be51e..f24250e8 100644 --- a/.vitepress/theme/style.css +++ b/.vitepress/theme/style.css @@ -1,3 +1,17 @@ +@import "tailwindcss"; +@source './components/*.vue'; +@source '../../content/**/*.md'; +:root { +} +.dark { +} +@theme inline{ + --color-ns: #65adf1; + --color-vue: var(--vp-c-green-1); + --color-bg: var(--vp-c-bg); + --color-divider: var(--vp-c-divider); +} + /** * Customize default theme styling by overriding CSS variables: * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css @@ -136,3 +150,18 @@ .DocSearch { --docsearch-primary-color: var(--vp-c-brand-1) !important; } + +/** + * Custom CSS + * -------------------------------------------------------------------------- */ + +.text-color{ + color: var(--vp-c-text-1) !important; +} + +.vp-doc a[href^="https://www.nativescript.org"], +.vp-doc a[href^="https://nativescript.org"], +.vp-doc a[href^="https://docs.nativescript.org"], +.vp-doc a[href^="https://docs.nativescript.org"] code { + color: var(--color-ns); +} \ No newline at end of file diff --git a/.vitepress/theme/utils/ComponentMarkdownUtils.ts b/.vitepress/theme/utils/ComponentMarkdownUtils.ts new file mode 100644 index 00000000..d3c22137 --- /dev/null +++ b/.vitepress/theme/utils/ComponentMarkdownUtils.ts @@ -0,0 +1,28 @@ +import { dataComponents } from "../data/DataComponents"; + +export const componentMarkdownUtils = { + buildIdMarkdown: (id: string) => { + return id.trim().toLowerCase().replace(/\s/g, "-"); + }, + processSearchableVueContent(src: string) { + if (src.includes("")) { + src = src.replace( + "", + generateSearchableComponents() + ); + } + + return src; + }, +}; + +function generateSearchableComponents() { + let md = ""; + dataComponents.forEach((section) => { + md += `## ${section.name}\n`; + section.views.forEach((view) => { + md += `### ${view.name}\n${view.description}\n`; + }); + }); + return md; +} diff --git a/content/docs/elements/components/list-view.md b/content/docs/elements/components/list-view.md index 59966f65..efe2ad18 100644 --- a/content/docs/elements/components/list-view.md +++ b/content/docs/elements/components/list-view.md @@ -22,10 +22,9 @@ contributors: [MisterBrownRSA, rigor789, eddyverbruggen, ikoevska, vallemar] ``` --- +drawing -drawing - ## Using `` with multiple `