diff --git a/src/lib/components/Newsletter.svelte b/src/lib/components/Newsletter.svelte new file mode 100644 index 0000000000..cf7d4f4137 --- /dev/null +++ b/src/lib/components/Newsletter.svelte @@ -0,0 +1,36 @@ + + + + +
+
+
+
Subscribe to our newsletter
+

+ Sign up to our company blog and get the latest insights from Appwrite. Learn more about + engineering, product design, building community, and tips & tricks for using Appwrite. +

+
+ + +
+
+
+
+ + diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 60739ec1c8..e49546e66a 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -3,4 +3,5 @@ export { default as MainFooter } from './MainFooter.svelte'; export { default as PreFooter } from './PreFooter.svelte'; export { default as MobileNav } from './MobileNav.svelte'; export { default as Phone } from './Phone.svelte'; +export { default as Newsletter } from './Newsletter.svelte'; export { default as Tooltip } from './Tooltip.svelte'; diff --git a/src/markdoc/layouts/Author.svelte b/src/markdoc/layouts/Author.svelte new file mode 100644 index 0000000000..9427c9de8e --- /dev/null +++ b/src/markdoc/layouts/Author.svelte @@ -0,0 +1,310 @@ + + + + +
+
+
+ + + + + + + + + + + + + + + + +
+ +
+
+
+ {#if avatar} +
+ {name} +
+ {/if} +

{name}

+ {#if role} +
{role}
+ {/if} + {#if bio} +

+ {bio} +

+ {/if} +
    + {#if github} +
  • + + +
    • + {/if} + {#if twitter} +
  • + + +
    • + {/if} + {#if linkedin} +
  • + + +
    • + {/if} +
+
+
+
+
+ +
+
+
+

Articles

+ + + + + +
+ +
+ +
+
+ +
+
+
+
+
+
+ + +
+
+
diff --git a/src/markdoc/layouts/Category.svelte b/src/markdoc/layouts/Category.svelte new file mode 100644 index 0000000000..6adfe40797 --- /dev/null +++ b/src/markdoc/layouts/Category.svelte @@ -0,0 +1,93 @@ + + + + +
+
+
+
+ + +
+
+

{name}

+

+ {description} +

+
+ +
+ +
+ +
+
+
+ + +
+
+
+
+
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte new file mode 100644 index 0000000000..1263b7ae44 --- /dev/null +++ b/src/markdoc/layouts/Post.svelte @@ -0,0 +1,208 @@ + + + + +
+
+
+
+
+
+ + {#if categories?.length} +
+ {#each categories as cat} + {cat.name} + {/each} +
+ {/if} +
+
+
+
+
+ +
+
+
+

Read next

+
+ +
+
+
+
+ +
+
+ + + +
+
+
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte new file mode 100644 index 0000000000..c8629bf17c --- /dev/null +++ b/src/routes/blog/+layout.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/routes/blog/+layout.ts b/src/routes/blog/+layout.ts new file mode 100644 index 0000000000..0e6cbd085b --- /dev/null +++ b/src/routes/blog/+layout.ts @@ -0,0 +1,74 @@ +import { base } from '$app/paths'; +import type { AuthorData } from '$markdoc/layouts/Author.svelte'; +import type { CategoryData } from '$markdoc/layouts/Category.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 categoriesGlob = import.meta.glob('./category/**/*.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); + + return { + title: frontmatter.title, + description: frontmatter.description, + 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.entries(authorsGlob).map(([_filepath, authorList]) => { + const { frontmatter } = authorList as { + frontmatter: AuthorData; + }; + + return { + name: frontmatter.name, + role: frontmatter.role, + avatar: frontmatter.avatar, + bio: frontmatter.bio, + twitter: frontmatter.twitter, + linkedin: frontmatter.linkedin, + github: frontmatter.github, + href: `${base}/blog/author/${frontmatter.name.toLowerCase()}` + }; + }); + + const categories = Object.entries(categoriesGlob).map(([_filepath, categoryList]) => { + const { frontmatter } = categoryList as { + frontmatter: CategoryData; + }; + + return { + name: frontmatter.name, + description: frontmatter.description, + href: `${base}/blog/category/${frontmatter.name.toLowerCase()}` + }; + }); + + return { + posts, + authors, + categories + }; +} diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index e33fde606d..e793be84f1 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -128,7 +128,7 @@

Articles

-
+
    {#each data.posts as post} - {@const href = `/blog/article/${post.slug}`} + {@const author = data.authors.find( + (author) => author.name.toLowerCase() === post.author.toLowerCase() + )}
  • - +
    - +

    @@ -244,14 +246,13 @@
    -

    Author's name

    -

    Author's role or bio

    +

    {author?.name}

    • {post.date.toLocaleDateString()}
    • {post.timeToRead} min
      • diff --git a/src/routes/blog/+page.ts b/src/routes/blog/+page.ts index 5e56db5389..0f516f0930 100644 --- a/src/routes/blog/+page.ts +++ b/src/routes/blog/+page.ts @@ -1,34 +1,57 @@ +import { base } from '$app/paths'; +import type { AuthorData } from '$markdoc/layouts/Author.svelte'; +import type { PostsData } from '$markdoc/layouts/Post.svelte'; + export function load() { - const modules = import.meta.glob('./content/*.markdoc', { + const postsGlob = import.meta.glob('./post/**/*.markdoc', { + eager: true + }); + const authorsGlob = import.meta.glob('./author/**/*.markdoc', { eager: true }); - const posts = Object.entries(modules) - .map(([filepath, module]) => { - const { frontmatter } = module as { - frontmatter: { - title: string; - description: string; - date: string; - cover: string; - timeToRead: number; - }; + 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 { - filepath, - slug: filepath.replace('./content/', '').replace('.markdoc', ''), title: frontmatter.title, description: frontmatter.description, date: new Date(frontmatter.date), cover: frontmatter.cover, - timeToRead: frontmatter.timeToRead + 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 b.date.getTime() - a.date.getTime(); + }); + + const authors = Object.entries(authorsGlob).map(([_filepath, authorList]) => { + const { frontmatter } = authorList as { + frontmatter: AuthorData; + }; + + return { + name: frontmatter.name, + role: frontmatter.role, + avatar: frontmatter.avatar, + bio: frontmatter.bio, + twitter: frontmatter.twitter, + linkedin: frontmatter.linkedin, + github: frontmatter.github, + href: `${base}/blog/author/${frontmatter.name.toLowerCase()}` + }; + }); return { - posts + posts, + authors }; } diff --git a/src/routes/blog/article/+page.ts b/src/routes/blog/article/+page.ts deleted file mode 100644 index e59dd87915..0000000000 --- a/src/routes/blog/article/+page.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { redirect } from "@sveltejs/kit"; -import type { PageLoad } from "./$types"; - -export const load: PageLoad = async () => { - throw redirect(300, "/blog"); -}; \ No newline at end of file diff --git a/src/routes/blog/article/[slug]/+page.svelte b/src/routes/blog/article/[slug]/+page.svelte deleted file mode 100644 index 094bd2bc37..0000000000 --- a/src/routes/blog/article/[slug]/+page.svelte +++ /dev/null @@ -1,491 +0,0 @@ - - -
      -
      -
      -
      -
      - -
      -
      -
      -
      -
      -
      -

      Read next

      -
      - -
      -
      -
      -
      - -
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      -
      -
      -
      Subscribe to our newsletter
      -

      - Sign up to our company blog and get the latest insights from Appwrite. Learn more - about engineering, product design, building community, and tips & tricks for using - Appwrite. -

      -
      - - -
      -
      -
      -
      -
      - - - -
      -
      -
      -
      -
      diff --git a/src/routes/blog/article/[slug]/+page.ts b/src/routes/blog/article/[slug]/+page.ts deleted file mode 100644 index cdeee8cae3..0000000000 --- a/src/routes/blog/article/[slug]/+page.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { error } from '@sveltejs/kit'; - -export async function load({ params }) { - try { - const post = await import(`../../content/${params.slug}.markdoc`); - - return { - content: post.default, - frontmatter: post.frontmatter, - }; - } catch (e) { - throw error(404, `Could not find ${params.slug}`); - } -} diff --git a/src/routes/blog/author/+page.svelte b/src/routes/blog/author/+page.svelte deleted file mode 100644 index 888280a3f5..0000000000 --- a/src/routes/blog/author/+page.svelte +++ /dev/null @@ -1,498 +0,0 @@ - - -
      - -
      -
      - - - - - - - - - - - - - - - - -
      - -
      -
      -
      -
      - -
      -

      Guy Hawkins

      -
      DevRel & DX
      -

      - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id es -

      - -
      -
      -
      -
      -
      -
      -
      -

      Articles

      - -
      - -
      -
      -
      -
        -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      -
      - - -
      -
      -
      - - - -
      - -
      - -
      -
      - - -
      -
      - -
      -
      -
      -
      - - -
      -
      -
      - - -
      diff --git a/src/routes/blog/author/+page.ts b/src/routes/blog/author/+page.ts new file mode 100644 index 0000000000..87f429f4e6 --- /dev/null +++ b/src/routes/blog/author/+page.ts @@ -0,0 +1,6 @@ +import { redirect } from '@sveltejs/kit'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async () => { + throw redirect(303, '/blog'); +}; diff --git a/src/routes/blog/author/arman/+page.markdoc b/src/routes/blog/author/arman/+page.markdoc new file mode 100644 index 0000000000..0c075d1ef2 --- /dev/null +++ b/src/routes/blog/author/arman/+page.markdoc @@ -0,0 +1,11 @@ +--- +layout: author +name: Arman +role: Frontend Developer +bio: In ♥ with Svelte and Vue, currently working at Appwrite +avatar: /images/avatars/arman.png +twitter: https://twitter.com/NikNotNik +github: https://github.com/ArmanNik +linkedin: https://www.linkedin.com/in/arman-nik/ +--- + diff --git a/src/routes/blog/author/eldad/+page.markdoc b/src/routes/blog/author/eldad/+page.markdoc new file mode 100644 index 0000000000..cef6dbbd27 --- /dev/null +++ b/src/routes/blog/author/eldad/+page.markdoc @@ -0,0 +1,11 @@ +--- +layout: author +name: Eldad +role: Big boss +bio: Creator of Appwrite +avatar: /images/avatars/eldad.png +twitter: https://twitter.com/eldadfux +github: https://github.com/eldadfux +linkedin: https://www.linkedin.com/in/eldadfux/ +--- + diff --git a/src/routes/blog/category/+page.svelte b/src/routes/blog/category/+page.svelte deleted file mode 100644 index 368de54155..0000000000 --- a/src/routes/blog/category/+page.svelte +++ /dev/null @@ -1,304 +0,0 @@ - - -
      - -
      - -
      -
      - - - Back to blog - -
      -
      -

      Category

      -

      Lorem ipsum dolor sit amet consectetur. Dictumst arcu sagittis vel tincidunt gravida posuere sed volutpat fermentum. Quam pellentesque nunc tempus proin blandit aliquam. Augue fermentum volutpat mi massa tempor amet facilisi massa malesuada ridiculus.

      -
      -
      - - -
      -
      - -
      - -
      - -
      -
      - - -
      -
      - -
      -
      -
      -
      - - -
      -
      -
      - - -
      diff --git a/src/routes/blog/category/+page.ts b/src/routes/blog/category/+page.ts new file mode 100644 index 0000000000..87f429f4e6 --- /dev/null +++ b/src/routes/blog/category/+page.ts @@ -0,0 +1,6 @@ +import { redirect } from '@sveltejs/kit'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async () => { + throw redirect(303, '/blog'); +}; diff --git a/src/routes/blog/category/design/+page.markdoc b/src/routes/blog/category/design/+page.markdoc new file mode 100644 index 0000000000..f995f78ecc --- /dev/null +++ b/src/routes/blog/category/design/+page.markdoc @@ -0,0 +1,6 @@ +--- +layout: category +name: Design +description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nunc, quis aliquam nisl nunc quis nisl. +--- + diff --git a/src/routes/blog/content/lorem-ipsum.markdoc b/src/routes/blog/content/lorem-ipsum.markdoc deleted file mode 100644 index 51fdef7b9b..0000000000 --- a/src/routes/blog/content/lorem-ipsum.markdoc +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Lorem Ipsum -description: Lorem Ipsum dolor et amet. -date: 2023-11-14 -cover: /images/bgs/hero-lines-1.png -timeToRead: 3 ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod ornare orci vitae laoreet. Praesent in lorem dapibus, interdum nisl quis, rhoncus mauris. Praesent pulvinar pharetra tempor. Proin ut odio libero. Sed fringilla est nec nibh dapibus, non congue dolor eleifend. Quisque ut egestas tellus. Donec pulvinar tempor viverra. Proin volutpat pretium consequat. Fusce facilisis sapien quis ornare lobortis. Curabitur eu sapien lacus. In hac habitasse platea dictumst. - -Nullam elementum lacus id est egestas, at pretium tortor cursus. Nam et scelerisque nibh, ac mattis neque. Aenean turpis velit, suscipit id dui at, fringilla scelerisque neque. Morbi quis turpis enim. Curabitur luctus lorem sapien, vel volutpat ipsum fringilla eu. Nulla facilisi. Suspendisse rhoncus leo nec eros pharetra consectetur. Donec eget ultricies tortor, vulputate scelerisque mauris. Nulla facilisi. Nulla egestas neque mollis risus semper, ac consequat nunc laoreet. Proin mattis turpis non felis vestibulum consequat. Aliquam erat volutpat. Morbi vehicula lectus at purus pulvinar volutpat. Nam non turpis a urna laoreet molestie quis in ante. Praesent sed lacinia nisi. Duis lacinia eget quam a molestie. - -Morbi elementum mauris metus, eleifend consectetur massa auctor id. Phasellus aliquam feugiat diam eget iaculis. Curabitur sit amet metus a elit tempor gravida ac nec felis. Nam non sapien ultrices, tempus enim ut, fermentum ipsum. Duis vehicula, felis sit amet dapibus pretium, mauris sem luctus nibh, quis malesuada neque turpis in leo. Nam commodo enim et pulvinar vestibulum. Suspendisse in sollicitudin sapien. Donec porttitor tortor a dolor vulputate cursus. Proin vitae diam ultricies mi lobortis pellentesque at mattis dui. Nulla dolor lacus, placerat non aliquam id, eleifend eu libero. Mauris commodo tincidunt consectetur. Phasellus lectus nibh, volutpat nec ex ac, sodales dictum leo. Donec hendrerit metus ut turpis convallis, ac iaculis nibh porta. Praesent ullamcorper lectus bibendum, venenatis nunc sed, volutpat sapien. - -Maecenas vulputate, urna ut gravida posuere, dolor ligula laoreet est, ac iaculis turpis est sit amet metus. Curabitur semper molestie ultricies. Quisque ut ipsum iaculis, faucibus sapien et, volutpat mi. Donec eleifend pharetra elementum. Sed ultricies eget ante sed euismod. Vivamus tempor malesuada consequat. Pellentesque sed tellus eu ipsum vehicula blandit vitae vel massa. Sed imperdiet in sem id commodo. Praesent dui est, faucibus quis dignissim ac, tempus a ligula. Nunc hendrerit quam ut magna pretium, sed ultricies ex suscipit. - -Fusce ut lacus tristique, finibus lectus eget, hendrerit est. Phasellus scelerisque arcu lorem, in fringilla lorem porta sit amet. In pulvinar leo at justo varius pharetra. Pellentesque sed mi non ante ultricies ultricies. Nullam suscipit arcu sit amet lorem condimentum lacinia. Nulla interdum tellus malesuada justo interdum ornare. Praesent viverra elit vitae venenatis ullamcorper. Vestibulum ac auctor elit, eu tincidunt ipsum. Curabitur pharetra risus ultrices libero aliquet, non fermentum ipsum pulvinar. \ No newline at end of file diff --git a/src/routes/blog/post/+page.ts b/src/routes/blog/post/+page.ts new file mode 100644 index 0000000000..87f429f4e6 --- /dev/null +++ b/src/routes/blog/post/+page.ts @@ -0,0 +1,6 @@ +import { redirect } from '@sveltejs/kit'; +import type { PageLoad } from './$types'; + +export const load: PageLoad = async () => { + throw redirect(303, '/blog'); +}; diff --git a/src/routes/blog/post/accessibility-in-pink-design/+page.markdoc b/src/routes/blog/post/accessibility-in-pink-design/+page.markdoc new file mode 100644 index 0000000000..85f93af7da --- /dev/null +++ b/src/routes/blog/post/accessibility-in-pink-design/+page.markdoc @@ -0,0 +1,77 @@ +--- +layout: post +title: Accessibility in Pink Design +description: Lorem Ipsum dolor et amet. +date: 2023-11-14 +cover: /images/pages/homepage/dashboard.svg +timeToRead: 3 +author: Arman +category: design, accessibility, appwrite, community, accessiblity +--- + +When creating products, accessibility can be an afterthought. Understandably, we want to ship our products fast and deliver value to our users. We might think that accessibility is needed for edge cases and therefore not prioritize it. It's good to be reminded that the World Health Organization (WHO) estimates that 16% of the global population has some form of disability (Dec 2022).Ignoring such a significant part of your user base simply doesn't create a good user experience.Creating accessible products is everyone's responsibility. Designers, developers, content authors, and whoever else is involved in creating products should do their part and strive towards achieving a better experience for everyone. + +It's not always easy to maintain a high level of accessibility, but it's definitely easier with a design system. The components we created in Pink Design, Appwrite's fully open source UI library, have an accessibility level of AA. This is the recommended level of accessibility for most products. + +To ensure our products will maintain a high accessibility level, we did the following: +- Use high color contrast +- Not relying on color +- Allow keyboard navigation +- Define font size in REM +- Allow users to reduce motion + +## Use high color contrast + +Color contrast might be the first thing that comes to mind when thinking about accessibility. A lack of contrast between the text and background might mean some people would be unable or have difficulty reading the text. Similarly, bright colors with high luminance are not readable for others. W3C recommends a contrast ratio between text and background of 4.5 to 1 for conformance level AA. + +| Item | Price | # In stock | +|--------------|-----------|------------| +| Apples | 1.99 | *7* | +| Bananas | **1.89** | 5234 | + +## Not relying on color + +The term “color blindness” is often used to describe people who have trouble identifying and distinguishing between certain colors, but color blindness, the inability to see any color, is extremely rare. According to the United Kingdom National Health Service (NHS), red-green color blindness affects 1 out of 12 men and 1 out of 200 women. People with this color vision deficiency may have difficulty differentiating between reds, oranges, yellows, browns, and greens. They also might find it hard to distinguish between shades of purple and may confuse red with black.Similarly, people with “blue-yellow” color vision deficiency may have difficulty differentiating between blues, greens, and yellows. + +BIG LINK + +We use four system colors in Pink Design — red, orange, green, and blue. Each of these colors represents a state in the Appwrite console — red indicates an error or danger, orange indicates a warning, green indicates success, and blue indicates information. Knowing the difficulties our users might face while seeing these colors, we don't rely on color to make critical information understandable. + +>“Lorem ipsum dolor sit amet consectetur. Diam fermentum tellus ante purus nullam eget sit id ac. Purus viverra ultrices fusce posuere sed enim duis aliquam sit. Vitae fames potenti donec ultricies in. Quis sed iaculis consectetur cras feugiat nibh gravida tincidunt volutpat. Eleifend vel blandit cras tempor sed nam quis aliquet. Facilisi tempor amet id integer gravida duis. Aliquet nulla tellus risus tortor neque vestibulum arcu.” Author + + +## Allow keyboard navigation + +People with fine motor control restrictions or disabled hands or arms will be unable to use a mouse. In Pink Design, we provide distinct states for interactive elements. By designing states like focus, hover, and active, we provide the ability to navigate all interactive elements with a keyboard. This is not only an accessible experience but also a better experience for all users who prefer keyboard navigation, including Appwrite's developer community. + +It is possible to enhance accessibility through development as well. In collaboration with our engineering team, we decided to incorporate the following into Pink Design: + +![Alt text](/images/pages/homepage/dashboard.svg "a title") + +## Define font size in REM + +Browsers have a default font size that users can change via the browser setting. A pixel is an absolute unit for fixed sizes and spaces that ignores browser settings. This means that if we are using pixels and a user (with or without vision impairment) changes the font size in their browser settings, their setting won't affect our product. That being said, pixels should not cause any problems if the user zooms in, but we make no assumptions about users' preferences. This is why we decided to define the font size in REM, which is a relative unit. + +```js +import { Client, Account } from "appwrite"; + +const client = new Client() + .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint + .setProject('5df5acd0d48c2') // Your project ID + +const account = new Account(client); + +const promise = account.createVerification('https://example.com'); + +promise.then(function (response) { + console.log(response); +}, function (error) { + console.log(error); +}); + +``` + +## Allow users to reduce motion + +There is no doubt that animations are a nice addition to every product, but animations can also distract people. In some cases, animations can cause dizziness, vertigo, or epileptic seizures. Users that are sensitive to motion might choose to reduce motion in their operating system settings. In this case, we should skip the animation for them. In Pink Design, we decided to create a big animation to show the functionality of the library on the landing page. The animation is 10 seconds long and is the first thing you see on the page. It starts immediately when the page is loaded, but if “reduce motion” is enabled in the operating system, the animation skips to the end. + diff --git a/src/routes/blog/post/example-2/+page.markdoc b/src/routes/blog/post/example-2/+page.markdoc new file mode 100644 index 0000000000..eede48502e --- /dev/null +++ b/src/routes/blog/post/example-2/+page.markdoc @@ -0,0 +1,76 @@ +--- +layout: post +title: Example 2 +description: Lorem Ipsum dolor et amet. +date: 2022-11-12 +cover: /images/blog/placeholder.png +timeToRead: 5 +author: Eldad +category: design, accessibility, appwrite, community, accessiblity +--- + +When creating products, accessibility can be an afterthought. Understandably, we want to ship our products fast and deliver value to our users. We might think that accessibility is needed for edge cases and therefore not prioritize it. It's good to be reminded that the World Health Organization (WHO) estimates that 16% of the global population has some form of disability (Dec 2022).Ignoring such a significant part of your user base simply doesn't create a good user experience.Creating accessible products is everyone's responsibility. Designers, developers, content authors, and whoever else is involved in creating products should do their part and strive towards achieving a better experience for everyone. + +It's not always easy to maintain a high level of accessibility, but it's definitely easier with a design system. The components we created in Pink Design, Appwrite's fully open source UI library, have an accessibility level of AA. This is the recommended level of accessibility for most products. + +To ensure our products will maintain a high accessibility level, we did the following: + +- Use high color contrast +- Not relying on color +- Allow keyboard navigation +- Define font size in REM +- Allow users to reduce motion + +## Use high color contrast + +Color contrast might be the first thing that comes to mind when thinking about accessibility. A lack of contrast between the text and background might mean some people would be unable or have difficulty reading the text. Similarly, bright colors with high luminance are not readable for others. W3C recommends a contrast ratio between text and background of 4.5 to 1 for conformance level AA. + +| Item | Price | \# In stock | +| ----------- | ----------- | ----------- | +| Apples | 1.99 | *7* | +| Bananas | **1.89** | 5234 | + +## Not relying on color + +The term “color blindness” is often used to describe people who have trouble identifying and distinguishing between certain colors, but color blindness, the inability to see any color, is extremely rare. According to the United Kingdom National Health Service (NHS), red-green color blindness affects 1 out of 12 men and 1 out of 200 women. People with this color vision deficiency may have difficulty differentiating between reds, oranges, yellows, browns, and greens. They also might find it hard to distinguish between shades of purple and may confuse red with black.Similarly, people with “blue-yellow” color vision deficiency may have difficulty differentiating between blues, greens, and yellows. + +BIG LINK + +We use four system colors in Pink Design — red, orange, green, and blue. Each of these colors represents a state in the Appwrite console — red indicates an error or danger, orange indicates a warning, green indicates success, and blue indicates information. Knowing the difficulties our users might face while seeing these colors, we don't rely on color to make critical information understandable. + +> “Lorem ipsum dolor sit amet consectetur. Diam fermentum tellus ante purus nullam eget sit id ac. Purus viverra ultrices fusce posuere sed enim duis aliquam sit. Vitae fames potenti donec ultricies in. Quis sed iaculis consectetur cras feugiat nibh gravida tincidunt volutpat. Eleifend vel blandit cras tempor sed nam quis aliquet. Facilisi tempor amet id integer gravida duis. Aliquet nulla tellus risus tortor neque vestibulum arcu.” Author + +## Allow keyboard navigation + +People with fine motor control restrictions or disabled hands or arms will be unable to use a mouse. In Pink Design, we provide distinct states for interactive elements. By designing states like focus, hover, and active, we provide the ability to navigate all interactive elements with a keyboard. This is not only an accessible experience but also a better experience for all users who prefer keyboard navigation, including Appwrite's developer community. + +It is possible to enhance accessibility through development as well. In collaboration with our engineering team, we decided to incorporate the following into Pink Design: + +![Alt text](/images/pages/homepage/dashboard.svg "a title") + +## Define font size in REM + +Browsers have a default font size that users can change via the browser setting. A pixel is an absolute unit for fixed sizes and spaces that ignores browser settings. This means that if we are using pixels and a user (with or without vision impairment) changes the font size in their browser settings, their setting won't affect our product. That being said, pixels should not cause any problems if the user zooms in, but we make no assumptions about users' preferences. This is why we decided to define the font size in REM, which is a relative unit. + +```js +import { Client, Account } from "appwrite"; + +const client = new Client() + .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint + .setProject('5df5acd0d48c2') // Your project ID + +const account = new Account(client); + +const promise = account.createVerification('https://example.com'); + +promise.then(function (response) { + console.log(response); +}, function (error) { + console.log(error); +}); + +``` + +## Allow users to reduce motion + +There is no doubt that animations are a nice addition to every product, but animations can also distract people. In some cases, animations can cause dizziness, vertigo, or epileptic seizures. Users that are sensitive to motion might choose to reduce motion in their operating system settings. In this case, we should skip the animation for them. In Pink Design, we decided to create a big animation to show the functionality of the library on the landing page. The animation is 10 seconds long and is the first thing you see on the page. It starts immediately when the page is loaded, but if “reduce motion” is enabled in the operating system, the animation skips to the end. diff --git a/src/routes/blog/post/example/+page.markdoc b/src/routes/blog/post/example/+page.markdoc new file mode 100644 index 0000000000..cddbbeedd1 --- /dev/null +++ b/src/routes/blog/post/example/+page.markdoc @@ -0,0 +1,77 @@ +--- +layout: post +title: Example +description: Lorem Ipsum dolor et amet. +date: 2023-11-16 +cover: /images/blog/placeholder.png +timeToRead: 15 +author: Arman +category: design, accessibility, appwrite, community, accessiblity +--- + +When creating products, accessibility can be an afterthought. Understandably, we want to ship our products fast and deliver value to our users. We might think that accessibility is needed for edge cases and therefore not prioritize it. It's good to be reminded that the World Health Organization (WHO) estimates that 16% of the global population has some form of disability (Dec 2022).Ignoring such a significant part of your user base simply doesn't create a good user experience.Creating accessible products is everyone's responsibility. Designers, developers, content authors, and whoever else is involved in creating products should do their part and strive towards achieving a better experience for everyone. + +It's not always easy to maintain a high level of accessibility, but it's definitely easier with a design system. The components we created in Pink Design, Appwrite's fully open source UI library, have an accessibility level of AA. This is the recommended level of accessibility for most products. + +To ensure our products will maintain a high accessibility level, we did the following: +- Use high color contrast +- Not relying on color +- Allow keyboard navigation +- Define font size in REM +- Allow users to reduce motion + +## Use high color contrast + +Color contrast might be the first thing that comes to mind when thinking about accessibility. A lack of contrast between the text and background might mean some people would be unable or have difficulty reading the text. Similarly, bright colors with high luminance are not readable for others. W3C recommends a contrast ratio between text and background of 4.5 to 1 for conformance level AA. + +| Item | Price | # In stock | +|--------------|-----------|------------| +| Apples | 1.99 | *7* | +| Bananas | **1.89** | 5234 | + +## Not relying on color + +The term “color blindness” is often used to describe people who have trouble identifying and distinguishing between certain colors, but color blindness, the inability to see any color, is extremely rare. According to the United Kingdom National Health Service (NHS), red-green color blindness affects 1 out of 12 men and 1 out of 200 women. People with this color vision deficiency may have difficulty differentiating between reds, oranges, yellows, browns, and greens. They also might find it hard to distinguish between shades of purple and may confuse red with black.Similarly, people with “blue-yellow” color vision deficiency may have difficulty differentiating between blues, greens, and yellows. + +BIG LINK + +We use four system colors in Pink Design — red, orange, green, and blue. Each of these colors represents a state in the Appwrite console — red indicates an error or danger, orange indicates a warning, green indicates success, and blue indicates information. Knowing the difficulties our users might face while seeing these colors, we don't rely on color to make critical information understandable. + +>“Lorem ipsum dolor sit amet consectetur. Diam fermentum tellus ante purus nullam eget sit id ac. Purus viverra ultrices fusce posuere sed enim duis aliquam sit. Vitae fames potenti donec ultricies in. Quis sed iaculis consectetur cras feugiat nibh gravida tincidunt volutpat. Eleifend vel blandit cras tempor sed nam quis aliquet. Facilisi tempor amet id integer gravida duis. Aliquet nulla tellus risus tortor neque vestibulum arcu.” Author + + +## Allow keyboard navigation + +People with fine motor control restrictions or disabled hands or arms will be unable to use a mouse. In Pink Design, we provide distinct states for interactive elements. By designing states like focus, hover, and active, we provide the ability to navigate all interactive elements with a keyboard. This is not only an accessible experience but also a better experience for all users who prefer keyboard navigation, including Appwrite's developer community. + +It is possible to enhance accessibility through development as well. In collaboration with our engineering team, we decided to incorporate the following into Pink Design: + +![Alt text](/images/pages/homepage/dashboard.svg "a title") + +## Define font size in REM + +Browsers have a default font size that users can change via the browser setting. A pixel is an absolute unit for fixed sizes and spaces that ignores browser settings. This means that if we are using pixels and a user (with or without vision impairment) changes the font size in their browser settings, their setting won't affect our product. That being said, pixels should not cause any problems if the user zooms in, but we make no assumptions about users' preferences. This is why we decided to define the font size in REM, which is a relative unit. + +```js +import { Client, Account } from "appwrite"; + +const client = new Client() + .setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint + .setProject('5df5acd0d48c2') // Your project ID + +const account = new Account(client); + +const promise = account.createVerification('https://example.com'); + +promise.then(function (response) { + console.log(response); +}, function (error) { + console.log(error); +}); + +``` + +## Allow users to reduce motion + +There is no doubt that animations are a nice addition to every product, but animations can also distract people. In some cases, animations can cause dizziness, vertigo, or epileptic seizures. Users that are sensitive to motion might choose to reduce motion in their operating system settings. In this case, we should skip the animation for them. In Pink Design, we decided to create a big animation to show the functionality of the library on the landing page. The animation is 10 seconds long and is the first thing you see on the page. It starts immediately when the page is loaded, but if “reduce motion” is enabled in the operating system, the animation skips to the end. + diff --git a/static/images/avatars/arman.png b/static/images/avatars/arman.png new file mode 100644 index 0000000000..e2ef3d58b3 Binary files /dev/null and b/static/images/avatars/arman.png differ diff --git a/svelte.config.js b/svelte.config.js index b07180b94e..0a868fe8be 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,5 +1,5 @@ -import { dirname, join } from "path"; -import { fileURLToPath } from "url"; +import { dirname, join } from 'path'; +import { fileURLToPath } from 'url'; import { vitePreprocess } from '@sveltejs/kit/vite'; import { preprocessMeltUI } from '@melt-ui/pp'; import { markdoc } from 'svelte-markdoc-preprocess'; @@ -7,7 +7,7 @@ import sequence from 'svelte-sequential-preprocessor'; import adapter from '@sveltejs/adapter-static'; function absoulute(path) { - return join(dirname(fileURLToPath(import.meta.url)), path) + return join(dirname(fileURLToPath(import.meta.url)), path); } /** @type {import('@sveltejs/kit').Config}*/ @@ -24,7 +24,10 @@ const config = { layouts: { default: absoulute('./src/markdoc/layouts/Article.svelte'), article: absoulute('./src/markdoc/layouts/Article.svelte'), - tutorial: absoulute('./src/markdoc/layouts/Tutorial.svelte') + tutorial: absoulute('./src/markdoc/layouts/Tutorial.svelte'), + post: absoulute('./src/markdoc/layouts/Post.svelte'), + author: absoulute('./src/markdoc/layouts/Author.svelte'), + category: absoulute('./src/markdoc/layouts/Category.svelte') } }), preprocessMeltUI() @@ -38,10 +41,10 @@ const config = { $appwrite: './node_modules/@appwrite.io/repo', $markdoc: './src/markdoc' }, - prerender: { - handleHttpError: 'warn', + prerender: { + handleHttpError: 'warn', handleMissingId: 'warn' - }, + } } }; export default config;