initialization of Astro, Sanity and Turborepo

.github/workflows/sanity-deploy.yml

@@ -0,0 +1,26 @@
+name: Deploy Sanity Studio
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'apps/sanity/**'
+jobs:
+  deploy:
+    name: Build and Deploy
+    runs-on: ubuntu-latest
+    env:
+      SANITY_AUTH_TOKEN: ${{ secrets.SANITY_DEPLOY_STUDIO_TOKEN }}
+      SANITY_STUDIO_PREVIEW_DOMAIN: ${{ secrets.SANITY_STUDIO_PREVIEW_DOMAIN }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+      - uses: oven-sh/setup-bun@v2
+      - name: Deploy Sanity Studio
+        run: |
+          cd ./apps/sanity
+          bun install
+          bun run sanity deploy

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+.DS_Store
+*.pem

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 120
+}

apps/astro/.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

apps/astro/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

apps/astro/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/astro/astro.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from "astro/config";
+import vercel from "@astrojs/vercel/serverless";
+import sitemap from "@astrojs/sitemap";
+import { DOMAIN } from "./src/global/constants";
+import { isPreviewDeployment } from "./src/utils/is-preview-deployment";
+import redirects from "./redirects";
+
+export default defineConfig({
+  site: DOMAIN,
+  integrations: [
+    sitemap(),
+  ],
+  image: {
+    remotePatterns: [{
+      protocol: "https",
+      hostname: "cdn.sanity.io"
+    }],
+  },
+  prefetch: {
+    prefetchAll: true
+  },
+  redirects: redirects,
+  output: isPreviewDeployment ? "server" : 'hybrid',
+  adapter: vercel(),
+});

apps/astro/eslint.config.js

@@ -0,0 +1,10 @@
+import eslintPluginAstro from 'eslint-plugin-astro';
+
+export default [
+  ...eslintPluginAstro.configs.recommended,
+  {
+    rules: {
+      "no-unused-vars": "error",
+    }
+  }
+];

apps/astro/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "astro-app",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/sitemap": "^3.2.0",
+    "@astrojs/vercel": "^7.8.1",
+    "@sanity/client": "^6.22.1",
+    "astro": "^4.16.3",
+    "astro-portabletext": "^0.10.0",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "sharp-ico": "^0.1.5",
+    "typescript": "^5.6.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/parser": "^8.8.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-astro": "^1.2.4",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "sass": "^1.79.5"
+  }
+}

apps/astro/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+    require('cssnano'),
+  ],
+};

apps/astro/redirects.ts

@@ -0,0 +1,31 @@
+import type { ValidRedirectStatus } from 'astro';
+import sanityFetch from './src/utils/sanity.fetch'
+
+type RedirectData = {
+  source: string;
+  destination: string;
+  isPermanent: boolean;
+};
+
+const data = await sanityFetch<RedirectData[]>({
+  query: `
+    *[_type == "redirects"][0].redirects {
+      "source": source.current,
+      "destination": destination.current,
+      isPermanent,
+    }[]
+  `
+});
+const redirects = data ? Object.fromEntries(
+  data.map(({ source, destination, isPermanent }) => [
+    source, {
+      status: (isPermanent ? 301 : 302) as ValidRedirectStatus,
+      destination
+    }
+  ])
+) : {};
+const permanentRedirects = data ? data.filter(r => r.isPermanent).length : 0;
+const temporaryRedirects = data ? data.length - permanentRedirects : 0;
+console.log('\x1b[32m%s\x1b[0m', `✅ \x1b[1m${Object.keys(redirects).length}\x1b[0m\x1b[32m redirects added from Sanity (\x1b[1m${permanentRedirects}\x1b[0m\x1b[32m permanent and \x1b[1m${temporaryRedirects}\x1b[0m\x1b[32m temporary)`);
+
+export default redirects;

apps/astro/src/components/Components.astro

