@dytsou/resume-converter 2.0.2

package/src/App.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { DownloadFromDriveButton } from './components/DownloadFromDriveButton';
+import { getResumeUrl, getGoogleDriveResumeLink } from './utils/resumeUtils';
+
+/**
+ * Main application component
+ * Displays the resume in an iframe and optionally provides a download button
+ */
+function App() {
+  useEffect(() => {
+    document.title = 'Resume';
+  }, []);
+
+  const resumeUrl = getResumeUrl();
+  const googleDriveLink = getGoogleDriveResumeLink();
+
+  const handleIframeLoad = () => {
+    console.log('Iframe loaded successfully');
+  };
+
+  const handleIframeError = (e: React.SyntheticEvent<HTMLIFrameElement, Event>) => {
+    console.error('Iframe error:', e);
+  };
+
+  return (
+    <>
+      {googleDriveLink && (
+        <div className="download-button-wrapper">
+          <DownloadFromDriveButton
+            driveLink={googleDriveLink}
+            filename="resume.pdf"
+            buttonText="Download Resume"
+          />
+        </div>
+      )}
+      <iframe
+        src={resumeUrl}
+        title="Resume"
+        style={{ border: 'none', width: '100vw', height: '100vh' }}
+        onLoad={handleIframeLoad}
+        onError={handleIframeError}
+      />
+    </>
+  );
+}
+
+export default App;

package/src/components/DownloadFromDriveButton.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { convertToDirectDownloadLink, downloadFile } from '../utils/googleDriveUtils';
+
+interface DownloadFromDriveButtonProps {
+  /** Google Drive share link */
+  driveLink: string;
+  /** Optional filename for the downloaded file */
+  filename?: string;
+  /** Optional custom button text */
+  buttonText?: string;
+}
+
+export function DownloadFromDriveButton({
+  driveLink,
+  filename,
+  buttonText = 'Download Resume',
+}: DownloadFromDriveButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleDownload = async () => {
+    if (!driveLink) {
+      setError('No Google Drive link provided');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const directLink = convertToDirectDownloadLink(driveLink);
+
+      if (!directLink) {
+        throw new Error('Invalid Google Drive link format');
+      }
+
+      // Trigger download
+      downloadFile(directLink, filename);
+
+      // Reset loading state after a short delay
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to download file';
+      setError(errorMessage);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="download-drive-button-container">
+      <button
+        onClick={handleDownload}
+        disabled={isLoading || !driveLink}
+        className="download-drive-button"
+        aria-label={buttonText}
+        title={buttonText}
+      >
+        {isLoading ? (
+          <span className="button-spinner" aria-hidden="true">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="12" cy="12" r="10" opacity="0.3" />
+              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+            </svg>
+          </span>
+        ) : (
+          <span className="button-icon" aria-hidden="true">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </span>
+        )}
+      </button>
+      {error && (
+        <div className="download-error" role="alert">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+

package/src/index.css

@@ -0,0 +1,122 @@
+/* Basic CSS reset and styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Download button wrapper - positioned bottom-right */
+.download-button-wrapper {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+/* Download from Drive button styles */
+.download-drive-button-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.download-drive-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: #333;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.download-drive-button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px) scale(1.05);
+}
+
+.download-drive-button:active:not(:disabled) {
+  transform: translateY(0) scale(1);
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+}
+
+.download-drive-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.button-icon,
+.button-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.button-icon svg,
+.button-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+.button-spinner svg {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.download-error {
+  padding: 8px 12px;
+  background-color: #fee;
+  color: #c33;
+  border: 1px solid #fcc;
+  border-radius: 4px;
+  font-size: 12px;
+  max-width: 300px;
+  text-align: center;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .download-button-wrapper {
+    bottom: 16px;
+    right: 16px;
+  }
+
+  .download-drive-button {
+    width: 48px;
+    height: 48px;
+  }
+
+  .button-icon,
+  .button-spinner {
+    width: 20px;
+    height: 20px;
+  }
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/utils/googleDriveUtils.ts

@@ -0,0 +1,64 @@
+/**
+ * Utility functions for working with Google Drive links
+ */
+
+/**
+ * Extracts the file ID from various Google Drive link formats
+ * Supports:
+ * - https://drive.google.com/file/d/{FILE_ID}/view?usp=sharing
+ * - https://drive.google.com/file/d/{FILE_ID}/view
+ * - https://drive.google.com/open?id={FILE_ID}
+ * - https://drive.google.com/uc?id={FILE_ID}
+ * - Direct file ID
+ */
+export function extractGoogleDriveFileId(link: string): string | null {
+  if (!link) return null;
+
+  // Try to extract from /file/d/{FILE_ID}/ format
+  const fileIdMatch = link.match(/\/file\/d\/([a-zA-Z0-9_-]+)/);
+  if (fileIdMatch) {
+    return fileIdMatch[1];
+  }
+
+  // Try to extract from ?id={FILE_ID} format
+  const idParamMatch = link.match(/[?&]id=([a-zA-Z0-9_-]+)/);
+  if (idParamMatch) {
+    return idParamMatch[1];
+  }
+
+  // If it's already just a file ID (no URL structure)
+  if (/^[a-zA-Z0-9_-]+$/.test(link.trim())) {
+    return link.trim();
+  }
+
+  return null;
+}
+
+/**
+ * Converts a Google Drive share link to a direct download link
+ * @param shareLink - The Google Drive share link
+ * @returns Direct download link or null if conversion fails
+ */
+export function convertToDirectDownloadLink(shareLink: string): string | null {
+  const fileId = extractGoogleDriveFileId(shareLink);
+  if (!fileId) {
+    return null;
+  }
+
+  return `https://drive.google.com/uc?export=download&id=${fileId}`;
+}
+
+/**
+ * Triggers a download of a file from a URL
+ * @param url - The URL to download from
+ * @param filename - Optional filename for the downloaded file
+ */
+export function downloadFile(url: string, filename?: string): void {
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename || '';
+  link.target = '_blank';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

package/src/utils/resumeUtils.ts

@@ -0,0 +1,26 @@
+/**
+ * Utility functions for resume-related operations
+ */
+
+/**
+ * Gets the resume HTML file URL based on the current environment
+ * Handles both GitHub Pages deployment and local development
+ */
+export function getResumeUrl(): string {
+  const baseUrl = import.meta.env.BASE_URL;
+
+  // For GitHub Pages, use absolute path
+  if (baseUrl === '/resume/') {
+    return '/resume/converted-docs/resume.html';
+  }
+
+  // For local development
+  return `${baseUrl}converted-docs/resume.html`;
+}
+
+/**
+ * Gets the Google Drive resume link from environment variables
+ */
+export function getGoogleDriveResumeLink(): string {
+  return import.meta.env.VITE_GOOGLE_DRIVE_RESUME_LINK || '';
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  base: process.env.GITHUB_PAGES === 'true' ? '/resume/' : '/',
+  optimizeDeps: {
+  },
+});