Skip to content

Commit

Permalink
add: start of map
Browse files Browse the repository at this point in the history
chore: clean up debug messages
replace esr with bun
  • Loading branch information
michaelpayne02 committed Jun 21, 2024
1 parent bcd70ab commit 925c870
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 39 deletions.
Binary file modified bun.lockb
Binary file not shown.
58 changes: 29 additions & 29 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"scripts": {
"dev": "wrangler types && astro dev",
"start": "wrangler types && astro dev",
"ogsync": "dotenvx -q run -- esr hack/ogSync.ts",
"ogsync": "bun run hack/ogSync.ts",
"build": "wrangler types && astro check && astro build",
"preview": "wrangler pages dev ./dist",
"astro": "astro",
Expand All @@ -13,70 +13,70 @@
},
"dependencies": {
"@astrojs/check": "^0.5.10",
"@astrojs/cloudflare": "^10.2.4",
"@astrojs/cloudflare": "^10.4.2",
"@astrojs/mdx": "^2.3.1",
"@astrojs/rss": "^4.0.5",
"@astrojs/sitemap": "^3.1.4",
"@astrojs/rss": "^4.0.6",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.0",
"@aws-sdk/client-s3": "^3.565.0",
"@aws-sdk/client-s3": "^3.600.0",
"@react-email/components": "0.0.17",
"@types/react-dom": "^18.3.0",
"astro": "^4.7.0",
"astro-expressive-code": "^0.35.2",
"astro": "^4.11.0",
"astro-expressive-code": "^0.35.3",
"astro-font": "^0.0.80",
"astro-pagefind": "^1.5.0",
"drizzle-orm": "^0.31.0",
"drizzle-orm": "^0.31.2",
"maplibre-gl": "^4.4.1",
"mdast-util-to-string": "^4.0.0",
"react-email": "2.1.2",
"reading-time": "^1.5.0",
"rehype-external-links": "^3.0.0",
"remark-unwrap-images": "^4.0.0",
"sass": "^1.76.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.4.5"
"sass": "^1.77.6",
"tailwindcss": "^3.4.4",
"typescript": "^5.5.2"
},
"devDependencies": {
"@astrojs/react": "^3.3.2",
"@astrojs/ts-plugin": "^1.7.0",
"@cloudflare/workers-types": "^4.20240529.0",
"@dotenvx/dotenvx": "^0.37.1",
"@astrojs/react": "^3.6.0",
"@astrojs/ts-plugin": "^1.8.0",
"@cloudflare/workers-types": "^4.20240620.0",
"@dotenvx/dotenvx": "^0.45.0",
"@iconify-json/fa6-brands": "^1.1.19",
"@iconify-json/heroicons": "^1.1.21",
"@iconify-json/ri": "^1.1.20",
"@iconify-json/ri": "^1.1.21",
"@resvg/resvg-wasm": "^2.6.2",
"@rive-app/canvas-single": "^2.15.5",
"@rive-app/canvas-single": "^2.18.0",
"@silvia-odwyer/photon-node": "^0.3.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.13",
"@types/canvas-confetti": "^1.6.4",
"@types/react": "^18.3.1",
"@typescript-eslint/parser": "^7.8.0",
"@types/react": "^18.3.3",
"@typescript-eslint/parser": "^7.13.1",
"astro-icon": "^1.1.0",
"canvas-confetti": "^1.9.3",
"debug": "^4.3.4",
"debug": "^4.3.5",
"drizzle-kit": "latest",
"esbuild-runner": "^2.2.2",
"eslint": "^8.57.0",
"eslint-plugin-astro": "^1.1.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-astro": "^1.2.2",
"eslint-plugin-jsx-a11y": "^6.9.0",
"fast-glob": "^3.3.2",
"gray-matter": "^4.0.3",
"install": "^0.13.0",
"npm": "^10.7.0",
"npm": "^10.8.1",
"pagefind": "^1.1.0",
"prettier": "^3.2.5",
"prettier": "^3.3.2",
"prettier-config-standard": "^7.0.0",
"prettier-plugin-astro": "^0.13.0",
"prettier-plugin-tailwindcss": "^0.5.14",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"resend": "^3.2.0",
"resend": "^3.3.0",
"s3-sync-client": "^4.3.1",
"satori": "^0.10.13",
"satori-html": "^0.3.2",
"sharp": "^0.33.3",
"valibot": "^0.31.0-rc.5",
"sharp": "^0.33.4",
"valibot": "^0.31.1",
"vite-plugin-arraybuffer": "^0.0.7",
"wrangler": "^3.53.0"
"wrangler": "^3.61.0"
}
}
2 changes: 1 addition & 1 deletion src/components/CTA.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const { color, className, href } = Astro.props
href={href ?? '/contact'}
class:list={[
className,
'inline-flex flex-row items-center gap-x-3 rounded-full border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md'
'w-min-content mx-auto inline-flex flex-row items-center gap-x-3 rounded-full border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md'
]}
>
<span class='relative flex items-center justify-center'>
Expand Down
44 changes: 44 additions & 0 deletions src/components/Map.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
export interface Props {
latitude: number
longitude: number
zoom: number
mapStyle: string
className?: string
interactive?: boolean
}
const { latitude, longitude, zoom, mapStyle, className, interactive } = Astro.props
---