@@ -0,0 +1,41 @@
+---
+import type { ComponentProps } from 'astro/types'
+import FullWidthPhoto, { FullWidthPhoto_Query } from '@/components/global/FullWidthPhoto.astro'
+
+const components = {
+  FullWidthPhoto,
+}
+
+type ComponentsMap = {
+  [Component in keyof typeof components]: {
+    _type: Component
+  } & ComponentProps<(typeof components)[Component]>
+}
+
+export type ComponentsProps = Array<ComponentsMap[keyof typeof components]>
+
+type Props = {
+  data: ComponentsProps
+  indexStart?: number
+}
+
+const { data, indexStart = 0 } = Astro.props
+
+export const Components_Query = /* groq */ `
+  components[] {
+    _type,
+    sectionId,
+    _type == "FullWidthPhoto" => ${FullWidthPhoto_Query}
+  },
+`
+---
+
+{
+  data?.map((item, i) => {
+    // NOTE: Using 'as any' is not ideal for type safety, but it's used here to simplify
+    // the implementation and avoid creating separate typed interfaces for each component.
+    const DynamicComponent = components[item._type] as any
+    if (!DynamicComponent) return null
+    return <DynamicComponent {...item} index={indexStart + i} />
+  })
+}

apps/astro/src/components/global/FullWidthPhoto.astro

@@ -0,0 +1,47 @@
+---
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+
+export const FullWidthPhoto_Query = `
+  {
+    ${ImageDataQuery('img')}
+  },
+`
+
+type Props = {
+  index: number
+  sectionId?: string
+  img: ImageDataProps
+}
+
+const { index, sectionId, img } = Astro.props
+---
+
+<section class="FullWidthPhoto" id={sectionId}>
+  <Image {...img} sizes="100vw" priority={index === 0} class="img" />
+</section>
+
+<style lang="scss">
+  .FullWidthPhoto {
+    overflow: clip;
+    margin: 0 calc(var(--page-margin) * -1);
+    @media (min-width: 1380px) {
+      margin: 0 calc((100vw - 1300px) * -0.5);
+    }
+  }
+  .img {
+    width: 100%;
+    @supports (animation-timeline: view()) {
+      animation: scroll-image linear forwards;
+      animation-timeline: view();
+      transform-origin: top;
+      @keyframes scroll-image {
+        from {
+          transform: translateY(0);
+        }
+        to {
+          transform: translateY(-20%) scale(1.2);
+        }
+      }
+    }
+  }
+</style>

apps/astro/src/components/ui/image/index.astro

@@ -0,0 +1,51 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { Image as AstroImage } from 'astro:assets'
+
+export type ImageDataProps = {
+  asset: {
+    url: string
+    altText: string
+    extension: string
+    metadata: {
+      dimensions: {
+        width: number
+        height: number
+      }
+      lqip: string
+    }
+  }
+}
+
+type Props = ImageDataProps & {
+  sizes: string
+  priority?: boolean
+} & Omit<ComponentProps<typeof AstroImage>, 'src' | 'alt' | 'width' | 'height'>
+
+const { asset, sizes, priority, ...props } = Astro.props
+
+const imageProps = {
+  src: asset.url,
+  alt: asset.altText || '',
+  width: asset.metadata.dimensions.width,
+  height: asset.metadata.dimensions.height,
+  sizes,
+  style: {
+    background: `url(${asset.metadata.lqip}) center / cover no-repeat`,
+  },
+  onload: 'this.removeAttribute("style")',
+  ...(priority && {
+    loading: 'eager',
+    fetchpriority: 'high',
+  }),
+  widths: [48, 64, 96, 128, 256, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  ...(asset.extension === 'svg' && {
+    format: 'svg' as const,
+    widths: undefined,
+    sizes: undefined,
+  }),
+  ...props,
+}
+---
+
+<AstroImage {...imageProps as ComponentProps<typeof AstroImage>} />

apps/astro/src/components/ui/image/index.ts

@@ -0,0 +1,18 @@
+export { default, type ImageDataProps } from './index.astro';
+
+export const ImageDataQuery = (name: string) => `
+  ${name} {
+    asset -> {
+      url,
+      altText,
+      extension,
+      metadata {
+        dimensions {
+          width,
+          height,
+        },
+        lqip,
+      },
+    },
+  },
+`

apps/astro/src/components/ui/portable-text/Block.astro

@@ -0,0 +1 @@
+<slot />