Skip to content

fix: footer stlyes QA #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TorstenDittmann merged 26 commits into from
Sep 25, 2023
Merged

fix: footer stlyes QA #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
ea11598
Added more methods to upload and download
Haimantika Sep 19, 2023
d3b5b43
Made changes
Haimantika Sep 19, 2023
b28fe71
Initial commit
ArmanNik Sep 21, 2023
789fa06
Merge branch 'main' of github.com:appwrite/website into carousel
ArmanNik Sep 21, 2023
3f6ad49
feat: carousel
ArmanNik Sep 21, 2023
da86c35
chore: remove logs
ArmanNik Sep 21, 2023
d96d5ac
Merge branch 'main' of github.com:appwrite/website into carousel
ArmanNik Sep 22, 2023
db81bd9
fix: merge errors
ArmanNik Sep 22, 2023
17632bb
fix: improve scroll function
ArmanNik Sep 22, 2023
4bbd2b5
feat: add touch support
ArmanNik Sep 22, 2023
f4f997a
feat: update design
ArmanNik Sep 22, 2023
36f90d4
fix: footer styles
ArmanNik Sep 22, 2023
f03b472
fix: pink design
TorstenDittmann Sep 22, 2023
e3fa28a
fix: footer link styles
ArmanNik Sep 22, 2023
73a51ce
Merge branch 'elad-style-3' of github.com:appwrite/website into fix-f…
ArmanNik Sep 22, 2023
da2e00e
Fix formatting
Sep 22, 2023
2df52b7
Merge branch 'main' into feat-haimantika-docs-g2
Sep 22, 2023
729726a
Merge pull request #17 from appwrite/feat-haimantika-docs-g2
Sep 22, 2023
156703d
fix: add ids to authors
ArmanNik Sep 22, 2023
5240fb6
Merge pull request #43 from appwrite/feat-error-page
TorstenDittmann Sep 22, 2023
b626063
chore: replace class with eyebrow
ArmanNik Sep 22, 2023
22b74ce
fix: correct sizes
ArmanNik Sep 22, 2023
7c3ca1e
Merge pull request #47 from appwrite/fix-add-author-id
TorstenDittmann Sep 23, 2023
d714d25
Merge pull request #40 from appwrite/carousel
TorstenDittmann Sep 23, 2023
6740ed4
Merge branch 'main' of github.com:appwrite/website into fix-footer-st…
ArmanNik Sep 25, 2023
5c81cf8
Merge branch 'elad-style-3' of github.com:appwrite/website into fix-f…
ArmanNik Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions src/lib/components/Carousel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<script lang="ts">
let carousel: HTMLElement;

export let gap = 32;
let scroll = 0;
let touchStart = 0;
let touchEnd = 0;

function calculateScrollAmount(prev = false) {
const direction = prev ? -1 : 1;
const carouselSize = carousel?.clientWidth;
const childSize = (carousel.childNodes[0] as HTMLUListElement)?.clientWidth + gap;

scroll = scroll || carouselSize;

const numberOfItems = Math.floor(carouselSize / childSize);
const overflow = scroll % childSize;
const amount = numberOfItems * childSize - overflow * direction;
scroll += amount * direction;
return amount * direction;
}

function next() {
carousel.scrollBy({
left: calculateScrollAmount(),
behavior: 'smooth'
});
}
function prev() {
carousel.scrollBy({
left: calculateScrollAmount(true),
behavior: 'smooth'
});
}

function handleTouchStart(e: TouchEvent) {
touchStart = e.touches[0].clientX;
}
function handleTouchMove(e: TouchEvent) {
touchEnd = e.touches[0].clientX;
}

function handleTouchEnd() {
if (touchEnd > touchStart) {
prev();
} else {
next();
}
}
</script>

<div class="u-flex u-main-space-between u-flex-wrap">
<slot name="header" />
<div class="u-flex u-gap-12 u-cross-end u-margin-block-start-8">
<button class="aw-icon-button" aria-label="Move carousel backward" on:click={() => prev()}>
<span class="icon-arrow-left" aria-hidden="true" />
</button>
<button class="aw-icon-button" aria-label="Move carousel forward" on:click={() => next()}>
<span class="icon-arrow-right" aria-hidden="true" />
</button>
</div>
</div>
<ul
class="aw-grid-articles aw-u-gap-32 u-margin-block-start-32 carousel"
bind:this={carousel}
on:touchstart={handleTouchStart}
on:touchmove={handleTouchMove}
on:touchend={handleTouchEnd}
>
<slot />
</ul>

