Merge pull request #4 from ixahmedxi/astro

Astro

.gitignore

@@ -133,4 +133,7 @@ dist
 .turbo
 
 # Storybook
-storybook-static
+storybook-static
+
+# Astro
+.astro

.vscode/settings.json

@@ -14,5 +14,24 @@
   "files.associations": {
     "*.css": "tailwindcss"
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "prettier.documentSelectors": ["**/*.astro"],
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    "twc\\.[^`]+`([^`]*)`",
+    "twc\\(.*?\\).*?`([^`]*)",
+    ["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro",
+    "typescript",
+    "typescriptreact"
+  ]
 }

apps/marketing/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+const config = {
+  root: true,
+  extends: ['orbitkit/base', 'orbitkit/react', 'orbitkit/astro'],
+};
+
+module.exports = config;

apps/marketing/astro.config.ts

@@ -0,0 +1,16 @@
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+import sitemap from '@astrojs/sitemap';
+import tailwind from '@astrojs/tailwind';
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://example.com',
+  integrations: [
+    mdx(),
+    sitemap(),
+    tailwind({ applyBaseStyles: false }),
+    react(),
+  ],
+});

apps/marketing/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@orbitkit/marketing",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Marketing website for OrbitKit",
+  "license": "MIT",
+  "author": "OrbitKit",
+  "type": "module",
+  "scripts": {
+    "build": "astro check && astro build",
+    "dev": "astro dev",
+    "lint": "eslint . --cache --max-warnings 0",
+    "start": "astro preview",
+    "typecheck": "astro check"
+  },
+  "dependencies": {
+    "@astrojs/rss": "^4.0.4",
+    "@orbitkit/assets": "workspace:^",
+    "@orbitkit/ui": "workspace:^",
+    "@t3-oss/env-core": "^0.8.0",
+    "@total-typescript/ts-reset": "^0.5.1",
+    "astro": "^4.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.4.1",
+    "@astrojs/mdx": "^2.1.1",
+    "@astrojs/react": "^3.0.9",
+    "@astrojs/sitemap": "^3.0.5",
+    "@astrojs/tailwind": "^5.1.0",
+    "@orbitkit/tailwind": "workspace:^",
+    "@orbitkit/tsconfig": "workspace:^",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.54",
+    "@types/react-dom": "^18.2.18",
+    "autoprefixer": "^10.4.17",
+    "eslint-config-orbitkit": "workspace:^",
+    "postcss": "^8.4.34",
+    "tailwindcss": "^3.4.1"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

apps/marketing/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/marketing/reset.d.ts

@@ -0,0 +1 @@
+import '@total-typescript/ts-reset';

apps/marketing/src/components/BaseHead.astro

@@ -0,0 +1,75 @@
+---
+import '@orbitkit/assets/fonts/stylesheet.css';
+import '@/styles/globals.css';
+
+import GeistMono from '@orbitkit/assets/fonts/GeistMonoVariable.ttf';
+import GeistSans from '@orbitkit/assets/fonts/GeistVariable.ttf';
+
+import { consts } from '@/consts';
+
+interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+}
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
+const {
+  title = consts.site.title,
+  description = consts.site.description,
+  image = consts.site.previewImage,
+} = Astro.props;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Font preloads -->
+<link rel="preload" href={GeistSans} as="font" type="font/ttf" crossorigin />
+<link rel="preload" href={GeistMono} as="font" type="font/ttf" crossorigin />
+
+<!-- Canonical URL -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+<meta property="og:image" content={new URL(image, Astro.url)} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />
+<meta property="twitter:image" content={new URL(image, Astro.url)} />
+
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme') ?? '';
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  })();
+
+  if (theme === 'light') {
+    document.documentElement.classList.remove('dark');
+  } else {
+    document.documentElement.classList.add('dark');
+  }
+
+  window.localStorage.setItem('theme', theme);
+</script>

