- A Web Development Consultancy Helping CTOs Minimize Their Hands-on Involvement in Daily Operations + A Web Development Consultancy Helping CTOs Minimize Their Hands-on + Involvement in Daily Operations
const bookACallActionHero = document.getElementById( - "book-a-call-action-hero" + "book-a-call-action-hero", ); function handleBookACallHero() { diff --git a/apps/website/src/components/cto/InfoBlock.astro b/apps/website/src/components/cto/InfoBlock.astro index a21a7d00..81a8f90d 100644 --- a/apps/website/src/components/cto/InfoBlock.astro +++ b/apps/website/src/components/cto/InfoBlock.astro @@ -5,7 +5,12 @@ const { icon, title, description, className } = Astro.props; ---
- 
+
diff --git a/apps/website/src/components/cto/ServiceBlock.astro b/apps/website/src/components/cto/ServiceBlock.astro
index 447fdd4a..34d04251 100644
--- a/apps/website/src/components/cto/ServiceBlock.astro
+++ b/apps/website/src/components/cto/ServiceBlock.astro
@@ -1,19 +1,43 @@
---
import classnames from "classnames";
-const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, descriptionFirst, descriptionSecond, classNames } = Astro.props;
+const {
+ image,
+ iconFirst,
+ iconSecond,
+ sectionTitle,
+ titleFirst,
+ titleSecond,
+ descriptionFirst,
+ descriptionSecond,
+ classNames,
+} = Astro.props;
---
-
diff --git a/apps/website/src/components/cto/ServiceBlock.astro b/apps/website/src/components/cto/ServiceBlock.astro
index 447fdd4a..34d04251 100644
--- a/apps/website/src/components/cto/ServiceBlock.astro
+++ b/apps/website/src/components/cto/ServiceBlock.astro
@@ -1,19 +1,43 @@
---
import classnames from "classnames";
-const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, descriptionFirst, descriptionSecond, classNames } = Astro.props;
+const {
+ image,
+ iconFirst,
+ iconSecond,
+ sectionTitle,
+ titleFirst,
+ titleSecond,
+ descriptionFirst,
+ descriptionSecond,
+ classNames,
+} = Astro.props;
---
-
+
-
+
{sectionTitle}
- 
-
+
+
{titleFirst}
@@ -21,8 +45,15 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
- 
-
+
+
{titleSecond}
@@ -31,7 +62,9 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
- 
+
diff --git a/apps/website/src/components/cto/Testimonial.astro b/apps/website/src/components/cto/Testimonial.astro
index 24b07c79..86c8e06d 100644
--- a/apps/website/src/components/cto/Testimonial.astro
+++ b/apps/website/src/components/cto/Testimonial.astro
@@ -7,7 +7,7 @@ import raphaelBauerBubble from "../../assets/raphael-bauer-bubble.png";
const optimizedTestimonial = await getImage({
src: raphaelBauerBubble,
width: 569,
- height: 547
+ height: 547,
});
---
diff --git a/apps/website/src/components/cto/Values.astro b/apps/website/src/components/cto/Values.astro
index eaeadd20..a65916ee 100644
--- a/apps/website/src/components/cto/Values.astro
+++ b/apps/website/src/components/cto/Values.astro
@@ -11,13 +11,13 @@ import douglasIcon from "../../assets/douglas-icon.png";
const optimizedDouglasIcon = await getImage({
src: douglasIcon,
width: 72,
- height: 72
+ height: 72,
});
const optimizedTeamsImage = await getImage({
src: teamsImage,
width: 560,
- height: 326
+ height: 326,
});
---
@@ -114,7 +114,12 @@ const optimizedTeamsImage = await getImage({
making process. Working with them is easy. They are organised,
communicative, and have a great internal culture.
- 
+
Home
- For CTOs
- Staff Augmentation
- Blog
+ For CTOs
+
+
+ Staff Augmentation
+
+
+ Blog
+
- Contact
+ Contact
+
diff --git a/apps/website/src/components/navigation.astro b/apps/website/src/components/navigation.astro
index 345b3937..d66bf9c7 100644
--- a/apps/website/src/components/navigation.astro
+++ b/apps/website/src/components/navigation.astro
@@ -10,7 +10,7 @@ const optimizedLogo = await getImage({
format: "webp",
});
-const isContact = Astro.url.pathname === "/contact"
+const isContact = Astro.url.pathname === "/contact";
---
+ >
Book a call
@@ -151,9 +151,10 @@ const isContact = Astro.url.pathname === "/contact"
text-base text-center
whitespace-nowrap
bg-[#545664] text-[#ffffff] hover:opacity-90"
- href={isContact ? "/#book-a-call-section" : "#book-a-call-section"}
- >Book a call
+ Book a call
+
- Button has been clicked {state.count} times
- Last clicked at:{' '}
- {state.lastClicked ? new Date(state.lastClicked).toLocaleString() : 'Never'}
+ Last clicked at:{" "}
+ {state.lastClicked
+ ? new Date(state.lastClicked).toLocaleString()
+ : "Never"}
-
+
);
};
-export default NextLevelButtonClickTracker;
\ No newline at end of file
+export default NextLevelButtonClickTracker;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx
index c99f2dff..e99f3b20 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
interface UseClickTrackerState {
count: number;
lastClicked: number | null;
@@ -9,10 +9,10 @@ export const useClickTracker = (): [UseClickTrackerState, () => void] => {
lastClicked: null,
});
const incrementCount = useCallback(() => {
- setState(prevState => ({
+ setState((prevState) => ({
count: prevState.count + 1,
lastClicked: Date.now(),
}));
}, [setState]);
return [state, incrementCount];
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx
index e968db93..4fc2f674 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx
@@ -1,12 +1,17 @@
-import React from 'react';
-import { useClickCounter } from './useClickCounter';
+import React from "react";
+import { useClickCounter } from "./useClickCounter";
const SimpleButtonClickTracker: React.FC = () => {
const [count, increment] = useClickCounter();
return (
-
+
Button has been clicked {count} times
-
+
);
};
-export default SimpleButtonClickTracker;
\ No newline at end of file
+export default SimpleButtonClickTracker;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx
index 73793e0c..6fe7f699 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState } from "react";
export const useClickCounter = () => {
const [count, setCount] = useState(0);
- const increment = () => setCount(prevCount => prevCount + 1);
+ const increment = () => setCount((prevCount) => prevCount + 1);
return [count, increment] as const;
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx
index 8ef03bc6..e730690c 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { useMousePosition } from './useMousePosition';
+import React from "react";
+import { useMousePosition } from "./useMousePosition";
const SimpleMouseTracker: React.FC = () => {
const [position] = useMousePosition();
return (
-
+
X: {position.x}
Y: {position.y}
);
};
-export default SimpleMouseTracker;
\ No newline at end of file
+export default SimpleMouseTracker;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx
index 63c40a6d..faadc7c6 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx
@@ -1,15 +1,17 @@
-import { useState, useEffect } from 'react';
-export const useMousePosition = (): [{ x: number, y: number },
-React.Dispatch>] => {
+import { useState, useEffect } from "react";
+export const useMousePosition = (): [
+ { x: number; y: number },
+ React.Dispatch>,
+] => {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
setPosition({ x: event.clientX, y: event.clientY });
};
- window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener("mousemove", handleMouseMove);
return () => {
- window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
return [position, setPosition];
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx
index be871106..f903a336 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx
@@ -1,28 +1,31 @@
// Use the hook in a component
-import React, { useState } from 'react';
-import { useDebouncedSearch } from './useDebouncedSearch';
+import React, { useState } from "react";
+import { useDebouncedSearch } from "./useDebouncedSearch";
const UseDebouncedSearchDemo: React.FC = () => {
- const [searchTerm, setSearchTerm] = useState('');
+ const [searchTerm, setSearchTerm] = useState("");
const handleSearch = (value: string) => {
console.log(`Searching for: ${value}`);
};
- const [debouncedSearchTerm] = useDebouncedSearch(searchTerm, handleSearch, 500);
-
+ const [debouncedSearchTerm] = useDebouncedSearch(
+ searchTerm,
+ handleSearch,
+ 500,
+ );
return (
-
+
setSearchTerm(e.target.value)}
+ onChange={(e) => setSearchTerm(e.target.value)}
/>
Debounced search term: {debouncedSearchTerm}
);
};
-export default UseDebouncedSearchDemo;
\ No newline at end of file
+export default UseDebouncedSearchDemo;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx
index 10b69940..cdd5eb87 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx
@@ -1,6 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-export const useDebouncedSearch = (value: string, search: (value: string) => void, wait: number) => {
+export const useDebouncedSearch = (
+ value: string,
+ search: (value: string) => void,
+ wait: number,
+) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
@@ -18,4 +22,4 @@ export const useDebouncedSearch = (value: string, search: (value: string) => voi
}, [debouncedValue, search]);
return [debouncedValue];
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx
index 47df60fc..ca5eb20f 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { useFetchData } from './useFetchData';
+import React from "react";
+import { useFetchData } from "./useFetchData";
const UseFetchDataDemo: React.FC = () => {
- const [data, error, loading] = useFetchData('https://jsonplaceholder.typicode.com/posts');
+ const [data, error, loading] = useFetchData(
+ "https://jsonplaceholder.typicode.com/posts",
+ );
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
if (!data) return No data
;
return (
-
+
{data.slice(0, 5).map((item) => (
- {item.title}
@@ -19,4 +21,4 @@ const UseFetchDataDemo: React.FC = () => {
);
};
-export default UseFetchDataDemo;
\ No newline at end of file
+export default UseFetchDataDemo;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx
index c2895345..8d3599ed 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx
@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
interface Post {
- userId: number;
- id: number;
- title: string;
- body: string;
+ userId: number;
+ id: number;
+ title: string;
+ body: string;
}
export const useFetchData = (url: string) => {
const [data, setData] = useState(null);
- const [error, setError] = useState<{message: string} | null>(null);
+ const [error, setError] = useState<{ message: string } | null>(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
diff --git a/apps/website/src/layouts/base-meta-tags.astro b/apps/website/src/layouts/base-meta-tags.astro
index 3009f745..0d469040 100644
--- a/apps/website/src/layouts/base-meta-tags.astro
+++ b/apps/website/src/layouts/base-meta-tags.astro
@@ -52,7 +52,10 @@ const schema = {
-
+
@@ -61,4 +64,7 @@ const schema = {
-
+
diff --git a/apps/website/src/layouts/content.astro b/apps/website/src/layouts/content.astro
index f437cd4e..06161222 100644
--- a/apps/website/src/layouts/content.astro
+++ b/apps/website/src/layouts/content.astro
@@ -2,11 +2,11 @@
export type ContentItem = {
title: string;
href: string;
-}
+};
type Props = {
contentList: ContentItem[];
-}
+};
const { contentList } = Astro.props as Props;
---
diff --git a/apps/website/src/layouts/header.astro b/apps/website/src/layouts/header.astro
index b5473431..520578cb 100644
--- a/apps/website/src/layouts/header.astro
+++ b/apps/website/src/layouts/header.astro
@@ -6,7 +6,7 @@ const optimizedLogo = await getImage({
src: crocoderLogo,
width: 63,
height: 51,
- format: 'webp'
+ format: "webp",
});
---
diff --git a/apps/website/src/layouts/jsonld-meta.astro b/apps/website/src/layouts/jsonld-meta.astro
index 2e381d89..408dc817 100644
--- a/apps/website/src/layouts/jsonld-meta.astro
+++ b/apps/website/src/layouts/jsonld-meta.astro
@@ -46,7 +46,7 @@ const siteUrl = "https://crocoder.dev";
-
+
@@ -54,4 +54,4 @@ const siteUrl = "https://crocoder.dev";
-
+
diff --git a/apps/website/src/pages/for-ctos.astro b/apps/website/src/pages/for-ctos.astro
index 22cd45e6..b7d9fe13 100644
--- a/apps/website/src/pages/for-ctos.astro
+++ b/apps/website/src/pages/for-ctos.astro
@@ -20,7 +20,10 @@ const { ogImage = "https://www.crocoder.dev/cto-metadata-img.png" } =
+
Everything Kicks Off
with One Call
diff --git a/apps/website/src/pages/sitemap.xml.ts b/apps/website/src/pages/sitemap.xml.ts
index 968c6737..feccac12 100644
--- a/apps/website/src/pages/sitemap.xml.ts
+++ b/apps/website/src/pages/sitemap.xml.ts
@@ -25,13 +25,14 @@ export async function GET() {
${lastmod.toISOString().slice(0, 10)}
${priority}
monthly
- ${imageUrl
- ? `
+ ${
+ imageUrl
+ ? `
${imageUrl}
`
- : ""
- }
+ : ""
+ }
`;
diff --git a/apps/website/src/pages/staff-augmentation.astro b/apps/website/src/pages/staff-augmentation.astro
index 4e55ff4b..f0beae69 100644
--- a/apps/website/src/pages/staff-augmentation.astro
+++ b/apps/website/src/pages/staff-augmentation.astro
@@ -26,7 +26,7 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
@@ -46,13 +46,17 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
lg:max-w-[580px] xl:min-w-[626px]"
>
- Outcome-Driven Product Engineering
+
+ Outcome-Driven Product Engineering
+
- On-Demand Talent,
+
+ On-Demand Talent,
+
- Product-minded web engineers who bring clarity, momentum, and ownership. Skip the hiring bottlenecks. Our developers integrate fast, think beyond the ticket, and help you build with purpose — from junior support to senior leadership.
+ Product-minded web engineers who bring clarity, momentum, and
+ ownership. Skip the hiring bottlenecks. Our developers integrate
+ fast, think beyond the ticket, and help you build with purpose —
+ from junior support to senior leadership.
@@ -111,22 +118,32 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
-
+
We're 100% Focused on results
-
- Flexible, Embedded Engineers,
+
+
+ Flexible, Embedded Engineers,
+
Ready to Plug-In
-
+
-
-
+
+
-
- We offer on-demand staff augmentation with web engineers who blend technical excellence, product intuition, and strong communication.
+
+ We offer on-demand staff augmentation with web engineers
+ who blend technical excellence,
+ product intuition, and strong communication.
-
- Whether you need a junior developer to support your team, or a product-minded lead to drive an initiative, we match talent to your exact needs and fast.
+
+ Whether you need a junior developer to support your team,
+ or a product-minded lead to drive an initiative, we
+ match talent to your exact needs
+ and fast.
-
- Our engineers take initiative instead of waiting on tasks. They think critically, act independently, and ship with care.
+
+ Our engineers take initiative instead of waiting on tasks.
+ They think critically, act independently, and
+ ship with care.
-
+
-
- We have found the perfect extension of our team with CroCoder. We operate as one team, celebrating our wins and working through the challenges together. They "own" the roadmap, deadlines and outcomes with us — from the ideation and direction stages through to post-launch optimization.
+
+ We have found the perfect extension of our team with CroCoder.
+ We operate as one team, celebrating our wins and working
+ through the challenges together. They "own" the roadmap,
+ deadlines and outcomes with us — from the ideation and
+ direction stages through to post-launch optimization.
-
+
- Paul Jeszenszky
- Submix co-founder & CEO
+
+ Paul Jeszenszky
+
+
+ Submix co-founder & CEO
+
-
+
-
- Ideal for Teams who
-
+
+
+ Ideal for Teams who
+
+
-
-
- Need to scale fast
- without compromising quality
+
+ Need to scale fast
+
+
+ without compromising quality
+
@@ -219,8 +283,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Have initiatives
- they want to move forward but are lacking bandwidth
+
+ Have initiatives
+
+
+ they want to move forward but are lacking bandwidth
+
@@ -236,8 +308,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Struggle to find
- Engineers with both soft skills and technical depth
+
+ Struggle to find
+
+
+ Engineers with both soft skills and technical depth
+
@@ -253,8 +333,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Want talent
- that can work independently and contribute meaningfully
+
+ Want talent
+
+
+ that can work independently and contribute meaningfully
+
@@ -279,19 +367,31 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
-
+
We Specialize in Building
Web Products
-
- Our engineers work with modern stacks like React, TypeScript, Node.js, Next.js, GraphQL, and more — but we're not dogmatic. We choose the right tools for the job.
+
+ Our engineers work with modern stacks like React, TypeScript, Node.js,
+ Next.js, GraphQL, and more — but we're not dogmatic. We choose the
+ right tools for the job.
-
-
+
+
-
-
+
+
Full Stack Development
- Frontend, backend, or complete product development
+
+ Full Stack Development
+
+
+ Frontend, backend, or complete product development
+
-
-
+
+
Scalable Architecture
- Maintainable, future-proof system design
+
+ Scalable Architecture
+
+
+ Maintainable, future-proof system design
+
-
-
+
+
Feature Development
- New features, refactors, or greenfield builds
+
+ Feature Development
+
+
+ New features, refactors, or greenfield builds
+
-
-
+
+
Cross-Functional Collaboration
- Seamless work with product and design teams
+
+ Cross-Functional Collaboration
+
+
+ Seamless work with product and design teams
+
@@ -360,10 +496,13 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
-
- Our Engineers
+
+ Our
+ Engineers
-
+
@@ -377,8 +516,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Product-minded
- They align with your goals, not just your backlog
+
+ Product-minded
+
+
+ They align with your goals, not just your backlog
+
@@ -394,8 +541,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Proactive
- Self-starters who take initiative and drive work forward
+
+ Proactive
+
+
+ Self-starters who take initiative and drive work forward
+
@@ -411,8 +566,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Communicative
- Async-ready, remote-native, and highly collaborative
+
+ Communicative
+
+
+ Async-ready, remote-native, and highly collaborative
+
@@ -428,8 +591,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Flexible
- Short-term, long-term, or somewhere in between
+
+ Flexible
+
+
+ Short-term, long-term, or somewhere in between
+
@@ -445,13 +616,21 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Skilled across levels
- From promising juniors to proven engineering leads
+
+ Skilled across levels
+
+
+ From promising juniors to proven engineering leads
+
-
+
-
-
- Let's Build Together
-
+
+ Let's Build Together
@@ -487,4 +667,4 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
.forEach((element) =>
element.addEventListener("click", handleActionHeroClick),
);
-
\ No newline at end of file
+
diff --git a/bun.lock b/bun.lock
index 455337b1..559c138d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -4,7 +4,7 @@
"": {
"name": "web",
"dependencies": {
- "prettier": "^3.4.2",
+ "prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1",
},
"devDependencies": {
diff --git a/package.json b/package.json
index 568621fd..cf7ec7e8 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"build": "turbo build",
"dev": "turbo dev",
"lint": "turbo lint",
- "format": "prettier --write \"**/*.{ts,tsx,md}\""
+ "format": "prettier --write \"**/*.{ts,tsx,astro}\""
},
"devDependencies": {
"turbo": "^2.5.5"
@@ -19,7 +19,7 @@
"packages/*"
],
"dependencies": {
- "prettier": "^3.4.2",
+ "prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1"
}
}
diff --git a/packages/remark-plugin/index.ts b/packages/remark-plugin/index.ts
index 16a35bff..61b7070b 100644
--- a/packages/remark-plugin/index.ts
+++ b/packages/remark-plugin/index.ts
@@ -1,125 +1,140 @@
-import type { Node } from 'unist';
-import { visit } from 'unist-util-visit';
-
+import type { Node } from "unist";
+import { visit } from "unist-util-visit";
function remark({
titleClass,
detailsClass,
summaryClass,
- iframeClass
+ iframeClass,
}: {
- titleClass: string,
- detailsClass: string,
- summaryClass: string,
- iframeClass: string,
+ titleClass: string;
+ detailsClass: string;
+ summaryClass: string;
+ iframeClass: string;
}) {
return () => {
-
return (tree: Node) => {
- let contentsHtml = '';
+ let contentsHtml = "";
let lastNodeDepth = 100;
let ulDepth = 0;
let startingUlDepth = 0;
let contentsHeadingParent = null;
let contentsHeadingIndex = 0;
- visit(tree, 'heading', (node: any, index: number, parent: any) => {
+ visit(tree, "heading", (node: any, index: number, parent: any) => {
if (!node.children || node.children.length !== 1) return;
const textNode = node.children[0];
- if (textNode.type === 'text' && textNode.value === 'Contents') {
+ if (textNode.type === "text" && textNode.value === "Contents") {
contentsHeadingParent = parent;
contentsHeadingIndex = index;
return;
}
- const id = textNode.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\-_\.]/g, '');
+ const id = textNode.value
+ .toLowerCase()
+ .replace(/\s+/g, "-")
+ .replace(/[^a-z0-9\-_\.]/g, "");
node.id = id;
if (contentsHtml.length === 0) {
- contentsHtml += '';
+ contentsHtml += "";
ulDepth = node.depth;
startingUlDepth = node.depth;
lastNodeDepth = node.depth;
}
if (node.depth === lastNodeDepth) {
- contentsHtml += '- ';
+ contentsHtml += "
- ";
contentsHtml += `${textNode.value}`;
- contentsHtml += '
';
+ contentsHtml += "";
}
if (node.depth > lastNodeDepth) {
- contentsHtml += ''.repeat(node.depth - lastNodeDepth);
- contentsHtml += '- ';
+ contentsHtml += "
".repeat(node.depth - lastNodeDepth);
+ contentsHtml += "- ";
contentsHtml += `${textNode.value}`;
- contentsHtml += '
';
+ contentsHtml += "
";
lastNodeDepth = node.depth;
}
if (node.depth < lastNodeDepth) {
- contentsHtml += '
'.repeat(lastNodeDepth - node.depth);
- contentsHtml += '- ';
+ contentsHtml += "
".repeat(lastNodeDepth - node.depth);
+ contentsHtml += "- ";
contentsHtml += `${textNode.value}`;
- contentsHtml += '
';
+ contentsHtml += "";
lastNodeDepth = node.depth;
}
});
if (contentsHtml.length !== 0) {
- contentsHtml += '
'.repeat(ulDepth - startingUlDepth + 1);
+ contentsHtml += "".repeat(ulDepth - startingUlDepth + 1);
}
if (contentsHeadingParent !== null) {
- (contentsHeadingParent as any).children.splice(contentsHeadingIndex + 1, 0, {
- type: 'html',
- value: contentsHtml,
- });
+ (contentsHeadingParent as any).children.splice(
+ contentsHeadingIndex + 1,
+ 0,
+ {
+ type: "html",
+ value: contentsHtml,
+ },
+ );
}
- visit(tree, 'paragraph', (node: any, index: number, parent: any) => {
+ visit(tree, "paragraph", (node: any, index: number, parent: any) => {
if (!node.children || node.children.length !== 1) return;
const textNode = node.children[0];
// non h title rule
- if (textNode.type === 'text' && textNode.value.startsWith('::title ')) {
- const titleText = textNode.value.substring('::title '.length);
+ if (textNode.type === "text" && textNode.value.startsWith("::title ")) {
+ const titleText = textNode.value.substring("::title ".length);
const titleNode = {
- type: 'html',
- value: `${titleText}
`
+ type: "html",
+ value: `${titleText}
`,
};
parent.children.splice(index, 1, titleNode);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::details ')) {
- const summaryText = textNode.value.substring('::details '.length);
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::details ")
+ ) {
+ const summaryText = textNode.value.substring("::details ".length);
const node = {
- type: 'html',
- value: `${summaryText}
`
+ type: "html",
+ value: `${summaryText}
`,
};
parent.children.splice(index, 1, node);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::enddetails')) {
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::enddetails")
+ ) {
const node = {
- type: 'html',
- value: ``
+ type: "html",
+ value: ``,
};
parent.children.splice(index, 1, node);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::iframe ')) {
- const iframeSrc = textNode.value.substring('::iframe '.length);
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::iframe ")
+ ) {
+ const iframeSrc = textNode.value.substring("::iframe ".length);
const iframeNode = {
- type: 'html',
- value: ``
+ type: "html",
+ value: ``,
};
parent.children.splice(index, 1, iframeNode);
}
});
- visit(tree, 'link', (node: any) => {
- const isExternal = /^https?:\/\//i.test(node.url) || /^\/\//.test(node.url);
+ visit(tree, "link", (node: any) => {
+ const isExternal =
+ /^https?:\/\//i.test(node.url) || /^\/\//.test(node.url);
if (!isExternal) return;
@@ -131,8 +146,8 @@ function remark({
node.data.hProperties = {};
}
- node.data.hProperties.target = '_blank';
- node.data.hProperties.rel = 'noopener noreferrer';
+ node.data.hProperties.target = "_blank";
+ node.data.hProperties.rel = "noopener noreferrer";
});
};
};
-
+
+
{sectionTitle}
-
-
+
+
+
{titleFirst}
@@ -21,8 +45,15 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
-
-
+
+
+
{titleSecond}
@@ -31,7 +62,9 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
+
-
))
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/demo.tsx
index e0148c4c..99710d7b 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/demo.tsx
@@ -1,16 +1,23 @@
-import React from 'react';
-import { useClickTracker } from './useClickTracker';
+import React from "react";
+import { useClickTracker } from "./useClickTracker";
const NextLevelButtonClickTracker: React.FC = () => {
const [state, incrementCount] = useClickTracker();
return (
-
+
);
};
-export default NextLevelButtonClickTracker;
\ No newline at end of file
+export default NextLevelButtonClickTracker;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx
index c99f2dff..e99f3b20 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/NextLevelButtonClickTracker/useClickTracker.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
interface UseClickTrackerState {
count: number;
lastClicked: number | null;
@@ -9,10 +9,10 @@ export const useClickTracker = (): [UseClickTrackerState, () => void] => {
lastClicked: null,
});
const incrementCount = useCallback(() => {
- setState(prevState => ({
+ setState((prevState) => ({
count: prevState.count + 1,
lastClicked: Date.now(),
}));
}, [setState]);
return [state, incrementCount];
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx
index e968db93..4fc2f674 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/demo.tsx
@@ -1,12 +1,17 @@
-import React from 'react';
-import { useClickCounter } from './useClickCounter';
+import React from "react";
+import { useClickCounter } from "./useClickCounter";
const SimpleButtonClickTracker: React.FC = () => {
const [count, increment] = useClickCounter();
return (
-
Button has been clicked {state.count} times
- Last clicked at:{' '} - {state.lastClicked ? new Date(state.lastClicked).toLocaleString() : 'Never'} + Last clicked at:{" "} + {state.lastClicked + ? new Date(state.lastClicked).toLocaleString() + : "Never"}
- +
+
);
};
-export default SimpleButtonClickTracker;
\ No newline at end of file
+export default SimpleButtonClickTracker;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx
index 73793e0c..6fe7f699 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleButtonClickTracker/useClickCounter.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState } from "react";
export const useClickCounter = () => {
const [count, setCount] = useState(0);
- const increment = () => setCount(prevCount => prevCount + 1);
+ const increment = () => setCount((prevCount) => prevCount + 1);
return [count, increment] as const;
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx
index 8ef03bc6..e730690c 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/demo.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { useMousePosition } from './useMousePosition';
+import React from "react";
+import { useMousePosition } from "./useMousePosition";
const SimpleMouseTracker: React.FC = () => {
const [position] = useMousePosition();
return (
-
Button has been clicked {count} times
- +
+
);
};
-export default SimpleMouseTracker;
\ No newline at end of file
+export default SimpleMouseTracker;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx
index 63c40a6d..faadc7c6 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/SimpleMouseTracker/useMousePosition.tsx
@@ -1,15 +1,17 @@
-import { useState, useEffect } from 'react';
-export const useMousePosition = (): [{ x: number, y: number },
-React.Dispatch>] => {
+import { useState, useEffect } from "react";
+export const useMousePosition = (): [
+ { x: number; y: number },
+ React.Dispatch>,
+] => {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
setPosition({ x: event.clientX, y: event.clientY });
};
- window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener("mousemove", handleMouseMove);
return () => {
- window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
return [position, setPosition];
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx
index be871106..f903a336 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/demo.tsx
@@ -1,28 +1,31 @@
// Use the hook in a component
-import React, { useState } from 'react';
-import { useDebouncedSearch } from './useDebouncedSearch';
+import React, { useState } from "react";
+import { useDebouncedSearch } from "./useDebouncedSearch";
const UseDebouncedSearchDemo: React.FC = () => {
- const [searchTerm, setSearchTerm] = useState('');
+ const [searchTerm, setSearchTerm] = useState("");
const handleSearch = (value: string) => {
console.log(`Searching for: ${value}`);
};
- const [debouncedSearchTerm] = useDebouncedSearch(searchTerm, handleSearch, 500);
-
+ const [debouncedSearchTerm] = useDebouncedSearch(
+ searchTerm,
+ handleSearch,
+ 500,
+ );
return (
-
X: {position.x}
Y: {position.y}
+
setSearchTerm(e.target.value)}
+ onChange={(e) => setSearchTerm(e.target.value)}
/>
);
};
-export default UseDebouncedSearchDemo;
\ No newline at end of file
+export default UseDebouncedSearchDemo;
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx
index 10b69940..cdd5eb87 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useDebouncedSearch/useDebouncedSearch.tsx
@@ -1,6 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-export const useDebouncedSearch = (value: string, search: (value: string) => void, wait: number) => {
+export const useDebouncedSearch = (
+ value: string,
+ search: (value: string) => void,
+ wait: number,
+) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
@@ -18,4 +22,4 @@ export const useDebouncedSearch = (value: string, search: (value: string) => voi
}, [debouncedValue, search]);
return [debouncedValue];
-};
\ No newline at end of file
+};
diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx
index 47df60fc..ca5eb20f 100644
--- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx
+++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/demo.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { useFetchData } from './useFetchData';
+import React from "react";
+import { useFetchData } from "./useFetchData";
const UseFetchDataDemo: React.FC = () => {
- const [data, error, loading] = useFetchData('https://jsonplaceholder.typicode.com/posts');
+ const [data, error, loading] = useFetchData(
+ "https://jsonplaceholder.typicode.com/posts",
+ );
if (loading) return Debounced search term: {debouncedSearchTerm}
Loading...
; if (error) returnError: {error.message}
; if (!data) returnNo data
; return ( -
+
-
{data.slice(0, 5).map((item) => (
- {item.title} @@ -19,4 +21,4 @@ const UseFetchDataDemo: React.FC = () => { ); }; -export default UseFetchDataDemo; \ No newline at end of file +export default UseFetchDataDemo; diff --git a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx index c2895345..8d3599ed 100644 --- a/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx +++ b/apps/website/src/content/partials/how-to-write-custom-react-hooks/demos/useFetchData/useFetchData.tsx @@ -1,15 +1,15 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect } from "react"; interface Post { - userId: number; - id: number; - title: string; - body: string; + userId: number; + id: number; + title: string; + body: string; } export const useFetchData = (url: string) => { const [data, setData] = useState
- '; + contentsHtml += "
- "; contentsHtml += `${textNode.value}`; - contentsHtml += ' '; + contentsHtml += ""; } if (node.depth > lastNodeDepth) { - contentsHtml += '
- ';
+ contentsHtml += "
- ".repeat(node.depth - lastNodeDepth);
+ contentsHtml += "
- "; contentsHtml += `${textNode.value}`; - contentsHtml += ' '; + contentsHtml += "
";
lastNodeDepth = node.depth;
}
if (node.depth < lastNodeDepth) {
- contentsHtml += ' - '; + contentsHtml += "
- "; contentsHtml += `${textNode.value}`; - contentsHtml += ' '; + contentsHtml += ""; lastNodeDepth = node.depth; } }); if (contentsHtml.length !== 0) { - contentsHtml += '
@@ -46,13 +46,17 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
lg:max-w-[580px] xl:min-w-[626px]"
>
- Outcome-Driven Product Engineering
+
+ Outcome-Driven Product Engineering
+
- On-Demand Talent,
+
+ On-Demand Talent,
+
- Product-minded web engineers who bring clarity, momentum, and ownership. Skip the hiring bottlenecks. Our developers integrate fast, think beyond the ticket, and help you build with purpose — from junior support to senior leadership.
+ Product-minded web engineers who bring clarity, momentum, and
+ ownership. Skip the hiring bottlenecks. Our developers integrate
+ fast, think beyond the ticket, and help you build with purpose —
+ from junior support to senior leadership.
@@ -111,22 +118,32 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
- On-Demand Talent,
+
+ On-Demand Talent,
+
- Product-minded web engineers who bring clarity, momentum, and ownership. Skip the hiring bottlenecks. Our developers integrate fast, think beyond the ticket, and help you build with purpose — from junior support to senior leadership.
+ Product-minded web engineers who bring clarity, momentum, and
+ ownership. Skip the hiring bottlenecks. Our developers integrate
+ fast, think beyond the ticket, and help you build with purpose —
+ from junior support to senior leadership.
@@ -111,22 +118,32 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
-
+
We're 100% Focused on results
-
- Flexible, Embedded Engineers,
+
+
+ Flexible, Embedded Engineers,
+
Ready to Plug-In
-
+
-
-
+
+
-
- We offer on-demand staff augmentation with web engineers who blend technical excellence, product intuition, and strong communication.
+
+ We offer on-demand staff augmentation with web engineers
+ who blend technical excellence,
+ product intuition, and strong communication.
-
- Whether you need a junior developer to support your team, or a product-minded lead to drive an initiative, we match talent to your exact needs and fast.
+
+ Whether you need a junior developer to support your team,
+ or a product-minded lead to drive an initiative, we
+ match talent to your exact needs
+ and fast.
-
- Our engineers take initiative instead of waiting on tasks. They think critically, act independently, and ship with care.
+
+ Our engineers take initiative instead of waiting on tasks.
+ They think critically, act independently, and
+ ship with care.
-
+
-
- We have found the perfect extension of our team with CroCoder. We operate as one team, celebrating our wins and working through the challenges together. They "own" the roadmap, deadlines and outcomes with us — from the ideation and direction stages through to post-launch optimization.
+
+ We have found the perfect extension of our team with CroCoder.
+ We operate as one team, celebrating our wins and working
+ through the challenges together. They "own" the roadmap,
+ deadlines and outcomes with us — from the ideation and
+ direction stages through to post-launch optimization.
-
+
- Paul Jeszenszky
- Submix co-founder & CEO
+
+ Paul Jeszenszky
+
+
+ Submix co-founder & CEO
+
-
+
-
- Ideal for Teams who
-
+
+
+ Ideal for Teams who
+
+
-
-
- Need to scale fast
- without compromising quality
+
+ Need to scale fast
+
+
+ without compromising quality
+
@@ -219,8 +283,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Have initiatives
- they want to move forward but are lacking bandwidth
+
+ Have initiatives
+
+
+ they want to move forward but are lacking bandwidth
+
@@ -236,8 +308,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Struggle to find
- Engineers with both soft skills and technical depth
+
+ Struggle to find
+
+
+ Engineers with both soft skills and technical depth
+
@@ -253,8 +333,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Want talent
- that can work independently and contribute meaningfully
+
+ Want talent
+
+
+ that can work independently and contribute meaningfully
+
@@ -279,19 +367,31 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
-
+
We Specialize in Building
Web Products
-
- Our engineers work with modern stacks like React, TypeScript, Node.js, Next.js, GraphQL, and more — but we're not dogmatic. We choose the right tools for the job.
+
+ Our engineers work with modern stacks like React, TypeScript, Node.js,
+ Next.js, GraphQL, and more — but we're not dogmatic. We choose the
+ right tools for the job.
-
-
+
+
-
-
+
+
Full Stack Development
- Frontend, backend, or complete product development
+
+ Full Stack Development
+
+
+ Frontend, backend, or complete product development
+
-
-
+
+
Scalable Architecture
- Maintainable, future-proof system design
+
+ Scalable Architecture
+
+
+ Maintainable, future-proof system design
+
-
-
+
+
Feature Development
- New features, refactors, or greenfield builds
+
+ Feature Development
+
+
+ New features, refactors, or greenfield builds
+
-
-
+
+
Cross-Functional Collaboration
- Seamless work with product and design teams
+
+ Cross-Functional Collaboration
+
+
+ Seamless work with product and design teams
+
@@ -360,10 +496,13 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
-
- Our Engineers
+
+ Our
+ Engineers
-
+
@@ -377,8 +516,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Product-minded
- They align with your goals, not just your backlog
+
+ Product-minded
+
+
+ They align with your goals, not just your backlog
+
@@ -394,8 +541,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Proactive
- Self-starters who take initiative and drive work forward
+
+ Proactive
+
+
+ Self-starters who take initiative and drive work forward
+
@@ -411,8 +566,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Communicative
- Async-ready, remote-native, and highly collaborative
+
+ Communicative
+
+
+ Async-ready, remote-native, and highly collaborative
+
@@ -428,8 +591,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Flexible
- Short-term, long-term, or somewhere in between
+
+ Flexible
+
+
+ Short-term, long-term, or somewhere in between
+
@@ -445,13 +616,21 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Skilled across levels
- From promising juniors to proven engineering leads
+
+ Skilled across levels
+
+
+ From promising juniors to proven engineering leads
+
-
+
-
-
- Let's Build Together
-
+
+ Let's Build Together
@@ -487,4 +667,4 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
.forEach((element) =>
element.addEventListener("click", handleActionHeroClick),
);
-
\ No newline at end of file
+
diff --git a/bun.lock b/bun.lock
index 455337b1..559c138d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -4,7 +4,7 @@
"": {
"name": "web",
"dependencies": {
- "prettier": "^3.4.2",
+ "prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1",
},
"devDependencies": {
diff --git a/package.json b/package.json
index 568621fd..cf7ec7e8 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"build": "turbo build",
"dev": "turbo dev",
"lint": "turbo lint",
- "format": "prettier --write \"**/*.{ts,tsx,md}\""
+ "format": "prettier --write \"**/*.{ts,tsx,astro}\""
},
"devDependencies": {
"turbo": "^2.5.5"
@@ -19,7 +19,7 @@
"packages/*"
],
"dependencies": {
- "prettier": "^3.4.2",
+ "prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1"
}
}
diff --git a/packages/remark-plugin/index.ts b/packages/remark-plugin/index.ts
index 16a35bff..61b7070b 100644
--- a/packages/remark-plugin/index.ts
+++ b/packages/remark-plugin/index.ts
@@ -1,125 +1,140 @@
-import type { Node } from 'unist';
-import { visit } from 'unist-util-visit';
-
+import type { Node } from "unist";
+import { visit } from "unist-util-visit";
function remark({
titleClass,
detailsClass,
summaryClass,
- iframeClass
+ iframeClass,
}: {
- titleClass: string,
- detailsClass: string,
- summaryClass: string,
- iframeClass: string,
+ titleClass: string;
+ detailsClass: string;
+ summaryClass: string;
+ iframeClass: string;
}) {
return () => {
-
return (tree: Node) => {
- let contentsHtml = '';
+ let contentsHtml = "";
let lastNodeDepth = 100;
let ulDepth = 0;
let startingUlDepth = 0;
let contentsHeadingParent = null;
let contentsHeadingIndex = 0;
- visit(tree, 'heading', (node: any, index: number, parent: any) => {
+ visit(tree, "heading", (node: any, index: number, parent: any) => {
if (!node.children || node.children.length !== 1) return;
const textNode = node.children[0];
- if (textNode.type === 'text' && textNode.value === 'Contents') {
+ if (textNode.type === "text" && textNode.value === "Contents") {
contentsHeadingParent = parent;
contentsHeadingIndex = index;
return;
}
- const id = textNode.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\-_\.]/g, '');
+ const id = textNode.value
+ .toLowerCase()
+ .replace(/\s+/g, "-")
+ .replace(/[^a-z0-9\-_\.]/g, "");
node.id = id;
if (contentsHtml.length === 0) {
- contentsHtml += '';
+ contentsHtml += "";
ulDepth = node.depth;
startingUlDepth = node.depth;
lastNodeDepth = node.depth;
}
if (node.depth === lastNodeDepth) {
- contentsHtml += ''.repeat(node.depth - lastNodeDepth);
- contentsHtml += '
'.repeat(lastNodeDepth - node.depth);
- contentsHtml += '
".repeat(lastNodeDepth - node.depth);
+ contentsHtml += "
'.repeat(ulDepth - startingUlDepth + 1);
+ contentsHtml += "".repeat(ulDepth - startingUlDepth + 1);
}
if (contentsHeadingParent !== null) {
- (contentsHeadingParent as any).children.splice(contentsHeadingIndex + 1, 0, {
- type: 'html',
- value: contentsHtml,
- });
+ (contentsHeadingParent as any).children.splice(
+ contentsHeadingIndex + 1,
+ 0,
+ {
+ type: "html",
+ value: contentsHtml,
+ },
+ );
}
- visit(tree, 'paragraph', (node: any, index: number, parent: any) => {
+ visit(tree, "paragraph", (node: any, index: number, parent: any) => {
if (!node.children || node.children.length !== 1) return;
const textNode = node.children[0];
// non h title rule
- if (textNode.type === 'text' && textNode.value.startsWith('::title ')) {
- const titleText = textNode.value.substring('::title '.length);
+ if (textNode.type === "text" && textNode.value.startsWith("::title ")) {
+ const titleText = textNode.value.substring("::title ".length);
const titleNode = {
- type: 'html',
- value: `${titleText}
`
+ type: "html",
+ value: `${titleText}
`,
};
parent.children.splice(index, 1, titleNode);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::details ')) {
- const summaryText = textNode.value.substring('::details '.length);
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::details ")
+ ) {
+ const summaryText = textNode.value.substring("::details ".length);
const node = {
- type: 'html',
- value: `${summaryText}
`
+ type: "html",
+ value: `${summaryText}
`,
};
parent.children.splice(index, 1, node);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::enddetails')) {
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::enddetails")
+ ) {
const node = {
- type: 'html',
- value: ``
+ type: "html",
+ value: ``,
};
parent.children.splice(index, 1, node);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::iframe ')) {
- const iframeSrc = textNode.value.substring('::iframe '.length);
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::iframe ")
+ ) {
+ const iframeSrc = textNode.value.substring("::iframe ".length);
const iframeNode = {
- type: 'html',
- value: ``
+ type: "html",
+ value: ``,
};
parent.children.splice(index, 1, iframeNode);
}
});
- visit(tree, 'link', (node: any) => {
- const isExternal = /^https?:\/\//i.test(node.url) || /^\/\//.test(node.url);
+ visit(tree, "link", (node: any) => {
+ const isExternal =
+ /^https?:\/\//i.test(node.url) || /^\/\//.test(node.url);
if (!isExternal) return;
@@ -131,8 +146,8 @@ function remark({
node.data.hProperties = {};
}
- node.data.hProperties.target = '_blank';
- node.data.hProperties.rel = 'noopener noreferrer';
+ node.data.hProperties.target = "_blank";
+ node.data.hProperties.rel = "noopener noreferrer";
});
};
};
-
+
We're 100% Focused on results
-
- Flexible, Embedded Engineers,
+
-
+
- Flexible, Embedded Engineers,
+
+
+ Flexible, Embedded Engineers,
+
Ready to Plug-In
-
-
+
+
-
-
- We offer on-demand staff augmentation with web engineers who blend technical excellence, product intuition, and strong communication. +
+ We offer on-demand staff augmentation with web engineers + who blend technical excellence, + product intuition, and strong communication.
-- Whether you need a junior developer to support your team, or a product-minded lead to drive an initiative, we match talent to your exact needs and fast. +
+ Whether you need a junior developer to support your team, + or a product-minded lead to drive an initiative, we + match talent to your exact needs + and fast.
-- Our engineers take initiative instead of waiting on tasks. They think critically, act independently, and ship with care. +
+ Our engineers take initiative instead of waiting on tasks. + They think critically, act independently, and + ship with care.
+
-
@@ -279,19 +367,31 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
- We have found the perfect extension of our team with CroCoder. We operate as one team, celebrating our wins and working through the challenges together. They "own" the roadmap, deadlines and outcomes with us — from the ideation and direction stages through to post-launch optimization. +
+ We have found the perfect extension of our team with CroCoder. + We operate as one team, celebrating our wins and working + through the challenges together. They "own" the roadmap, + deadlines and outcomes with us — from the ideation and + direction stages through to post-launch optimization.
-
-
+
-
Paul Jeszenszky
-Submix co-founder & CEO
++ Paul Jeszenszky +
++ Submix co-founder & CEO +
+
-
-
@@ -253,8 +333,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
Ideal for Teams who
- +
+
+ Ideal for Teams who +
+
-
@@ -236,8 +308,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
-
-
+
+
@@ -219,8 +283,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
+
-
Need to scale fast
-without compromising quality
++ Need to scale fast +
++ without compromising quality +
-
Have initiatives
-they want to move forward but are lacking bandwidth
++ Have initiatives +
++ they want to move forward but are lacking bandwidth +
-
Struggle to find
-Engineers with both soft skills and technical depth
++ Struggle to find +
++ Engineers with both soft skills and technical depth +
-
Want talent
-that can work independently and contribute meaningfully
++ Want talent +
++ that can work independently and contribute meaningfully +
-
+
-
-
+
We Specialize in Building
Web Products
-
Web Products
- Our engineers work with modern stacks like React, TypeScript, Node.js, Next.js, GraphQL, and more — but we're not dogmatic. We choose the right tools for the job. +
+ Our engineers work with modern stacks like React, TypeScript, Node.js, + Next.js, GraphQL, and more — but we're not dogmatic. We choose the + right tools for the job.
+
+
-
-
- Let's Build Together
-
+
+ Let's Build Together
@@ -487,4 +667,4 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
.forEach((element) =>
element.addEventListener("click", handleActionHeroClick),
);
-
\ No newline at end of file
+
diff --git a/bun.lock b/bun.lock
index 455337b1..559c138d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -4,7 +4,7 @@
"": {
"name": "web",
"dependencies": {
- "prettier": "^3.4.2",
+ "prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1",
},
"devDependencies": {
diff --git a/package.json b/package.json
index 568621fd..cf7ec7e8 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"build": "turbo build",
"dev": "turbo dev",
"lint": "turbo lint",
- "format": "prettier --write \"**/*.{ts,tsx,md}\""
+ "format": "prettier --write \"**/*.{ts,tsx,astro}\""
},
"devDependencies": {
"turbo": "^2.5.5"
@@ -19,7 +19,7 @@
"packages/*"
],
"dependencies": {
- "prettier": "^3.4.2",
+ "prettier": "^3.6.2",
"prettier-plugin-astro": "^0.14.1"
}
}
diff --git a/packages/remark-plugin/index.ts b/packages/remark-plugin/index.ts
index 16a35bff..61b7070b 100644
--- a/packages/remark-plugin/index.ts
+++ b/packages/remark-plugin/index.ts
@@ -1,125 +1,140 @@
-import type { Node } from 'unist';
-import { visit } from 'unist-util-visit';
-
+import type { Node } from "unist";
+import { visit } from "unist-util-visit";
function remark({
titleClass,
detailsClass,
summaryClass,
- iframeClass
+ iframeClass,
}: {
- titleClass: string,
- detailsClass: string,
- summaryClass: string,
- iframeClass: string,
+ titleClass: string;
+ detailsClass: string;
+ summaryClass: string;
+ iframeClass: string;
}) {
return () => {
-
return (tree: Node) => {
- let contentsHtml = '';
+ let contentsHtml = "";
let lastNodeDepth = 100;
let ulDepth = 0;
let startingUlDepth = 0;
let contentsHeadingParent = null;
let contentsHeadingIndex = 0;
- visit(tree, 'heading', (node: any, index: number, parent: any) => {
+ visit(tree, "heading", (node: any, index: number, parent: any) => {
if (!node.children || node.children.length !== 1) return;
const textNode = node.children[0];
- if (textNode.type === 'text' && textNode.value === 'Contents') {
+ if (textNode.type === "text" && textNode.value === "Contents") {
contentsHeadingParent = parent;
contentsHeadingIndex = index;
return;
}
- const id = textNode.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\-_\.]/g, '');
+ const id = textNode.value
+ .toLowerCase()
+ .replace(/\s+/g, "-")
+ .replace(/[^a-z0-9\-_\.]/g, "");
node.id = id;
if (contentsHtml.length === 0) {
- contentsHtml += '`
+ type: "html",
+ value: ``,
};
parent.children.splice(index, 1, node);
}
- if (textNode.type === 'text' && textNode.value.startsWith('::iframe ')) {
- const iframeSrc = textNode.value.substring('::iframe '.length);
+ if (
+ textNode.type === "text" &&
+ textNode.value.startsWith("::iframe ")
+ ) {
+ const iframeSrc = textNode.value.substring("::iframe ".length);
const iframeNode = {
- type: 'html',
- value: ``
+ type: "html",
+ value: ``,
};
parent.children.splice(index, 1, iframeNode);
}
});
- visit(tree, 'link', (node: any) => {
- const isExternal = /^https?:\/\//i.test(node.url) || /^\/\//.test(node.url);
+ visit(tree, "link", (node: any) => {
+ const isExternal =
+ /^https?:\/\//i.test(node.url) || /^\/\//.test(node.url);
if (!isExternal) return;
@@ -131,8 +146,8 @@ function remark({
node.data.hProperties = {};
}
- node.data.hProperties.target = '_blank';
- node.data.hProperties.rel = 'noopener noreferrer';
+ node.data.hProperties.target = "_blank";
+ node.data.hProperties.rel = "noopener noreferrer";
});
};
};
-
-
+
-
+
+
- Full Stack Development
-Frontend, backend, or complete product development
++ Full Stack Development +
++ Frontend, backend, or complete product development +
-
+
@@ -445,13 +616,21 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
+
- Scalable Architecture
-Maintainable, future-proof system design
++ Scalable Architecture +
++ Maintainable, future-proof system design +
-
+
@@ -428,8 +591,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
+
- Feature Development
-New features, refactors, or greenfield builds
++ Feature Development +
++ New features, refactors, or greenfield builds +
-
@@ -360,10 +496,13 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
+
+
Cross-Functional Collaboration
-Seamless work with product and design teams
++ Cross-Functional Collaboration +
++ Seamless work with product and design teams +
-
- Our Engineers
+
@@ -411,8 +566,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Our Engineers
+
+ Our
+ Engineers
-
+
@@ -377,8 +516,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Product-minded
- They align with your goals, not just your backlog
+
+ Product-minded
+
+
+ They align with your goals, not just your backlog
+
@@ -394,8 +541,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
- Proactive
- Self-starters who take initiative and drive work forward
+
+ Proactive
+
+
+ Self-starters who take initiative and drive work forward
+
@@ -377,8 +516,16 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
/>
-
Product-minded
-They align with your goals, not just your backlog
++ Product-minded +
++ They align with your goals, not just your backlog +
Proactive
-Self-starters who take initiative and drive work forward
++ Proactive +
++ Self-starters who take initiative and drive work forward +
-
Communicative
-Async-ready, remote-native, and highly collaborative
++ Communicative +
++ Async-ready, remote-native, and highly collaborative +
-
Flexible
-Short-term, long-term, or somewhere in between
++ Flexible +
++ Short-term, long-term, or somewhere in between +
-
Skilled across levels
-From promising juniors to proven engineering leads
++ Skilled across levels +
++ From promising juniors to proven engineering leads +
- ';
+ contentsHtml += "
- ";
ulDepth = node.depth;
startingUlDepth = node.depth;
lastNodeDepth = node.depth;
}
if (node.depth === lastNodeDepth) {
- contentsHtml += '
- '.repeat(node.depth - lastNodeDepth);
- contentsHtml += '
${titleText}
` + type: "html", + value: `${titleText}
`, }; parent.children.splice(index, 1, titleNode); } - if (textNode.type === 'text' && textNode.value.startsWith('::details ')) { - const summaryText = textNode.value.substring('::details '.length); + if ( + textNode.type === "text" && + textNode.value.startsWith("::details ") + ) { + const summaryText = textNode.value.substring("::details ".length); const node = { - type: 'html', - value: `