doc: add Refine tutorial

[necatiozmen]

What does this PR do?

This PR adds a tutorial and quick start guide to the website for Refine and Appwrite. It was done with the knowledge of @gewenyu99

Test Plan

I was not able to render Refine icons after adding them the project. I may need a help for this.

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

Yes

[vercel]

@necatiozmen is attempting to deploy a commit to the appwrite Team on Vercel.

A member of the Team first needs to authorize it.

[gewenyu99]

Let me tag @TorstenDittmann@TGlide to take a look at the icon changes first. I took a quick look and the content structure looks good. I'll try to give it a detailed review soon.

Thank you so much @necatiozmen

[TGlide]

Hi! The workflow for icons is: stick the SVG in src/icons/svg, then run pnpm run icons:generate.

[gewenyu99]

Take a look at Thomas' comments for the icon workflow. Sorry this isn't documented anywhere! First time we're doing an integration here with the new docs.

[necatiozmen]

Hi! The workflow for icons is: stick the SVG in src/icons/svg, then run pnpm run icons:generate.

Hi @TGlide,

I've placed the SVG in the src/icons/svg directory and executed the pnpm run icons:generate command. You can see the commit here: 6ea7d1f.

However, I'm still encountering an issue where the Refine SVG isn't appearing on the tutorials page. Interestingly, it displays correctly on both the quick start and home pages.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 1, 2023 7:05pm

[gewenyu99]

I wonder if this logo looks like it's the right size. Let me check with design.

[gewenyu99]

Some comments. Let me also provide some updated screenshots and icons.

[gewenyu99]

We have some requirements for the displayed pixel size and zoom for modals. Here's the relevant screenshots updated :)

[gewenyu99]

We added the same padding size for the refine icon as we do all our other icons in the aw-icons library, so they'll match in size :)

[necatiozmen]

We added the same padding size for the refine icon as we do all our other icons in the aw-icons library, so they'll match in size :)

Thank you, I updated it and renders properly now.

[gewenyu99]

Hey, I'm gonna merge this into a branch and carry it forward myself. Thank you so much for your help! This is looking great!

[necatiozmen]

Hey, I'm gonna merge this into a branch and carry it forward myself. Thank you so much for your help! This is looking great!

Thanks you so much

[gewenyu99]

For the record.