<style lang="scss">
.carousel {
grid-auto-flow: column;
grid-auto-columns: minmax(17.5rem, 1fr);
overflow-x: hidden;
}
</style>
141 changes: 94 additions & 47 deletions src/lib/components/FooterNav.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
<img class="aw-logo" src="/images/logos/appwrite.svg" alt="appwrite" width="130" />
<ul class="aw-footer-nav-main-list">
<li class="aw-footer-nav-main-item">
<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Quick starts</h5>
<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">
Quick starts
</h5>
<button class="aw-footer-nav-button aw-is-only-mobile">
<span class="aw-caption-500">Quick starts</span>
<span class="aw-caption-500 aw-eyebrow">Quick starts</span>
<svg
class="aw-footer-nav-button-arrow"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -21,23 +23,43 @@
/>
</svg>
</button>
<ul class="aw-footer-nav-secondary-list">
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/flutter">Flutter</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/nextjs">Next.js</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/vuejs">Vue.js</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/sveltekit">SvelteKit</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/apple">Apple</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/android">Android</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/nuxt">Nuxt</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/angular">Angular</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/qwik">Qwik</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/quick-starts/astro">Astro</a></li>
<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
<li>
<a class="aw-link" href="/docs/quick-starts/flutter">Flutter</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/nextjs">Next.js</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/vuejs">Vue.js</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/sveltekit">SvelteKit</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/apple">Apple</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/android">Android</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/nuxt">Nuxt</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/angular">Angular</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/qwik">Qwik</a>
</li>
<li>
<a class="aw-link" href="/docs/quick-starts/astro">Astro</a>
</li>
</ul>
</li>
<li class="aw-footer-nav-main-item">
<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Products</h5>
<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">Products</h5>
<button class="aw-footer-nav-button aw-is-only-mobile">
<span class="aw-caption-500">Products</span>
<span class="aw-caption-500 aw-eyebrow">Products</span>
<svg
class="aw-footer-nav-button-arrow"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -54,18 +76,28 @@
/>
</svg>
</button>
<ul class="aw-footer-nav-secondary-list">
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/auth">Auth</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/databases">Databases</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/functions">Functions</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/products/storage">Storage</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs/apis/realtime">Realtime</a></li>
<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
<li>
<a class="aw-link" href="/docs/products/auth">Auth</a>
</li>
<li>
<a class="aw-link" href="/docs/products/databases">Databases</a>
</li>
<li>
<a class="aw-link" href="/docs/products/functions">Functions</a>
</li>
<li>
<a class="aw-link" href="/docs/products/storage">Storage</a>
</li>
<li>
<a class="aw-link" href="/docs/apis/realtime">Realtime</a>
</li>
</ul>
</li>
<li class="aw-footer-nav-main-item">
<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Learn</h5>
<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">Learn</h5>
<button class="aw-footer-nav-button is-open aw-is-only-mobile">
<span class="aw-caption-500">Learn</span>
<span class="aw-caption-500 aw-eyebrow">Learn</span>
<svg
class="aw-footer-nav-button-arrow"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -82,18 +114,29 @@
/>
</svg>
</button>
<ul class="aw-footer-nav-secondary-list">
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/docs">Docs</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/community">Community</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/blog">Blog</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/roadmap">Roadmap</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="https://github.com/appwrite/appwrite/releases" target="_blank">Changelog</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="https://status.appwrite.io" target="_blank">Status</a></li>
<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
<li>
<a class="aw-link" href="/docs">Docs</a>
</li>
<li>
<a class="aw-link" href="/community">Community</a>
</li>
<li><a class="aw-link" href="/blog">Blog</a></li>
<li><a class="aw-link" href="/roadmap">Roadmap</a></li>
<li>
<a class="aw-link" href="https://github.com/appwrite/appwrite/releases" target="_blank"
>Changelog</a
>
</li>
<li>
<a class="aw-link" href="https://status.appwrite.io" target="_blank">Status</a>
</li>
</ul>
</li><li class="aw-footer-nav-main-item">
<h5 class="aw-footer-nav-main-title aw-is-not-mobile">About</h5>
</li>
<li class="aw-footer-nav-main-item">
<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">About</h5>
<button class="aw-footer-nav-button is-open aw-is-only-mobile">
<span class="aw-caption-500">About</span>
<span class="aw-caption-500 aw-eyebrow">About</span>
<svg
class="aw-footer-nav-button-arrow"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -110,20 +153,24 @@
/>
</svg>
</button>
<ul class="aw-footer-nav-secondary-list">
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/pricing">Pricing</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/company">Company</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/careers">Careers</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/heroes">Heroes</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="https://store.appwrite.io" target="_blank">Store</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/brand">Brand</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/contact-us">Contact us</a></li>
<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
<li><a class="aw-link" href="/pricing">Pricing</a></li>
<li><a class="aw-link" href="/company">Company</a></li>
<li><a class="aw-link" href="/careers">Careers</a></li>
<li><a class="aw-link" href="/heroes">Heroes</a></li>
<li>
<a class="aw-link" href="https://store.appwrite.io" target="_blank">Store</a>
</li>
<li><a class="aw-link" href="/brand">Brand</a></li>
<li>
<a class="aw-link" href="/contact-us">Contact us</a>
</li>
</ul>
</li>
<li class="aw-footer-nav-main-item">
<h5 class="aw-footer-nav-main-title aw-is-not-mobile">Policies</h5>
<h5 class="aw-footer-nav-main-title aw-is-not-mobile aw-caption-500 aw-eyebrow">Policies</h5>
<button class="aw-footer-nav-button aw-is-only-mobile">
<span class="aw-caption-500">Policies</span>
<span class="aw-caption-500 aw-eyebrow">Policies</span>
<svg
class="aw-footer-nav-button-arrow"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -140,10 +187,10 @@
/>
</svg>
</button>
<ul class="aw-footer-nav-secondary-list">
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/terms">Terms</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/privacy">Privacy</a></li>
<li class="aw-footer-nav-secondary-item"><a class="aw-link" href="/cookies">Cookies</a></li>
<ul class="aw-footer-nav-secondary-list aw-sub-body-400">
<li><a class="aw-link" href="/terms">Terms</a></li>
<li><a class="aw-link" href="/privacy">Privacy</a></li>
<li><a class="aw-link" href="/cookies">Cookies</a></li>
</ul>
</li>
</ul>
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ export { default as Newsletter } from './Newsletter.svelte';
export { default as Tooltip } from './Tooltip.svelte';
export { default as Spline } from './Spline.svelte';
export { default as Article } from './Article.svelte';
export { default as Carousel } from './Carousel.svelte';
1 change: 1 addition & 0 deletions src/markdoc/layouts/Author.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script context="module" lang="ts">
export type AuthorData = {
name: string;
id: string;
role: string;
avatar: string;
bio: string;
Expand Down
3 changes: 2 additions & 1 deletion src/routes/blog/+layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export function load() {
const { frontmatter } = authorList as {
frontmatter: AuthorData;
};
const name = frontmatter.id ?? frontmatter.name.toLowerCase().replace(' ', '-');

return {
name: frontmatter.name,
Expand All @@ -50,7 +51,7 @@ export function load() {
twitter: frontmatter.twitter,
linkedin: frontmatter.linkedin,
github: frontmatter.github,
href: `${base}/blog/author/${frontmatter.name.toLowerCase()}`
href: `${base}/blog/author/${name}`
};
});

Expand Down
4 changes: 3 additions & 1 deletion src/routes/blog/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export function load() {
frontmatter: AuthorData;
};

const name = frontmatter.id ?? frontmatter.name.toLowerCase().replace(' ', '-');

return {
name: frontmatter.name,
role: frontmatter.role,
Expand All @@ -46,7 +48,7 @@ export function load() {
twitter: frontmatter.twitter,
linkedin: frontmatter.linkedin,
github: frontmatter.github,
href: `${base}/blog/author/${frontmatter.name.toLowerCase()}`
href: `${base}/blog/author/${name}`
};
});

