polymech/site-template
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

defaults

Browse Source
This commit is contained in:
lovebird 2025-03-09 01:16:03 +01:00
parent f61e5602b7
commit 6888866f0b
16 changed files with 842 additions and 736 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.astro/data-store.json
View File

File diff suppressed because one or more lines are too long

2
astro.config.mjs
View File

@ -6,7 +6,7 @@ import mdx from "@astrojs/mdx";
export default defineConfig({
devToolbar: {
enabled: true,
enabled: false,
},
i18n: {
locales: ["es", "en", "de", "fr", "it", "ar", "ja", "zh"],

94
package-lock.json generated
View File

@ -64,6 +64,7 @@
"tailwindcss": "^4.0.7",
"type-fest": "^4.34.1",
"vite": "^6.1.1",
"vite-plugin-compression": "^0.5.1",
"xlsx": "^0.18.5",
"yargs": "^17.7.2",
"zod": "^3.24.2"
@ -6959,6 +6960,20 @@
"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
"license": "MIT"
},
"node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^2.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/fs-minipass": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
@ -7382,7 +7397,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"devOptional": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -8445,6 +8459,18 @@
"node": ">=6"
}
},
"node_modules/jsonfile": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
"license": "MIT",
"dependencies": {
"universalify": "^2.0.0"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/keyv": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -15325,6 +15351,15 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/universalify": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
"license": "MIT",
"engines": {
"node": ">= 10.0.0"
}
},
"node_modules/unset-value": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@ -15814,6 +15849,63 @@
}
}
},
"node_modules/vite-plugin-compression": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
"integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
"license": "MIT",
"dependencies": {
"chalk": "^4.1.2",
"debug": "^4.3.3",
"fs-extra": "^10.0.0"
},
"peerDependencies": {
"vite": ">=2.0.0"
}
},
"node_modules/vite-plugin-compression/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/vite-plugin-compression/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/vite-plugin-compression/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/vite/node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",

1
package.json
View File

@ -74,6 +74,7 @@
"tailwindcss": "^4.0.7",
"type-fest": "^4.34.1",
"vite": "^6.1.1",
"vite-plugin-compression": "^0.5.1",
"xlsx": "^0.18.5",
"yargs": "^17.7.2",
"zod": "^3.24.2"

186
packages/imagetools/api/renderImg.js
View File

@ -1,93 +1,93 @@
// @ts-check
import getImage from "./utils/getImage.js";
import getImgElement from "./utils/getImgElement.js";
import getLinkElement from "./utils/getLinkElement.js";
import getStyleElement from "./utils/getStyleElement.js";
import getLayoutStyles from "./utils/getLayoutStyles.js";
import getFilteredProps from "./utils/getFilteredProps.js";
import getBackgroundStyles from "./utils/getBackgroundStyles.js";
export default async function renderImg(props) {
const type = "Img";
const { filteredProps, transformConfigs } = getFilteredProps(type, props);
const {
src,
alt,
sizes,
preload,
loading,
decoding,
attributes,
layout,
breakpoints,
placeholder,
objectFit,
objectPosition,
format,
formatOptions,
} = filteredProps;
const artDirectives = [],
fallbackFormat = format,
fadeInTransition = false,
includeSourceFormat = false;
const {
img: imgAttributes = {},
link: linkAttributes = {},
style: styleAttributes = {},
} = attributes;
const { uuid, images } = await getImage({
src,
type,
sizes,
format,
breakpoints,
placeholder,
artDirectives,
fallbackFormat,
includeSourceFormat,
formatOptions,
transformConfigs,
});
const className = `astro-imagetools-img-${uuid}`;
const { imagesizes } = images[images.length - 1];
const backgroundStyles = getBackgroundStyles(
images,
className,
objectFit,
objectPosition,
fadeInTransition,
{ isImg: true }
);
const style = getStyleElement({ styleAttributes, backgroundStyles })
const link = getLinkElement({ images, preload, imagesizes, linkAttributes })
const layoutStyles = getLayoutStyles({ layout })
const sources = images.flatMap(({ sources, sizes, imagesizes }) =>
sources.map(({ src, srcset }) =>
getImgElement({
src,
alt,
sizes,
style,
srcset,
loading,
decoding,
imagesizes,
fadeInTransition,
layoutStyles,
imgAttributes,
imgClassName: className,
})
)
)
const [img] = sources
return { link, style, img }
}
// @ts-check
import getImage from "./utils/getImage.js";
import getImgElement from "./utils/getImgElement.js";
import getLinkElement from "./utils/getLinkElement.js";
import getStyleElement from "./utils/getStyleElement.js";
import getLayoutStyles from "./utils/getLayoutStyles.js";
import getFilteredProps from "./utils/getFilteredProps.js";
import getBackgroundStyles from "./utils/getBackgroundStyles.js";
export default async function renderImg(props) {
const type = "Img";
const { filteredProps, transformConfigs } = getFilteredProps(type, props);
const {
src,
alt,
sizes,
preload,
loading,
decoding,
attributes,
layout,
breakpoints,
placeholder,
objectFit,
objectPosition,
format,
formatOptions,
} = filteredProps;
const artDirectives = [],
fallbackFormat = format,
fadeInTransition = false,
includeSourceFormat = false;
const {
img: imgAttributes = {},
link: linkAttributes = {},
style: styleAttributes = {},
} = attributes;
const { uuid, images } = await getImage({
src,
type,
sizes,
format,
breakpoints,
placeholder,
artDirectives,
fallbackFormat,
includeSourceFormat,
formatOptions,
transformConfigs,
});
const className = `astro-imagetools-img-${uuid}`;
const { imagesizes } = images[images.length - 1];
const backgroundStyles = getBackgroundStyles(
images,
className,
objectFit,
objectPosition,
fadeInTransition,
{ isImg: true }
);
const style = getStyleElement({ styleAttributes })
const link = getLinkElement({ images, preload, imagesizes, linkAttributes })
const layoutStyles = getLayoutStyles({ layout })
const sources = images.flatMap(({ sources, sizes, imagesizes }) =>
sources.map(({ src, srcset }) =>
getImgElement({
src,
alt,
sizes,
style,
srcset,
loading,
decoding,
imagesizes,
fadeInTransition,
layoutStyles,
imgAttributes,
imgClassName: className,
})
)
)
const [img] = sources
return { link, style, img }
}

