Merge branch 'main' into monorepo

lychee.toml

@@ -39,3 +39,5 @@ exclude = [
 	'https://stackoverflow.com/questions/ask.*', # 403
 	'.*\.ext2'	
 ]
+
+max_concurrency = 14

packages/astro-theme/components/DocsSidebar.astro

@@ -32,7 +32,7 @@ const { product, entries } = Astro.props;
 	}
 
 	{
-		entries.length && (
+		entries.length > 0 && (
 			<ol class="text-balance">
 				{entries.map((entry) => (
 					<DocsSidebarNavEntry {entry} />

packages/astro-theme/components/Footer.astro

@@ -36,7 +36,7 @@ const sections: Section[] = [
 			{ text: "Documentation", href: "/#ecosystem" },
 			{ text: "Blog", href: "/blog" },
 			{ text: "GitHub", href: "https://github.com/leaningtech" },
-			{ text: "Contributing", href: "/contributing" },
+			{ text: "Contributing", href: "https://labs.leaningtech.com/docs/contributing" },
 		],
 	},
 	{

packages/astro-theme/components/nav/product/Nav.astro

@@ -18,7 +18,7 @@ const { product } = Astro.props;
 
 <nav
 	aria-label="Product navigation"
-	class="sm:sticky top-0 z-40 bg-stone-900 bg-opacity-90 backdrop-blur-lg xl:bg-transparent xl:backdrop-filter-none text-white font-medium leading-6"
+	class="sticky top-0 z-40 bg-stone-900 bg-opacity-70 backdrop-blur-md text-white font-medium leading-6"
 >
 	<div
 		class="max-w-screen-2xl w-full mx-auto h-16 px-4 sm:px-6 md:px-8 py-4 flex items-center justify-between gap-4 whitespace-nowrap overflow-hidden"

packages/astro-theme/layouts/DocsArticle.astro

@@ -116,7 +116,7 @@ const entries = product
 							editHref={`https://github.com/leaningtech/labs/edit/main/src/content/docs/${id}`}
 						/>*/}
 						<div class="py-5">
-							{entries.length && id && <DocsPagination activeId={id} />}
+							{entries.length > 0 && id && <DocsPagination activeId={id} />}
 						</div>
 					</div>
 				</div>

packages/astro-theme/lib/nav.ts

@@ -38,7 +38,8 @@ export function isProduct(value: unknown): value is Product {
 		value === "cheerpj3" ||
 		value === "cheerpx" ||
 		value === "cheerpx-for-flash" ||
-		value === "cheerpj-jnlp-runner"
+		value === "cheerpj-jnlp-runner" ||
+		value === "cheerpj-applet-runner"
 	);
 }
 

packages/astro-theme/lib/products.ts

@@ -4,8 +4,8 @@ import cheerpLogotype from "../assets/branding/products/cheerp/logotype-white.sv
 import cheerpjLogotype from "../assets/branding/products/cheerpj/logotype-white.svg";
 import cheerpxLogotype from "../assets/branding/products/cheerpx/logotype-white.svg";
 import jnlprunnerLogotype from "../assets/branding/products/cheerpj-extensions/jnlp-logo.png";
-import appletrunnerLogotype from "../assets/branding/products/cheerpj-extensions/applet-logo.png";
 import jnlprunnerLogotypeLarge from "../assets/branding/products/cheerpj-extensions/cheerpj-jnlprunner-large.png";
+import appletrunnerLogotypeLarge from "../assets/branding/products/cheerpj-extensions/cheerpj-appletrunner-large.png";
 
 export interface ProductData {
 	id: Product;
@@ -102,8 +102,8 @@ export const products: { [product in Product]: ProductData } = {
 		id: "cheerpj-applet-runner",
 		type: "extension",
 		name: "CheerpJ Applet Runner",
-		href: "/docs/cheerpj3/getting-started/Java-applet#running-a-public-applet",
-		logotype: appletrunnerLogotype,
+		href: "/docs/cheerpj-applet-runner",
+		logotype: appletrunnerLogotypeLarge,
 		favicon: "/cheerpj2/favicon.ico",
 		subtitle: "Run Java Applets in the modern browser",
 		description: "Run Java Applets in modern browsers without plugins",

packages/cheerpj-applet-page/Card.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from "astro:assets";
+
+interface Props {
+	iconSrc: ImageMetadata;
+	iconAlt: string;
+	title: string;
+	description: string;
+}
+
+const { iconSrc, iconAlt, title, description } = Astro.props;
+---
+
+<div class="px-10 md:w-1/2 lg:w-1/3">
+	<!-- Card -->
+	<div class="mb-9 rounded-xl py-8 px-7 sm:p-9 lg:px-6 xl:px-9">
+		<!-- Icon -->
+		<div class="mx-auto mb-7 inline-block">
+			<Image src={iconSrc} width="53" height="61" alt={iconAlt} />
+		</div>
+		<!-- Text -->
+		<div>
+			<h3
+				class="mb-4 text-xl font-bold text-stone-4200 sm:text-2xl lg:text-xl xl:text-2xl"
+			>
+				{title}
+			</h3>
+			<p class="text-base font-medium text-stone-400">
+				{description}
+			</p>
+		</div>
+	</div>
+</div>

packages/cheerpj-applet-page/Hero.astro

@@ -0,0 +1,63 @@
+---
+import Wrapper from "@leaningtech/hero/Hero.astro";
+import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
+import { Image } from "astro:assets";
+import AppletGear from "./assets/ga.png";
+import screenshots from "./assets/afterapply.png";
+---
+
+<Wrapper>
+	<div
+		class="w-full max-w-screen-xl px-4 sm:px-8 pt-8 lg:pt-16 xl:pt-32 space-y-4 md:grid grid-cols-3"
+	>
+		<div class="flex items-center col-span-2">
+			<div>
+				<p class="text-4xl mt-8 text-stone-500">CheerpJ Applet Runner</p>
+				<h1
+					class="text-white text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-semibold my-4"
+				>
+					Run
+					<span class="font-bold text-orange-500"> Java Applets</span>
+					<br />in the modern browser
+				</h1>
+				<p class="text-xl mt-12 text-stone-300 font-semibold leading-7">
+					Unleash the power of CheerpJ in an easy-to-use browser extension!
+				</p>
+				<p class="text-xl mt-8 text-stone-300 leading-7">
+					Activate and run Java applets effortlessly on any website without the need for traditional Java plugins, enhancing compatibility and user experience.
+				</p>
+				<div class="mt-8 flex flex-wrap gap-4">
+					<LinkButton
+						href="/cheerpj-applet-runner/getting-started/install-chrome"
+						label="Install for Chrome"
+						type="primary"
+						iconRight="ri:chrome-fill"
+					/>
+					<LinkButton
+						href="/cheerpj-applet-runner/getting-started/install-edge"
+						label="Install for Edge"
+						type="primary2"
+						iconRight="ri:edge-fill"
+					/>
+					<LinkButton
+						href="/cheerpj-applet-runner/getting-started"
+						label="Documentation"
+						type="secondary"
+						iconRight="iconoir:google-docs"
+					/>
+				</div>
+			</div>
+		</div>
+		<div class="flex justify-center w-5/5 h-5/5 scale-150">
+			<Image
+				class="mt-40"
+				src={AppletGear}
+				alt="Applet Applet logo enclosed by gears"
+
+			/>
+		</div>
+	</div>
+	<div class="flex justify-center items-center">
+		<Image class="scale-75" src={screenshots} alt="screenshots" />
+	</div>
+</Wrapper>

packages/cheerpj-applet-page/index.js

@@ -0,0 +1,8 @@
+export { default as Hero } from "./Hero.astro";
+export { default as Card } from "./Card.astro";
+export { default as sparkleIcon } from "./assets/sparkle.png";
+export { default as networkIcon } from "./assets/network.png";
+export { default as lockIcon } from "./assets/lock.png";
+export { default as browserIcon } from "./assets/browser.png";
+export { default as layersIcon } from "./assets/layers.png";
+export { default as rocketIcon } from "./assets/rocket.png";

packages/cheerpj-applet-page/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "@leaningtech/cheerpj-applet-page",
+	"private": true,
+	"version": "0.1.0",
+	"main": "index.js",
+	"peerDependencies": {
+		"astro": "*",
+		"@leaningtech/astro-theme": "workspace:^"
+	},
+	"dependencies": {
+		"@leaningtech/hero": "workspace:^"
+	},
+	"author": "Leaning Technologies",
+	"license": "Apache-2.0"
+}

packages/cheerpj-applet-page/utilities/ImageSlider.svelte

@@ -0,0 +1,93 @@
+<script type="ts">
+	import { fade } from "svelte/transition";
+
+	let currentIndex = 1;
+	let images = [
+		{
+			src: "/cheerpj3/assets/jnlp-screenshots/screenshot_1.png",
+			alt: "Run Java Web Start applications. No Java installations. Easy to use. Sandboxed.",
+		},
+		{
+			src: "/cheerpj3/assets/jnlp-screenshots/screenshot_2.png",
+			alt: "Extensive Java compatibility. Swing. Oracle Forms. Oracle EBS. File System. Clipboard. Networking. Printing.",
+		},
+	];
+
+	function back() {
+		if (currentIndex > 1) {
+			currentIndex--;
+		}
+	}
+
+	function next() {
+		if (currentIndex < images.length) {
+			currentIndex++;
+		} else if (currentIndex >= images.length) {
+			currentIndex = 1;
+		}
+	}
+</script>
+
+<article class="overflow-hidden shadow-2xl relative">
+	<div
+		class="rounded-full bg-gray-600 text-white absolute top-5 right-5 text-sm px-2 text-center z-10"
+	>
+		<span>{currentIndex}</span>/<span>{images.length}</span>
+	</div>
+
+	{#each images as image, index (image)}
+		{#if currentIndex === index + 1}
+			<figure
+				transition:fade={{ duration: 700 }}
+				class="h-full w-full object-cover"
+			>
+				<img
+					src={image.src}
+					alt={image.alt}
+					class="absolute inset-0 z-10 h-full w-full object-cover"
+				/>
+			</figure>
+		{/if}
+	{/each}
+
+	<button
+		on:click={back}
+		class="absolute left-14 top-1/2 translate-y-1/2 w-11 h-11 flex justify-center items-center rounded-full shadow-md z-10 bg-gray-100 hover:bg-gray-200"
+	>
+		<svg
+			class="w-8 h-8 font-bold transition duration-500 ease-in-out transform motion-reduce:transform-none text-gray-500 hover:text-gray-600 hover:-translate-x-0.5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2.5"
+				d="M15 19l-7-7 7-7"
+			>
+			</path>
+		</svg>
+	</button>
+
+	<button
+		on:click={next}
+		class="absolute right-14 top-1/2 translate-y-1/2 w-11 h-11 flex justify-center items-center rounded-full shadow-md z-10 bg-gray-100 hover:bg-gray-200"
+	>
+		<svg
+			class="w-8 h-8 font-bold transition duration-500 ease-in-out transform motion-reduce:transform-none text-gray-500 hover:text-gray-600 hover:translate-x-0.5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2.5"
+				d="M9 5l7 7-7 7"
+			></path>
+		</svg>
+	</button>
+</article>

packages/cheerpj-applet-page/utilities/README.md

@@ -0,0 +1 @@
+ImageSlider is unused, but we may choose to revisit it later

sites/labs/package.json

@@ -21,6 +21,7 @@
 		"@astropub/md": "^0.4.0",
 		"@leaningtech/astro-theme": "workspace:^",
 		"@leaningtech/cheerp-ts-three-demo": "workspace:^",
+		"@leaningtech/cheerpj-applet-page": "workspace:^",
 		"@leaningtech/cheerpj-jnlp-page": "workspace:^",
 		"@leaningtech/hero": "workspace:^",
 		"astro": "^4.5.18",