Initial commit

.gitignore

@@ -0,0 +1,19 @@
+# build output
+dist/
+.output/
+
+# 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

.prettierignore

@@ -0,0 +1,11 @@
+.gitignore
+.husky
+.npmrc
+.output
+.vscode
+**/dist/**
+**/tmp/**
+coverage
+node_modules
+pnpm-debug.log
+pnpm-lock.yaml

.prettierrc.cjs

@@ -0,0 +1,21 @@
+/** @type {import("@types/prettier").Options} */
+module.exports = {
+  printWidth: 100,
+  useTabs: true,
+  plugins: [require.resolve("prettier-plugin-astro")],
+  // plugins: ["./node_modules/prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+    {
+      files: [".*", "*.json", "*.md", "*.toml", "*.yml"],
+      options: {
+        useTabs: false,
+      },
+    },
+  ],
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Eka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+# Astronotion starter site
+
+Opinionated starter site ("theme") to get you up and running with an [Astro](https://astro.build) site + [Notion](https://www.notion.so/) content.
+
+- Uses [Astronotion](https://github.com/ekafyi/astronotion) to fetch, transform, and render data from Notion with Astro components
+- Fast, accessible, and SEO-friendly
+  - Sitemap, metadata, web manifest 
+  - Semantic HTML markup
+  - Lazy loaded images
+  - A+ Lighthouse score
+- Multiple customizable colour modes with Tailwind and daisyUI
+- Markdown examples provided for non-Notion use cases
+
+Currently only available in SSG.
+
+
+## Quick start
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fekafyi%2Fastronotion-starter-ssg%2Ftree%2Fmain) [![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ekafyi/astronotion-starter-ssg)
+
+Or [create a new repo](https://github.com/ekafyi/astronotion-starter-ssg/generate) from this template.
+
+
+## Commands
+
+| Command           | Action                                       |
+| :---------------- | :------------------------------------------- |
+| `npm install`     | Installs dependencies                        |
+| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run build`   | Build your production site to `./dist/`      |
+| `npm run preview` | Preview your build locally, before deploying |
+
+You may also use `yarn` or `pnpm` instead of `npm`.
+
+
+## Configure
+
+1) Edit the config file for basic site content/data
+
+https://github.com/ekafyi/astronotion-starter-ssg/blob/main/src/configs/an-starter-config.mjs
+
+2) Replace the static assets with your own (presumably non-feline) branding assets
+
+https://github.com/ekafyi/astronotion-starter-ssg/tree/main/public
+
+What to modify:
+- favicon.ico
+- manifest.json
+- images/branding/icon-192x192.png
+- images/branding/icon-512x512.png
+
+3) Replace the sample Notion page ids
+
+⚠️ Make sure the Notion page is shared to public
+
+### Example for standalone page
+
+https://github.com/ekafyi/astronotion-starter-ssg/blob/main/src/pages/kitchen-sink-notion.astro#L8
+
+Notion source page: https://ekafyi-playground.notion.site/Plants-1cf6f82effc24ad4aea5a50f88198a7b
+
+### Example for collection ("parent" and "child") pages
+
+- https://github.com/ekafyi/astronotion-starter-ssg/blob/main/src/pages/journal/index.astro#L9
+- https://github.com/ekafyi/astronotion-starter-ssg/blob/main/src/pages/journal/%5B...fullSlug%5D.astro#L10
+
+Notion source page: https://ekafyi-playground.notion.site/2ba80ec3d84d46479f23ec15ba5e39b0
+
+
+## Deploy
+
+Run the `build` command (see "Commands" above) and deploy your `dist` directory to your hosting service.
+
+If you use Netlify or Vercel, you can:
+- run the deploy command from the CLI: `netlify deploy` or `vercel deploy --prebuilt`, and/or...
+- trigger automatic deployment when you push to your connected repository

astro.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig } from "astro/config";
+
+import svelte from "@astrojs/svelte";
+import tailwind from "@astrojs/tailwind";
+import sitemap from "@astrojs/sitemap";
+import { astroImageTools } from "astro-imagetools";
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [
+		svelte(),
+		tailwind(),
+		sitemap(),
+		astroImageTools,
+	],
+});

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "astronotion-starter-ssg",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev --experimental-integrations",
+    "start": "astro dev --experimental-integrations",
+    "build": "astro build --experimental-integrations",
+    "preview": "astro preview --experimental-integrations",
+    "format": "prettier --write src"
+  },
+  "devDependencies": {
+    "@astrojs/sitemap": "^0.1.0",
+    "@astrojs/svelte": "^0.1.2",
+    "@astrojs/tailwind": "^0.2.1",
+    "@siverv/astro-lunr": "^0.0.3",
+    "@tailwindcss/typography": "^0.5.2",
+    "astro": "^1.0.0-beta.27",
+    "astro-embed": "^0.1.0",
+    "astro-xelement": "^3.2.0",
+    "autoprefixer": "^10.4.7",
+    "daisyui": "^2.14.3",
+    "feather-icons": "^4.29.0",
+    "notion-client": "^6.12.9",
+    "postcss": "^8.4.13",
+    "prettier": "^2.6.2",
+    "prettier-plugin-astro": "^0.0.12",
+    "prettier-plugin-svelte": "^2.7.0",
+    "prettier-plugin-tailwindcss": "^0.1.10",
+    "sass": "^1.51.0",
+    "svelte": "^3.46.4",
+    "svelte-share-buttons-component": "^1.5.0",
+    "tailwindcss": "^3.0.24",
+    "theme-change": "^2.0.2"
+  },
+  "dependencies": {
+    "@actus/svelte": "^2.3.2",
+    "@rgossiaux/svelte-headlessui": "^1.0.0",
+    "accessible-astro-components": "^1.5.3",
+    "astro-imagetools": "^0.6.3",
+    "astronotion": "0.0.6-alpha.54",
+    "ekas-throwaway-package": "^0.0.0-alpha.14",
+    "swup": "^2.0.14"
+  }
+}

public/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Astronotion Demo",
+  "short_name": "Astronotion",
+  "description": "Starter site and library to use Astro with content from Notion",
+  "icons": [
+    {
+      "src": "images/branding/icon-192x192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "images/branding/icon-512x512.png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#a8dadc"
+}

src/components/Footer.astro

@@ -0,0 +1,46 @@
+---
+import SocialLink from "@/components/SocialLink.astro";
+
+export interface Props {
+	data: {
+		navLinks: { href: string; text: string; }[];
+		socialLinks: { href: string; text?: string; }[];
+		copyright?: string;
+	}
+}
+
+const { data } = Astro.props as Props;
+const { navLinks, socialLinks, copyright } = data;
+
+---
+
+<footer class="footer footer-center p-10 bg-base-200 text-base-content rounded">
+	{navLinks?.length && (
+		<ul class="flex flex-wrap justify-center gap-0">
+			{navLinks.map(item => (
+				<li>
+					<a href={item.href} class="link link-hover">{item.text}</a>
+				</li>
+			))}
+		</ul>
+	)}
+	{socialLinks?.length && (
+		<section aria-label="social links" class="flex flex-wrap justify-center gap-2">
+			{socialLinks.map(item => (
+				<SocialLink href={item.href} />
+			))}
+		</section>
+	)}
+	{copyright && (
+		<p class="text-xs">{`© ${new Date().getFullYear()} ${copyright}`}</p>
+	)}
+</footer>
+
+<style>
+	li:not(:first-child)::before {
+		content: "|";
+		opacity: .5;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+	}
+</style>

src/components/Hero.astro

@@ -0,0 +1,52 @@
+---
+export interface Props {
+	data: {
+		headingText: string;
+		subheadingText?: string;
+		avatarSrc?: string;
+		avatarAlt?: string;
+		ctaLinks?: { text: string; href: string; }[];
+	};
+}
+
+const { data } = Astro.props as Props;
+
+const { headingText, subheadingText, avatarSrc, avatarAlt, ctaLinks = [] } = data;
+---
+
+<section class="bg-base-200">
+	<div class="max-w-screen-xl px-4 py-32 mx-auto lg:aspect-video lg:items-center lg:flex">
+		<div class="max-w-3xl mx-auto flex flex-col items-center gap-6">
+			{avatarSrc && (
+				<div class="avatar">
+					<div class="w-48 rounded-full">
+						<img src={avatarSrc} alt={avatarAlt ?? ""} width="192" height="192" />
+					</div>
+				</div>
+			)}
+			<h1
+				class="text-3xl font-extrabold text-transparent sm:text-5xl bg-clip-text bg-gradient-to-r from-secondary-focus via-primary-focus to-accent-focus"
+			>
+				{headingText}
+			</h1>
+			{subheadingText && (
+				<p class="max-w-xl mx-auto sm:leading-relaxed sm:text-xl text-base-content/75">
+					{subheadingText}
+				</p>
+			)}
+			{!!ctaLinks.length && (
+				<div class="flex flex-wrap justify-center gap-4 pt-4">
+					<a class="btn btn-primary" href={ctaLinks[0].href}>
+						{ctaLinks[0].text}
+					</a>
+					{ctaLinks.length > 1 && (
+						<a class="btn btn-outline btn-primary" href={ctaLinks[1].href}>
+							{ctaLinks[1].text}
+						</a>
+					)}
+				</div>
+			)}
+		</div>
+	</div>
+</section>
+