gitlab file support

src/utils/preview.ts

@@ -1,8 +1,10 @@
 import { goto } from '$app/navigation'
+import { resourceType } from '../constants/resources'
 import { proxyFetch } from './fetch'
 import { processCSS } from './lang/css'
 import { isHTML, processHTML, type HTMLPageData } from './lang/html'
 import logger from './logger'
+import { getResourceType, getPossibleUrls, processUrl } from './url'
 
 export class Preview {
   // Parent
@@ -33,35 +35,25 @@ export class Preview {
   }
 
   async render(url: string) {
-    // Check for source uri string, which follows several different cases.
-    let processedURL = url
-
-    if (url.includes('.html')) {
-      // TODO - move URL utils to a separate file
-      // The user has provided us with an index.html file.
-      // Simply return this same URL, as it is our source.
-      processedURL = processedURL
-        .replace('//github.com/', '//raw.githubusercontent.com/')
-        .replace(/\/blob\//, '/') // Get URL of the raw file
-
-      this.load(processedURL)
+    const urlType = getResourceType(url)
+
+    if (urlType === resourceType.HTML) {
+      const htmlURL = processUrl(url)
+
+      this.load(htmlURL)
         .then(async (data) => {
-          await this.loadHTML(data, processedURL)
+          await this.loadHTML(data, htmlURL)
         })
         .catch((error) => {
           console.error(error)
         })
+
+      // if we are loading a file at this point we can stop here
+      return
     }
-    // Otherwise, we need to check if index.html exists. Try /main/ and /master/.
-    processedURL = processedURL
-      .replace('//github.com/', '//raw.githubusercontent.com/')
-      .replace(/\/blob\//, '/') // Get URL of the raw file
-
-    const urls = [
-      // TODO - first check if the user is attempting to load without a file path
-      `${processedURL}/main/index.html`,
-      `${processedURL}/master/index.html`,
-    ]
+
+    // otherwise we have to figure out where the file is in the repo
+    const urls: string[] = getPossibleUrls(url)
 
     const errorTable = {
       main: false,

src/utils/url.ts

@@ -4,7 +4,15 @@ export function isValidURL(maybeURL: string) {
   return /^(ftp|http|https):\/\/[^ "]+$/.test(maybeURL)
 }
 
-export function getResourceType(currentUrl: string): resourceType {
+export function getResourceType(
+  currentUrl: string,
+  /** Allows HTML return type */
+  useHTML = true,
+): resourceType {
+  if (useHTML && currentUrl.endsWith('.html')) {
+    return resourceType.HTML
+  }
+
   if (currentUrl.includes('github')) {
     return resourceType.GITHUB
   }
@@ -14,5 +22,61 @@ export function getResourceType(currentUrl: string): resourceType {
   if (currentUrl.includes('gitlab')) {
     return resourceType.GITLAB
   }
+
   return resourceType.HTML
 }
+
+function processGithubURL(urlStr: string): string {
+  const processedUrl = urlStr
+    .replace('//github.com/', '//raw.githubusercontent.com/')
+    .replace(/\/blob\//, '/') // Get URL of the raw file
+
+  return processedUrl
+}
+
+function processGitlabURL(urlStr: string): string {
+  const url = new URL(urlStr)
+
+  if (url.pathname.includes('/blob/')) {
+    // the first instance of /blob/ is the branch name
+    // unless the project or user's name includes /blob/
+    // TODO: handle arbitrary `blob` in project name
+    url.pathname = url.pathname.replace('/blob/', '/raw/')
+  }
+
+  return url.href
+}
+
+/**
+ * Process a URL based on hostname
+ */
+export function processUrl(url: string) {
+  const urlType = getResourceType(url, false)
+
+  if (urlType === resourceType.GITHUB) {
+    return processGithubURL(url)
+  }
+
+  if (urlType === resourceType.GITLAB) {
+    return processGitlabURL(url)
+  }
+
+  if (urlType === resourceType.BITBUCKET) {
+    throw new Error('Bitbucket not yet supported')
+  }
+
+  return url
+}
+
+/**
+ * Returns a list of possible URLs
+ */
+export function getPossibleUrls(url: string): string[] {
+  const baseUrl = processUrl(url)
+
+  return [
+    // TODO - first check if the user is attempting to load without a file path
+    `${baseUrl}/main/index.html`,
+    `${baseUrl}/master/index.html`,
+  ]
+}