Skip to content

Commit

Permalink
chore: astro v5 migration + tab contact support
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbuireu
fbuireu committed Oct 4, 2024
1 parent cfb003d commit af05a6f
Show file tree
Hide file tree
Showing 7 changed files with 539 additions and 415 deletions.
206 changes: 101 additions & 105 deletions astro.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,112 +9,9 @@ import { defineConfig, envField } from "astro/config";
const isProd = import.meta.env.PROD;

export default defineConfig({
experimental: {
contentLayer: true,
contentCollectionCache: true,
env: {
validateSecrets: true,
schema: {
SITE_URL: envField.string({
access: "public",
context: "client",
default: "https://biancafiore.me",
}),
BIANCA_EMAIL: envField.string({
access: "public",
context: "client",
default: import.meta.env.BIANCA_EMAIL,
}),
TWITTER_HANDLE: envField.string({
access: "public",
context: "client",
default: import.meta.env.TWITTER_HANDLE,
}),
GOOGLE_ANALYTICS_ID: envField.string({
access: "public",
context: "client",
}),
GOOGLE_TAG_MANAGER_ID: envField.string({
access: "public",
context: "client",
}),
GOOGLE_RECAPTCHA_SITE_KEY: envField.string({
access: "public",
context: "client",
}),
GOOGLE_RECAPTCHA_SECRET_KEY: envField.string({
access: "public",
context: "client",
}),
FIREBASE_PRIVATE_KEY_ID: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_PRIVATE_KEY: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_PROJECT_ID: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_CLIENT_EMAIL: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_CLIENT_ID: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_AUTH_URI: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_TOKEN_URI: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_AUTH_CERT_URL: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_CLIENT_CERT_URL: envField.string({
access: "secret",
context: "server",
}),
RESEND_API_KEY: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_SPACE_ID: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_DELIVERY_TOKEN: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_PREVIEW_TOKEN: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_SIGNIN_TOKEN: envField.string({
access: "secret",
context: "server",
}),
ALGOLIA_API_KEY: envField.string({
access: "secret",
context: "server",
}),
ALGOLIA_APP_ID: envField.string({
access: "secret",
context: "server",
}),
},
},
},
site: "https://biancafiore.me",
prefetch: true,
output: "static",
vite: {
ssr: {
external: ["firebase-admin", "node:async_hooks", "contentful"],
Expand All @@ -131,10 +28,109 @@ export default defineConfig({
},
}),
],
output: "hybrid",
adapter: cloudflare({
platformProxy: {
enabled: isProd,
},
}),
env: {
validateSecrets: true,
schema: {
SITE_URL: envField.string({
access: "public",
context: "client",
default: "https://biancafiore.me",
}),
BIANCA_EMAIL: envField.string({
access: "public",
context: "client",
default: import.meta.env.BIANCA_EMAIL,
}),
TWITTER_HANDLE: envField.string({
access: "public",
context: "client",
default: import.meta.env.TWITTER_HANDLE,
}),
GOOGLE_ANALYTICS_ID: envField.string({
access: "public",
context: "client",
}),
GOOGLE_TAG_MANAGER_ID: envField.string({
access: "public",
context: "client",
}),
GOOGLE_RECAPTCHA_SITE_KEY: envField.string({
access: "public",
context: "client",
}),
GOOGLE_RECAPTCHA_SECRET_KEY: envField.string({
access: "public",
context: "client",
}),
FIREBASE_PRIVATE_KEY_ID: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_PRIVATE_KEY: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_PROJECT_ID: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_CLIENT_EMAIL: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_CLIENT_ID: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_AUTH_URI: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_TOKEN_URI: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_AUTH_CERT_URL: envField.string({
access: "secret",
context: "server",
}),
FIREBASE_CLIENT_CERT_URL: envField.string({
access: "secret",
context: "server",
}),
RESEND_API_KEY: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_SPACE_ID: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_DELIVERY_TOKEN: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_PREVIEW_TOKEN: envField.string({
access: "secret",
context: "server",
}),
CONTENTFUL_SIGNIN_TOKEN: envField.string({
access: "secret",
context: "server",
}),
ALGOLIA_API_KEY: envField.string({
access: "secret",
context: "server",
}),
ALGOLIA_APP_ID: envField.string({
access: "secret",
context: "server",
}),
},
},
});
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@
},
"dependencies": {
"@astrojs/check": "^0.9.3",
"@astrojs/cloudflare": "^11.1.0",
"@astrojs/mdx": "^3.1.7",
"@astrojs/cloudflare": "12.0.0-beta.0",
"@astrojs/mdx": "4.0.0-beta.2",
"@astrojs/partytown": "^2.1.2",
"@astrojs/react": "^3.6.2",
"@astrojs/rss": "^4.0.7",
Expand All @@ -56,7 +56,7 @@
"@hookform/resolvers": "^3.9.0",
"@million/lint": "^1.0.8",
"algoliasearch": "^5.7.0",
"astro": "^4.15.11",
"astro": "5.0.0-beta.3",
"clsx": "^2.1.1",
"contentful": "^11.0.3",
"firebase": "^10.14.0",
Expand Down
10 changes: 5 additions & 5 deletions src/ui/modules/contact/components/tabs/Tabs.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ import "./tabs.css";
<p class="contact-tabs__body">Multiple ways to get in touch with me :)</p>
</div>
<ul class="contact-tabs flex">
<li class="contact-tab --underline-on-hover" data-target="tab1">
<li class="contact-tab --underline-on-hover" data-target="form">
<button>Email me</button>
</li>
<li class="contact-tab --underline-on-hover" data-target="tab2">
<li class="contact-tab --underline-on-hover" data-target="calendly">
<button>Make an appointment</button>
</li>
</ul>
<div id="tab1" class="contact-tab__content --is-active">
<div id="form" class="contact-tab__content --is-active">
<ContactFormProvider client:load />
</div>
<div id="tab2" class="contact-tab__content">
<div id="calendly" class="contact-tab__content">
<div
class="calendly-inline-widget"
data-url="https://calendly.com/fbuireu/45min-meeting?hide_event_type_details=1&hide_gdpr_banner=1"
Expand All @@ -33,6 +33,6 @@ import "./tabs.css";

