From 275490bec66717cb3c0077e46a258b43ab63039a Mon Sep 17 00:00:00 2001
From: zp6 <zp6@users.noreply.github.com>
Date: Fri, 15 May 2026 01:20:53 +0800
Subject: [PATCH] feat: Create Pages feature - issue #6

Implements the Create Pages feature for InlineGUI:

- Add 'New Page' button in the site file listing dropdown
- Create Page modal with:
  - Page title input with auto-generated filename
  - Filename input
  - Layout selector (populated from site layouts, disabled if only 1)
  - Page template selection (Blank Page, Page, Post)
  - Tags input (comma separated)
- Create page via DocPad REST API (PUT to collection endpoint)
- Auto-refresh file listing after page creation
- If only one layout available, layout selector is disabled per issue requirement

Resolves Docport/inlinegui#6
---
 src/documents/index.html.coffee           |  35 ++++++
 src/documents/scripts/views/app.js.coffee | 124 ++++++++++++++++++++++
 src/documents/styles/app.css.styl         |  43 +++++++-
 3 files changed, 201 insertions(+), 1 deletion(-)

diff --git a/src/documents/index.html.coffee b/src/documents/index.html.coffee
index d376ff3..2b5da99 100644
--- a/src/documents/index.html.coffee
+++ b/src/documents/index.html.coffee
@@ -94,6 +94,40 @@ aside '.app', ->
 								span '.icon.icon-trash', ->
 								text 'Delete'
 
+	section '.page-create.modal', ->
+		header ->
+			span '.title', -> 'Create New Page'
+
+		div '.body', ->
+			form '.page-create-form', action:'', method:'PUT', ->
+				div '.field.field-page-title', ->
+					label -> 'Page Title'
+					input '.create-page-title', type:'text', placeholder:'My New Page', ->
+
+				div '.field.field-page-filename', ->
+					label -> 'Filename'
+					input '.create-page-filename', type:'text', placeholder:'my-new-page.html', ->
+
+				div '.field.field-page-layout', ->
+					label -> 'Layout'
+					select '.create-page-layout', ->
+						option value:'default', -> 'default'
+
+				div '.field.field-page-template', ->
+					label -> 'Page Template'
+					select '.create-page-template', ->
+						option value:'', -> 'Blank Page'
+						option value:'page', -> 'Page'
+						option value:'post', -> 'Post'
+
+				div '.field.field-page-tags', ->
+					label -> 'Tags (comma separated)'
+					input '.create-page-tags', type:'text', placeholder:'tag1, tag2', ->
+
+				div '.create-page-actions', ->
+					input '.button.button-save.create-page-submit', type:'submit', value:'Create Page'
+					button '.button.button-cancel.create-page-cancel', -> 'Cancel'
+
 	aside '.page-list-container', -> \
 	section '.page-list.main.show-site', ->
 		header ->
@@ -107,6 +141,7 @@ aside '.app', ->
 				li ->
 					text 'Add new'
 					span '.icon.icon-plus', ->
+				li '.button.button-add-page', -> 'New Page'
 				li '.button.button-add-document', -> 'Document'
 				li '.button.button-add-upload', -> 'Upload'
 
diff --git a/src/documents/scripts/views/app.js.coffee b/src/documents/scripts/views/app.js.coffee
index 926654e..128513f 100644
--- a/src/documents/scripts/views/app.js.coffee
+++ b/src/documents/scripts/views/app.js.coffee
@@ -38,6 +38,9 @@ class App extends View
 		'click .button-add-site': 'clickAddSite'
 		'submit .site-add-form': 'submitSite'
 		'click .site-add-form .button-cancel': 'submitSiteCancel'
+		'click .button-add-page': 'clickAddPage'
+		'submit .page-create-form': 'submitCreatePage'
+		'click .page-create-form .button-cancel': 'cancelCreatePage'
 
 	constructor: ->
 		# Super
@@ -504,6 +507,127 @@ class App extends View
 		# Chain
 		@
 