apps/marketing/src/components/FormattedDate.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  date: Date;
+}
+
+const { date } = Astro.props;
+---
+
+<time datetime={date.toISOString()}>
+  {
+    date.toLocaleDateString('en-us', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    })
+  }
+</time>

apps/marketing/src/components/avatar.tsx

@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar';
+
+export const MyAvatar = () => {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  );
+};

apps/marketing/src/consts.ts

@@ -0,0 +1,8 @@
+export const consts = {
+  site: {
+    title: 'Orbitkit - Startup SaaS Monorepo StarterKit',
+    description:
+      'Orbitkit is a SaaS Monorepo StarterKit for startups and enterprises. It includes a Next.js web application, Astrojs marketing website and much more.',
+    previewImage: '/images/preview.png',
+  },
+};

apps/marketing/src/content/blog/first-post.md

@@ -0,0 +1,8 @@
+---
+title: 'First post'
+description: 'Hello world'
+pubDate: 'Jul 08 2022'
+heroImage: '/blog-placeholder-3.jpg'
+---
+
+Hello World

apps/marketing/src/content/config.ts

@@ -0,0 +1,14 @@
+import { defineCollection, z } from 'astro:content';
+
+const blog = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.coerce.date(),
+    updatedDate: z.coerce.date().optional(),
+    heroImage: z.string().optional(),
+  }),
+});
+
+export const collections = { blog };

apps/marketing/src/env.d.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

apps/marketing/src/layouts/BlogPost.astro

@@ -0,0 +1,47 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import BaseHead from '@/components/BaseHead.astro';
+import FormattedDate from '@/components/FormattedDate.astro';
+
+type Props = CollectionEntry<'blog'>['data'];
+
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <BaseHead title={title} description={description} />
+  </head>
+
+  <body>
+    <main>
+      <article>
+        <div class="hero-image">
+          {
+            heroImage && (
+              <img width={1020} height={510} src={heroImage} alt="" />
+            )
+          }
+        </div>
+        <div class="prose">
+          <div class="title">
+            <div class="date">
+              <FormattedDate date={pubDate} />
+              {
+                updatedDate && (
+                  <div class="last-updated-on">
+                    Last updated on <FormattedDate date={updatedDate} />
+                  </div>
+                )
+              }
+            </div>
+            <h1>{title}</h1>
+            <hr />
+          </div>
+          <slot />
+        </div>
+      </article>
+    </main>
+  </body>
+</html>

apps/marketing/src/pages/about.astro

@@ -0,0 +1,12 @@
+---
+import Layout from '@/layouts/BlogPost.astro';
+---
+
+<Layout
+  title="About Me"
+  description="About page"
+  pubDate={new Date('August 08 2021')}
+  heroImage="/blog-placeholder-about.jpg"
+>
+  <p>About page</p>
+</Layout>

apps/marketing/src/pages/blog/[...slug].astro

@@ -0,0 +1,23 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import { getCollection } from 'astro:content';
+
+import BlogPost from '@/layouts/BlogPost.astro';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: post,
+  }));
+}
+type Props = CollectionEntry<'blog'>;
+
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<BlogPost {...post.data}>
+  <Content />
+</BlogPost>

apps/marketing/src/pages/blog/index.astro

@@ -0,0 +1,43 @@
+---
+import { getCollection } from 'astro:content';
+
+import BaseHead from '@/components/BaseHead.astro';
+import FormattedDate from '@/components/FormattedDate.astro';
+
+const posts = (await getCollection('blog')).sort(
+  (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
+);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead />
+  </head>
+  <body>
+    <main>
+      <section>
+        <ul>
+          {
+            posts.map((post) => (
+              <li>
+                <a href={`/blog/${post.slug}/`}>
+                  <img
+                    width={720}
+                    height={360}
+                    src={post.data.heroImage}
+                    alt=""
+                  />
+                  <h4 class="title">{post.data.title}</h4>
+                  <p class="date">
+                    <FormattedDate date={post.data.pubDate} />
+                  </p>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </main>
+  </body>
+</html>