betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/components/shared/sort-order-item.tsx

@@ -0,0 +1,32 @@
+import { Button } from '@admin/components/ui/button'
+import { cn } from '@admin/utils/shared/cn'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical } from 'lucide-react'
+import type { SortOrderItem as SortOrderItemData } from './sort-order-types'
+
+export function SortableItem({ id, label }: SortOrderItemData) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id
+  })
+
+  return (
+    <div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }}>
+      <Button
+        type="button"
+        variant="outline"
+        className={cn(
+          'shrink-0 w-full justify-start gap-2 px-2 font-normal cursor-grab touch-none active:cursor-grabbing',
+          {
+            'opacity-50 z-20': isDragging
+          }
+        )}
+        {...attributes}
+        {...listeners}
+      >
+        <GripVertical strokeWidth={1} />
+        <span className="truncate text-sm">{label}</span>
+      </Button>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/sort-order-types.ts

@@ -0,0 +1,9 @@
+export interface SortOrderItem {
+  id: string
+  label: string
+}
+
+export interface SortOrderPage {
+  items: SortOrderItem[]
+  total: number
+}

package/dist/assets/adapters/next/templates/init/data/navigation.ts

@@ -0,0 +1,43 @@
+import type { AdminNavigationItem } from '@admin/types/navigation'
+import { House, ImagePlay } from 'lucide-react'
+import { postsNav } from './navigation/posts'
+
+export type { AdminNavigationItem } from '@admin/types/navigation'
+
+const coreNav: AdminNavigationItem[] = [
+  {
+    label: 'Overview',
+    href: '/admin',
+    icon: House,
+    position: 0
+  },
+  {
+    label: 'Media',
+    href: '/admin/media',
+    icon: ImagePlay,
+    position: 1
+  }
+]
+
+function comparePositions(a?: number, b?: number): number {
+  if (a != null && b != null) return a - b
+  if (a != null) return -1
+  if (b != null) return 1
+  return 0
+}
+
+const combinedNavigation = [...coreNav, ...postsNav]
+
+const dashboard = combinedNavigation.find((item) => item.href === '/admin')
+const others = combinedNavigation.filter((item) => item.href !== '/admin')
+
+others.sort((a, b) => {
+  if (!a.group && b.group) return -1
+  if (a.group && !b.group) return 1
+  if (a.group && b.group && a.group !== b.group) {
+    return comparePositions(a.groupPosition, b.groupPosition) || a.group.localeCompare(b.group)
+  }
+  return comparePositions(a.position, b.position) || a.label.localeCompare(b.label)
+})
+
+export const adminNavigation = [...(dashboard ? [dashboard] : []), ...others]

