Merge pull request #232 from appwrite/add-article

Add Designing the new Appwrite website post

src/markdoc/tags/Video.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let src: string;
+    export let type = 'video/mp4';
+    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+    export let autoplay: boolean = false;
+    // eslint-disable-next-line @typescript-eslint/no-inferrable-types
+    export let loop: boolean = false;
+</script>
+
+<div class="aw-media">
+    <!-- svelte-ignore a11y-media-has-caption -->
+    <video {src} class="aw-u-media-ratio-16-9 u-width-full-line" controls {autoplay} {loop}>
+        <source {src} {type} />
+    </video>
+</div>

src/markdoc/tags/_Module.svelte

@@ -1,13 +1,14 @@
 <script context="module">
-	export { default as Section } from './Section.svelte';
-	export { default as MultiCode } from './MultiCode.svelte';
-	export { default as Info } from './Info.svelte';
-	export { default as Tabs } from './Tabs.svelte';
-	export { default as TabsItem } from './TabsItem.svelte';
-	export { default as Icon } from './Icon.svelte';
-	export { default as Icon_Image } from './Icon_Image.svelte';
-	export { default as Cards } from './Cards.svelte';
-	export { default as Cards_Item } from './Cards_Item.svelte';
-	export { default as Only_Light } from './Only_Light.svelte';
-	export { default as Only_Dark } from './Only_Dark.svelte';
+    export { default as Section } from './Section.svelte';
+    export { default as MultiCode } from './MultiCode.svelte';
+    export { default as Info } from './Info.svelte';
+    export { default as Tabs } from './Tabs.svelte';
+    export { default as TabsItem } from './TabsItem.svelte';
+    export { default as Icon } from './Icon.svelte';
+    export { default as Icon_Image } from './Icon_Image.svelte';
+    export { default as Cards } from './Cards.svelte';
+    export { default as Cards_Item } from './Cards_Item.svelte';
+    export { default as Only_Light } from './Only_Light.svelte';
+    export { default as Only_Dark } from './Only_Dark.svelte';
+    export { default as Video } from './Video.svelte';
 </script>

src/routes/blog/+page.ts

@@ -3,57 +3,57 @@ import type { AuthorData } from '$markdoc/layouts/Author.svelte';
 import type { PostsData } from '$markdoc/layouts/Post.svelte';
 
 export function load() {
-	const postsGlob = import.meta.glob('./post/**/*.markdoc', {
-		eager: true
-	});
-	const authorsGlob = import.meta.glob('./author/**/*.markdoc', {
-		eager: true
-	});
+    const postsGlob = import.meta.glob('./post/**/*.markdoc', {
+        eager: true
+    });
+    const authorsGlob = import.meta.glob('./author/**/*.markdoc', {
+        eager: true
+    });
 
-	const posts = Object.entries(postsGlob)
-		.map(([filepath, postList]) => {
-			const { frontmatter } = postList as {
-				frontmatter: PostsData;
-			};
-			const slug = filepath.replace('./', '').replace('/+page.markdoc', '');
-			const postName = slug.slice(slug.lastIndexOf('/') + 1);
+    const posts = Object.entries(postsGlob)
+        .map(([filepath, postList]) => {
+            const { frontmatter } = postList as {
+                frontmatter: PostsData;
+            };
+            const slug = filepath.replace('./', '').replace('/+page.markdoc', '');
+            const postName = slug.slice(slug.lastIndexOf('/') + 1);
 
-			return {
-				title: frontmatter.title,
-				description: frontmatter.description,
-				featured: frontmatter?.featured ?? false,
-				date: new Date(frontmatter.date),
-				cover: frontmatter.cover,
-				timeToRead: frontmatter.timeToRead,
-				author: frontmatter.author,
-				category: frontmatter.category,
-				href: `${base}/blog/post/${postName}`
-			};
-		})
-		.sort((a, b) => {
-			return b.date.getTime() - a.date.getTime();
-		});
+            return {
+                title: frontmatter.title,
+                description: frontmatter.description,
+                featured: frontmatter?.featured ?? false,
+                date: new Date(frontmatter.date),
+                cover: frontmatter.cover,
+                timeToRead: frontmatter.timeToRead,
+                author: frontmatter.author,
+                category: frontmatter.category,
+                href: `${base}/blog/post/${postName}`
+            };
+        })
+        .sort((a, b) => {
+            return b.date.getTime() - a.date.getTime();
+        });
 
-	const authors = Object.values(authorsGlob).map((authorList) => {
-		const { frontmatter } = authorList as {
-			frontmatter: AuthorData;
-		};
+    const authors = Object.values(authorsGlob).map((authorList) => {
+        const { frontmatter } = authorList as {
+            frontmatter: AuthorData;
+        };
 
-		return {
-			name: frontmatter.name,
-			slug: frontmatter.slug,
-			role: frontmatter.role,
-			avatar: frontmatter.avatar,
-			bio: frontmatter.bio,
-			twitter: frontmatter.twitter,
-			linkedin: frontmatter.linkedin,
-			github: frontmatter.github,
-			href: `${base}/blog/author/${frontmatter.slug}`
-		};
-	});
+        return {
+            name: frontmatter.name,
+            slug: frontmatter.slug,
+            role: frontmatter.role,
+            avatar: frontmatter.avatar,
+            bio: frontmatter.bio,
+            twitter: frontmatter.twitter,
+            linkedin: frontmatter.linkedin,
+            github: frontmatter.github,
+            href: `${base}/blog/author/${frontmatter.slug}`
+        };
+    });
 
-	return {
-		posts,
-		authors
-	};
+    return {
+        posts,
+        authors
+    };
 }

