Skip to content

Commit

Permalink
feat: preview server configuration and usage (#77)
Browse files Browse the repository at this point in the history
* Loads a preview server config from the editor config file.
* When files are loaded without urls the preview server config is loaded to check if the preview server has a known path for the file.
  • Loading branch information
Zoramite committed Jul 8, 2021
1 parent 797cb74 commit 231ea48
Show file tree
Hide file tree
Showing 9 changed files with 763 additions and 294 deletions.
26 changes: 13 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,36 +53,36 @@
]
},
"devDependencies": {
"@types/async": "^3.2.6",
"@types/async": "^3.2.7",
"@types/bent": "^7.3.2",
"@types/express": "^4.17.12",
"@types/express": "^4.17.13",
"@types/javascript-time-ago": "^2.0.2",
"@types/js-yaml": "^4.0.1",
"@types/js-yaml": "^4.0.2",
"@types/lodash.merge": "^4.6.6",
"@types/marked": "^2.0.3",
"@types/marked": "^2.0.4",
"@types/mime-types": "^2.1.0",
"@types/node": "^15.12.5",
"@types/nunjucks": "^3.1.4",
"@types/quill": "^2.0.8",
"@typescript-eslint/eslint-plugin": "^4.28.1",
"@typescript-eslint/parser": "^4.28.1",
"@types/node": "^16.0.1",
"@types/nunjucks": "^3.1.5",
"@types/quill": "^2.0.9",
"@typescript-eslint/eslint-plugin": "^4.28.2",
"@typescript-eslint/parser": "^4.28.2",
"ava": "^3.14.0",
"codecov": "^3.8.2",
"concurrently": "^6.2.0",
"eslint": "^7.29.0",
"eslint": "^7.30.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-sort-class-members": "^1.11.0",
"express": "^4.17.1",
"gts": "^3.1.0",
"nodemon": "^2.0.7",
"nodemon": "^2.0.9",
"nunjucks": "^3.2.3",
"nyc": "^15.1.0",
"prettier": "^2.3.2",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"typedoc": "^0.21.2",
"typescript": "^4.3.4",
"webpack": "^5.41.0",
"typescript": "^4.3.5",
"webpack": "^5.43.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.8.0"
Expand Down
117 changes: 117 additions & 0 deletions src/ts/editor/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,14 @@ export interface LiveEditorApiComponent {
*/
getFileUrl(file: FileData): Promise<FileData>;

/**
* Retrieve configuration for the preview server.
*/
getPreviewConfig(
settings: EditorPreviewSettings,
workspace: WorkspaceData
): Promise<PreviewSettings>;

/**
* Retrieve information about the project.
*/
Expand Down Expand Up @@ -207,6 +215,10 @@ export interface EditorFileSettings {
* Including custom providers for media upload.
*/
media?: ProjectMediaConfig;
/**
* Settings for previewing the files.
*/
preview?: EditorPreviewSettings;
/**
* Configuration for the site display in the editor.
*/
Expand All @@ -221,13 +233,114 @@ export interface EditorFileSettings {
ui?: EditorUiSettings;
}

export interface EditorPreviewSettings {
/**
* Base url for the preview iframe to use.
*
* All preview urls will use the base url for things like the preview
* iframe, non-remote media urls, etc.
*/
baseUrl: string;
/**
* Url for preview server configuration for the site.
*
* If no route url is provided the editor will use the `baseUrl` and
* search for `${baseUrl}/preview.json`.
*
* Example `preview.json` format (Uses PreviewFileSettings interface):
*
* ```json
* {
* "routes": {
* "/content/pages/index.yaml": {
* "en": {
* "path": "/",
* "title": "Coolest site evar!",
* }
* }
* }
* }
* ```
*/
configUrl?: string;
}

export interface EditorUiSettings {
/**
* Labels for customizing the editor UI.
*/
labels?: LiveEditorLabels;
}

/**
* Interface for the structure of the preview server config.
*
* The editor reads the preview server's configuration to determine
* how to preview content.
*
* The url of the preview server configuration is defined in the
* `EditorFileSettings`.
*/
export interface PreviewSettings {
/**
* Default locale used by the preview server.
*/
defaultLocale: string;
/**
* Route information for the preview server
*/
routes: PreviewRoutesData;
}

/**
* Interface for the structure of the preview routes file.
*
* The editor reads the preview server's routes file to determine
* how to serve a file's preview.
*/
export interface PreviewRoutesData {
/**
* Mapping of path string to the localized or meta data for
* the path contents.
*/
[path: string]: PreviewRoutesLocaleData | PreviewRoutesMetaData;
}

/**
* Interface for the preview server's route localized data.
*
* File contents
*/
export interface PreviewRoutesLocaleData {
/**
* Mapping of a locale to the meta data about the path contents.
*/
[locale: string]: PreviewRoutesMetaData;
}

/**
* Interface for the preview server's route meta data.
*
* Every file in the routes provides information for the editor to use
* in previewing a servable path.
*/
export interface PreviewRoutesMetaData {
/**
* Title for the route resource.
*
* For example, the title of a page if the path is a document.
*/
title?: string;
/**
* Serving path for the servable file.
*
* Should be a relative path from the preview server's `baseUrl` defined
* in the `editor.yaml` (ex: `/images/something.png`)
* or a fully qualified url for serving the file (ex: `https://...`).
*/
path: string;
}

/**
* Device information used for previews.
*/
Expand Down Expand Up @@ -411,6 +524,10 @@ export interface ProjectData {
* to collect for providing to the `publish` method on the api.
*/
publish?: ProjectPublishConfig;
/**
* Settings for previewing the project files.
*/
preview?: EditorPreviewSettings;
/**
* Configuration for the site display.
*/
Expand Down
53 changes: 53 additions & 0 deletions src/ts/editor/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {EditorPreviewSettings, WorkspaceData} from './api';
import {interpolate} from '../utility/stringLiteral';
import {shortenWorkspaceName} from './workspace';

/**
* Uses string literals to convert a preview server url into a full url.
*
* @param settings Editor preview settings.
* @param workspace Workspace to generate the url for.
* @returns Interpolated url for the base preview server.
*/
export function interpolatePreviewBaseUrl(
settings: EditorPreviewSettings,
workspace: WorkspaceData,
params?: Record<string, string>
) {
params = params ?? {
workspace: shortenWorkspaceName(workspace.name),
workspaceFull: workspace.name,
};
return interpolate(params, settings.baseUrl);
}

/**
* Uses string literals to convert a preview server url into a full url.
*
* Specific to for loading the settings config file.
*
* @param settings Editor preview settings.
* @param workspace Workspace to generate the url for.
* @returns Interpolated url for the base preview server.
*/
export function interpolatePreviewConfigUrl(
settings: EditorPreviewSettings,
workspace: WorkspaceData
) {
const params = {
workspace: shortenWorkspaceName(workspace.name),
workspaceFull: workspace.name,
baseUrl: '',
};

params.baseUrl = interpolatePreviewBaseUrl(settings, workspace, params);

if (settings.configUrl) {
return interpolate(params, settings.configUrl);
}

// Default to the `preview.json` file.
return `${params.baseUrl}${
params.baseUrl.endsWith('/') ? '' : '/'
}preview.json`;
}

0 comments on commit 231ea48

Please sign in to comment.