blog: oneRepo announcement

.astro/types.d.ts

@@ -381,6 +381,13 @@ declare module 'astro:content' {
   collection: "blog";
   data: InferEntrySchema<"blog">
 } & { render(): Render[".mdx"] };
+"2024-02-27-introducing-onerepo-the-javascript-typescript-monorepo-toolchain-for-safe-strict-fast-development.mdx": {
+	id: "2024-02-27-introducing-onerepo-the-javascript-typescript-monorepo-toolchain-for-safe-strict-fast-development.mdx";
+  slug: "2024-02-27-introducing-onerepo-the-javascript-typescript-monorepo-toolchain-for-safe-strict-fast-development";
+  body: string;
+  collection: "blog";
+  data: InferEntrySchema<"blog">
+} & { render(): Render[".mdx"] };
 "desktop-organization-and-workflow.mdx": {
 	id: "desktop-organization-and-workflow.mdx";
   slug: "desktop-organization-and-workflow";

astro.config.ts

@@ -8,6 +8,7 @@ import tailwind from '@astrojs/tailwind';
 import { remarkReadingTime } from './plugins/remark-reading-time.mjs';
 import react from '@astrojs/react';
 import expressiveCode, { ExpressiveCodeTheme } from 'astro-expressive-code';
+import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
 
 const darkTheme = readFileSync(new URL('./config/theme/tailwind-dark-slate.json', import.meta.url), 'utf-8');
 const lightTheme = readFileSync(new URL('./config/theme/tailwind-breeze.json', import.meta.url), 'utf-8');
@@ -29,6 +30,7 @@ export default defineConfig({
 					frameBoxShadowCssValue: 'none',
 				},
 			},
+			plugins: [pluginCollapsibleSections()],
 		}),
 		icon(),
 		solid({

config/theme/tailwind-dark-slate.json

@@ -69,12 +69,22 @@
 		"tab.border": "#1e293b",
 		"tab.inactiveBackground": "#0f172a",
 		"tab.unfocusedHoverForeground": "#ffffff",
-		"terminal.ansiBrightBlue": "#a5caff",
-		"terminal.ansiBrightCyan": "#38bdf8",
-		"terminal.ansiBrightGreen": "#f9fafb",
-		"terminal.ansiBrightRed": "#f87171",
-		"terminal.ansiGreen": "#bbf7d0",
-		"terminal.ansiYellow": "#fef08a",
+		"terminal.ansiBlack": "#000000",
+		"terminal.ansiBlue": "#3182ce",
+		"terminal.ansiBrightBlack": "#4a5568",
+		"terminal.ansiBrightBlue": "#4299e1",
+		"terminal.ansiBrightCyan": "#38b2ac",
+		"terminal.ansiBrightGreen": "#48bb78",
+		"terminal.ansiBrightMagenta": "#ed64a6",
+		"terminal.ansiBrightRed": "#e53e3e",
+		"terminal.ansiBrightWhite": "#ffffff",
+		"terminal.ansiBrightYellow": "#ecc94b",
+		"terminal.ansiCyan": "#319795",
+		"terminal.ansiGreen": "#38a169",
+		"terminal.ansiMagenta": "#3182ce",
+		"terminal.ansiRed": "#c53030",
+		"terminal.ansiWhite": "#ffffff",
+		"terminal.ansiYellow": "#d69e2e",
 		"terminal.background": "#0f172a",
 		"terminal.dropBackground": "#374151",
 		"terminal.foreground": "#f9fafb",

package.json

@@ -8,6 +8,7 @@
 		"@astrojs/sitemap": "^3.0.5",
 		"@astrojs/solid-js": "^4.0.1",
 		"@astrojs/tailwind": "^5.1.0",
+		"@iconify-json/heroicons": "^1.1.20",
 		"@tailwindcss/typography": "^0.5.10",
 		"astro": "^4.4.0",
 		"astro-expressive-code": "^0.32.4",
@@ -28,6 +29,7 @@
 	},
 	"devDependencies": {
 		"@astrojs/check": "^0.5.4",
+		"@expressive-code/plugin-collapsible-sections": "^0.32.4",
 		"@onerepo/plugin-eslint": "1.0.0-beta.0",
 		"@onerepo/plugin-prettier": "1.0.0-beta.0",
 		"@onerepo/plugin-typescript": "1.0.0-beta.0",

src/components/Aurora.astro

@@ -0,0 +1,122 @@
+---
+const widths = ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '4rem'];
+const heights = ['80%', '85%', '90%', '95%', '100%'];
+const anims = [
+	['0s', '4s'],
+	['-3s', '7s'],
+	['-2s', '8s'],
+	['-3s', '9s'],
+	['-2s', '10s'],
+	['-4s', '11s'],
+	['-6s', '12s'],
+];
+const opacity = new Array(10).fill(null);
+
+const margins = ['0', '0.3rem', '1rem'];
+
+interface Props {
+	class?: string;
+	bands: number;
+}
+
+const { bands } = Astro.props;
+/* eslint-disable tailwindcss/no-custom-classname */
+---
+
+<div class="not-prose">
+	<div class="aurora">
+		{
+			Array.from(Array(bands)).map((_, i) => {
+				const opacityI =
+					i < bands / 2
+						? Math.ceil(i / 2)
+						: bands - i < opacity.length
+							? bands - i
+							: Math.floor((Math.random() * opacity.length) / 2 + opacity.length / 2);
+				const anim = Math.floor(Math.random() * anims.length);
+				return (
+					<div
+						class="aurora-slice"
+						style={{
+							'animation-delay': anims[anim]![0],
+							'animation-duration': anims[anim]![1],
+							opacity: (opacityI + 1) / 15,
+							'margin-right': margins[Math.floor(Math.random() * margins.length)],
+							height: heights[Math.floor(Math.random() * heights.length)],
+							width: widths[Math.floor(Math.random() * widths.length)],
+						}}
+					/>
+				);
+			})
+		}
+	</div>
+</div>
+
+<style>
+	.aurora {
+		transform: perspective(300px) rotateX(-10deg) rotateY(-9deg);
+		pointer-events: none;
+		position: absolute;
+		left: 0;
+		right: 0;
+		margin-top: -200px;
+		/* inset: 28rem 0 0 0; */
+		z-index: -10;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 400px;
+		filter: blur(1.5rem);
+	}
+
+	@media (max-width: 60rem) {
+		.aurora {
+			filter: blur(1rem);
+		}
+		.aurora-slice:nth-child(odd) {
+			display: none;
+		}
+	}
+
+	.aurora-slice {
+		will-change: transform;
+		animation-name: aurora;
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: 20;
+		flex-grow: 1;
+		background-image: linear-gradient(
+			0deg,
+			rgba(219, 39, 119, 0) 0%,
+			rgba(4, 182, 212, 0.8) 4%,
+			rgba(4, 182, 212, 0.6) 5%,
+			rgba(234, 242, 166, 0.75) 8%,
+			rgba(67, 183, 160, 0.4) 12%,
+			rgba(219, 200, 219, 0.65) 22%,
+			rgba(219, 39, 119, 0.55) 40%,
+			rgba(219, 39, 119, 0) 100%
+		);
+	}
+
+	[data-theme='light'] .aurora-slice {
+		background-image: linear-gradient(
+			0deg,
+			rgba(219, 39, 119, 0) 0%,
+			rgba(4, 182, 212, 0.5) 4%,
+			rgba(4, 182, 212, 0.35) 8%,
+			rgba(67, 183, 160, 0.3) 18%,
+			rgba(219, 200, 219, 0.15) 20%,
+			rgba(219, 39, 119, 0.4) 40%,
+			rgba(219, 39, 119, 0) 100%
+		);
+	}
+
+	@keyframes aurora {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(10%);
+		}
+	}
+</style>

