WIP: Transform Docs for the new Nex.js site

scripts/transform-nextjs/.gitignore

@@ -0,0 +1 @@
+.yarn

scripts/transform-nextjs/convert-to-mdx.ts

@@ -0,0 +1,18 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+export async function convertMdToMdx(directoryPath: string) {
+  const files = fs.readdirSync(directoryPath);
+
+  files.forEach((file) => {
+    const filePath = path.join(directoryPath, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      convertMdToMdx(filePath);
+    } else if (path.extname(file) === '.md') {
+      const newPath = path.join(directoryPath, path.parse(file).name + '.mdx');
+      fs.renameSync(filePath, newPath);
+    }
+  });
+}

scripts/transform-nextjs/count.ts

@@ -0,0 +1,44 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function countMarkdownFiles(dir: string) {
+  let count = 0;
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      count += countMarkdownFiles(filePath); // Recurse if directory
+    } else if (path.extname(file) === '.md') {
+      count++;
+    }
+  });
+
+  return count;
+}
+
+export function countAssetsFiles(dir: string) {
+  let count = 0;
+  const files = fs.readdirSync(dir);
+
+  files.forEach((file) => {
+    const filePath = path.join(dir, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      count += countMarkdownFiles(filePath); // Recurse if directory
+    } else if (
+      path.extname(file) === '.jpg' ||
+      path.extname(file) === '.png' ||
+      path.extname(file) === '.gif' ||
+      path.extname(file) === '.webp' ||
+      path.extname(file) === '.mp4'
+    ) {
+      count++;
+    }
+  });
+
+  return count;
+}

scripts/transform-nextjs/move-assets.ts

@@ -0,0 +1,36 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function moveMediaFiles(
+  sourceDirectory: string,
+  targetDirectory: string,
+  currentDirectory = sourceDirectory
+) {
+  const files = fs.readdirSync(currentDirectory);
+
+  files.forEach((file) => {
+    const filePath = path.join(currentDirectory, file);
+    const stats = fs.statSync(filePath);
+
+    if (stats.isDirectory()) {
+      moveMediaFiles(sourceDirectory, targetDirectory, filePath);
+    } else {
+      const ext = path.extname(file).toLowerCase();
+      if (['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.mp4'].includes(ext)) {
+        const relativePath = path.relative(sourceDirectory, currentDirectory);
+        let targetPathDirectory = path.join(targetDirectory, relativePath);
+
+        if (targetPathDirectory === `${targetDirectory}/assets`) {
+          targetPathDirectory = `${targetDirectory}/migration-guide`;
+        }
+
+        if (!fs.existsSync(targetPathDirectory)) {
+          fs.mkdirSync(targetPathDirectory, { recursive: true });
+        }
+
+        const targetPath = path.join(targetPathDirectory, file);
+        fs.renameSync(filePath, targetPath);
+      }
+    }
+  });
+}

scripts/transform-nextjs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "transform-nextjs",
+  "version": "1.0.0",
+  "description": "",
+  "author": "Charles de Dreuille",
+  "license": "ISC",
+  "dependencies": {
+    "@mdx-js/mdx": "^3.0.1",
+    "chalk": "^5.3.0",
+    "path": "^0.12.7",
+    "prompts": "^2.4.2",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx": "^3.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
+    "to-vfile": "^8.0.0",
+    "unified": "^11.0.4",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.17"
+  }
+}

scripts/transform-nextjs/remove-files.ts

@@ -0,0 +1,27 @@
+import * as fs from 'fs';
+
+export function removeFiles(docsDir) {
+  const filePath1 = `${docsDir}/frameworks.js`;
+  if (fs.existsSync(filePath1)) fs.unlinkSync(filePath1);
+
+  const filePath2 = `${docsDir}/toc.js`;
+  if (fs.existsSync(filePath2)) fs.unlinkSync(filePath2);
+
+  const folder1 = `${docsDir}/versions`;
+  if (fs.existsSync(folder1))
+    fs.rm(folder1, { recursive: true, force: true }, (error) => {
+      if (error) console.log(error);
+    });
+
+  const folder2 = `${docsDir}/snippets`;
+  if (fs.existsSync(folder2))
+    fs.rm(folder2, { recursive: true, force: true }, (error) => {
+      if (error) console.log(error);
+    });
+
+  const folder3 = `${docsDir}/assets`;
+  if (fs.existsSync(folder3))
+    fs.rm(folder3, { recursive: true, force: true }, (error) => {
+      if (error) console.log(error);
+    });
+}

scripts/transform-nextjs/removeComments.ts