src/routes/blog/author/caio-arias/+page.markdoc

@@ -0,0 +1,11 @@
+---
+layout: author
+name: Caio Arias
+slug: caio-arias
+role: Designer
+bio: Walking the line between product and graphic design.
+avatar: /images/avatars/caio.png
+twitter: https://twitter.com/arias_caio
+linkedin: https://www.linkedin.com/in/ariascaio
+---
+

src/routes/blog/post/designing-the-new-appwrite-website/+page.markdoc

@@ -0,0 +1,40 @@
+---
+layout: post
+title: Designing the new Appwrite website
+description: Our new website is one of the most important communication channels in which current and potential new Appwrite developers can access relevant information and learn more about our products and our company. We decided to rethink its structure from scratch and incorporate an experience that was on par with our rebrand.
+date: 2023-10-11
+cover: /images/blog/designing-the-new-appwrite-website/cover.png
+timeToRead: 5
+author: caio-arias
+category: website
+---
+
+# Our brand’s main front-facing asset
+
+It is no surprise that the channel that gets the most traffic is our website. Not only that, it is where many of our developers start their journey of learning more about Appwrite, so we knew that it had to be one of the strongest case studies for our rebrand. It had to symbolize a big change in our journey, not only from a visual standpoint, but also in the presentation of its content.
+
+We started this process by doing a thorough analysis of our site’s structure, figuring out what was working, what could be better, but also keeping in mind that this was an opportunity to improve and add to the overall presentation of our content. There was still some much-needed information still missing from our website, and we knew this was the perfect time to start brainstorming, writing, editing, and designing the pages in which that content would live.
+
+![Website wireframes](/images/blog/designing-the-new-appwrite-website/wireframe.png)
+
+Once the overall content and site map was defined, we built wireframes to further test the navigation across pages, and made adjustments to the content being shown according to our tests. It is important to keep in mind that this process was all done before we even started to think about how our rebrand would be applied to the site, so as to not distract us from what was most important at the moment: defining the content.
+
+# Incorporating our brand identity
+
+The website played a major role in defining some aspects of our brand identity, as we used it as one of the main channels for testing out visual concepts, typefaces, colors, etc. We had to make sure that our new identity’s foundations worked inside the web environment before anywhere else. We were able to make many major decisions based on how those would fare on the web. If it did not work at all inside this context, it would most likely not be too valuable of an idea to implement. This is not by any means a golden rule for best branding practices, but it was valuable to us because we were able to maintain visual cohesiveness across our channels even in the most experimental phases of the project.
+
+One of the concepts that worked well in the website was the use of glass-like elements. It sparked many ideas on how we could apply textures, lighting, blurring in the UI in ways that were both interesting and purposeful. One of the team’s favorite examples of applications of this idea were the illustrated icons we designed for the suite of products we offer at Appwrite, each one combining our signature pink color with a glass-like layer that would make up the entire composition.
+
+![Appwrite's pricing plans](/images/blog/designing-the-new-appwrite-website/plans.png)
+
+# Working with animations
+
+We found that the rebrand was a great opportunity to breathe some life into our website. With this in mind, we hand-crafted unique animations that showcase our products’s functionalities while creating a pleasant page navigation experience for users. Working together with our engineering team, we were able to add a variety of details and happy moments while illustrating the power of Appwrite in our many use cases.
+
+These animations were coded from scratch, using powerful tools such as [Svelte’s transitions](https://svelte.dev/docs/svelte-transition) and [native web animation API libraries](https://motion.dev/), bringing interactivity and good performance together in harmony.
+
+{% video src="/images/blog/designing-the-new-appwrite-website/animations.mp4" autoplay=true /%}
+
+Designing the new Appwrite website was a very pleasurable and fun experience. It gave us the opportunity to improve areas that needed attention, to implement new ideas, and to foster experimentation every step of the way.
+
+Moving forward, we want the both our website and documentation to be living environments that will keep evolving as we expand our offerings and improve our products.