diff --git a/example-blog/src/components/HeaderAccount.astro b/example-blog/src/components/HeaderAccount.astro
index 1a6e751..3ffaf07 100644
--- a/example-blog/src/components/HeaderAccount.astro
+++ b/example-blog/src/components/HeaderAccount.astro
@@ -2,21 +2,21 @@
// Check if user has session
import { isLoggedIn } from "../lib/appwrite";
- const loginElem: HTMLElement | null = document.querySelector(
+ const loginElement: HTMLElement | null = document.querySelector(
"#header-account-user"
);
- const accountElem: HTMLElement | null = document.querySelector(
+ const accountElement: HTMLElement | null = document.querySelector(
"#header-account-login"
);
isLoggedIn.subscribe((user) => {
- if (!accountElem || !loginElem) return;
+ if (!accountElement || !loginElement) return;
if (user) {
- loginElem.style.display = "none";
- accountElem.style.display = "block";
+ loginElement.style.display = "none";
+ accountElement.style.display = "block";
} else {
- loginElem.style.display = "block";
- accountElem.style.display = "none";
+ loginElement.style.display = "block";
+ accountElement.style.display = "none";
}
});
diff --git a/example-blog/src/components/ModalDelete.astro b/example-blog/src/components/ModalDelete.astro
index 7e9e187..686315a 100644
--- a/example-blog/src/components/ModalDelete.astro
+++ b/example-blog/src/components/ModalDelete.astro
@@ -52,26 +52,26 @@ const post: BlogPost = JSON.parse(poststring);
if (!this.dataset.poststring) return;
const post: BlogPost = JSON.parse(this.dataset.poststring);
//Modal
- const modalDeleteShowElem: HTMLButtonElement | null =
+ const deleteModalShowElement: HTMLButtonElement | null =
this.querySelector("#modal-delete-show");
- const modalDeleteDialogElem: HTMLDialogElement | null =
+ const deleteModalDialogElement: HTMLDialogElement | null =
this.querySelector("#modal-delete-dialog");
- if (modalDeleteShowElem && modalDeleteDialogElem) {
- modalDeleteShowElem.addEventListener("click", () => {
- modalDeleteDialogElem.showModal();
+ if (deleteModalShowElement && deleteModalDialogElement) {
+ deleteModalShowElement.addEventListener("click", () => {
+ deleteModalDialogElement.showModal();
});
- modalDeleteDialogElem.addEventListener("close", async () => {
- if (!modalDeleteDialogElem.returnValue) {
+ deleteModalDialogElement.addEventListener("close", async () => {
+ if (!deleteModalDialogElement.returnValue) {
return;
}
try {
await appwriteDatabases.deleteDocument(
import.meta.env.PUBLIC_APPWRITE_DB_ID,
- import.meta.env.PUBLIC_APPWRITE_BLOG_ID,
- modalDeleteDialogElem.returnValue
+ import.meta.env.PUBLIC_APPWRITE_POSTS_ID,
+ deleteModalDialogElement.returnValue
);
- window.location.replace(`/blog`);
+ window.location.replace(`/posts`);
} catch (error) {
const appwriteError = error as AppwriteException;
alert(appwriteError.message);
diff --git a/example-blog/src/components/SideNav.astro b/example-blog/src/components/SideNav.astro
index 2816039..0a73335 100644
--- a/example-blog/src/components/SideNav.astro
+++ b/example-blog/src/components/SideNav.astro
@@ -1,47 +1,88 @@
---
import NavLink from "./NavLink.astro";
-import { SITE_TITLE } from "../consts";
import Account from "./Account.astro";
---
-
-
-
+
+
+
+
+
+
+ -
+
+
+ Astro Docs
+
+
+
+ GitHub Repo
+
+
+
+
+
-
-
-
- -
-
-
- Astro Doc
-
-
-
- GitHub Repo
-
-
-
-
+
+
+
+
+
+
+
+ -
+
+
+ Blog
+
+
+ -
+
+
+ -
+
+
+ Astro Docs
+
+
+ -
+
+
+ GitHub Repo
+
+
+
+
+
diff --git a/example-blog/src/components/ThemeSwitcher.astro b/example-blog/src/components/ThemeSwitcher.astro
new file mode 100644
index 0000000..86376f1
--- /dev/null
+++ b/example-blog/src/components/ThemeSwitcher.astro
@@ -0,0 +1,66 @@
+
+
+
+
+
+
diff --git a/example-blog/src/components/UploadFile.astro b/example-blog/src/components/UploadFile.astro
index fd6de9f..106ec71 100644
--- a/example-blog/src/components/UploadFile.astro
+++ b/example-blog/src/components/UploadFile.astro
@@ -1,5 +1,5 @@
-
+
{
@@ -88,17 +93,17 @@
this.postId = this.dataset.postid;
this.imageURL = this.dataset.imageurl;
if (
- this.elm &&
+ this.imageInputElement &&
this.imageURL &&
- this.previewSection &&
- this.uploadSection
+ this.previewSectionElement &&
+ this.uploadSectionElement
) {
- this.previewSection.innerHTML = "";
+ this.previewSectionElement.innerHTML = "";
- this.elm.value = this.imageURL;
+ this.imageInputElement.value = this.imageURL;
const imgElem = document.createElement("img");
imgElem.src = this.imageURL;
- this.previewSection.appendChild(imgElem);
+ this.previewSectionElement.appendChild(imgElem);
const removeButtonElem = document.createElement("button");
removeButtonElem.innerHTML = "Remove";
removeButtonElem.classList.add("button");
@@ -106,20 +111,20 @@
removeButtonElem.addEventListener("click", async (e: any) => {
e.preventDefault();
if (
- this.elm &&
+ this.imageInputElement &&
this.imageURL &&
- this.previewSection &&
- this.uploadSection
+ this.previewSectionElement &&
+ this.uploadSectionElement
) {
- this.elm.value = "";
+ this.imageInputElement.value = "";
this.imageURL = "";
- this.previewSection.style.display = "none";
- this.uploadSection.style.display = "block";
+ this.previewSectionElement.style.display = "none";
+ this.uploadSectionElement.style.display = "block";
}
});
- this.previewSection.appendChild(removeButtonElem);
- this.previewSection.style.display = "block";
- this.uploadSection.style.display = "none";
+ this.previewSectionElement.appendChild(removeButtonElem);
+ this.previewSectionElement.style.display = "block";
+ this.uploadSectionElement.style.display = "none";
}
}
}
@@ -136,15 +141,14 @@
//Allows for observing when the input data is set async
this.observer.observe(this, { attributes: true });
- this.btnElem?.addEventListener("click", async (e) => {
+ this.uploadButtonElement?.addEventListener("click", async (e) => {
e.preventDefault();
- if (this.fileInputElem) {
- this.fileInputElem.click();
+ if (this.fileInputElement) {
+ this.fileInputElement.click();
}
});
- this.fileInputElem?.addEventListener("change", async (e: any) => {
- console.log(e.currentTarget?.files);
+ this.fileInputElement?.addEventListener("change", async (e: any) => {
if (e?.currentTarget?.files?.length) {
uploadHandler(e?.currentTarget?.files[0]);
}
@@ -152,31 +156,30 @@
const uploadHandler = async (file: any) => {
if (
- !this.elm ||
- !this.imgLoader ||
- !this.fileDetailsArea ||
- !this.fileName ||
- !this.fileSize ||
- !this.imgLoader
+ !this.imageInputElement ||
+ !this.imageLoaderElement ||
+ !this.fileDetailsAreaElement ||
+ !this.fileNameElement ||
+ !this.fileSizeElement ||
+ !this.imageLoaderElement
)
return;
- this.elm.value = "";
+ this.imageInputElement.value = "";
try {
- this.imgLoader.classList.add("loader");
+ this.imageLoaderElement.classList.add("loader");
const result = await appwriteStorage.createFile(
import.meta.env.PUBLIC_APPWRITE_BUCKET_ID,
ID.unique(),
file
);
- console.log("result", result);
- this.fileDetailsArea.style.display = "block";
- this.fileName.innerText = result.name;
- this.fileSize.innerText =
+ this.fileDetailsAreaElement.style.display = "block";
+ this.fileNameElement.innerText = result.name;
+ this.fileSizeElement.innerText =
(result.sizeOriginal / 1024).toFixed(2) + " KB";
- this.elm.value = `${
+ this.imageInputElement.value = `${
import.meta.env.PUBLIC_APPWRITE_ENDPOINT
}/storage/buckets/${
import.meta.env.PUBLIC_APPWRITE_BUCKET_ID
@@ -186,7 +189,7 @@
} catch (err) {
alert(err);
} finally {
- this.imgLoader.classList.remove("loader");
+ this.imageLoaderElement.classList.remove("loader");
}
};
}
diff --git a/example-blog/src/consts.ts b/example-blog/src/consts.ts
index 806e6a2..80fccb3 100644
--- a/example-blog/src/consts.ts
+++ b/example-blog/src/consts.ts
@@ -1,5 +1,6 @@
// Place any global data in this file.
// You can import this data from anywhere in your site by using the `import` keyword.
-export const SITE_TITLE = 'Appwrite.io Astro Example';
-export const SITE_DESCRIPTION = 'A Simple example of how to use Appwrite.io in Astro to create a blog.';
+export const SITE_TITLE = "Appwrite + Astro = ❤️";
+export const SITE_DESCRIPTION =
+ "An example blog demonstrating how to use Astro with Appwrite.";
diff --git a/example-blog/src/env.d.ts b/example-blog/src/env.d.ts
index 2677a5a..38583c3 100644
--- a/example-blog/src/env.d.ts
+++ b/example-blog/src/env.d.ts
@@ -5,5 +5,7 @@ interface ImportMetaEnv {
readonly PUBLIC_APPWRITE_ENDPOINT: string;
readonly PUBLIC_APPWRITE_PROJECT_ID: string;
readonly PUBLIC_APPWRITE_DB_ID: string;
- readonly PUBLIC_APPWRITE_BLOG_ID: string;
-}
\ No newline at end of file
+ readonly PUBLIC_APPWRITE_POSTS_ID: string;
+ readonly PUBLIC_APPWRITE_COMMENTS_ID: string;
+ readonly PUBLIC_APPWRITE_BUCKET_ID: string;
+}
diff --git a/example-blog/src/layouts/BlogPost.astro b/example-blog/src/layouts/BlogPost.astro
index 8b550ee..038e710 100644
--- a/example-blog/src/layouts/BlogPost.astro
+++ b/example-blog/src/layouts/BlogPost.astro
@@ -1,9 +1,4 @@
---
-import type { CollectionEntry } from "astro:content";
-import BaseHead from "../components/BaseHead.astro";
-import Header from "../components/Header.astro";
-import SideNav from "../components/SideNav.astro";
-import Footer from "../components/Footer.astro";
import AdminButtons from "../components/AdminButtons.astro";
import Comments from "../components/Comments.astro";
@@ -11,54 +6,30 @@ import type { BlogPost as BlogPostType } from "../lib/appwrite";
type Props = BlogPostType;
const post = Astro.props;
-const { $id, $updatedAt, date, title, content, description, cover, imageurl } =
+const { $id, $updatedAt, $createdAt, title, content, description, imageurl } =
post;
---
-
-
-
-
-
-
-
-
-
-
-
- {
- imageurl?.length > 0 ? (
- 
- ) : null
- }
-
- {title}
-
-
-
- {date &&
}
- {
- $updatedAt && (
-
- Last updated on{" "}
-
-
- )
- }
-
- {content}
-
-
-
-
-
+ {title}
+
+
+
+ {
+ $updatedAt && (
+
+ Last updated on{" "}
+
+
+ )
+ }
+ {$createdAt &&
}
+
+ {content}
+
+
diff --git a/example-blog/src/layouts/SiteLayout.astro b/example-blog/src/layouts/SiteLayout.astro
index 2cd18df..fe985bf 100644
--- a/example-blog/src/layouts/SiteLayout.astro
+++ b/example-blog/src/layouts/SiteLayout.astro
@@ -12,7 +12,20 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
-
+
+
diff --git a/example-blog/src/lib/appwrite.ts b/example-blog/src/lib/appwrite.ts
index 8778c16..d6160b3 100644
--- a/example-blog/src/lib/appwrite.ts
+++ b/example-blog/src/lib/appwrite.ts
@@ -1,93 +1,116 @@
-import { Account, AppwriteException, Client, Databases, Storage, ID, Models } from 'appwrite';
-import { atom, WritableAtom } from 'nanostores';
+import {
+ Account,
+ AppwriteException,
+ Client,
+ Databases,
+ Storage,
+ ID,
+ type Models,
+ Teams,
+ Query,
+} from "appwrite";
+import { atom, WritableAtom } from "nanostores";
/** Setup */
export const appwriteClient = new Client()
- .setEndpoint(import.meta.env.PUBLIC_APPWRITE_ENDPOINT) // Your API Endpoint
- .setProject(import.meta.env.PUBLIC_APPWRITE_PROJECT_ID); // Your project ID
+ .setEndpoint(import.meta.env.PUBLIC_APPWRITE_ENDPOINT) // Your API Endpoint
+ .setProject(import.meta.env.PUBLIC_APPWRITE_PROJECT_ID); // Your project ID
export const appwriteDatabases = new Databases(appwriteClient);
export const appwriteStorage = new Storage(appwriteClient);
+export const appwriteTeams = new Teams(appwriteClient);
/** Database */
export interface BlogPost extends Models.Document {
- title: string;
- date: string;
- description: string;
- content: string;
- slug: string;
- imageurl: string;
+ title: string;
+ description: string;
+ content: string;
+ slug: string;
+ imageUrl: string;
}
-export interface BlogPostList extends Models.DocumentList { }
+export interface BlogPostList extends Models.DocumentList {}
export interface BlogComment extends Models.Document {
- postId: string;
- comment: string;
+ postId: string;
+ content: string;
}
-export interface BlogCommentList extends Models.DocumentList { }
+export interface BlogCommentList extends Models.DocumentList {}
/** Account */
export const appwriteAccount = new Account(appwriteClient);
-export const isLoggedIn: WritableAtom = atom(undefined);
+export const isLoggedIn: WritableAtom =
+ atom(undefined);
+export const isAuthor: WritableAtom = atom(false);
// Check for session
-appwriteAccount.getSession('current').then(function (response) {
+appwriteAccount.getSession("current").then(
+ function (response) {
isLoggedIn.set(response);
-}, function (error) {
- isLoggedIn.set(undefined)
-})
+ },
+ function (error) {
+ isLoggedIn.set(undefined);
+ }
+);
-export const user$: WritableAtom> = atom(undefined);
+export const user$: WritableAtom> =
+ atom(undefined);
isLoggedIn.subscribe(async (session) => {
- if (session?.userId) {
- user$.set(await account());
- }
+ if (session?.userId) {
+ user$.set(await account());
+ }
+});
+
+isLoggedIn.subscribe(async (session) => {
+ if (!session?.userId) return;
+ const authorsMemberships = await appwriteTeams.listMemberships("authors", [
+ Query.equal("userId", session.userId),
+ ]);
+ isAuthor.set(authorsMemberships.total > 0);
});
export const login = async (email: string, password: string) => {
- try {
- const session = await appwriteAccount.createEmailSession(email, password);
- isLoggedIn.set(session);
- window.location.href = '/account';
- } catch (error) {
- const appwriteError = error as AppwriteException;
- alert(appwriteError.message)
- }
-}
+ try {
+ const session = await appwriteAccount.createEmailSession(email, password);
+ isLoggedIn.set(session);
+ window.location.href = "/account";
+ } catch (error) {
+ const appwriteError = error as AppwriteException;
+ alert(appwriteError.message);
+ }
+};
export const logout = async () => {
- try {
- const session = isLoggedIn.get();
- console.log(session)
- if (session?.$id) {
- await appwriteAccount.deleteSession(session?.$id);
- isLoggedIn.set(undefined);
- window.location.href = '/';
- }
- } catch (error) {
- const appwriteError = error as AppwriteException;
- alert(appwriteError.message)
+ try {
+ const session = isLoggedIn.get();
+ if (session?.$id) {
+ await appwriteAccount.deleteSession(session?.$id);
+ isLoggedIn.set(undefined);
+ window.location.href = "/";
}
-}
+ } catch (error) {
+ const appwriteError = error as AppwriteException;
+ alert(appwriteError.message);
+ }
+};
export const register = async (email: string, password: string) => {
- try {
- await appwriteAccount.create(ID.unique(), email, password);
- const session = await appwriteAccount.createEmailSession(email, password);
- isLoggedIn.set(session);
- window.location.href = '/account';
- } catch (error) {
- const appwriteError = error as AppwriteException;
- alert(appwriteError.message)
- }
-}
+ try {
+ await appwriteAccount.create(ID.unique(), email, password);
+ const session = await appwriteAccount.createEmailSession(email, password);
+ isLoggedIn.set(session);
+ window.location.href = "/account";
+ } catch (error) {
+ const appwriteError = error as AppwriteException;
+ alert(appwriteError.message);
+ }
+};
export const account = async () => {
- try {
- return appwriteAccount.get();
- } catch (error) {
- const appwriteError = error as AppwriteException;
- alert(appwriteError.message)
- }
-}
\ No newline at end of file
+ try {
+ return appwriteAccount.get();
+ } catch (error) {
+ const appwriteError = error as AppwriteException;
+ alert(appwriteError.message);
+ }
+};
diff --git a/example-blog/src/lib/utilities.ts b/example-blog/src/lib/utilities.ts
index 160e052..a600abb 100644
--- a/example-blog/src/lib/utilities.ts
+++ b/example-blog/src/lib/utilities.ts
@@ -1 +1,4 @@
-export const dateForDateTimeInputValue = (date:Date) => new Date(date.getTime() + new Date().getTimezoneOffset() * -60 * 1000).toISOString().slice(0, 19)
+export const dateForDateTimeInputValue = (date: Date) =>
+ new Date(date.getTime() + new Date().getTimezoneOffset() * -60 * 1000)
+ .toISOString()
+ .slice(0, 19);
diff --git a/example-blog/src/pages/account/index.astro b/example-blog/src/pages/account/index.astro
index f5f8e26..f289ff1 100644
--- a/example-blog/src/pages/account/index.astro
+++ b/example-blog/src/pages/account/index.astro
@@ -3,27 +3,39 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
---
- Account
+
+
+
diff --git a/example-blog/src/pages/account/login.astro b/example-blog/src/pages/account/login.astro
index 1569e26..7a28c37 100644
--- a/example-blog/src/pages/account/login.astro
+++ b/example-blog/src/pages/account/login.astro
@@ -35,17 +35,26 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
-
+
+
diff --git a/example-blog/src/pages/account/signup.astro b/example-blog/src/pages/account/signup.astro
index 89b0e71..4d376bb 100644
--- a/example-blog/src/pages/account/signup.astro
+++ b/example-blog/src/pages/account/signup.astro
@@ -36,17 +36,26 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
-
+
+
diff --git a/example-blog/src/pages/blog/create.astro b/example-blog/src/pages/blog/create.astro
deleted file mode 100644
index 40c5870..0000000
--- a/example-blog/src/pages/blog/create.astro
+++ /dev/null
@@ -1,91 +0,0 @@
----
-import BaseHead from "../../components/BaseHead.astro";
-import Header from "../../components/Header.astro";
-import SideNav from "../../components/SideNav.astro";
-import Footer from "../../components/Footer.astro";
-import UploadFile from "../../components/UploadFile.astro";
----
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/example-blog/src/pages/blog/edit.astro b/example-blog/src/pages/blog/edit.astro
deleted file mode 100644
index c727f01..0000000
--- a/example-blog/src/pages/blog/edit.astro
+++ /dev/null
@@ -1,127 +0,0 @@
----
-import BaseHead from "../../components/BaseHead.astro";
-import Header from "../../components/Header.astro";
-import SideNav from "../../components/SideNav.astro";
-import Footer from "../../components/Footer.astro";
-import UploadFile from "../../components/UploadFile.astro";
----
-
-
-
-
-
-
-
-
-
-
-
diff --git a/example-blog/src/pages/index.astro b/example-blog/src/pages/index.astro
index deba7d2..10af4bd 100644
--- a/example-blog/src/pages/index.astro
+++ b/example-blog/src/pages/index.astro
@@ -3,18 +3,27 @@ import SiteLayout from "../layouts/SiteLayout.astro";
---
- 🧑🚀 Hello, Astronaut!
-
- This example is the repo for the guide found on Astro's Doc Site for using Appwrite.io as a Backend as a Service.
-
+
+
+
diff --git a/example-blog/src/pages/blog/[...slug].astro b/example-blog/src/pages/posts/[...slug].astro
similarity index 78%
rename from example-blog/src/pages/blog/[...slug].astro
rename to example-blog/src/pages/posts/[...slug].astro
index f53bbbf..02525a9 100644
--- a/example-blog/src/pages/blog/[...slug].astro
+++ b/example-blog/src/pages/posts/[...slug].astro
@@ -6,6 +6,7 @@ import {
BlogPost as BlogPostType,
BlogPostList,
} from "../../lib/appwrite";
+import SiteLayout from "../../layouts/SiteLayout.astro";
const { slug } = Astro.params;
@@ -15,7 +16,7 @@ if (!slug) {
const entries = (await appwriteDatabases.listDocuments(
import.meta.env.PUBLIC_APPWRITE_DB_ID,
- import.meta.env.PUBLIC_APPWRITE_BLOG_ID,
+ import.meta.env.PUBLIC_APPWRITE_POSTS_ID,
[Query.equal("slug", slug)]
)) as BlogPostList;
@@ -26,4 +27,6 @@ if (!entries || !entries.documents.length) {
const post: BlogPostType = entries?.documents[0];
---
-
+
+
+
diff --git a/example-blog/src/pages/posts/create.astro b/example-blog/src/pages/posts/create.astro
new file mode 100644
index 0000000..15d71a6
--- /dev/null
+++ b/example-blog/src/pages/posts/create.astro
@@ -0,0 +1,64 @@
+---
+import UploadFile from "../../components/UploadFile.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+---
+
+
+
+
+
+
diff --git a/example-blog/src/pages/posts/edit.astro b/example-blog/src/pages/posts/edit.astro
new file mode 100644
index 0000000..34ca1bb
--- /dev/null
+++ b/example-blog/src/pages/posts/edit.astro
@@ -0,0 +1,97 @@
+---
+import UploadFile from "../../components/UploadFile.astro";
+import SiteLayout from "../../layouts/SiteLayout.astro";
+---
+
+
+
+
+
+
diff --git a/example-blog/src/pages/blog/index.astro b/example-blog/src/pages/posts/index.astro
similarity index 58%
rename from example-blog/src/pages/blog/index.astro
rename to example-blog/src/pages/posts/index.astro
index a8ce1c7..0ba85ad 100644
--- a/example-blog/src/pages/blog/index.astro
+++ b/example-blog/src/pages/posts/index.astro
@@ -3,37 +3,38 @@ import SiteLayout from "../../layouts/SiteLayout.astro";
import { appwriteDatabases, BlogPostList } from "../../lib/appwrite";
import AdminButtons from "../../components/AdminButtons.astro";
import AdminCreate from "../../components/AdminCreate.astro";
+import { Query } from "appwrite";
-const entries = (await appwriteDatabases.listDocuments(
+const { documents: posts } = (await appwriteDatabases.listDocuments(
import.meta.env.PUBLIC_APPWRITE_DB_ID,
- import.meta.env.PUBLIC_APPWRITE_BLOG_ID
+ import.meta.env.PUBLIC_APPWRITE_POSTS_ID,
+ [Query.orderDesc("$createdAt")]
)) as BlogPostList;
-
-const posts = entries.documents.sort(
- (a, b) => new Date(a.date).valueOf() - new Date(b.date).valueOf()
-);
---
-
-
+
+
{
posts.map((post) => (
-
-