Update readme

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/coauthor.yml

@@ -14,4 +14,4 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: kevinzunigacuellar/coauthor-action@v0.1.1
+      - uses: kevinzunigacuellar/coauthor-action@v0.1.2

README.md

@@ -31,4 +31,6 @@ You can now edit files in `package`. Please note that making changes to those fi
 
 [MIT Licensed](./LICENSE). Made with ❤️ by [Adam M.](https://github.com/adammatthiesen).
 
+This project is cloned to [Gitea](https://git.matthiesen.dev)
+
 This project is also cloned to [GitLab](https://gitlab.com/matthiesenxyz/astro-hashnode)

package.json

@@ -13,7 +13,7 @@
 		"ci:publish": "pnpm changeset publish"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "1.6.0",
+		"@biomejs/biome": "1.6.1",
 		"@changesets/cli": "^2.27.1"
 	}
 }

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @matthiesenxyz/astro-hashnode
 
+## 0.1.8
+
+### Patch Changes
+
+- 6ccd6dc: Bump dependencies:
+
+  - @tailwindcss/vite from to
+  - astro-font from to
+  - tailwindcss from to
+  - @astrojs/node from to
+  - astro from to
+
+## 0.1.7
+
+### Patch Changes
+
+- 6464de2: [fix] add extra fallback option for ogImage
+
+## 0.1.6
+
+### Patch Changes
+
+- cf327f2: Update README.md
+- e54bfbb: [Internal] better handling of the `hashnodeURL` input to verify that including `http` or `https` in the URL does not break the entire integration
+
+## 0.1.5
+
+### Patch Changes
+
+- 784cb63: view transition updates
+
+## 0.1.4
+
+### Patch Changes
+
+- 337a5b0: added new keyword "cms" and updated Dependencies
+
+## 0.1.3
+
+### Patch Changes
+
+- fc94343: This updates internal `AIK` as well as impliments ViewTransitions with a disable switch in the user config
+
 ## 0.1.2
 
 ### Patch Changes

package/README.md

@@ -11,7 +11,7 @@ pnpm astro add @matthiesenxyz/astro-hashnode
 ```
 
 ```bash
-npm astro add @matthiesenxyz/astro-hashnode
+npx astro add @matthiesenxyz/astro-hashnode
 ```
 
 ```bash
@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@matthiesenxyz/astro-hashnode",
-  "version": "0.1.2",
+  "version": "0.1.8",
   "description": "An Integration to bring your Hashnode Headless Blog content into Astro!",
   "author": {
     "email": "adam@matthiesen.xyz",
@@ -12,6 +12,7 @@
     "astro-integration",
     "withastro",
     "astro",
+    "cms",
     "hashnode",
     "blog",
     "graphql",
@@ -43,15 +44,15 @@
     "vite": "^5.1.5"
   },
   "dependencies": {
-    "@tailwindcss/vite": "4.0.0-alpha.7",
-    "astro-font": "^0.0.77",
-    "astro-integration-kit": "^0.5.1",
+    "@tailwindcss/vite": "4.0.0-alpha.9",
+    "astro-font": "^0.0.78",
+    "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.9",
     "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/components/Author.astro

@@ -20,16 +20,24 @@ const { post } = Astro.props;
         height={50}
         class="rounded-3xl mr-3" 
         loading="eager"
+        transition:animate={"fade"} 
+        transition:name={'author:' + post.author.profilePicture}
       />
       <div class="mt-3 flex">  
-        <span>{post.author.name}</span>
+        <span transition:animate={"fade"} 
+        transition:name={'author:' + post.author.name} 
+        >{post.author.name}</span>
         <span class="mx-3 block font-bold text-slate-500">.</span>
       </div>
     </div>
   </div>
-  <div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start">
-    <span>{getFormattedDate(post.publishedAt)}</span>
+  <div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start" >
+    <span transition:animate={"fade"} 
+    transition:name={'hero:' + post.publishedAt}
+    >{getFormattedDate(post.publishedAt)}</span>
     <span class="mx-3 block font-bold text-slate-500">.</span>
-    <span>{post.readTimeInMinutes} min read</span>
+    <span transition:animate={"fade"} 
+    transition:name={'hero:' + post.readTimeInMinutes}
+    >{post.readTimeInMinutes} min read</span>
   </div>
 </div>

package/src/components/Header.astro

@@ -7,6 +7,27 @@ const aboutPageData = await getAboutPage();
 
 const baseURL = import.meta.env.BASE_URL;
 
+const pathname = new URL(Astro.request.url).pathname;
+
+// remove leading and trailing slash
+const removeTrailingAndLeadingSlash = (str:string) => {
+  // define checked string as the original string
+  let checkedStr = str;
+
+  // remove leading slash
+  if (str.startsWith("/")) {
+    checkedStr = str.slice(1);
+  }
+  // remove trailing slash
+  if (str.endsWith("/")) {
+    checkedStr = str.slice(0, -1);
+  }
+  // return checked string
+  return checkedStr;
+}
+
+const currentPath = removeTrailingAndLeadingSlash(pathname);
+
 ---
 <header class="flex bg-blue-200 w-full p-3">
   <h1 class="text-2xl">
@@ -35,8 +56,22 @@ const baseURL = import.meta.env.BASE_URL;
     </a>
   </h1>
   <div class="ml-5 pt-0.5 text-lg">
-    <a class="mr-3" href={baseURL}>Home</a>
-    <a class="mr-3" href={`${baseURL}blog`}>Blog</a>
-    {aboutPageData && <a href={`${baseURL}blog/about/`}>About</a>}
+    <a 
+      class=`mr-3 ${currentPath === "" ? "font-bold" : ""}` 
+      href={baseURL}
+      >Home
+    </a>
+    <a 
+      class=`mr-3 ${currentPath === "blog" ? "font-bold" : ""}` 
+      href={`${baseURL}blog`}
+      >Blog
+    </a>
+    { aboutPageData && ( 
+      <a 
+        class=`mr-3 ${currentPath === "blog/about" ? "font-bold" : ""}`
+        href={`${baseURL}blog/about`}
+        >About
+      </a>
+       ) }
   </div>
 </header>

package/src/components/PostCard.astro

@@ -26,6 +26,7 @@ const p = await getPost(post.slug);
         src={p.coverImage.url} 
         alt={post.title} 
         inferSize={true} 
+        transition:name={'hero:' + p.coverImage.url}
       />
       <div class="flex flex-col m-4">
         <p class="mb-2 text-lg">{post.brief}</p>

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,18 +1,28 @@
 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") 
 }
 
+export function removeHTTPSProtocol(url: string) {
+  return url.replace(/^https?:\/\//, '');
+}
+export function removeHTTPProtocol(url: string) {
+  const fixHTTPS = removeHTTPSProtocol(url);
+  return fixHTTPS.replace(/^http?:\/\//, '');
+}
+
+const newURL = removeHTTPProtocol(config.hashnodeURL);
+
 export const getAllPosts = async () => {
   const client = getClient();
 
   const allPosts = await client.request<AllPostsData>(
     gql`
       query allPosts {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${newURL}") {
           title
           posts(first: 20) {
             pageInfo{
@@ -56,7 +66,7 @@ export const getPost = async (slug: string) => {
   const data = await client.request<PostOrPageData>(
     gql`
       query postDetails($slug: String!) {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${newURL}") {
           post(slug: $slug) {
             author{
               name
@@ -92,7 +102,7 @@ export const getAboutPage = async () => {
   const page = await client.request<PostOrPageData>(
     gql`
       query pageData {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${newURL}") {
           staticPage(slug: "about") {
             title
             content {
@@ -114,11 +124,14 @@ export const getPublication = async () => {
   const data = await client.request<PublicationData>(
     gql`
       query pubData {
-        publication(host: "${Config.hashnodeURL}") {
+        publication(host: "${newURL}") {
           title
           displayTitle
           descriptionSEO
           favicon
+          author {
+            profilePicture
+          }
           preferences {
             logo
             disableFooterBranding

package/src/hn-gql/schema.ts

@@ -60,6 +60,9 @@ export const PublicationDataSchema = z.object({
         displayTitle: z.string(),
         descriptionSEO: z.string(),
         favicon: z.string(),
+        author: z.object({
+            profilePicture: z.string(),
+        }),
         preferences: z.object({
             logo: z.string(),
             disableFooterBranding: z.boolean(),

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();
 
@@ -37,7 +41,7 @@ const { pageTitle, hideFooter, hideHeader, ogImage } = Astro.props as AstroHashn
         basic: {
           title: pageTitle ? pageTitle + " | " + pubHeader : pubHeader,
           type: 'text',
-          image: ogImage || pubData.favicon,
+          image: ogImage || pubData.favicon || pubData.author.profilePicture,
         },
         optional: {
           description: pubData.descriptionSEO,
@@ -54,10 +58,11 @@ const { pageTitle, hideFooter, hideHeader, ogImage } = Astro.props as AstroHashn
         ]
       }}
     />
+    {useTranstions && <ViewTransitions />}
   </head>
   <body>
     <div class="flex flex-col">
-      {!hideHeader && <Header />}
+      {!hideHeader && <Header transition:animate="none" />}
       <div class="flex flex-wrap flex-col mt-0 mr-auto mb-0 ml-auto lg:w-[60%]">
         <slot />
       </div>

package/src/pages/blog/[slug].astro

@@ -28,11 +28,12 @@ const post = await getPost(slug);
       alt={post.title} 
       inferSize={true} 
       loading="eager"
+      transition:name={'hero:' + post.coverImage.url}
     />
-    <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
+    <h1 class="text-4xl font-bold pt-5" transition:name={'banner'} transition:animate={'fade'}>{post.title}</h1>
     <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
 
-    <Author post={post} />
+    <Author post={post}/>
     
     <div class="flex flex-wrap justify-center items-center mt-5 mb-5">
       {post.tags && post.tags.map((tag) => <Tag tag={tag} />)}

package/src/pages/blog/about.astro

@@ -9,7 +9,9 @@ const data = await getAboutPage();
 
 <Layout pageTitle="About">
   <div class="flex flex-col justify-center p-2">
-    <h2 class="text-3xl mb-3">{data.title} Page</h2>
+    <h2 class="text-3xl mb-3" 
+    transition:name={'banner'}
+    transition:animate={'fade'}>{data.title}</h2>
     <div class="about-content">
       <Markdown content={data.content.markdown} 
       components={{

package/src/pages/blog/index.astro

@@ -10,7 +10,7 @@ const allPosts = data.publication.posts.edges;
 ---
 <Layout pageTitle="Blog">
 	<div class="flex flex-col justify-center items-center p-2">
-		<h2 class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
+		<h2 transition:animate={'fade'} transition:name={'banner'} class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
 		<Posts allPosts={allPosts}/>
 
 	</div>

package/src/pages/index.astro

@@ -13,8 +13,14 @@ import background from "../assets/blog.jpg";
 			height={1080}
 			width={1920}
 			loading="eager"
+			transition:name={'background:' + background}
+			transition:animate={'fade'}
 		/>
-		<div class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md">
+		<div 
+			class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md"
+			transition:name={'banner'}
+			transition:animate={'fade'}
+		>
 			<div class="flex pb-5 mb-5 text-5xl text-purple-800">
 				<p>Hashnode Blog</p>
 			</div>

package/src/pages/ssr-pages/[slug].astro

@@ -27,6 +27,7 @@ const post = await getPost(checkSlug(slug));
       alt={post.title} 
       inferSize={true} 
       loading="eager"
+      transition:name={'hero:' + post.coverImage.url}
     />
     <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
     <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>

package/src/schemas/user-config.ts

@@ -1,7 +1,4 @@
 import { z } from "astro/zod";
-import { createResolver } from 'astro-integration-kit';
-
-const { resolve } = createResolver(import.meta.url)
 
 export function LayoutConfigSchema() {
 	return z
@@ -9,9 +6,29 @@ export function LayoutConfigSchema() {
 		.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,
 		})
 	],
 });

playground/package.json

@@ -11,13 +11,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "8.2.3",
+    "@astrojs/node": "8.2.4",
     "@matthiesenxyz/astro-hashnode": "workspace:*",
-    "astro": "^4.5.1"
+    "astro": "^4.5.6"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.5.7",
-    "@types/node": "^20.11.25",
+    "@astrojs/check": "^0.5.9",
+    "@types/node": "^20.11.28",
     "typescript": "^5.4.2"
   }
 }