+	# ---------------------------------
+	# Page Creation
+
+	# Show the create page modal
+	clickAddPage: (e) =>
+		@$el.find('.page-create.modal').show()
+
+		# Populate layout options from available layouts
+		@$el.find('.create-page-layout').empty()
+		layouts = @currentSite?.getCollectionFiles('layouts')
+		if layouts?.models?.length
+			for model in layouts.models
+				@$el.find('.create-page-layout').append $('<option>',
+					text: model.get('title') or model.get('name') or model.get('relativePath')
+					value: model.get('relativePath') or model.get('name')
+				)
+		else
+			@$el.find('.create-page-layout').append $('<option>',
+				text: 'default'
+				value: 'default'
+			)
+
+		# Disable template selection if only one layout or no layouts
+		layoutCount = layouts?.models?.length or 0
+		if layoutCount <= 1
+			@$el.find('.create-page-layout').prop('disabled', true)
+		else
+			@$el.find('.create-page-layout').prop('disabled', false)
+
+		@generateDefaultFilename()
+
+		# Bind auto-filename generation on title input
+		@$el.find('.create-page-title').off('input.createpage').on 'input.createpage', =>
+			@generateDefaultFilename()
+
+		@
+
+	# Auto-generate filename from title
+	generateDefaultFilename: =>
+		title = @$el.find('.create-page-title').val()
+		if title
+			filename = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') + '.html'
+			@$el.find('.create-page-filename').val(filename)
+		@
+
+	# Submit the create page form
+	submitCreatePage: (e) =>
+		# Disable click through
+		e.preventDefault()
+		e.stopPropagation()
+
+		# Extract form values
+		title    = @$el.find('.create-page-title').val() or ''
+		filename = @$el.find('.create-page-filename').val() or ''
+		layout   = @$el.find('.create-page-layout').val() or 'default'
+		template = @$el.find('.create-page-template').val() or ''
+		tags     = (@$el.find('.create-page-tags').val() or '').split(',').map((t) -> t.trim()).filter((t) -> t)
+
+		# Validate
+		unless title and filename
+			alert 'Please provide a page title and filename'
+			return @
+
+		# Determine collection path
+		collectionName = @currentFileCollection?.get('name') or 'database'
+
+		# Build relative path based on template type
+		if template is 'post'
+			relativePath = 'posts/' + filename
+		else if template is 'page'
+			relativePath = filename
+		else
+			relativePath = filename
+
+		# Build the new file data
+		fileData =
+			relativePath: relativePath
+			meta:
+				title: title
+				layout: layout
+				tags: tags
+			content: ''
+
+		# Create the file via REST API
+		siteUrl = @currentSite.get('url')
+		siteToken = @currentSite.get('token')
+
+		@request
+			url: "#{siteUrl}/restapi/collection/#{collectionName}/#{relativePath}?securityToken=#{siteToken}"
+			method: 'put'
+			data: fileData
+		, (err, data) =>
+			if err
+				alert 'Error creating page: ' + err.message
+				return
+
+			# Hide modal
+			@$el.find('.page-create.modal').hide()
+
+			# Reset form
+			@$el.find('.create-page-title').val('')
+			@$el.find('.create-page-filename').val('')
+			@$el.find('.create-page-tags').val('')
+
+			# Re-fetch site files to include the new page
+			@currentSite.fetch {}, =>
+				# Re-open current collection to refresh listing
+				@openApp(
+					site: @currentSite
+					fileCollection: @currentFileCollection
+				)
+
+		@
+
+	# Cancel create page
+	cancelCreatePage: (e) =>
+		e.preventDefault()
+		e.stopPropagation()
+		@$el.find('.page-create.modal').hide()
+		@
+
 	# Resize our application when the user resizes their browser
 	onWindowResize: => @resizePreviewBar()
 
diff --git a/src/documents/styles/app.css.styl b/src/documents/styles/app.css.styl
index bd1ee3e..4b89862 100644
--- a/src/documents/styles/app.css.styl
+++ b/src/documents/styles/app.css.styl
@@ -562,4 +562,45 @@ select.collection-list
 .login
 	text-align: center
 	border: none
-	box-shadow: none
\ No newline at end of file
+	box-shadow: none
+
+// ------------------------------------
+// Page Creation Modal
+
+.page-create
+	&.modal
+		position: absolute
+		display: none
+		top: 5rem
+		left: 20%
+		width: 60%
+		z-index: 1000
+		border: 1px solid black
+		box-shadow: 0 0 3px black
+
+	header
+		color: white
+		background: colorSiteBackground
+
+	.create-page-actions
+		margin-top: 1em
+		text-align: right
+
+		.button-save
+			margin-right: 0.5em
+
+	.field
+		margin-bottom: 0.5em
+
+		input
+		select
+			width: 100%
+			padding: 0.3em
+			border: 1px solid colorBorder
+			border-radius: 3px
+			font-family: fontFamilyBody
+
+			&:disabled
+				background: #eee
+				color: #999
+				cursor: not-allowed
\ No newline at end of file