analogjs · brandonroberts · Jul 1, 2024 · Jun 24, 2024 · Jun 30, 2024 · Jun 30, 2024
diff --git a/apps/docs-app/docs/features/routing/content.md b/apps/docs-app/docs/features/routing/content.md
@@ -61,11 +61,31 @@ export const appConfig: ApplicationConfig = {
 
 #### Using the `diff` Highlight Plugin
 
-Analog supports highlighting diff changes with PrismJS. Add the `diff`
-language and `diff-highlight` plugin imports to `app.config.ts`:
+Analog supports highlighting diff changes with PrismJS.
+
+Add the `prism-diff` language to the `additionalLangs` in the `analog` plugin:
+
+```ts
+import { defineConfig } from 'vite';
+import analog from '@analogjs/platform';
+
+export default defineConfig({
+  // ...
+  plugins: [
+    analog({
+      content: {
+        prismOptions: {
+          additionalLangs: ['prism-diff'],
+        },
+      },
+    }),
+  ],
+});
+```
+
+Add the `diff-highlight` plugin import to the `app.config.ts`:
 
 ```ts
-import 'prismjs/components/prism-diff';
 import 'prismjs/plugins/diff-highlight/prism-diff-highlight';
 ```
 

diff --git a/packages/content/package.json b/packages/content/package.json
@@ -24,29 +24,9 @@
     "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "@angular/router": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
     "@nx/devkit": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "front-matter": "^4.0.2",
     "rxjs": "^6.5.0 || ^7.5.0",
-    "marked": ">=5.0.2",
-    "marked-gfm-heading-id": "^3.0.4",
-    "marked-highlight": "^2.0.1",
-    "marked-mangle": "^1.1.7",
-    "marked-shiki": "^1.1.0",
-    "prismjs": "^1.29.0",
-    "shiki": "^1.6.1",
-    "front-matter": "^4.0.2"
-  },
-  "peerDependenciesMeta": {
-    "shiki": {
-      "optional": true
-    },
-    "marked-shiki": {
-      "optional": true
-    },
-    "prismjs": {
-      "optional": true
-    },
-    "marked-highlight": {
-      "optional": true
-    }
+    "prismjs": "^1.29.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

diff --git a/packages/content/prism-highlighter/src/index.ts b/packages/content/prism-highlighter/src/index.ts
@@ -1,6 +1,8 @@
 import { ContentRenderer, NoopContentRenderer } from '@analogjs/content';
 import { Provider } from '@angular/core';
 import 'prismjs';
+import 'prismjs/plugins/toolbar/prism-toolbar.js';
+import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js';
 
 export function withPrismHighlighter(): Provider[] {
   return [{ provide: ContentRenderer, useClass: NoopContentRenderer }];

diff --git a/packages/nx-plugin/src/generators/init/files/vite.config.ts__template__ b/packages/nx-plugin/src/generators/init/files/vite.config.ts__template__
@@ -2,13 +2,16 @@
 
 import { defineConfig } from 'vite';
 import analog from '@analogjs/platform';
+<% if (isNx) { %>
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+<% } else { %>
+import viteTsConfigPaths from 'vite-tsconfig-paths';
+<% } %>
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   return {
     root: __dirname,
-    public: 'src/assets',
     cacheDir: '<%= offsetFromRoot %>node_modules/.vite',
     build: {
       outDir: '<%= offsetFromRoot %>dist/<%= projectRoot %>/client',
@@ -23,7 +26,11 @@ export default defineConfig(({ mode }) => {
           routes: []
         }
       }),
+<% if (isNx) { %>
       nxViteTsPaths(),
+<% } else { %>
+      viteTsConfigPaths(),
+<% } %>
     ],
     server: {
       fs: {

diff --git a/packages/nx-plugin/src/generators/init/generator.ts b/packages/nx-plugin/src/generators/init/generator.ts
@@ -18,6 +18,7 @@ import { updatePackageJson } from './lib/update-package-json';
 import { updateIndex } from './lib/update-index-html';
 import { updateMain } from './lib/update-main';
 import { updateAppTsConfig } from './lib/update-app-tsconfig';
+import { updateGitIgnore } from './lib/update-git-ignore';
 
 function addFiles(tree: Tree, options: SetupAnalogGeneratorSchema) {
   const isNx = tree.read('/nx.json');
@@ -67,6 +68,7 @@ export async function setupAnalogGenerator(
   updatePackageJson(tree, options);
   updateIndex(tree, options);
   updateMain(tree, options);
+  updateGitIgnore(tree);
 
   addFiles(tree, options);
 

diff --git a/packages/nx-plugin/src/generators/init/lib/update-git-ignore.ts b/packages/nx-plugin/src/generators/init/lib/update-git-ignore.ts
@@ -0,0 +1,16 @@
+import { Tree } from '@nx/devkit';
+
+export function updateGitIgnore(tree: Tree) {
+  const gitIgnorePath = '/.gitignore';
+
+  if (tree.exists(gitIgnorePath)) {
+    const gitIgnoreContents = tree.read(gitIgnorePath, 'utf-8');
+
+    if (!gitIgnoreContents.includes('.nx/cache')) {
+      let updatedGitIgnore = `${gitIgnoreContents}\n
+.nx/cache
+.nx/workspace-data`;
+      tree.write(gitIgnorePath, updatedGitIgnore);
+    }
+  }
+}
diff --git a/packages/nx-plugin/src/utils/versions/dependencies.ts b/packages/nx-plugin/src/utils/versions/dependencies.ts
@@ -2,29 +2,49 @@ import { lt } from 'semver';
 import {
   V16_X_ANALOG_JS_CONTENT,
   V16_X_ANALOG_JS_ROUTER,
+  V16_X_MARKED,
+  V16_X_MARKED_GFM_HEADING_ID,
+  V16_X_MARKED_HIGHLIGHT,
   V16_X_NX_ANGULAR,
+  V16_X_PRISMJS,
 } from './ng_16_X/versions';
 import { stripIndents } from '@nx/devkit';
 import {
   V17_X_ANALOG_JS_CONTENT,
   V17_X_ANALOG_JS_ROUTER,
+  V17_X_MARKED,
+  V17_X_MARKED_GFM_HEADING_ID,
+  V17_X_MARKED_HIGHLIGHT,
   V17_X_NX_ANGULAR,
+  V17_X_PRISMJS,
 } from './ng_17_X/versions';
 import {
   V15_X_ANALOG_JS_CONTENT,
   V15_X_ANALOG_JS_ROUTER,
+  V15_X_MARKED,
+  V15_X_MARKED_GFM_HEADING_ID,
+  V15_X_MARKED_HIGHLIGHT,
   V15_X_NX_ANGULAR,
+  V15_X_PRISMJS,
 } from './ng_15_X/versions';
 import {
   V18_X_ANALOG_JS_CONTENT,
   V18_X_ANALOG_JS_ROUTER,
+  V18_X_MARKED,
+  V18_X_MARKED_GFM_HEADING_ID,
+  V18_X_MARKED_HIGHLIGHT,
   V18_X_NX_ANGULAR,
+  V18_X_PRISMJS,
 } from './ng_18_X/versions';
 
 const dependencyKeys = [
   '@analogjs/content',
   '@analogjs/router',
   '@nx/angular',
+  'marked',
+  'marked-gfm-heading-id',
+  'marked-highlight',
+  'prismjs',
 ] as const;
 export type AnalogDependency = (typeof dependencyKeys)[number];
 
@@ -50,6 +70,10 @@ const getDependencies = (escapedAngularVersion: string) => {
       '@analogjs/content': V15_X_ANALOG_JS_CONTENT,
       '@analogjs/router': V15_X_ANALOG_JS_ROUTER,
       '@nx/angular': V15_X_NX_ANGULAR,
+      marked: V15_X_MARKED,
+      'marked-gfm-heading-id': V15_X_MARKED_GFM_HEADING_ID,
+      'marked-highlight': V15_X_MARKED_HIGHLIGHT,
+      prismjs: V15_X_PRISMJS,
     };
   }
 
@@ -59,6 +83,10 @@ const getDependencies = (escapedAngularVersion: string) => {
       '@analogjs/content': V16_X_ANALOG_JS_CONTENT,
       '@analogjs/router': V16_X_ANALOG_JS_ROUTER,
       '@nx/angular': V16_X_NX_ANGULAR,
+      marked: V16_X_MARKED,
+      'marked-gfm-heading-id': V16_X_MARKED_GFM_HEADING_ID,
+      'marked-highlight': V16_X_MARKED_HIGHLIGHT,
+      prismjs: V16_X_PRISMJS,
     };
   }
 
@@ -68,6 +96,10 @@ const getDependencies = (escapedAngularVersion: string) => {
       '@analogjs/content': V17_X_ANALOG_JS_CONTENT,
       '@analogjs/router': V17_X_ANALOG_JS_ROUTER,
       '@nx/angular': V17_X_NX_ANGULAR,
+      marked: V17_X_MARKED,
+      'marked-gfm-heading-id': V17_X_MARKED_GFM_HEADING_ID,
+      'marked-highlight': V17_X_MARKED_HIGHLIGHT,
+      prismjs: V17_X_PRISMJS,
     };
   }
 
@@ -76,5 +108,9 @@ const getDependencies = (escapedAngularVersion: string) => {
     '@analogjs/content': V18_X_ANALOG_JS_CONTENT,
     '@analogjs/router': V18_X_ANALOG_JS_ROUTER,
     '@nx/angular': V18_X_NX_ANGULAR,
+    marked: V18_X_MARKED,
+    'marked-gfm-heading-id': V18_X_MARKED_GFM_HEADING_ID,
+    'marked-highlight': V18_X_MARKED_HIGHLIGHT,
+    prismjs: V18_X_PRISMJS,
   };
 };
diff --git a/packages/nx-plugin/src/utils/versions/ng_15_X/versions.ts b/packages/nx-plugin/src/utils/versions/ng_15_X/versions.ts
@@ -1,6 +1,10 @@
 // V15_X
 export const V15_X_ANALOG_JS_ROUTER = '~1.1.0';
 export const V15_X_ANALOG_JS_CONTENT = '~1.1.0';
+export const V15_X_MARKED = '^5.0.2';
+export const V15_X_MARKED_GFM_HEADING_ID = '^3.0.4';
+export const V15_X_MARKED_HIGHLIGHT = '^2.0.1';
+export const V15_X_PRISMJS = '^1.29.0';
 
 // devDependencies
 export const V15_X_ANALOG_JS_PLATFORM = '^1.5.0';

diff --git a/packages/nx-plugin/src/utils/versions/ng_16_X/versions.ts b/packages/nx-plugin/src/utils/versions/ng_16_X/versions.ts
@@ -1,6 +1,10 @@
 // V16_X
 export const V16_X_ANALOG_JS_ROUTER = '^1.5.0';
 export const V16_X_ANALOG_JS_CONTENT = '^1.5.0';
+export const V16_X_MARKED = '^5.0.2';
+export const V16_X_MARKED_GFM_HEADING_ID = '^3.0.4';
+export const V16_X_MARKED_HIGHLIGHT = '^2.0.1';
+export const V16_X_PRISMJS = '^1.29.0';
 
 // devDependencies
 export const V16_X_ANALOG_JS_PLATFORM = '^1.5.0';

diff --git a/packages/nx-plugin/src/utils/versions/ng_17_X/versions.ts b/packages/nx-plugin/src/utils/versions/ng_17_X/versions.ts
@@ -1,6 +1,10 @@
 // V17_X
 export const V17_X_ANALOG_JS_ROUTER = '^1.5.0';
 export const V17_X_ANALOG_JS_CONTENT = '^1.5.0';
+export const V17_X_MARKED = '^5.0.2';
+export const V17_X_MARKED_GFM_HEADING_ID = '^3.0.4';
+export const V17_X_MARKED_HIGHLIGHT = '^2.0.1';
+export const V17_X_PRISMJS = '^1.29.0';
 
 // devDependencies
 export const V17_X_ANALOG_JS_PLATFORM = '^1.5.0';

diff --git a/packages/nx-plugin/src/utils/versions/ng_18_X/versions.ts b/packages/nx-plugin/src/utils/versions/ng_18_X/versions.ts
@@ -1,6 +1,10 @@
 // V18_X
 export const V18_X_ANALOG_JS_ROUTER = '^1.5.0';
 export const V18_X_ANALOG_JS_CONTENT = '^1.5.0';
+export const V18_X_MARKED = '^5.0.2';
+export const V18_X_MARKED_GFM_HEADING_ID = '^3.0.4';
+export const V18_X_MARKED_HIGHLIGHT = '^2.0.1';
+export const V18_X_PRISMJS = '^1.29.0';
 
 // devDependencies
 export const V18_X_ANALOG_JS_PLATFORM = '^1.5.0';

diff --git a/packages/platform/package.json b/packages/platform/package.json
@@ -31,7 +31,27 @@
   "peerDependencies": {
     "@nx/angular": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "@nx/devkit": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@nx/vite": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@nx/vite": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "marked": ">=5.0.2",
+    "marked-gfm-heading-id": "^3.0.4",
+    "marked-highlight": "^2.0.1",
+    "marked-mangle": "^1.1.7",
+    "marked-shiki": "^1.1.0",
+    "shiki": "^1.6.1"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    },
+    "marked-shiki": {
+      "optional": true
+    },
+    "prismjs": {
+      "optional": true
+    },
+    "marked-highlight": {
+      "optional": true
+    }
   },
   "builders": "./src/lib/nx-plugin/executors.json",
   "executors": "./src/lib/nx-plugin/executors.json",

diff --git a/packages/platform/src/lib/content-plugin.ts b/packages/platform/src/lib/content-plugin.ts
@@ -2,21 +2,32 @@ import { Plugin } from 'vite';
 import { readFileSync } from 'node:fs';
 
 import { WithShikiHighlighterOptions } from './content/shiki/index.js';
-import { MarkedContentHighlighter } from './content/marked-content-highlighter.js';
+import { MarkedContentHighlighter } from './content/marked/marked-content-highlighter.js';
+import { WithPrismHighlighterOptions } from './content/prism/index.js';
+import { WithMarkedOptions } from './content/marked/index.js';
 
 interface Content {
   code: string;
   attributes: string;
 }
 
+export type ContentPluginOptions = {
+  highlighter?: 'shiki' | 'prism';
+  markedOptions?: WithMarkedOptions;
+  shikiOptions?: WithShikiHighlighterOptions;
+  prismOptions?: WithPrismHighlighterOptions;
+};
+
 export function contentPlugin(
   {
     highlighter,
+    markedOptions,
     shikiOptions,
-  }: {
-    highlighter?: 'shiki' | 'prism';
-    shikiOptions?: WithShikiHighlighterOptions;
-  } = { highlighter: 'prism' }
+    prismOptions,
+  }: ContentPluginOptions = {
+    highlighter: 'prism',
+    markedOptions: { mangle: true },
+  }
 ): Plugin[] {
   const cache = new Map<string, Content>();
 
@@ -70,6 +81,26 @@ export function contentPlugin(
             './content/prism/index.js'
           );
           markedHighlighter = getPrismHighlighter();
+
+          const langs = [
+            'bash',
+            'css',
+            'javascript',
+            'json',
+            'markup',
+            'typescript',
+          ];
+
+          if (
+            Array.isArray(prismOptions?.additionalLangs) &&
+            prismOptions?.additionalLangs?.length > 0
+          ) {
+            langs.push(...prismOptions.additionalLangs);
+          }
+
+          const loadLanguages = await import('prismjs/components/index.js');
+
+          (loadLanguages as unknown as { default: Function }).default(langs);
         }
       },
       async load(id) {
@@ -87,9 +118,12 @@ export function contentPlugin(
 
         // parse markdown and highlight
         const { MarkedSetupService } = await import(
-          './content/marked-setup.service.js'
+          './content/marked/marked-setup.service.js'
+        );
+        const markedSetupService = new MarkedSetupService(
+          markedOptions,
+          markedHighlighter
         );
-        const markedSetupService = new MarkedSetupService(markedHighlighter);
         const mdContent = (await markedSetupService
           .getMarkedInstance()
           .parse(body)) as unknown as string;

diff --git a/packages/platform/src/lib/content/marked/index.ts b/packages/platform/src/lib/content/marked/index.ts
@@ -0,0 +1,3 @@
+export type WithMarkedOptions = {
+  mangle?: boolean;
+};
diff --git a/...lib/content/marked-content-highlighter.ts → ...tent/marked/marked-content-highlighter.ts b/...lib/content/marked-content-highlighter.ts → ...tent/marked/marked-content-highlighter.ts