diff --git a/.vscode/settings.json b/.vscode/settings.json index 0e60dd2f..e38602d4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -49,5 +49,6 @@ "pcss", "postcss", "svg" - ] + ], + "editor.defaultFormatter": "dbaeumer.vscode-eslint" } diff --git a/README.md b/README.md index 0d9aec66..fff2084e 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,8 @@ A monorepo for Video.js 10 related library packages, organized by platform and runtime environment. --- -### 🚧 Note to new viewers 🚧 +### 🚧 Note to new viewers 🚧 \[90s under-construction gif\] @@ -12,17 +12,17 @@ Thanks for checking out the project! It's in its early stages and currently a mi #### Get up to speed -* Read the [v10 discussion topic](https://github.com/videojs/video.js/discussions/9035) -* Watch [Heff's recent presentation](https://players.brightcove.net/3737230800001/eyILA5XG7K_default/index.html?videoId=6379311036112) -* More roadmap and architecture docs to come... +- Read the [v10 discussion topic](https://github.com/videojs/video.js/discussions/9035) +- Watch [Heff's recent presentation](https://players.brightcove.net/3737230800001/eyILA5XG7K_default/index.html?videoId=6379311036112) +- More roadmap and architecture docs to come... #### How you can help currently -* Run the React and HTML demos -* Give us feedback in a github issue on: - * The aesthetics of the player(s) - * The initial embed code and component structure - * The general direction +- Run the React and HTML demos +- Give us feedback in a github issue on: + - The aesthetics of the player(s) + - The initial embed code and component structure + - The general direction Thank you! diff --git a/cspell.json b/cspell.json index a83aeef3..bedffbce 100644 --- a/cspell.json +++ b/cspell.json @@ -1,24 +1,9 @@ { "version": "0.2", - "ignorePaths": [ - "package.json", - "tsconfig.json" - ], + "ignorePaths": ["package.json", "tsconfig.json"], "dictionaryDefinitions": [], - "dictionaries": [ - "css", - "html", - "node", - "typescript", - "npm" - ], - "words": [ - "antfu", - "noto", - "nums", - "rahim", - "segoe" - ], + "dictionaries": ["css", "html", "node", "typescript", "npm"], + "words": ["antfu", "noto", "nums", "rahim", "segoe"], "ignoreWords": [], "import": [] } diff --git a/eslint.config.mjs b/eslint.config.mjs index a1ae7eca..d718c108 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,39 +1,43 @@ import antfu from '@antfu/eslint-config'; + import jsxA11y from 'eslint-plugin-jsx-a11y'; -export default antfu({ - react: true, - typescript: true, - formatters: { - css: true, - html: true, - markdown: 'prettier', - svg: 'prettier', +export default antfu( + { + react: true, + typescript: true, + formatters: { + css: true, + html: true, + markdown: 'prettier', + svg: 'prettier', + }, + stylistic: { + semi: true, + spacedComment: true, + indent: 2, + quotes: 'single', + }, + // Many are ignored by default. + // https://github.com/antfu/eslint-config/blob/main/src/globs.ts#L56 + ignores: ['**/.astro/'], + plugins: { + 'jsx-a11y': jsxA11y, + }, + rules: { + // Allow single line bracing. + 'antfu/if-newline': 'off', + 'style/brace-style': ['error', '1tbs', { allowSingleLine: true }], + // Only quote props when necessary. + 'style/quote-props': ['error', 'as-needed'], + // JSX A11Y plugin rules + ...jsxA11y.configs.recommended.rules, + }, }, - stylistic: { - semi: true, - spacedComment: true, - indent: 2, - quotes: 'single', + { + files: ['**/*.md'], + rules: { + 'style/max-len': 'off', + }, }, - // Many are ignored by default. - // https://github.com/antfu/eslint-config/blob/main/src/globs.ts#L56 - ignores: ['**/.astro/'], - plugins: { - 'jsx-a11y': jsxA11y, - }, - rules: { - // Allow single line bracing. - 'antfu/if-newline': 'off', - 'style/brace-style': ['error', '1tbs', { allowSingleLine: true }], - // Only quote props when necessary. - 'style/quote-props': ['error', 'as-needed'], - // JSX A11Y plugin rules - ...jsxA11y.configs.recommended.rules, - }, -}, { - files: ['**/*.md'], - rules: { - 'style/max-len': 'off', - }, -}); +); diff --git a/examples/react-demo/src/App.tsx b/examples/react-demo/src/App.tsx index 934dd9a3..5f5c7064 100644 --- a/examples/react-demo/src/App.tsx +++ b/examples/react-demo/src/App.tsx @@ -1,44 +1,54 @@ import type { ChangeEventHandler } from 'react'; import { MediaProvider, MediaSkinDefault, MediaSkinToasted, Video } from '@vjs-10/react'; + import { useCallback, useMemo, useState } from 'react'; + import './globals.css'; -const skins = [{ - key: 'default', - name: 'Frosted', - component: MediaSkinDefault, -}, { - key: 'toasted', - name: 'Toasted', - component: MediaSkinToasted, -}] as const; +const skins = [ + { + key: 'default', + name: 'Frosted', + component: MediaSkinDefault, + }, + { + key: 'toasted', + name: 'Toasted', + component: MediaSkinToasted, + }, +] as const; type SkinKey = (typeof skins)[number]['key']; -const mediaSources = [{ - key: '1', - name: 'Mux 1', - value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8', -}, { - key: '2', - name: 'Mux 2', - value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8', -}, { - key: '3', - name: 'Mux 3', - value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4', -}, { - key: '4', - name: 'Mux 4', - value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8', -}] as const; +const mediaSources = [ + { + key: '1', + name: 'Mux 1', + value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8', + }, + { + key: '2', + name: 'Mux 2', + value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8', + }, + { + key: '3', + name: 'Mux 3', + value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4', + }, + { + key: '4', + name: 'Mux 4', + value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8', + }, +] as const; type MediaSourceKey = (typeof mediaSources)[number]['key']; function getParam(key: string, defaultValue: T): T { const params = new URLSearchParams(window.location.search); - return params.get(key) as T || defaultValue; + return (params.get(key) as T) || defaultValue; } function setParam(key: string, value: string) { const params = new URLSearchParams(window.location.search); diff --git a/examples/react-demo/src/main.tsx b/examples/react-demo/src/main.tsx index 30c39a5e..ed3872fe 100644 --- a/examples/react-demo/src/main.tsx +++ b/examples/react-demo/src/main.tsx @@ -1,6 +1,8 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; + import App from './App'; + import './globals.css'; createRoot(document.getElementById('root')!).render( diff --git a/package.json b/package.json index ccca703a..a658d9f1 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,6 @@ "dev:website": "turbo run dev --filter=website", "dev": "turbo run dev --parallel", "generate:icons": "turbo run generate:icons", - "format:check": "prettier . --check --log-level warn --cache", - "format": "prettier . --write --log-level warn --cache", "lint": "eslint . --cache", "lint:fix": "eslint . --fix --cache", "test": "turbo run test", diff --git a/packages/core/core/src/components/slider.ts b/packages/core/core/src/components/slider.ts index fb797323..610458bb 100644 --- a/packages/core/core/src/components/slider.ts +++ b/packages/core/core/src/components/slider.ts @@ -122,7 +122,10 @@ export class Slider { } } -export interface Point { x: number; y: number } +export interface Point { + x: number; + y: number; +} /** * Get progress ratio of a point on a line segment. diff --git a/packages/html/html/src/components/media-popover.ts b/packages/html/html/src/components/media-popover.ts index 7c9de460..eb915247 100644 --- a/packages/html/html/src/components/media-popover.ts +++ b/packages/html/html/src/components/media-popover.ts @@ -1,6 +1,7 @@ import type { Placement } from '@floating-ui/dom'; import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'; + import { uniqueId } from '../utils/element-utils'; export class MediaPopoverRoot extends HTMLElement { diff --git a/packages/html/html/src/components/media-time-slider.ts b/packages/html/html/src/components/media-time-slider.ts index ee7f3e2b..f572d83a 100644 --- a/packages/html/html/src/components/media-time-slider.ts +++ b/packages/html/html/src/components/media-time-slider.ts @@ -60,7 +60,7 @@ export class TimeSliderRootBase extends HTMLElement { } get orientation(): 'horizontal' | 'vertical' { - return this.getAttribute('orientation') as 'horizontal' | 'vertical' || 'horizontal'; + return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal'; } attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void { diff --git a/packages/html/html/src/components/media-tooltip.ts b/packages/html/html/src/components/media-tooltip.ts index d815c199..d72e2374 100644 --- a/packages/html/html/src/components/media-tooltip.ts +++ b/packages/html/html/src/components/media-tooltip.ts @@ -2,6 +2,7 @@ import type { Placement } from '@floating-ui/dom'; import type { MediaContainer } from '@/media-container'; import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'; + import { uniqueId } from '../utils/element-utils'; export class MediaTooltipRoot extends HTMLElement { diff --git a/packages/html/html/src/components/media-volume-slider.ts b/packages/html/html/src/components/media-volume-slider.ts index 9fd4364a..029a36d3 100644 --- a/packages/html/html/src/components/media-volume-slider.ts +++ b/packages/html/html/src/components/media-volume-slider.ts @@ -62,7 +62,7 @@ export class VolumeSliderRootBase extends HTMLElement { } get orientation(): 'horizontal' | 'vertical' { - return this.getAttribute('orientation') as 'horizontal' | 'vertical' || 'horizontal'; + return (this.getAttribute('orientation') as 'horizontal' | 'vertical') || 'horizontal'; } attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void { diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts index e3c9c844..aa6a51f1 100644 --- a/packages/html/html/src/skins/media-skin-default.ts +++ b/packages/html/html/src/skins/media-skin-default.ts @@ -1,6 +1,6 @@ import { MediaSkin } from '../media-skin'; - import { uniqueId } from '../utils/element-utils'; + import '../media-container'; import '../components/media-play-button'; import '../components/media-mute-button'; diff --git a/packages/html/html/src/utils/component-factory.ts b/packages/html/html/src/utils/component-factory.ts index 8b7b51b8..90be74e6 100644 --- a/packages/html/html/src/utils/component-factory.ts +++ b/packages/html/html/src/utils/component-factory.ts @@ -26,7 +26,12 @@ export interface ConnectedComponentConstructor { * @param displayName - Display name for debugging * @returns Connected custom element class with media store integration */ -export function toConnectedHTMLComponent(BaseClass: CustomElementConstructor, stateHook: StateHook, propsHook: PropsHook, displayName?: string): ConnectedComponentConstructor { +export function toConnectedHTMLComponent( + BaseClass: CustomElementConstructor, + stateHook: StateHook, + propsHook: PropsHook, + displayName?: string, +): ConnectedComponentConstructor { const ConnectedComponent = class extends ConsumerMixin(BaseClass) { static get observedAttributes(): string[] { return [ diff --git a/packages/react/react-icons/package.json b/packages/react/react-icons/package.json index 5326d0b0..d940c57d 100644 --- a/packages/react/react-icons/package.json +++ b/packages/react/react-icons/package.json @@ -28,7 +28,7 @@ "build:watch": "tsdown --watch --silent", "dev": "pnpm generate:icons && pnpm run build:watch", "clean": "rm -rf dist src/generated-icons", - "format:icons": "prettier src/generated-icons --write --log-level warn --cache", + "format:icons": "echo noop. Need to replace based on eslint vs. prettier decisions!", "generate:icons": "svgr --config-file svgr.config.js --out-dir src/generated-icons ../../core/icons/assets && pnpm format:icons", "test": "echo \"No tests yet\"" }, diff --git a/packages/react/react-media-store/src/MediaProvider.tsx b/packages/react/react-media-store/src/MediaProvider.tsx index 36c70c22..40cc4275 100644 --- a/packages/react/react-media-store/src/MediaProvider.tsx +++ b/packages/react/react-media-store/src/MediaProvider.tsx @@ -46,7 +46,7 @@ export function useMediaStore(): MediaStore { return useContext(MediaContext); } -export function useMediaDispatch(): ((value: any) => unknown) { +export function useMediaDispatch(): (value: any) => unknown { const store = useContext(MediaContext); const dispatch = store?.dispatch ?? identity; return (value: any) => { @@ -118,7 +118,10 @@ export function shallowEqual(objA: any, objB: any): boolean { return true; } -export function useMediaSelector(selector: (state: any) => S, equalityFn: (a: S, b: S) => boolean = refEquality): S { +export function useMediaSelector( + selector: (state: any) => S, + equalityFn: (a: S, b: S) => boolean = refEquality, +): S { const store = useContext(MediaContext); const selectedState = useSyncExternalStoreWithSelector( store?.subscribe ?? identity, diff --git a/packages/react/react/src/components/CurrentTimeDisplay.tsx b/packages/react/react/src/components/CurrentTimeDisplay.tsx index 49f5113c..ee89f588 100644 --- a/packages/react/react/src/components/CurrentTimeDisplay.tsx +++ b/packages/react/react/src/components/CurrentTimeDisplay.tsx @@ -23,7 +23,10 @@ export function useCurrentTimeDisplayState(_props: any): { export type useCurrentTimeDisplayState = typeof useCurrentTimeDisplayState; export type CurrentTimeDisplayState = ReturnType; -export function useCurrentTimeDisplayProps(props: PropsWithChildren, _state: ReturnType): PropsWithChildren> { +export function useCurrentTimeDisplayProps( + props: PropsWithChildren, + _state: ReturnType, +): PropsWithChildren> { const baseProps: Record = { /** external props spread last to allow for overriding */ ...props, diff --git a/packages/react/react/src/components/FullscreenButton.tsx b/packages/react/react/src/components/FullscreenButton.tsx index f24a0a31..a1ca6699 100644 --- a/packages/react/react/src/components/FullscreenButton.tsx +++ b/packages/react/react/src/components/FullscreenButton.tsx @@ -32,7 +32,10 @@ export function useFullscreenButtonState(_props: any): { export type useFullscreenButtonState = typeof useFullscreenButtonState; export type FullscreenButtonState = ReturnType; -export function useFullscreenButtonProps(props: PropsWithChildren, state: ReturnType): PropsWithChildren> { +export function useFullscreenButtonProps( + props: PropsWithChildren, + state: ReturnType, +): PropsWithChildren> { const baseProps: Record = { /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ diff --git a/packages/react/react/src/components/MediaContainer.tsx b/packages/react/react/src/components/MediaContainer.tsx index 2f8d70d2..3e55dad2 100644 --- a/packages/react/react/src/components/MediaContainer.tsx +++ b/packages/react/react/src/components/MediaContainer.tsx @@ -52,12 +52,14 @@ export function useMediaContainerRef(): RefCallback { * * ); */ -export const MediaContainer: FC>> = forwardRef(({ children, ...props }, ref) => { - const containerRef = useMediaContainerRef(); - const composedRef = useComposedRefs(ref, containerRef); - return ( -
- {children} -
- ); -}); +export const MediaContainer: FC>> = forwardRef( + ({ children, ...props }, ref) => { + const containerRef = useMediaContainerRef(); + const composedRef = useComposedRefs(ref, containerRef); + return ( +
+ {children} +
+ ); + }, +); diff --git a/packages/react/react/src/components/MuteButton.tsx b/packages/react/react/src/components/MuteButton.tsx index c824cd9e..5e9d5772 100644 --- a/packages/react/react/src/components/MuteButton.tsx +++ b/packages/react/react/src/components/MuteButton.tsx @@ -32,7 +32,10 @@ export function useMuteButtonState(_props: any): { export type useMuteButtonState = typeof useMuteButtonState; export type MuteButtonState = ReturnType; -export function useMuteButtonProps(props: PropsWithChildren, state: ReturnType): PropsWithChildren> { +export function useMuteButtonProps( + props: PropsWithChildren, + state: ReturnType, +): PropsWithChildren> { const baseProps: Record = { /** data attributes/props - non-boolean */ 'data-volume-level': state.volumeLevel, diff --git a/packages/react/react/src/components/PlayButton.tsx b/packages/react/react/src/components/PlayButton.tsx index 2ac7388e..937a1b3b 100644 --- a/packages/react/react/src/components/PlayButton.tsx +++ b/packages/react/react/src/components/PlayButton.tsx @@ -30,7 +30,10 @@ export function usePlayButtonState(_props: any): { export type usePlayButtonState = typeof usePlayButtonState; export type PlayButtonState = ReturnType; -export function usePlayButtonProps(props: Record, state: ReturnType): PropsWithChildren> { +export function usePlayButtonProps( + props: Record, + state: ReturnType, +): PropsWithChildren> { const baseProps: Record = { /** @TODO Need another state provider in core for i18n (CJP) */ /** aria attributes/props */ diff --git a/packages/react/react/src/components/Popover.tsx b/packages/react/react/src/components/Popover.tsx index 772c6af8..5584689a 100644 --- a/packages/react/react/src/components/Popover.tsx +++ b/packages/react/react/src/components/Popover.tsx @@ -150,7 +150,11 @@ function PopoverPopup({ className, children }: PopoverPopupProps): JSX.Element { } function PopoverPortal({ children, root, rootId }: PopoverPortalProps): JSX.Element { - return {children}; + return ( + + {children} + + ); } // Export compound component diff --git a/packages/react/react/src/components/Tooltip.tsx b/packages/react/react/src/components/Tooltip.tsx index 66c3d447..2314f63f 100644 --- a/packages/react/react/src/components/Tooltip.tsx +++ b/packages/react/react/src/components/Tooltip.tsx @@ -156,7 +156,12 @@ function TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element { }); } -function TooltipPositioner({ side = 'top', sideOffset = 0, collisionPadding = 0, children }: TooltipPositionerProps): JSX.Element | null { +function TooltipPositioner({ + side = 'top', + sideOffset = 0, + collisionPadding = 0, + children, +}: TooltipPositionerProps): JSX.Element | null { const { context, updatePositioning } = useTooltipContext(); const { refs, floatingStyles } = context; @@ -232,7 +237,11 @@ function TooltipArrow({ className = '', children }: TooltipArrowProps): JSX.Elem } function TooltipPortal({ children, root, rootId }: TooltipPortalProps): JSX.Element { - return {children}; + return ( + + {children} + + ); } // Export compound component diff --git a/packages/react/react/src/skins/default/MediaSkinDefault.tsx b/packages/react/react/src/skins/default/MediaSkinDefault.tsx index f19923dc..ce0e9b16 100644 --- a/packages/react/react/src/skins/default/MediaSkinDefault.tsx +++ b/packages/react/react/src/skins/default/MediaSkinDefault.tsx @@ -9,6 +9,7 @@ import { VolumeLowIcon, VolumeOffIcon, } from '@vjs-10/react-icons'; + import { useId } from 'react'; import { CurrentTimeDisplay } from '../../components/CurrentTimeDisplay'; diff --git a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx index 659c2fa7..036a8e2d 100644 --- a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx +++ b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx @@ -11,6 +11,7 @@ import { } from '@vjs-10/react-icons'; import { CurrentTimeDisplay } from '../../components/CurrentTimeDisplay'; + import { DurationDisplay } from '../../components/DurationDisplay'; import { FullscreenButton } from '../../components/FullscreenButton'; import { MediaContainer } from '../../components/MediaContainer'; @@ -69,4 +70,4 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps ); -}; +} diff --git a/packages/react/react/src/skins/toasted/styles.ts b/packages/react/react/src/skins/toasted/styles.ts index 3b74945c..c6e5bebd 100644 --- a/packages/react/react/src/skins/toasted/styles.ts +++ b/packages/react/react/src/skins/toasted/styles.ts @@ -1,4 +1,5 @@ import type { MediaToastedSkinStyles } from './types'; + import { cn } from '../../utils/cn'; const styles: MediaToastedSkinStyles = { diff --git a/packages/react/react/src/utils/component-factory.tsx b/packages/react/react/src/utils/component-factory.tsx index c8d94fd1..e442b9c3 100644 --- a/packages/react/react/src/utils/component-factory.tsx +++ b/packages/react/react/src/utils/component-factory.tsx @@ -28,7 +28,12 @@ export function toConnectedComponent< TState, TResultProps extends Record, TRenderFn extends RenderFn, ->(useStateHook: StateHookFn, usePropsHook: PropsHookFn, defaultRender: TRenderFn, displayName: string): ConnectedComponent { +>( + useStateHook: StateHookFn, + usePropsHook: PropsHookFn, + defaultRender: TRenderFn, + displayName: string, +): ConnectedComponent { const ConnectedComponent = forwardRef( ({ render = defaultRender, ...props }, ref) => { const connectedState = useStateHook(props as TProps); @@ -64,7 +69,11 @@ export function toContextComponent< TProps extends Record, TResultProps extends Record, TRenderFn extends (props: TResultProps, context: any) => ReactElement, ->(usePropsHook: (props: TProps, context: any) => TResultProps, defaultRender: TRenderFn, displayName: string): ContextComponent { +>( + usePropsHook: (props: TProps, context: any) => TResultProps, + defaultRender: TRenderFn, + displayName: string, +): ContextComponent { const ContextComponent = forwardRef( ({ render = defaultRender, ...props }, ref) => { const context = useContext(Context); diff --git a/website/README.md b/website/README.md index 991a5312..edd66cfe 100644 --- a/website/README.md +++ b/website/README.md @@ -134,13 +134,9 @@ Documentation pages can be restricted to specific frameworks or styles: **Within MDX content** (using conditional components): ```mdx - - This content only appears in React docs. - +This content only appears in React docs. - - This content only appears when Tailwind is selected. - +This content only appears when Tailwind is selected. ``` ##### Static Site Generation diff --git a/website/src/content.config.ts b/website/src/content.config.ts index cc6b567b..67eada8a 100644 --- a/website/src/content.config.ts +++ b/website/src/content.config.ts @@ -1,6 +1,7 @@ import { file } from 'astro/loaders'; import { defineCollection, reference, z } from 'astro:content'; import { simpleGit } from 'simple-git'; + import { globWithParser } from './utils/globWithParser'; const git = simpleGit(); @@ -12,9 +13,7 @@ const git = simpleGit(); function extractDateFromFilename(id: string): Date { const match = id.match(/^(\d{4})-(\d{2})-(\d{2})-/); if (!match) { - throw new Error( - `Filename "${id}" must follow format: YYYY-MM-DD-slug.{md,mdx}`, - ); + throw new Error(`Filename "${id}" must follow format: YYYY-MM-DD-slug.{md,mdx}`); } const [, year, month, day] = match; @@ -59,10 +58,7 @@ const blog = defineCollection({ data: { ...entry.data, pubDate, - ...(updatedDate - && updatedDate.getTime() !== pubDate.getTime() - ? { updatedDate } - : {}), + ...(updatedDate && updatedDate.getTime() !== pubDate.getTime() ? { updatedDate } : {}), }, }; }, diff --git a/website/src/pages/rss.xml.js b/website/src/pages/rss.xml.js index 5ac61bf8..8ba3133c 100644 --- a/website/src/pages/rss.xml.js +++ b/website/src/pages/rss.xml.js @@ -1,4 +1,5 @@ import rss from '@astrojs/rss'; + import { getCollection } from 'astro:content'; import { SITE_DESCRIPTION, SITE_TITLE } from '@/consts'; diff --git a/website/src/types/docs.ts b/website/src/types/docs.ts index 3b084184..4adc2e9f 100644 --- a/website/src/types/docs.ts +++ b/website/src/types/docs.ts @@ -3,30 +3,23 @@ export const FRAMEWORK_STYLES = { react: ['css', 'tailwind', 'styled-components'], } as const; -export const SUPPORTED_FRAMEWORKS = Object.keys( - FRAMEWORK_STYLES, -) as (keyof typeof FRAMEWORK_STYLES)[]; +export const SUPPORTED_FRAMEWORKS = Object.keys(FRAMEWORK_STYLES) as (keyof typeof FRAMEWORK_STYLES)[]; export type SupportedFramework = keyof typeof FRAMEWORK_STYLES; -export type SupportedStyle - = (typeof FRAMEWORK_STYLES)[F][number]; +export type SupportedStyle = (typeof FRAMEWORK_STYLES)[F][number]; export type AnySupportedStyle = SupportedStyle; /** * Get the available styles for a given framework */ -export function getAvailableStyles( - framework: F, -): readonly SupportedStyle[] { +export function getAvailableStyles(framework: F): readonly SupportedStyle[] { return FRAMEWORK_STYLES[framework]; } /** * Get the default style for a given framework (first available style) */ -export function getDefaultStyle( - framework: F, -): SupportedStyle { +export function getDefaultStyle(framework: F): SupportedStyle { return FRAMEWORK_STYLES[framework][0]; } diff --git a/website/src/utils/docs/redirects.ts b/website/src/utils/docs/redirects.ts index 3977f619..b50417ca 100644 --- a/website/src/utils/docs/redirects.ts +++ b/website/src/utils/docs/redirects.ts @@ -1,4 +1,5 @@ import type { SupportedFramework, SupportedStyle } from '@/types/docs'; + import { findFirstGuide } from '@/utils/docs/sidebar'; /** @@ -11,16 +12,11 @@ import { findFirstGuide } from '@/utils/docs/sidebar'; * @returns The full docs URL to redirect to * @throws Error if no guide is available for the given framework/style */ -export function getDocsRedirectUrl( - framework: F, - style: SupportedStyle, -): string { +export function getDocsRedirectUrl(framework: F, style: SupportedStyle): string { const firstGuide = findFirstGuide(framework, style); if (!firstGuide) { - throw new Error( - `No guide available for framework "${framework}" and style "${style}"`, - ); + throw new Error(`No guide available for framework "${framework}" and style "${style}"`); } return `/docs/framework/${framework}/style/${style}/${firstGuide}/`; diff --git a/website/src/utils/docs/sidebar.ts b/website/src/utils/docs/sidebar.ts index 1e2625e2..f87456c7 100644 --- a/website/src/utils/docs/sidebar.ts +++ b/website/src/utils/docs/sidebar.ts @@ -1,12 +1,7 @@ import type { AnySupportedStyle, Guide, Section, Sidebar, SupportedFramework, SupportedStyle } from '@/types/docs'; + import { sidebar } from '@/config/docs/sidebar'; -import { - - getAvailableStyles, - - isSection, - -} from '@/types/docs'; +import { getAvailableStyles, isSection } from '@/types/docs'; /** * Check if an item (Guide or Section) should be shown based on framework and style. @@ -18,13 +13,8 @@ import { * @param style - The currently selected style * @returns true if the item should be visible */ -function isItemVisible( - item: Guide | Section, - framework: SupportedFramework, - style: AnySupportedStyle, -): boolean { - const frameworkMatch - = !item.frameworks || item.frameworks.includes(framework); +function isItemVisible(item: Guide | Section, framework: SupportedFramework, style: AnySupportedStyle): boolean { + const frameworkMatch = !item.frameworks || item.frameworks.includes(framework); const styleMatch = !item.styles || item.styles.includes(style); return frameworkMatch && styleMatch; } @@ -133,10 +123,7 @@ export function getAllGuideSlugs(sidebarToExtract: Sidebar = sidebar): string[] * @param sidebarToSearch - Optional sidebar to search (defaults to main sidebar config) * @returns The guide object if found, null otherwise */ -export function findGuideBySlug( - slug: string, - sidebarToSearch: Sidebar = sidebar, -): Guide | null { +export function findGuideBySlug(slug: string, sidebarToSearch: Sidebar = sidebar): Guide | null { for (const item of sidebarToSearch) { if (isSection(item)) { // Recursively search section contents diff --git a/website/src/utils/globWithParser.ts b/website/src/utils/globWithParser.ts index 46a01918..e1d64ff6 100644 --- a/website/src/utils/globWithParser.ts +++ b/website/src/utils/globWithParser.ts @@ -1,4 +1,5 @@ import type { ParseDataOptions } from 'astro/loaders'; + import { glob } from 'astro/loaders'; /** @@ -7,7 +8,7 @@ import { glob } from 'astro/loaders'; */ type Parser = >( options: ParseDataOptions, - originalEntry: string, + originalEntry: string ) => Promise>; type GlobWithParserOptions = Parameters[0] & { @@ -36,11 +37,7 @@ type GlobWithParserOptions = Parameters[0] & { * }) * ``` */ -export function globWithParser({ - parser, - generateId, - ...globOptions -}: GlobWithParserOptions) { +export function globWithParser({ parser, generateId, ...globOptions }: GlobWithParserOptions) { /** * Store mapping of transformed IDs to original entry filenames. * Created per-invocation to avoid memory leaks across builds. diff --git a/website/tsconfig.json b/website/tsconfig.json index edc88521..73ac9303 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -9,11 +9,6 @@ }, "strictNullChecks": true }, - "include": [ - ".astro/types.d.ts", - "**/*" - ], - "exclude": [ - "dist" - ] + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] }