Expand Down
1 change: 1 addition & 0 deletions src/routes/blog/author/arman/+page.markdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
layout: author
name: Arman
id: arman
role: Frontend Developer
bio: In ♥ with Svelte and Vue, currently working at Appwrite
avatar: /images/avatars/arman.png
Expand Down
1 change: 1 addition & 0 deletions src/routes/blog/author/eldad/+page.markdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
layout: author
name: Eldad
id: eldad
role: Big boss
bio: Creator of Appwrite
avatar: /images/avatars/eldad.png
Expand Down
35 changes: 23 additions & 12 deletions src/routes/docs/+error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,32 @@
<script lang="ts">
import { page } from '$app/stores';
import { MainFooter } from '$lib/components';
import { Docs } from '$lib/layouts';
import Sidebar from './Sidebar.svelte';
</script>

<Docs variant="two-side-navs">
<Sidebar />
<main class="u-contents">
<article class="aw-article u-contents">
<header class="aw-article-header">
<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
<div class="u-position-relative u-flex u-cross-center">
<h1 class="aw-title">{$page?.error?.message}</h1>
</div>
</div>
</header>
<div class="aw-article-content">I am a placeholder for an error site.</div>
</article>
</main>
<div
class="aw-article u-flex u-main-center u-cross-center u-padding-block-16 u-max-width-700 u-margin-inline-auto"
>
<div class="aw-container">
<div class="aw-hero" style="--hero-gap:1.25rem;">
<span class="aw-badges aw-eyebrow">{$page.status}</span>
<h1 class="aw-headline aw-u-color-text-primary">
{$page.error?.message ?? 'An error has occured'}
</h1>
{#if $page.status === 404}
<p class="aw-description">
Sorry, it seems that the page you are looking for does not exist. Feel free to use our
navigation menu or the button below to explore more of Appwrite's documentation.
</p>
{/if}
<a href="/docs" class="aw-button is-secondary u-cross-child-center u-margin-block-start-12">
<span>Back to docs</span>
</a>
</div>
</div>
</div>
<MainFooter variant="docs" />
</Docs>
Loading