@cedgetec-utils/astro-components 0.1.0

package/README.md

@@ -0,0 +1,35 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```sh
+bun create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── index.ts
+├── src
+│   └── MyComponent.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command       | Action                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `bun link`    | Registers this package locally. Run `bun link my-component-library` in an Astro project to install your components                                                                                                               |
+| `bun publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/bun-adduser) |

package/index.ts

@@ -0,0 +1,6 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+export * as DirectusImage from "./src/DirectusImage.astro";
+export * as Head from "./src/Head.astro";
+export * as Matomo from "./src/Matomo.astro";

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@cedgetec-utils/astro-components",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "scripts": {},
+  "devDependencies": {
+    "astro": "^5.15.3"
+  },
+  "peerDependencies": {
+    "astro": "^5.0.0"
+  }
+}

package/src/DirectusImage.astro

@@ -0,0 +1,71 @@
+---
+import { Image } from "astro:assets";
+import type { HTMLAttributes } from "astro/types";
+
+export type DirectusImageData = {
+  id: string;
+  type: string;
+  title: string;
+  url: string;
+  modified_on: string;
+  width?: number | null | undefined;
+  height?: number | null | undefined;
+};
+
+type Props = {
+  src: DirectusImageData;
+  width?: number;
+  height?: number;
+} & Omit<HTMLAttributes<"img">, "src">;
+const { src, width, height, ...props } = Astro.props;
+
+let calculatedWidth = src.width;
+let calculatedHeight = src.height;
+
+if (src.width && src.height) {
+  // Check if width and height were both specified
+  if (width !== undefined && height !== undefined) {
+    const ratio = width / height;
+    const inferredRatio = src.width / src.height;
+
+    if (inferredRatio > ratio) {
+      // Image is wider than container - scale by height
+      calculatedHeight = height;
+      calculatedWidth = height * inferredRatio;
+    } else {
+      // Image is taller than container - scale by width
+      calculatedWidth = width;
+      calculatedHeight = width * inferredRatio;
+    }
+  } else {
+    // Check if only width was specified
+    if (width !== undefined) {
+      calculatedWidth = width;
+      calculatedHeight = (src.height / src.width) * width;
+    }
+
+    // Check if only height was specified
+    if (height !== undefined) {
+      calculatedHeight = height;
+      calculatedWidth = (src.width / src.height) * height;
+    }
+  }
+}
+---
+
+{
+  src.type === "image/svg+xml" ? (
+    <img {...props} src={src.url} alt={src.title} height={height} />
+  ) : (
+    calculatedWidth &&
+    calculatedHeight && (
+      <Image
+        {...props}
+        src={`${src.url}?v=${src.modified_on}`}
+        alt={src.title}
+        width={calculatedWidth}
+        height={calculatedHeight}
+      />
+    )
+  )
+}

package/src/Head.astro

@@ -0,0 +1,77 @@
+---
+import { getImage } from "astro:assets";
+
+type Props = {
+  title: string;
+  siteName: string;
+  type: "website" | string;
+  description: string | null | undefined;
+  keywords: string[] | null | undefined;
+  icons: {
+    lightUrl: string;
+    darkUrl: string;
+  };
+  imageUrl: string | null | undefined;
+};
+const props = Astro.props;
+
+const slug = Astro.url.pathname.replace(/^\/+|\/+$/g, "");
+
+const title =
+  slug === "" ? props.siteName : `${props.title} - ${props.siteName}`;
+
+const ogTitle = slug === "" ? props.siteName : `${props.title}`;
+
+const iconLight = await getImage({
+  src: props.icons.lightUrl,
+  width: 48,
+  height: 48,
+  fit: "contain",
+});
+
+const iconDark = await getImage({
+  src: props.icons.darkUrl,
+  width: 48,
+  height: 48,
+  fit: "contain",
+});
+
+const openGraphImage = props.imageUrl
+  ? await getImage({
+      src: props.imageUrl,
+      width: 1000,
+      height: 500,
+    })
+  : null;
+---
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width" />
+  <!-- Icons -->
+  <link rel="icon" href={iconDark.src} />
+  <link rel="icon" href={iconDark.src} media="(prefers-color-scheme:light)" />
+  <link rel="icon" href={iconLight.src} media="(prefers-color-scheme:dark)" />
+  <link rel="icon" href={iconDark.src} />
+  <meta name="generator" content={Astro.generator} />
+  <meta name="view-transition" content="same-origin" />
+  <!-- Title etc. -->
+  <title>{title}</title>
+  {props.description && <meta name="description" content={props.description} />}
+  {
+    props.keywords && (
+      <meta name="keywords" content={props.keywords.join(",")} />
+    )
+  }
+  <!-- Open Graph -->
+  <meta property="og:title" content={ogTitle} />
+  {
+    props.description && (
+      <meta property="og:description" content={props.description} />
+    )
+  }
+  {props.siteName && <meta property="og:site_name" content={props.siteName} />}
+  {props.type && <meta property="og:type" content={props.type} />}
+  {openGraphImage && <meta property="og:image" content={openGraphImage.src} />}
+  <slot />
+</head>

package/src/Matomo.astro

@@ -0,0 +1,25 @@
+---
+type Props = {
+  url: string;
+  siteId: number;
+};
+const { url, siteId } = Astro.props;
+---
+
+<script define:vars={{ url, siteId }}>
+  const _paq = (window._paq = window._paq || []);
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+  (function () {
+    const u = `${url}/`;
+    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+    _paq.push(["setSiteId", siteId]);
+    const d = document,
+      g = d.createElement("script"),
+      s = d.getElementsByTagName("script")[0];
+    g.type = "text/javascript";
+    g.async = true;
+    g.src = u + "matomo.js";
+    s.parentNode?.insertBefore(g, s);
+  })();
+</script>