initial commit

astrolicious · Feb 24, 2024 · 65576d8 · 65576d8
commit 65576d8
Show file tree

Hide file tree

Showing 20 changed files with 3,281 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# My Astro Theme!
+
+This is my awesome Astro theme created using [`astro-theme-provider`](https://github.com/BryceRussell/astro-theme-provider)!
+
diff --git a/package.json b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "theme-root",
+  "license": "MIT",
+  "private": true,
+  "scripts": {},
+  "devDependencies": {
+    "astro": "^4.4.4"
+  }
+}
diff --git a/package/README.md b/package/README.md
@@ -0,0 +1,36 @@
+# My Astro Theme!
+
+This is my awesome Astro theme created using [`astro-theme-provider`](https://github.com/BryceRussell/astro-theme-provider)!
+
+### Install
+
+1. Create an empty Astro project:
+
+```sh
+npm create astro@latest mywebsite --template empty -y
+```
+
+2. Add the theme to your project:
+
+```sh
+npm run astro add my-theme
+```
+
+### Configure
+
+```ts
+import { defineConfig } from "astro/config";
+import MyTheme from "my-theme";
+
+export default defineConfig({
+  integrations: [
+    MyTheme({
+      config: {
+        title: "Hey!",
+        description: "This is my website!",
+      },
+    }),
+  ],
+});
+
+```
diff --git a/package/assets/houston.webp b/package/assets/houston.webp
diff --git a/package/components/Hero.astro b/package/components/Hero.astro
@@ -0,0 +1,27 @@
+---
+interface Props {
+  title: string;
+  desc?: string | undefined;
+}
+
+const { title, desc } = Astro.props;
+---
+
+<div>
+  <h1>{title}</h1>
+  <p>{desc || "Where did the description go?"}</p>
+</div>
+
+<style>
+  div {
+    max-width: 75ch;
+    padding: 1rem;
+    text-align: center;
+    color: white;
+  }
+
+  h1 {
+    max-width: 15ch;
+    font-size: 3.5rem;
+  }
+</style>
diff --git a/package/css/styles.css b/package/css/styles.css
@@ -0,0 +1,26 @@
+:root {
+  height: 100%;
+  background-color: #111;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  height: 100%;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.5;
+  background-image: linear-gradient(#222222 0.7000000000000001px, transparent 0.7000000000000001px), linear-gradient(to right, #222222 0.7000000000000001px, #111 0.7000000000000001px);
+  background-size: 20px 20px;
+}
+
+img {
+  max-width: 250px;
+  width: 100%;
+  height: auto;
+}
diff --git a/package/index.ts b/package/index.ts
@@ -0,0 +1,9 @@
+import defineTheme from "astro-theme-provider";
+import { z } from "astro/zod";
+
+export default defineTheme({
+	schema: z.object({
+		title: z.string(),
+		description: z.string().optional(),
+	}),
+});
diff --git a/package/layouts/Layout.astro b/package/layouts/Layout.astro
@@ -0,0 +1,17 @@
+---
+import config from 'my-theme/config'
+import 'my-theme/css';
+---
+
+<html lang="en">
+  <head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+    <title>{config.title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/package/package.json b/package/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "my-theme",
+  "version": "0.0.1",
+  "description": "My awesome Astro theme created using `astro-theme-provider`!",
+  "license": "MIT",
+  "keywords": [
+    "astro",
+    "withastro",
+    "astro-integration"
+  ],
+  "scripts": {},
+  "devDependencies": {
+    "astro": "^4.4.4",
+    "astro-theme-provider": "^0.1.0"
+  }
+}
diff --git a/package/pages/index.astro b/package/pages/index.astro
@@ -0,0 +1,47 @@
+---
+import { Image } from "astro:assets";
+import { Layout } from "my-theme/layouts";
+import { Hero } from "my-theme/components";
+import { houston } from "my-theme/assets";
+import config from "my-theme/config";
+---
+
+<Layout>
+  <Hero title={config.title} desc={config.description} />
+  <div class="houston">
+    <Image src={houston} alt="" />
+  </div>
+</Layout>
+
+<style>
+  .houston {
+    animation: hithere 8s ease-in-out infinite;
+  }
+
+  @keyframes hithere {
+    0% {
+      transform: rotate(-5deg) scale(1);
+    }
+    15% {
+      transform: rotate(-5deg) scale(1);
+    }
+    20% {
+      transform: rotate(10deg) scale(1.15);
+    }
+    25% {
+      transform: rotate(-20deg) scale(1.15);
+    }
+    30% {
+      transform: rotate(10deg) scale(1.15);
+    }
+    35% {
+      transform: rotate(-20deg) scale(1.15);
+    }
+    40% {
+      transform: rotate(-5deg) scale(1);
+    }
+    100% {
+      transform: rotate(-5deg) scale(1);
+    }
+  }
+</style>
diff --git a/package/public/favicon.svg b/package/public/favicon.svg
diff --git a/playground/.gitignore b/playground/.gitignore
@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/playground/astro.config.ts b/playground/astro.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from "astro/config";
+import MyTheme from "my-theme";
+
+export default defineConfig({
+	integrations: [
+		MyTheme({
+			config: {
+				title: "My Awesome Theme",
+				description: "My awesome theme is currently under construction!",
+			},
+		}),
+	],
+});
diff --git a/playground/package.json b/playground/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^4.4.4",
+    "my-theme": "workspace:^"
+  }
+}
diff --git a/playground/src/env.d.ts b/playground/src/env.d.ts
@@ -0,0 +1,3 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+/// <reference types="../.astro/my-theme.d.ts" />
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strictest"
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# My Astro Theme!

		This is my awesome Astro theme created using [`astro-theme-provider`](https://github.com/BryceRussell/astro-theme-provider)!