@@ -0,0 +1,40 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function removecomments(directoryPath: string) {
+  fs.readdir(directoryPath, (err, files) => {
+    if (err) {
+      return console.error('Unable to scan directory: ' + err);
+    }
+
+    files.forEach((file) => {
+      const filePath = path.join(directoryPath, file);
+      fs.stat(filePath, (err1, stats) => {
+        if (err1) {
+          console.error('Unable to get file stats: ' + err1);
+          return;
+        }
+
+        if (stats.isDirectory()) {
+          removecomments(filePath);
+        } else {
+          if (path.extname(file) === '.mdx') {
+            fs.readFile(filePath, 'utf8', (err2, data) => {
+              if (err2) {
+                console.error('Unable to read file: ' + err2);
+                return;
+              }
+
+              // This will convert all comments to MDX comments
+              const newData = data.replace(/<!--(.*?)-->/gs, '{/*$1*/}');
+
+              fs.writeFile(filePath, newData, 'utf8', (err3) => {
+                if (err3) throw err3;
+              });
+            });
+          }
+        }
+      });
+    });
+  });
+}

scripts/transform-nextjs/transform-snippets-1.ts

@@ -0,0 +1,134 @@
+import * as fs from 'fs';
+
+type Snippet = {
+  path: string;
+  segments: string[];
+  filename: string;
+  renderer: string;
+  language: string;
+  tabTitle: string | null;
+  firstLine: string;
+  secondLine: string;
+  codeFilename: string | null;
+  newFirstLine: string;
+  content: string;
+  newContent: string;
+};
+
+export const transformSnippets = async (oldSnippetsDir, newSnippetsDir) => {
+  const root = fs.readdirSync(oldSnippetsDir);
+  const snippets: Snippet[] = [];
+
+  // Iterate over each folder in the snippets directory
+  root.forEach((dir) => {
+    const folder = fs.readdirSync(`${oldSnippetsDir}/${dir}`).map((file) => {
+      /**
+       * - example-name.js.mdx
+       * - example-name.npm.js.mdx
+       * - example-name.tab-title.js.mdx (storybook-run-dev.with-builder.js.mdx)
+       * - example-name.tab-title.mdx
+       */
+
+      const segments = file.split('.');
+      const localSegments = [...segments];
+      localSegments.pop(); // Remove the last element (the file extension)
+      localSegments.shift(); // Remove the first element (the filename)
+
+      const tabTitle = null;
+
+      // Find the index for a language in the array
+      const languageIndex = localSegments.findIndex((segment) => {
+        return ['js', 'ts', 'ts-4-9', 'mdx', 'json'].includes(segment);
+      });
+
+      // Language
+      // If no language is found, default to 'ts'
+      const language = localSegments[languageIndex] || 'ts';
+
+      // Find the index for a language in the array
+      const packageManagerIndex = localSegments.findIndex((segment) => {
+        return ['npm', 'yarn', 'pnpm', 'npx'].includes(segment);
+      });
+
+      const packageManager = localSegments[packageManagerIndex] || null;
+
+      // Remove language and package manager from the segments
+      const newSegment = [...localSegments];
+      if (languageIndex !== -1) newSegment.splice(languageIndex, 1);
+      if (packageManagerIndex !== -1) newSegment.splice(packageManagerIndex, 1);
+
+      const content = fs.readFileSync(`${oldSnippetsDir}/${dir}/${file}`, 'utf8');
+
+      // take first line of content
+      const firstLine = content.split('\n')[0];
+      const secondLine = content.split('\n')[1];
+      const codeFilename = secondLine.startsWith('// ') ? secondLine.slice(3) : null;
+
+      // TODO: Check what we need to do when there's more than one tab
+      const newFirstLine = `${firstLine}${
+        codeFilename ? ` filename="${codeFilename}"` : ''
+      } renderer="${dir}" language="${language}"${
+        newSegment.length > 0 ? ` tabTitle="${newSegment.join('-')}"` : ''
+      }${packageManager ? ` packageManager="${packageManager}"` : ''}`;
+
+      // console.log(file);
+      // console.log(segments);
+      // console.log('Newline', newFirstLine);
+
+      // Replace content first line by new first line
+      const newContent = codeFilename
+        ? content
+            .replace(firstLine, newFirstLine)
+            .replace(secondLine + '\n' + '\n', '')
+            .replace(secondLine + '\n', '')
+        : content.replace(firstLine, newFirstLine);
+
+      return {
+        path: file,
+        segments,
+        filename: segments[0],
+        renderer: dir,
+        language,
+        tabTitle,
+        firstLine,
+        secondLine,
+        codeFilename,
+        newFirstLine,
+        content,
+        newContent,
+      };
+    });
+
+    snippets.push(...folder);
+  });
+
+  // Group the snippets by filename
+  const grouped = snippets.reduce<{ [key: string]: Snippet[] }>((acc, obj) => {
+    const key = obj.filename;
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  }, {});
+
+  // Create a new directory for the snippets
+  if (!fs.existsSync(newSnippetsDir)) {
+    fs.mkdirSync(newSnippetsDir, { recursive: true });
+  }
+
+  // Create a new file for each group
+  for (const group in grouped) {
+    let content = '';
+
+    // Iterate over each snippet in the group
+    grouped[group].forEach((snippet) => {
+      content += snippet.newContent + '\n';
+    });
+
+    console.log(group);
+
+    // Write the combined content to a new file
+    fs.writeFileSync(`${newSnippetsDir}/${group}.md`, content, 'utf8');
+  }
+};