package/dist/assets/adapters/next/templates/init/drizzle.config.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { defineConfig } from 'drizzle-kit'
+
+// Load .env.local (avoids @next/env dependency for drizzle-kit)
+for (const envFile of ['.env.local', '.env']) {
+  try {
+    const content = readFileSync(resolve(process.cwd(), envFile), 'utf-8')
+    for (const line of content.split('\n')) {
+      const trimmed = line.trim()
+      if (!trimmed || trimmed.startsWith('#')) continue
+      const eqIdx = trimmed.indexOf('=')
+      if (eqIdx === -1) continue
+      const key = trimmed.slice(0, eqIdx).trim()
+      const val = trimmed
+        .slice(eqIdx + 1)
+        .trim()
+        .replace(/^['"]|['"]$/g, '')
+      if (!process.env[key]) process.env[key] = val
+    }
+  } catch {}
+}
+
+const databaseUrl = process.env.DATABASE_URL
+if (!databaseUrl) {
+  throw new Error('DATABASE_URL is required')
+}
+
+export default defineConfig({
+  out: './admin/lib/db/migrations',
+  schema: './admin/lib/db/schema.ts',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: databaseUrl
+  }
+})

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-blockquote.ts

@@ -0,0 +1,251 @@
+'use client'
+
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- UI Utils ---
+import {
+  findNodePosition,
+  getSelectedBlockNodes,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+  selectionWithinConvertibleTypes
+} from '@admin/utils/editor/tiptap'
+import { NodeSelection, TextSelection } from '@tiptap/pm/state'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import { TextQuoteIcon as BlockquoteIcon } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+export const BLOCKQUOTE_SHORTCUT_KEY = 'mod+shift+b'
+
+/**
+ * Configuration for the blockquote functionality
+ */
+export interface UseBlockquoteConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when blockquote is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful toggle.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Checks if blockquote can be toggled in the current editor state
+ */
+export function canToggleBlockquote(editor: Editor | null, turnInto: boolean = true): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema('blockquote', editor) || isNodeTypeSelected(editor, ['image'])) return false
+
+  if (!turnInto) {
+    return editor.can().toggleWrap('blockquote')
+  }
+
+  // Ensure selection is in nodes we're allowed to convert
+  if (
+    !selectionWithinConvertibleTypes(editor, [
+      'paragraph',
+      'heading',
+      'bulletList',
+      'orderedList',
+      'taskList',
+      'blockquote',
+      'codeBlock'
+    ])
+  )
+    return false
+
+  // Either we can wrap in blockquote directly on the selection,
+  // or we can clear formatting/nodes to arrive at a blockquote.
+  return editor.can().toggleWrap('blockquote') || editor.can().clearNodes()
+}
+
+/**
+ * Toggles blockquote formatting for a specific node or the current selection
+ */
+export function toggleBlockquote(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleBlockquote(editor)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    const blocks = getSelectedBlockNodes(editor)
+
+    // In case a selection contains multiple blocks, we only allow
+    // toggling to nide if there's exactly one block selected
+    // we also dont block the canToggle since it will fall back to the bottom logic
+    const isPossibleToTurnInto =
+      selectionWithinConvertibleTypes(editor, [
+        'paragraph',
+        'heading',
+        'bulletList',
+        'orderedList',
+        'taskList',
+        'blockquote',
+        'codeBlock'
+      ]) && blocks.length === 1
+
+    // No selection, find the the cursor position
+    if (
+      (state.selection.empty || state.selection instanceof TextSelection) &&
+      isPossibleToTurnInto
+    ) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1
+
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1
+
+      const resolvedFrom = state.doc.resolve(from)
+      const resolvedTo = state.doc.resolve(to)
+
+      chain = chain.setTextSelection(TextSelection.between(resolvedFrom, resolvedTo)).clearNodes()
+    }
+
+    const toggle = editor.isActive('blockquote')
+      ? chain.lift('blockquote')
+      : chain.wrapIn('blockquote')
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the blockquote button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!isNodeInSchema('blockquote', editor)) return false
+
+  if (!editor.isActive('code')) {
+    return canToggleBlockquote(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides blockquote functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleBlockquoteButton() {
+ *   const { isVisible, handleToggle, isActive } = useBlockquote()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Blockquote</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedBlockquoteButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useBlockquote({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Blockquote toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Blockquote
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useBlockquote(config?: UseBlockquoteConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggle = canToggleBlockquote(editor)
+  const isActive = editor?.isActive('blockquote') || false
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleBlockquote(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: 'Blockquote',
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: BlockquoteIcon
+  }
+}

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-code-block.ts

@@ -0,0 +1,258 @@
+'use client'
+
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+import {
+  findNodePosition,
+  getSelectedBlockNodes,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+  selectionWithinConvertibleTypes
+} from '@admin/utils/editor/tiptap'
+import { NodeSelection, TextSelection } from '@tiptap/pm/state'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import { SquareCodeIcon as CodeBlockIcon } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+export const CODE_BLOCK_SHORTCUT_KEY = 'mod+alt+c'
+
+/**
+ * Configuration for the code block functionality
+ */
+export interface UseCodeBlockConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when code block is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful code block toggle.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Checks if code block can be toggled in the current editor state
+ */
+export function canToggle(editor: Editor | null, turnInto: boolean = true): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema('codeBlock', editor) || isNodeTypeSelected(editor, ['image'])) return false
+
+  if (!turnInto) {
+    return editor.can().toggleNode('codeBlock', 'paragraph')
+  }
+
+  // Ensure selection is in nodes we're allowed to convert
+  if (
+    !selectionWithinConvertibleTypes(editor, [
+      'paragraph',
+      'heading',
+      'bulletList',
+      'orderedList',
+      'taskList',
+      'blockquote',
+      'codeBlock'
+    ])
+  )
+    return false
+
+  // Either we can toggle code block directly on the selection,
+  // or we can clear formatting/nodes to arrive at a code block.
+  return editor.can().toggleNode('codeBlock', 'paragraph') || editor.can().clearNodes()
+}
+
+/**
+ * Toggles code block in the editor
+ */
+export function toggleCodeBlock(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggle(editor)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    const blocks = getSelectedBlockNodes(editor)
+
+    // In case a selection contains multiple blocks, we only allow
+    // toggling to nide if there's exactly one block selected
+    // we also dont block the canToggle since it will fall back to the bottom logic
+    const isPossibleToTurnInto =
+      selectionWithinConvertibleTypes(editor, [
+        'paragraph',
+        'heading',
+        'bulletList',
+        'orderedList',
+        'taskList',
+        'blockquote',
+        'codeBlock'
+      ]) && blocks.length === 1
+
+    // No selection, find the the cursor position
+    if (
+      (state.selection.empty || state.selection instanceof TextSelection) &&
+      isPossibleToTurnInto
+    ) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1
+
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1
+
+      const resolvedFrom = state.doc.resolve(from)
+      const resolvedTo = state.doc.resolve(to)
+
+      chain = chain.setTextSelection(TextSelection.between(resolvedFrom, resolvedTo)).clearNodes()
+    }
+
+    const toggle = editor.isActive('codeBlock')
+      ? chain.setNode('paragraph')
+      : chain.toggleNode('codeBlock', 'paragraph')
+
+    toggle.run()
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the code block button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!isNodeInSchema('codeBlock', editor)) return false
+
+  if (!editor.isActive('code')) {
+    return canToggle(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides code block functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle } = useCodeBlock()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleToggle}
+ *       aria-pressed={isActive}
+ *     >
+ *       Code Block
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCodeBlockButton() {
+ *   const { isVisible, isActive, handleToggle, label } = useCodeBlock({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: (isActive) => console.log('Code block toggled:', isActive)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Toggle Code Block
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useCodeBlock(config?: UseCodeBlockConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggleState = canToggle(editor)
+  const isActive = editor?.isActive('codeBlock') || false
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleCodeBlock(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: 'Code Block',
+    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: CodeBlockIcon
+  }
+}