<maplibre-map
data-latitude={latitude}
data-longitude={longitude}
data-mapstyle={mapStyle}
data-zoom={zoom}
data-interactive={interactive}
>
<div id='map' class:list={[className]}></div>

<link rel='stylesheet' href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' />
</maplibre-map>
<script>
import maplibregl from 'maplibre-gl'
class MapLibreMap extends HTMLElement {
constructor() {
super()

const data = this.dataset
console.log(data)
new maplibregl.Map({
container: 'map', // container id
style: this.dataset.mapstyle!,
center: [parseFloat(this.dataset.longitude!), parseFloat(this.dataset.latitude!)],
zoom: parseFloat(this.dataset.zoom!)
// interactive: this.dataset.interactive! === 'true'
})
}
}

window.customElements.define('maplibre-map', MapLibreMap)
</script>
2 changes: 0 additions & 2 deletions src/components/Section.astro
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,13 @@ const { className, title } = Astro.props
if (this.bumpElem.classList.contains('bump') || (e?.intersectionRatio ?? 0) >= 1) return
const bcr = this.bumpElem.getBoundingClientRect()
if (bcr.bottom < window.innerHeight) this.bumpElem.classList.toggle('bump')
console.log(e?.intersectionRatio)
setTimeout(() => this.bumpElem.classList.remove('bump'), 400)
},
{
rootMargin: `-21px 0px 0px 0px`,
threshold: [1]
}
).observe(this)
console.log('mount')
}
}

Expand Down
21 changes: 14 additions & 7 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export const prerender = true
import DUBadge from '@/assets/du_badge.svg'
import Nebraska from '@/assets/nebraska.svg'
import Ink from '@/assets/402ink.svg'
// import Ink from '@/assets/402ink.svg'
import Profile from '@/assets/profile.png'
import CTA from '@/components/CTA.astro'
import Label from '@/components/Label.astro'
Expand All @@ -14,7 +14,8 @@ import { getAllPosts, sortMDByDate } from '@/data/project'
import PageLayout from '@/layouts/Base.astro'
import { Icon } from 'astro-icon/components'
import { Image, Picture } from 'astro:assets'
import ProjectCard from '../components/ProjectCard.astro'
import ProjectCard from '@/components/ProjectCard.astro'
import Map from '@/components/Map.astro'
const languages = ['Typescript', 'Python', 'Java', 'Kotlin', 'PHP', 'SQL', 'Go']
const software = ['Creative Cloud', 'Blender', 'Linux', 'VMware ESXi', 'Office']
Expand Down Expand Up @@ -78,7 +79,6 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
like-minded people.
</p>
</Section>

<Section title='Designs'>
<div class='flex flex-col gap-y-3 sm:flex-row sm:gap-x-3 sm:gap-y-0'>
<ProjectCard
Expand Down Expand Up @@ -133,7 +133,6 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
/>
</div>
</Section>

<Section title='Education'>
<div
class='relative grid-cols-4 rounded-xl border border-border bg-primary-foreground/50 bg-gradient-to-b from-secondary/15 px-5 py-3 transition-all hover:border-foreground/25 hover:shadow-sm md:mx-auto md:w-3/4'
Expand All @@ -159,7 +158,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
</div>
</div>
</Section>
<Section title='Experience'>
<!-- <Section title='Experience'>
<div
class='relative grid-cols-4 rounded-xl border border-border bg-primary-foreground/50 bg-gradient-to-b from-secondary/15 px-5 py-3 transition-all hover:border-foreground/25 hover:shadow-sm md:mx-auto md:w-3/4'
>
Expand Down Expand Up @@ -189,7 +188,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
</a>
</div>
</div>
</Section>
</Section> -->

<Section title='Leadership'>
<div
Expand Down Expand Up @@ -243,6 +242,14 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
</Section>
)
}
<CTA>Contact</CTA>
<Map
zoom={6}
mapStyle='https://api.maptiler.com/maps/toner-v2/style.json?key=bPyoF5op4HSnAi5Dw0wV'
className='mx-auto h-56 w-96 rounded-xl dark:invert'
interactive={true}
latitude={39.85913588363056}
longitude={-95.7954945102693}
/>
</div>
<CTA className='mt-16'>Contact</CTA>
</PageLayout>

0 comments on commit 925c870

Please sign in to comment.