feat: ✨ Chore: Update AIK and add ViewTransition support (#13)

Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com>
Co-authored-by: Adam Matthiesen <amatthiesen@outlook.com>
Co-authored-by: Jacob Jenkins <7649031+jdtjenkins@users.noreply.github.com>

Author: 3 people

.changeset/mean-berries-cry.md

@@ -0,0 +1,5 @@
+---
+"@matthiesenxyz/astro-hashnode": patch
+---
+
+This updates internal `AIK` as well as impliments ViewTransitions with a disable switch in the user config

package/README.md

@@ -54,6 +54,7 @@ export default defineConfig({
 astroHashnode({
   hashnodeURL: 'astroplayground.hashnode.dev', // Your hashnode URL
   landingPage: true, // Lets you disable the default landing page!
+  useViewTransitions: true, // Lets you enable/disable the default included ViewTransitions.
   layoutComponent: './src/layouts/YourLayout.astro' // Lets you change the default Layout.astro being used by the Integration Pages.
   verbose: false // Change to Verbose console output
 })

package/package.json

@@ -43,15 +43,15 @@
     "vite": "^5.1.5"
   },
   "dependencies": {
-    "@tailwindcss/vite": "4.0.0-alpha.7",
+    "@tailwindcss/vite": "4.0.0-alpha.8",
     "astro-font": "^0.0.77",
-    "astro-integration-kit": "^0.5.1",
+    "astro-integration-kit": "^0.6.0",
     "astro-remote": "^0.3.2",
     "astro-seo": "^0.8.3",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "picocolors": "^1.0.0",
-    "tailwindcss": "4.0.0-alpha.7",
+    "tailwindcss": "4.0.0-alpha.8",
     "ultrahtml": "^1.5.3"
   }
 }

package/src/astro-hashnode.ts

@@ -69,8 +69,7 @@ export default defineIntegration({
 
                 hashLog("Setting up Virtual Imports and Layout Component")
                 // Setup Layout Component
-                // biome-ignore lint/suspicious/noImplicitAnyLet: This is a false positive
-                let layoutComponentPath
+                let layoutComponentPath: string;
 
                 if (options.layoutComponent) {
                     layoutComponentPath = rootResolve(options.layoutComponent)

package/src/definitions/astro-hashnode.d.ts

@@ -1,6 +1,6 @@
 declare module 'virtual:astro-hashnode/config' {
-    const userConfig: import("./src/schemas/user-config").Options;
-     export default config as userConfig;
+    const Config: import("./src/schemas/user-config").Options;
+     export default config as Config;
 }
 
 declare module 'virtual:astro-hashnode/components' {

package/src/hn-gql/client.ts

@@ -1,6 +1,6 @@
 import { gql, GraphQLClient } from "graphql-request";
 import type { AllPostsData, PostOrPageData, PublicationData } from "./schema";
-import Config from "virtual:astro-hashnode/config";
+import config from "virtual:astro-hashnode/config";
 
 export const getClient = () => { 
   return new GraphQLClient("https://gql.hashnode.com") 
@@ -12,7 +12,7 @@ export const getAllPosts = async () => {
   const allPosts = await client.request<AllPostsData>(
     gql`
       query allPosts {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${config.hashnodeURL}") {
           title
           posts(first: 20) {
             pageInfo{
@@ -56,7 +56,7 @@ export const getPost = async (slug: string) => {
   const data = await client.request<PostOrPageData>(
     gql`
       query postDetails($slug: String!) {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${config.hashnodeURL}") {
           post(slug: $slug) {
             author{
               name
@@ -92,7 +92,7 @@ export const getAboutPage = async () => {
   const page = await client.request<PostOrPageData>(
     gql`
       query pageData {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${config.hashnodeURL}") {
           staticPage(slug: "about") {
             title
             content {
@@ -114,7 +114,7 @@ export const getPublication = async () => {
   const data = await client.request<PublicationData>(
     gql`
       query pubData {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${config.hashnodeURL}") {
           title
           displayTitle
           descriptionSEO

package/src/index.ts

@@ -1,3 +1,3 @@
-import astroHashnode from "./astro-hashnode.js";
+import astroHashnode from "./astro-hashnode";
 
 export default astroHashnode;

package/src/layouts/Layout.astro

@@ -6,6 +6,10 @@ import { getPublication } from '../hn-gql'
 import { SEO } from "astro-seo";
 import { AstroFont } from "astro-font";
 import type { AstroHashnodeLayoutProps } from '../proptypes/layouttypes'
+import { ViewTransitions } from 'astro:transitions';
+import config from "virtual:astro-hashnode/config";
+
+const useTranstions = config.useViewTransitions;
 
 const pubData = await getPublication();
 
@@ -54,6 +58,7 @@ const { pageTitle, hideFooter, hideHeader, ogImage } = Astro.props as AstroHashn
         ]
       }}
     />
+    {useTranstions && <ViewTransitions />}
   </head>
   <body>
     <div class="flex flex-col">

package/src/schemas/user-config.ts

@@ -1,17 +1,34 @@
 import { z } from "astro/zod";
-import { createResolver } from 'astro-integration-kit';
-
-const { resolve } = createResolver(import.meta.url)
 
 export function LayoutConfigSchema() {
 	return z
 		.string()
 		.optional()
 }
 export const optionsSchema = z.object({
+	/**
+	 * The URL of the Hashnode blog
+	 */
     hashnodeURL: z.string(),
+	/**
+	 * Allows the user to disable the default landing page and use their own Astro site instead of a landing page.
+	 * @default true
+	 */
 	landingPage: z.boolean().default(true),
+	/**
+	 * Allows the user to enable/disable the Astro ViewTransitions component.
+	 * @default true
+	 * @see https://docs.astro.build/en/guides/view-transitions/ for more information about ViewTransitions
+	 */
+	useViewTransitions: z.boolean().default(true),
+	/**
+	 * Allows the user to change the layout component used for Astro-Hashnode pages.
+	 */
     layoutComponent: LayoutConfigSchema(),
+	/**
+	 * Allows the user to enable verbose logging
+	 * @default false
+	 */
 	verbose: z.boolean().default(false),
 });
 

playground/astro.config.mjs

@@ -12,6 +12,7 @@ export default defineConfig({
 		astroHashnode({
 			hashnodeURL: "astroplayground.hashnode.dev",
 			verbose: true,
+			disableViewTransitions: false,
 		})
 	],
 });