花半小时用豆包 Marscode 和 Supabase 免费部署了一个远程工作的导航站

import fetch from 'node-fetch';import { createClient } from '@supabase/supabase-js';
const SUPABASE_URL = '';const SUPABASE_KEY = '';const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
async function fetchData() {  const response = await fetch('https://raw.githubusercontent.com/remoteintech/remote-jobs/main/README.md');  const text = await response.text();
  // 解析 README.md 内容，提取 name, website, region  const jobs = parseJobs(text);
  // 将数据存储到 Supabase  for (const job of jobs) {    await supabase      .from('remote-jobs')      .insert(job);  }}
function parseJobs(mdText) {  const lines = mdText.split('\n');  const jobs = [];  lines.forEach(line => {    // 例子：'[Bitovi](/company-profiles/bitovi.md) | https://bitovi.com/ | Worldwide'    const match = line.match(/\[([^\]]+)\]\(([^)]+)\)\s*\|\s*(https?:\/\/[^\s|]+)\s*\|\s*(.+)/);        if (match) {      const [, name, ,website, region] = match;      jobs.push({ name, website, region });    }  });  return jobs;}fetchData();

import puppeteer from 'puppeteer'import fs from 'fs'import { createClient } from '@supabase/supabase-js'
const SUPABASE_URL =''const SUPABASE_KEY =''
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
async function captureScreenshots() {	const { data: jobs, error } = await supabase		.from('remote-jobs')		.select('id, website')
	if (error) {		console.error('Error fetching jobs:', error)		return	}	for (const job of jobs) {		const { id, website } = job		const screenshotPath = `screenshots/${id}.png`
		// 生成截图		try {			await generateScreenshot(website, screenshotPath)			// 上传截图到 Supabase 存储			const { data, error } = await supabase.storage				.from('remote-jobs')				.upload(screenshotPath, fs.readFileSync(screenshotPath))
			// 更新数据库中的 thumb 字段			if (!error) {				const thumbUrl = data.path				await supabase					.from('remote-jobs')					.update({ thumb: thumbUrl })					.eq('id', id)				console.log(`Screenshot uploaded for job ${id}`)			}		} catch (error) {			console.log(error)		}	}}
async function generateScreenshot(url, path) {	const browser = await puppeteer.launch()	const page = await browser.newPage()	try {		await page.goto(url, { waitUntil: 'networkidle2', timeout: 90000 })		await page.screenshot({ path })	} catch (error) {		console.error('Error generating screenshot:', error)	} finally {		await browser.close()	}}
captureScreenshots()

pnpm add tailwindcss postcss autoprefixerpnpm add @supabase/supabase-js

/** @type {import('tailwindcss').Config} */export default {  content: [    './index.html',    './src/**/*.{vue,js,ts,jsx,tsx}'  ],  theme: {    extend: {},  },  plugins: [],}

<template>    <div class="p-6">      <input         v-model="search"         placeholder="搜索公司名称"         class="border p-2 mb-4 w-full"      />      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">        <div v-for="job in paginatedJobs" :key="job.id" class="p-4 border rounded-lg shadow-md transition-transform transform hover:scale-105">          <h3 class="text-xl font-semibold">{{ job.name }}</h3>          <a :href="job.website" target="_blank" class="text-blue-500 text-xs">{{ job.website }}</a>          <p class="text-sm text-gray-500">{{ job.region }}</p>          <img v-if="job.thumb" :src="thumbUrl(job.thumb)" alt="thumbnail" class="mt-2 rounded-lg p-2" />        </div>      </div>      <div class="flex justify-between mt-4">        <button           @click="prevPage"           :disabled="currentPage === 1"           class="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50">          上一页        </button>        <button           @click="nextPage"           :disabled="currentPage === totalPages"           class="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50">          下一页        </button>      </div>    </div>  </template>    <script>  export default {    data() {      return {        jobs: [],        search: '',        currentPage: 1,        jobsPerPage: 20      };    },    computed: {      filteredJobs() {        return this.jobs.filter(job =>           job.name.includes(this.search) ||           job.region.includes(this.search)        );      },      totalPages() {        return Math.ceil(this.filteredJobs.length / this.jobsPerPage);      },      paginatedJobs() {        const start = (this.currentPage - 1) * this.jobsPerPage;        const end = start + this.jobsPerPage;        return this.filteredJobs.slice(start, end);      }    },    async mounted() {      const { data: jobs, error } = await this.$supabase        .from('remote-jobs')        .select('*');      if (!error) this.jobs = jobs;    },    methods: {      thumbUrl(path) {        const SUPABASE_URL = '';        //spuabase 的 storage 地址        return `${SUPABASE_URL}/storage/v1/object/public/remote-jobs/${path}`;      },      nextPage() {        if (this.currentPage < this.totalPages) {          this.currentPage++;        }      },      prevPage() {        if (this.currentPage > 1) {          this.currentPage--;        }      }    }  };  </script>    <style scoped>  input:focus {    outline: none;    border-color: #4299e1;    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);  }  </style>