4
packages/imagetools/astroViteConfigs.js
View File

@ -1,10 +1,10 @@
export default {
"environment": "build",
"environment": "dev",
"isSsrBuild": false,
"projectBase": "",
"publicDir": "C:\\Users\\zx\\Desktop\\polymech\\polymech-site\\public\\",
"rootDir": "C:\\Users\\zx\\Desktop\\polymech\\polymech-site\\",
"mode": "production",
"mode": "dev",
"outDir": "dist",
"assetsDir": "/_astro",
"sourcemap": false,

4
src/app/config.ts
View File

@ -159,13 +159,13 @@ export const IMAGE_SETTINGS =
SHOW_DESCRIPTION: false,
SIZES_THUMB: O_IMAGE.sizes_thumbs,
SIZES_LARGE: O_IMAGE.sizes_large,
SIZES_REGULAR: O_IMAGE.sizes
SIZES_REGULAR: O_IMAGE.sizes_medium
},
LIGHTBOX: {
SHOW_TITLE: true,
SHOW_DESCRIPTION: true,
SIZES_THUMB: O_IMAGE.sizes_thumbs,
SIZES_LARGE: O_IMAGE.sizes_large,
SIZES_REGULAR: O_IMAGE.sizes
SIZES_REGULAR: O_IMAGE.sizes_medium
}
}

96
src/app/network.ts
View File