<script>
import { initTabs } from '../../utils/changeTab';

const tab = new URLSearchParams(window.location.search).get("tab");
initTabs();
</script>
30 changes: 17 additions & 13 deletions src/ui/modules/contact/utils/changeTab/changeTab.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
interface Tab {
id: string;
target: string;
enum TabId {
FORM = "form",
CALENDLY = "calendly",
}

const SELECTORS = {
TAB: ".contact-tab",
};

const changeTab = (tabId: Tab["id"]) => {
const tabs: NodeListOf<HTMLElement> = document.querySelectorAll(SELECTORS.TAB);
const getTabs = (): NodeListOf<HTMLElement> => document.querySelectorAll(SELECTORS.TAB);

for (const tab of tabs) {
const changeTab = (tabId: TabId) => {
const TABS = getTabs();

for (const tab of TABS) {
const tabContentId = tab.dataset.target;
const tabContent: HTMLElement | null = document.querySelector(`#${tabContentId}`);

if (!tabContent) continue;
if (!tabContent) return;

const isActive = tabContentId === tabId;
tab.classList.toggle("--is-active", isActive);
Expand All @@ -24,12 +26,14 @@ const changeTab = (tabId: Tab["id"]) => {
};

export function initTabs() {
const tabs: NodeListOf<HTMLElement> = document.querySelectorAll(SELECTORS.TAB);
const TABS = getTabs();
const DEFAULT_TAB = TABS[0].dataset.target as TabId;
const queryTab = new URLSearchParams(window.location.search).get("tab");
const initialTab = queryTab === TabId.FORM || queryTab === TabId.CALENDLY ? queryTab : DEFAULT_TAB;

for (const tab of tabs) {
tab.addEventListener("click", () => {
changeTab(tab.dataset.target ?? "");
});
for (const tab of TABS) {
tab.addEventListener("click", () => changeTab(tab.dataset.target as TabId));
}
changeTab(tabs[0].dataset.target ?? "");

changeTab(initialTab);
}
4 changes: 2 additions & 2 deletions src/ui/modules/core/components/head/Head.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { SeoMetadata } from "@const/types";
import "@fontsource-variable/nunito-sans";
import "@fontsource/baskervville";
import { GOOGLE_ANALYTICS_ID, GOOGLE_TAG_MANAGER_ID } from "astro:env/client";
import { ViewTransitions } from "astro:transitions";
import { ClientRouter } from "astro:transitions";
import Seo from "@modules/core/components/seo/Seo.astro";
import "@styles/index.css";
Expand All @@ -19,7 +19,7 @@ const props = Astro.props as HeadProps;
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer',GOOGLE_TAG_MANAGER_ID);
</script>
<ViewTransitions />
<ClientRouter />
<Seo {...props} />
</head>
<script is:inline define:vars={{ GOOGLE_ANALYTICS_ID }}>
Expand Down
1 change: 1 addition & 0 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"extends": ["astro/tsconfigs/base"],
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"],
"compilerOptions": {
"strict": true,
Expand Down
Loading

0 comments on commit af05a6f

Please sign in to comment.