@pindoba/astro-topbar 0.0.0-alpha-20241003230712

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
+npm 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                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
+| `npm 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/npm-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.
+
+import Topbar from "./src/Topbar.astro";
+
+export default Topbar;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@pindoba/astro-topbar",
+  "version": "0.0.0-alpha-20241003230712",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "devDependencies": {
+    "astro": "^4.15.11"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.3",
+    "typescript": "^5.6.2",
+    "@pindoba/styles": "0.0.0-alpha-20241003230712",
+    "@pindoba/panda": "0.0.0-alpha-20241003230712"
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  }
+}

package/src/Topbar.astro

@@ -0,0 +1,15 @@
+---
+import { topbarStyles } from "@pindoba/styles/blocks/topbar";
+
+const classes = topbarStyles({});
+---
+
+<div class={classes.root}>
+  <div class={classes.container}>
+    <slot name="logo" />
+    <div class={classes.right}>
+      <slot name="menu" />
+      <slot name="misc" />
+    </div>
+  </div>
+</div>