@ -1,49 +1,49 @@
import { z } from "zod"
/////////////////////////////////////////////
//
// Optimizations
// Image optimization (imagetools breakpoints & min widths)
export enum E_BROADBAND_SPEED {
SLOW = "slow",
MEDIUM = "medium",
FAST = "fast",
}
const imageConfigSchema = z.object({
sizes: z.string(),
sizes_thumbs: z.string(),
sizes_large: z.string(),
})
const imagesSchema = z.object({
[E_BROADBAND_SPEED.SLOW]: imageConfigSchema,
[E_BROADBAND_SPEED.MEDIUM]: imageConfigSchema,
[E_BROADBAND_SPEED.FAST]: imageConfigSchema,
});
type Images = z.infer<typeof imagesSchema>;
export const IMAGE_PRESET: Images =
{
[E_BROADBAND_SPEED.SLOW]: {
// For 2g connections: smaller image widths help performance. (Middle East & Africa)
sizes: "(min-width: 100px) 100px, 100vw",
sizes_thumbs: "(min-width: 80px) 80px, 80vw",
sizes_large: "(min-width: 320px) 320px, 320vw",
},
[E_BROADBAND_SPEED.MEDIUM]:
{
// For 3g connections: a moderate size image for a balance of quality and speed.
sizes: "(min-width: 800px) 800px, 800vw",
sizes_thumbs: "(min-width: 120px) 120px, 120vw",
sizes_large: "(min-width: 1024px) 1024px, 1024vw",
},
[E_BROADBAND_SPEED.FAST]:
{
// For 4g connections: larger images for high-resolution displays.
sizes: "(min-width: 1024px) 1024px, 1024vw",
sizes_thumbs: "(min-width: 180px) 180px, 180vw",
sizes_large: "(min-width: 1200px) 1200px, 1200vw"
}
import { z } from "zod"
/////////////////////////////////////////////
//
// Optimizations
// Image optimization (imagetools breakpoints & min widths)
export enum E_BROADBAND_SPEED {
SLOW = "slow",
MEDIUM = "medium",
FAST = "fast",
}
const imageConfigSchema = z.object({
sizes_medium: z.string(),
sizes_thumbs: z.string(),
sizes_large: z.string(),
})
const imagesSchema = z.object({
[E_BROADBAND_SPEED.SLOW]: imageConfigSchema,
[E_BROADBAND_SPEED.MEDIUM]: imageConfigSchema,
[E_BROADBAND_SPEED.FAST]: imageConfigSchema,
});
type Images = z.infer<typeof imagesSchema>;
export const IMAGE_PRESET: Images =
{
[E_BROADBAND_SPEED.SLOW]: {
// For 2g connections: smaller image widths help performance. (Middle East & Africa)
sizes_medium: "(min-width: 100px) 100px, 100vw",
sizes_thumbs: "(min-width: 80px) 80px, 80vw",
sizes_large: "(min-width: 320px) 320px, 320vw",
},
[E_BROADBAND_SPEED.MEDIUM]:
{
// For 3g connections: a moderate size image for a balance of quality and speed.
sizes_medium: "(min-width: 400px) 400px, 400vw",
sizes_thumbs: "(min-width: 120px) 120px, 120vw",
sizes_large: "(min-width: 1024px) 1024px, 1024vw",
},
[E_BROADBAND_SPEED.FAST]:
{
// For 4g connections: larger images for high-resolution displays.
sizes_medium: "(min-width: 1024px) 1024px, 1024vw",
sizes_thumbs: "(min-width: 180px) 180px, 180vw",
sizes_large: "(min-width: 1200px) 1200px, 1200vw"
}
}

9
src/components/BaseHead.astro
View File

@ -129,12 +129,11 @@ const keywords = await item_keywords(item, Astro.currentLocale)
<!--- IBM Plex Mono font from fonts.google.com -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" as="style" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" />
<script is:inline src="https://cdn.jsdelivr.net/npm/flowbite@3.0.0/dist/flowbite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.0.0/dist/flowbite.min.js" defer></script>
<!-- alpine JS -->
<script src="//unpkg.com/alpinejs" defer></script>

15
src/components/polymech/Gallery.astro
View File

@ -43,9 +43,7 @@ const mergedLightboxSettings = {
SHOW_DESCRIPTION: lightboxSettings.SHOW_DESCRIPTION ?? IMAGE_SETTINGS.LIGHTBOX.SHOW_DESCRIPTION,
};
const locale = Astro.currentLocale || "en";
---
<div
x-data={`
{
@ -76,8 +74,8 @@ const locale = Astro.currentLocale || "en";
lightboxLoaded = false;
preloadAndOpen();
}
}"
class="product-gallery"><div class="flex flex-col h-full">
}"class="product-gallery">
<div class="flex flex-col h-full">
<!-- Main Image (click to preload and open lightbox) -->
<div class="flex-1 flex items-center justify-center" @click="preloadAndOpen()">
{images.map((image, index) => (
@ -88,8 +86,13 @@ const locale = Astro.currentLocale || "en";
objectFit="contain"
format="avif"
placeholder="blurred"
sizes={mergedGallerySettings.SIZES_REGULAR}
class="rounded max-h-full object-contain main-image"
breakpoints={[200,300,500]}
sizes="(max-width: 80px) 80px, 80vw"
fadeInTransition={{
delay: "0.5s",
duration: "2.5s",
timingFunction: "linear",
}}
attributes={{
img: { class: "main-image rounded-lg max-h-[60vh] aspect-square" }
}}

13
src/components/polymech/GalleryK.astro
View File

@ -113,10 +113,9 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
this.lightboxLoaded = false;
let img = new Image();
img.src = this.images[this.currentIndex].src;
img.onload = () => {
this.lightboxLoaded = true;
this.open = true;
};
this.lightboxLoaded = true;
this.open = true;
img.onload = () => { };
}
}
`}
@ -152,8 +151,8 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
alt={alt_translated[index]}
objectFit="contain"
format="avif"
placeholder="blurred"
sizes={mergedGallerySettings.SIZES_REGULAR}
loading="lazy"
attributes={{
img: { class: "main-image p-1 rounded-lg max-h-[60vh] aspect-square" }
}}
@ -189,6 +188,7 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
placeholder="blurred"
sizes={mergedGallerySettings.SIZES_THUMB}
alt={alt_translated[index]}
breakpoints={[100]}
attributes={{
img: {
class: "w-32 h-32 rounded-lg hover:ring-2 hover:ring-blue-500 thumbnail-img aspect-square"
@ -267,7 +267,6 @@ const ld = await toJsonLd(images, Astro.currentLocale || I18N_SOURCE_LANGUAGE, c
>
&#10095;
</button>
</div>
</div>
<script type="application/ld+json" set:html={ JSON.stringify(ld) }></script>
</div>

672
src/layouts/StoreLayout.astro
View File

@ -1,336 +1,336 @@
---
import BaseLayout from "./BaseLayout.astro";
import { createMarkdownComponent } from "@/base/index.js";
import { translate } from "@/base/i18n.js";
import Wrapper from "@/components/containers/Wrapper.astro";
import Translate from "@/components/polymech/i18n.astro";
import Readme from "@/components/polymech/readme.astro";
import GalleryK from "@/components/polymech/GalleryK.astro";
import Resources from "@/components/polymech/resources.astro";
import Specs from "@/components/polymech/specs.astro";
import TabButton from "@/components/polymech/tab-button.astro";
import TabContent from "@/components/polymech/tab-content.astro";
import "flowbite";
import {
I18N_SOURCE_LANGUAGE,
SHOW_3D_PREVIEW,
SHOW_FILES,
SHOW_GALLERY,
SHOW_RENDERINGS,
SHOW_LICENSE,
SHOW_DESCRIPTION,
SHOW_TABS,
SHOW_SPECS,
SHOW_DEBUG,
SHOW_SAMPLES,
SHOW_RESOURCES,
SHOW_CHECKOUT,
SHOW_README,
DEFAULT_LICENSE,
isRTL,
} from "config/config.js";
const { frontmatter: item, ...rest } = Astro.props;
const content = await translate(
item.content || "",
I18N_SOURCE_LANGUAGE,
Astro.currentLocale,
);
const Body = createMarkdownComponent(content) as any;
const str_debug =
"```json\n" +
JSON.stringify(
{
...item,
config: null,
},
null,
2,
) +
"\n```";
const Content_Debug = await createMarkdownComponent(str_debug);
---
<BaseLayout frontmatter={item} description={item.description} {...rest}>
<Wrapper>
<section>
<div class="grid sm:grid-cols-2 lg:grid-cols-2 just xl:grid-cols-2 gap-2">
<div class="flex flex-col gap-2 h-full justify-between">
<div>
<article class="markdown-content bg-white rounded-xl p-4">
<h1
class="text-neutral-500 font-mono font-semibold mb-2 text-2xl"
>
<span><Translate>{`${item.title}`}</Translate></span>
{
isRTL(Astro.currentLocale) && (
<div class="text-neutral-500 font-mono font-semibold mb-2">
"{item.title}"
</div>
)
}
</h1>
<Body />
</article>
</div>
<div class="gap-2 flex flex-col h-full justify-end">
{
SHOW_3D_PREVIEW &&
item.Preview3d &&
item.cad &&
item.cad[0] &&
item.cad[0][".html"] && (
<a
href={item.cad[0][".html"]}
title="link to your page"
aria-label="your label"
class="relative group overflow-hidden pl-4 font-mono h-14 flex space-x-6 items-center bg-white hover:bg-neutral-200 duration-300 rounded-xl w-full justify-between"
>
<span class="relative uppercase text-xs text-neutral-600">
<Translate>3D Preview</Translate>
</span>
<div
aria-hidden="true"
class="w-12 text-orange-600 transition duration-300 -translate-y-7 group-hover:translate-y-7"
>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
</div>
</a>
)
}
{
SHOW_CHECKOUT && item.checkout && (
<a
href={item.checkout}
title="link to your page"
aria-label="your label"
class="relative group overflow-hidden pl-4 font-mono h-14 flex space-x-6 items-center bg-orange-500 hover:bg-black duration-300 rounded-xl w-full justify-between"
>
<span class="relative uppercase text-xs text-white">
<Translate>Add to cart</Translate>
</span>
<div
aria-hidden="true"
class="w-12 text-white transition duration-300 -translate-y-7 group-hover:translate-y-7"
>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
</div>
</a>
)
}
</div>
{
SHOW_LICENSE && (
<div class="space-y-2">
<div class="bg-white rounded-xl p-4">
<h3 class="text-lg text-neutral-600 uppercase font-mono tracking-tight">
<Translate>License</Translate>
</h3>
<p class="text-neutral-500 mt-4 text-sm">
{item.license || DEFAULT_LICENSE}
</p>
</div>
</div>
)
}
</div>
{
SHOW_RENDERINGS && (
<div
class="flex-1 h-full bg-white"
style="height: 100%; width: 100%;"
>
<GalleryK
images={item.assets.renderings}
gallerySettings={{ SHOW_TITLE: false }}
item={item}
/>
</div>
)
}
</div>
</section>
{
item.assets.showcase && item.assets.showcase.length > 0 && (
<section>
<div class="mb-2 md:mb-16 mt-0 md:mt-16 p-2 md:p-4 border-b border-gray-200 dark:border-gray-700">
<GalleryK
images={item.assets.showcase}
lightboxSettings={{
SHOW_TITLE: false,
SHOW_DESCRIPTION: false,
SIZES_THUMB: "w-32 h-32",
}}
gallerySettings={{
SHOW_TITLE: false,
SHOW_DESCRIPTION: false,
}}
item={item}
/>
</div>
</section>
)
}
<section id="tabs-view">
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul
class="flex flex-wrap -mb-px text-sm font-medium text-center"
id="default-styled-tab"
data-tabs-toggle="#default-styled-tab-content"
data-tabs-active-classes="text-orange-600 hover:text-orange-600 dark:text-purple-500 dark:hover:text-purple-500 border-orange-600 dark:border-purple-500"
data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
role="tablist"
>
{SHOW_README && <TabButton title="Overview" />}
<TabButton title="Specs" />
<TabButton title="Gallery" />
<TabButton title="Resources" />
{SHOW_SAMPLES && <TabButton title="Samples" />}
{SHOW_DEBUG && <TabButton title="Debug" />}
</ul>
</div>
<div id="default-styled-tab-content">
<TabContent title="Overview" class="content">
{
SHOW_README && item.readme && (
<Readme markdown={item.readme} data={item} />
)
}
</TabContent>
<TabContent title="Specs" class="bg-white rounded-xl dark:bg-gray-800 font-mono">
<Specs frontmatter={item} />
</TabContent>
<TabContent title="Gallery" class="p-0 md:p-4 rounded-lg bg-white">
<GalleryK images={item.assets.gallery} item={item} />
</TabContent>
{
SHOW_SAMPLES && (
<TabContent title="Samples" class="p-4 bg-white rounded-xl dark:bg-gray-800">
<GalleryK images={item.assets.samples} item={item} />
</TabContent>
)
}
{
SHOW_RESOURCES && (
<TabContent title="Resources" class="p-4 bg-white rounded-xl dark:bg-gray-800">
<Resources frontmatter={item} />
</TabContent>
)
}
{
SHOW_DEBUG && (
<TabContent title="Debug" class="rounded-lg bg-white p-4 dark:bg-gray-800">
<Content_Debug />
</TabContent>
)
}
</div>
<script>
window.addEventListener("hashchange", () => {
const hash = window.location.hash.substring(1);
if (hash) {
const tabTrigger = document.querySelector(
`a[href="#${hash}"], a[data-tabs-target="#${hash}"]`,
);
if (tabTrigger) {
setTimeout(() => {
(tabTrigger as HTMLElement).click();
}, 100);
}
}
});
document.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
if (hash) {
const tabTrigger = document.querySelector(
`a[href="${hash}"], a[data-tabs-target="${hash}"]`,
);
if (tabTrigger) {
setTimeout(() => {
(tabTrigger as HTMLElement).click();
}, 100);
}
}
document.querySelectorAll("a[data-tabs-target]").forEach((tab) => {
tab.addEventListener("click", () => {
const href = tab.getAttribute("href");
if (href) {
window.location.hash = href;
}
});
});
});
</script>
</section>
</Wrapper>
</BaseLayout>
---
import BaseLayout from "./BaseLayout.astro";
import { createMarkdownComponent } from "@/base/index.js";
import { translate } from "@/base/i18n.js";
import Wrapper from "@/components/containers/Wrapper.astro";
import Translate from "@/components/polymech/i18n.astro";
import Readme from "@/components/polymech/readme.astro";
import GalleryK from "@/components/polymech/GalleryK.astro";
import Resources from "@/components/polymech/resources.astro";
import Specs from "@/components/polymech/specs.astro";
import TabButton from "@/components/polymech/tab-button.astro";
import TabContent from "@/components/polymech/tab-content.astro";
import "flowbite";
import {
I18N_SOURCE_LANGUAGE,
SHOW_3D_PREVIEW,
SHOW_FILES,
SHOW_GALLERY,
SHOW_RENDERINGS,
SHOW_LICENSE,
SHOW_DESCRIPTION,
SHOW_TABS,
SHOW_SPECS,
SHOW_DEBUG,
SHOW_SAMPLES,
SHOW_RESOURCES,
SHOW_CHECKOUT,
SHOW_README,
DEFAULT_LICENSE,
isRTL,
} from "config/config.js";
const { frontmatter: item, ...rest } = Astro.props;
const content = await translate(
item.content || "",
I18N_SOURCE_LANGUAGE,
Astro.currentLocale,
);
const Body = createMarkdownComponent(content) as any;
const str_debug =
"```json\n" +
JSON.stringify(
{
...item,
config: null,
},
null,
2,
) +
"\n```";
const Content_Debug = await createMarkdownComponent(str_debug);
---
<BaseLayout frontmatter={item} description={item.description} {...rest}>
<Wrapper>
<section>
<div class="grid sm:grid-cols-2 lg:grid-cols-2 just xl:grid-cols-2 gap-2">
<div class="flex flex-col gap-2 h-full justify-between">
<div>
<article class="markdown-content bg-white rounded-xl p-4">
<h1
class="text-neutral-500 font-mono font-semibold mb-2 text-2xl"
>
<span><Translate>{`${item.title}`}</Translate></span>
{
isRTL(Astro.currentLocale) && (
<div class="text-neutral-500 font-mono font-semibold mb-2">
"{item.title}"
</div>
)
}
</h1>
<Body />
</article>
</div>
<div class="gap-2 flex flex-col h-full justify-end">
{
SHOW_3D_PREVIEW &&
item.Preview3d &&
item.cad &&
item.cad[0] &&
item.cad[0][".html"] && (
<a
href={item.cad[0][".html"]}
title="link to your page"
aria-label="your label"
class="relative group overflow-hidden pl-4 font-mono h-14 flex space-x-6 items-center bg-white hover:bg-neutral-200 duration-300 rounded-xl w-full justify-between"
>
<span class="relative uppercase text-xs text-neutral-600">
<Translate>3D Preview</Translate>
</span>
<div
aria-hidden="true"
class="w-12 text-orange-600 transition duration-300 -translate-y-7 group-hover:translate-y-7"
>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
</div>
</a>
)
}
{
SHOW_CHECKOUT && item.checkout && (
<a
href={item.checkout}
title="link to your page"
aria-label="your label"
class="relative group overflow-hidden pl-4 font-mono h-14 flex space-x-6 items-center bg-orange-500 hover:bg-black duration-300 rounded-xl w-full justify-between"
>
<span class="relative uppercase text-xs text-white">
<Translate>Add to cart</Translate>
</span>
<div
aria-hidden="true"
class="w-12 text-white transition duration-300 -translate-y-7 group-hover:translate-y-7"
>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
<div class="h-14 flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 m-auto fill-white"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
/>
</svg>
</div>
</div>
</a>
)
}
</div>
{
SHOW_LICENSE && (
<div class="space-y-2">
<div class="bg-white rounded-xl p-4">
<h3 class="text-lg text-neutral-600 uppercase font-mono tracking-tight">
<Translate>License</Translate>
</h3>
<p class="text-neutral-500 mt-4 text-sm">
{item.license || DEFAULT_LICENSE}
</p>
</div>
</div>
)
}
</div>
{
SHOW_RENDERINGS && (
<div
class="flex-1 h-full bg-white"
style="height: 100%; width: 100%;"
>
<GalleryK
images={item.assets.renderings}
gallerySettings={{ SHOW_TITLE: false }}
item={item}
/>
</div>
)
}
</div>
</section>
{
item.assets.showcase && item.assets.showcase.length > 0 && (
<section>
<div class="mb-2 md:mb-16 mt-0 md:mt-16 p-2 md:p-4 border-b border-gray-200 dark:border-gray-700">
<GalleryK
images={item.assets.showcase}
lightboxSettings={{
SHOW_TITLE: false,
SHOW_DESCRIPTION: false,
SIZES_THUMB: "w-32 h-32",
}}
gallerySettings={{
SHOW_TITLE: false,
SHOW_DESCRIPTION: false,
}}
item={item}
/>
</div>
</section>
)
}
<section id="tabs-view">
<div class="mb-4 border-b border-gray-200 dark:border-gray-700">
<ul
class="flex flex-wrap -mb-px text-sm font-medium text-center"
id="default-styled-tab"
data-tabs-toggle="#default-styled-tab-content"
data-tabs-active-classes="text-orange-600 hover:text-orange-600 dark:text-purple-500 dark:hover:text-purple-500 border-orange-600 dark:border-purple-500"
data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
role="tablist"
>
{SHOW_README && <TabButton title="Overview" />}
<TabButton title="Specs" />
<TabButton title="Gallery" />
<TabButton title="Resources" />
{SHOW_SAMPLES && <TabButton title="Samples" />}
{SHOW_DEBUG && <TabButton title="Debug" />}
</ul>
</div>
<div id="default-styled-tab-content">
<TabContent title="Overview" class="content">
{
SHOW_README && item.readme && (
<Readme markdown={item.readme} data={item} />
)
}
</TabContent>
<TabContent title="Specs" class="bg-white rounded-xl dark:bg-gray-800 font-mono">
<Specs frontmatter={item} />
</TabContent>
<TabContent title="Gallery" class="p-0 md:p-4 rounded-lg bg-white">
<GalleryK images={item.assets.gallery} item={item} />
</TabContent>
{
SHOW_SAMPLES && (
<TabContent title="Samples" class="p-4 bg-white rounded-xl dark:bg-gray-800">
<GalleryK images={item.assets.samples} item={item} />
</TabContent>
)
}
{
SHOW_RESOURCES && (
<TabContent title="Resources" class="p-4 bg-white rounded-xl dark:bg-gray-800">
<Resources frontmatter={item} />
</TabContent>
)
}
{
SHOW_DEBUG && (
<TabContent title="Debug" class="rounded-lg bg-white p-4 dark:bg-gray-800">
<Content_Debug />
</TabContent>
)
}
</div>
<script>
window.addEventListener("hashchange", () => {
const hash = window.location.hash.substring(1);
if (hash) {
const tabTrigger = document.querySelector(
`a[href="#${hash}"], a[data-tabs-target="#${hash}"]`,
);
if (tabTrigger) {
setTimeout(() => {
(tabTrigger as HTMLElement).click();
}, 100);
}
}
});
document.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
if (hash) {
const tabTrigger = document.querySelector(
`a[href="${hash}"], a[data-tabs-target="${hash}"]`,
);
if (tabTrigger) {
setTimeout(() => {
(tabTrigger as HTMLElement).click();
}, 100);
}
}
document.querySelectorAll("a[data-tabs-target]").forEach((tab) => {
tab.addEventListener("click", () => {
const href = tab.getAttribute("href");
if (href) {
window.location.hash = href;
}
});
});
});
</script>
</section>
</Wrapper>
</BaseLayout>

469
src/styles/global.css
View File

@ -1,234 +1,235 @@
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@layer components {
.prose-styles {
@apply hover:prose-a:text-black prose prose-blockquote:border-l-black prose-blockquote:text-neutral-600 prose-code:text-black prose-headings:text-black text-neutral-600 prose-pre:rounded-xl prose-pre:p-4 max-w-none prose-headings:font-medium prose-pre:normal-case prose-pre:bg-white;
/* Base layout classes */
@apply prose max-w-3xl pt-0 mx-auto;
}
.simple-prose-styles {
@apply prose text-xs prose-headings:text-xs prose-pre:normal-case;
}
}
@layer base {
a {
@apply text-blue-400 no-underline transition-colors;
}
a:hover {
@apply underline;
}
}
@layer base {
table {
@apply min-w-full border-collapse;
}
table thead {
@apply bg-gray-200;
}
table th {
@apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
}
table td {
@apply py-4 px-6 border-b border-gray-200;
}
table tbody tr {
@apply transition-colors;
}
table tbody tr:nth-child(odd) {
@apply bg-white;
}
table tbody tr:nth-child(even) {
@apply bg-gray-50;
}
table tbody tr:nth-child(odd):hover {
@apply bg-orange-50;
}
table tbody tr:nth-child(even):hover {
@apply bg-orange-100;
}
}
@layer base {
.astro-imagetools-img {
@apply min-w-full border-collapse rounded-lg overflow-hidden;
background-image: none !important;
}
.lightbox-main{
background-image: none !important;
}
}
@layer base {
.specs-table {
@apply min-w-full border-collapse rounded-lg overflow-hidden;
}
.specs-table thead {
@apply bg-gray-200;
}
.specs-table th {
@apply py-3 px-6 text-left text-xs text-gray-600 uppercase tracking-wider;
}
.specs-table td {
@apply py-4 px-6 border-b border-gray-200;
}
.specs-table tbody tr {
@apply transition-colors;
}
.specs-table tbody tr:nth-child(odd) {
@apply bg-white;
}
.specs-table tbody tr:nth-child(even) {
@apply bg-gray-50;
}
.specs-table tbody tr:nth-child(odd):hover {
@apply bg-orange-50;
}
.specs-table tbody tr:nth-child(even):hover {
@apply bg-orange-100;
}
/* Bold the first column cells */
.specs-table th:first-child,
.specs-table td:first-child {
@apply font-semibold;
}
}
@layer components {
.table-default {
@apply min-w-full border-collapse shadow-lg;
}
.table-default thead {
@apply bg-gray-200;
}
.table-default th {
@apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
}
.table-default td {
@apply py-4 px-6 border-b border-gray-200;
}
.table-default tbody tr {
@apply transition-colors;
}
/* Alternating row colors */
.table-default tbody tr:nth-child(odd) {
@apply bg-white;
}
.table-default tbody tr:nth-child(even) {
@apply bg-gray-50;
}
/* Hover effects with orange tint */
.table-default tbody tr:nth-child(odd):hover {
@apply bg-orange-50;
}
.table-default tbody tr:nth-child(even):hover {
@apply bg-orange-100;
}
}
@theme {
/* Typography*/
--font-sans: "Inter", sans-serif;
--font-mono: "IBM PLex Mono", monospace;
--text-xs:1rem;
/* Colors */
--color-orange-50: hsl(22, 100%, 96%);
--color-orange-100: hsl(25, 100%, 91%);
--color-orange-200: hsl(22, 100%, 82%);
--color-orange-300: hsl(20, 100%, 71%);
--color-orange-400: hsl(16, 100%, 60%);
--color-orange-500: hsl(14, 100%, 52%);
--color-orange-600: hsl(9, 100%, 50%);
--color-orange-700: hsl(6, 98%, 40%);
--color-orange-800: hsl(4, 87%, 34%);
--color-orange-900: hsl(4, 83%, 28%);
--color-orange-950: hsl(1, 89%, 15%);
/* colors */
--color-white: #fafafa;
--color-black: #12161d;
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}
:root {
/* Typography*/
font-family: Inter, sans-serif;
font-feature-settings: "liga" 1, "calt" 1,
/* Contextual Alternates */ "dlig" 1, /* Discretionary Ligatures */ "ss07" 1,
/* fSquare punctuation */ "ss08" 1, /* Square quotes */ "zero" 1,
/* Slashed zero */ "tnum" 1, /* Tabular numbers */ "cv03" 1,
/* Open six */ "cv04" 1, /* Open nine */ "cv01" 1,
/* Alternate one */ "cv09", /* Flat-top three */ "cv02" 1; /* Open 4 */
/* style code blocks*/
}
.markdown-content {
@apply prose dark:prose-invert max-w-none font-mono;
}
/* Headings (Scaled Down & Responsive) */
.markdown-content h1 {
@apply text-xl font-medium mt-5 mb-3 md:mt-6 md:mb-4;
}
.markdown-content h2 {
@apply text-xs font-medium mt-4 mb-2 md:mt-5 md:mb-3;
}
.markdown-content h3 {
@apply text-sm font-medium mt-3 mb-1 md:mt-4 md:mb-3;
}
.markdown-content h4 {
@apply text-neutral-500 font-medium mt-3 mb-1 md:mt-4 md:mb-2;
}
.markdown-content h5 {
@apply text-sm font-medium mt-2 mb-1 md:mt-3 md:mb-2;
}
.markdown-content h6 {
@apply text-xs font-medium mt-2 mb-1 uppercase md:mt-3 md:mb-2;
}
/* Paragraphs */
.markdown-content p {
@apply text-neutral-500 leading-relaxed mb-3 md:mb-4;
}
/* Lists */
.markdown-content ul {
@apply list-disc list-inside ml-0 pl-0 md:ml-5;
}
.markdown-content li {
@apply text-neutral-500 leading-relaxed;
}
.markdown-content ol {
@apply list-decimal list-inside ml-3 md:ml-5;
}
/* Code Blocks */
.markdown-content pre {
@apply bg-gray-900 text-white p-2 rounded-md overflow-x-auto md:p-3;
}
.markdown-content code {
@apply bg-gray-800 text-xs p-1 rounded-md md:text-sm;
}
/* Links */
.markdown-content a {
@apply text-blue-600 hover:underline dark:text-blue-400;
}
/* Blockquotes */
.markdown-content blockquote {
@apply border-l-4 border-gray-500 pl-3 italic text-gray-600 md:pl-4;
}
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@layer components {
.prose-styles {
@apply hover:prose-a:text-black prose prose-blockquote:border-l-black prose-blockquote:text-neutral-600 prose-code:text-black prose-headings:text-black text-neutral-600 prose-pre:rounded-xl prose-pre:p-4 max-w-none prose-headings:font-medium prose-pre:normal-case prose-pre:bg-white;
/* Base layout classes */
@apply prose max-w-3xl pt-0 mx-auto;
}
.simple-prose-styles {
@apply prose text-xs prose-headings:text-xs prose-pre:normal-case;
}
}
@layer base {
a {
@apply text-blue-400 no-underline transition-colors;
}
a:hover {
@apply underline;
}
}
@layer base {
table {
@apply min-w-full border-collapse;
}
table thead {
@apply bg-gray-200;
}
table th {
@apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
}
table td {
@apply py-4 px-6 border-b border-gray-200;
}
table tbody tr {
@apply transition-colors;
}
table tbody tr:nth-child(odd) {
@apply bg-white;
}
table tbody tr:nth-child(even) {
@apply bg-gray-50;
}
table tbody tr:nth-child(odd):hover {
@apply bg-orange-50;
}
table tbody tr:nth-child(even):hover {
@apply bg-orange-100;
}
}
@layer base {
.astro-imagetools-img {
@apply min-w-full border-collapse rounded-lg overflow-hidden;
background-image: none !important;
object-fit: contain;
}
.lightbox-main{
background-image: none !important;
}
}
@layer base {
.specs-table {
@apply min-w-full border-collapse rounded-lg overflow-hidden;
}
.specs-table thead {
@apply bg-gray-200;
}
.specs-table th {
@apply py-3 px-6 text-left text-xs text-gray-600 uppercase tracking-wider;
}
.specs-table td {
@apply py-4 px-6 border-b border-gray-200;
}
.specs-table tbody tr {
@apply transition-colors;
}
.specs-table tbody tr:nth-child(odd) {
@apply bg-white;
}
.specs-table tbody tr:nth-child(even) {
@apply bg-gray-50;
}
.specs-table tbody tr:nth-child(odd):hover {
@apply bg-orange-50;
}
.specs-table tbody tr:nth-child(even):hover {
@apply bg-orange-100;
}
/* Bold the first column cells */
.specs-table th:first-child,
.specs-table td:first-child {
@apply font-semibold;
}
}
@layer components {
.table-default {
@apply min-w-full border-collapse shadow-lg;
}
.table-default thead {
@apply bg-gray-200;
}
.table-default th {
@apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
}
.table-default td {
@apply py-4 px-6 border-b border-gray-200;
}
.table-default tbody tr {
@apply transition-colors;
}
/* Alternating row colors */
.table-default tbody tr:nth-child(odd) {
@apply bg-white;
}
.table-default tbody tr:nth-child(even) {
@apply bg-gray-50;
}
/* Hover effects with orange tint */
.table-default tbody tr:nth-child(odd):hover {
@apply bg-orange-50;
}
.table-default tbody tr:nth-child(even):hover {
@apply bg-orange-100;
}
}
@theme {
/* Typography*/
--font-sans: "Inter", sans-serif;
--font-mono: "IBM PLex Mono", monospace;
--text-xs:1rem;
/* Colors */
--color-orange-50: hsl(22, 100%, 96%);
--color-orange-100: hsl(25, 100%, 91%);
--color-orange-200: hsl(22, 100%, 82%);
--color-orange-300: hsl(20, 100%, 71%);
--color-orange-400: hsl(16, 100%, 60%);
--color-orange-500: hsl(14, 100%, 52%);
--color-orange-600: hsl(9, 100%, 50%);
--color-orange-700: hsl(6, 98%, 40%);
--color-orange-800: hsl(4, 87%, 34%);
--color-orange-900: hsl(4, 83%, 28%);
--color-orange-950: hsl(1, 89%, 15%);
/* colors */
--color-white: #fafafa;
--color-black: #12161d;
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}
:root {
/* Typography*/
font-family: Inter, sans-serif;
font-feature-settings: "liga" 1, "calt" 1,
/* Contextual Alternates */ "dlig" 1, /* Discretionary Ligatures */ "ss07" 1,
/* fSquare punctuation */ "ss08" 1, /* Square quotes */ "zero" 1,
/* Slashed zero */ "tnum" 1, /* Tabular numbers */ "cv03" 1,
/* Open six */ "cv04" 1, /* Open nine */ "cv01" 1,
/* Alternate one */ "cv09", /* Flat-top three */ "cv02" 1; /* Open 4 */
/* style code blocks*/
}
.markdown-content {
@apply prose dark:prose-invert max-w-none font-mono;
}
/* Headings (Scaled Down & Responsive) */
.markdown-content h1 {
@apply text-xl font-medium mt-5 mb-3 md:mt-6 md:mb-4;
}
.markdown-content h2 {
@apply text-xs font-medium mt-4 mb-2 md:mt-5 md:mb-3;
}
.markdown-content h3 {
@apply text-sm font-medium mt-3 mb-1 md:mt-4 md:mb-3;
}
.markdown-content h4 {
@apply text-neutral-500 font-medium mt-3 mb-1 md:mt-4 md:mb-2;
}
.markdown-content h5 {
@apply text-sm font-medium mt-2 mb-1 md:mt-3 md:mb-2;
}
.markdown-content h6 {
@apply text-xs font-medium mt-2 mb-1 uppercase md:mt-3 md:mb-2;
}
/* Paragraphs */
.markdown-content p {
@apply text-neutral-500 leading-relaxed mb-3 md:mb-4;
}
/* Lists */
.markdown-content ul {
@apply list-disc list-inside ml-0 pl-0 md:ml-5;
}
.markdown-content li {
@apply text-neutral-500 leading-relaxed;
}
.markdown-content ol {
@apply list-decimal list-inside ml-3 md:ml-5;
}
/* Code Blocks */
.markdown-content pre {
@apply bg-gray-900 text-white p-2 rounded-md overflow-x-auto md:p-3;
}
.markdown-content code {
@apply bg-gray-800 text-xs p-1 rounded-md md:text-sm;
}
/* Links */
.markdown-content a {
@apply text-blue-600 hover:underline dark:text-blue-400;
}
/* Blockquotes */
.markdown-content blockquote {
@apply border-l-4 border-gray-500 pl-3 italic text-gray-600 md:pl-4;
}

0
temp/test.html Normal file
View File

1
undefined/glossary/en/ja/index.csv Normal file
View File

@ -0,0 +1 @@
TEST,TEST
1 TEST TEST

10
undefined/glossary/en/ja/index_glossary.json Normal file
View File

@ -0,0 +1,10 @@
{
"glossaryId": "1eeeb1a8-19e6-4d86-b2dd-38fa3608ad85",
"name": "OSR-en-ja",
"ready": true,
"sourceLang": "en",
"targetLang": "ja",
"creationTime": "2025-03-08T18:37:42.658Z",
"entryCount": 1,
"hash": "zDrlayXO43sB98wNoqof0g=="
}