src/components/Button.astro

@@ -7,11 +7,12 @@ const { class: className, ...props } = Astro.props as Props;
 
 <a
 	class={clsx(
-		'inline-flex items-center gap-x-2 rounded px-3 py-2 font-bold text-blue-600 shadow-none outline-none ring-4 ring-transparent transition-all duration-200 hover:bg-blue-500/30 hover:text-blue-800 focus-visible:ring-4 focus-visible:ring-blue-500 active:shadow-inner active:ring-4 active:ring-blue-200/70 dark:text-blue-100 dark:hover:bg-blue-500/30 dark:hover:text-blue-50 dark:focus-visible:ring-blue-500/50 dark:active:ring-blue-500/30',
+		'not-prose inline-flex items-center gap-x-2 rounded px-3 py-2 font-bold text-blue-600 shadow-none outline-none ring-4 ring-transparent transition-all duration-200 hover:bg-blue-500/30 hover:text-blue-800 focus-visible:ring-4 focus-visible:ring-blue-500 active:shadow-inner active:ring-4 active:ring-blue-200/70 dark:text-blue-100 dark:hover:bg-blue-500/30 dark:hover:text-blue-50 dark:focus-visible:ring-blue-500/50 dark:active:ring-blue-500/30',
 		className,
 	)}
 	{...props}
 >
 	<slot name="icon" />
+	<slot name="title" />
 	<slot />
 </a>