Skip to content
This repository was archived by the owner on Oct 18, 2023. It is now read-only.

Update site for 2022 #27

Merged
eldadfux merged 1 commit into from
Sep 24, 2022
Merged

Update site for 2022 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .vscode/extensions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"recommendations": [
"svelte.svelte-vscode"
]
}
13 changes: 12 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"@sveltejs/adapter-static": "next",
"@tailwindcss/aspect-ratio": "^0.2.1",
"@tailwindcss/line-clamp": "^0.2.1",
"@tailwindcss/typography": "^0.4.1"
"@tailwindcss/typography": "^0.4.1",
"rive-js": "^0.7.33"
}
}
67 changes: 34 additions & 33 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
<html lang="en">

<head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.png" />
<title>Hacktoberfest 2021 | Appwrite</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta charset="utf-8">
<link rel="icon" href="/favicon.png" />
<title>Hacktoberfest 2022 | Appwrite</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- HTML Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keyword" content="hacktoberfest,appwrite,backend as a service,baas,open source, open-source" />
<meta name="theme-color" content="#f02f65" />
<!-- HTML Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keyword" content="hacktoberfest,appwrite,backend as a service,baas,open source, open-source" />
<meta name="theme-color" content="#f02f65" />

<meta name="description"
content="Celebrate Hacktoberfest with Appwrite! Your open source journey begins with a pull request and we've curated a list of beginner friendly issues for you." />
<meta name="description"
content="Celebrate Hacktoberfest with Appwrite! Your open source journey begins with a pull request and we've curated a list of beginner friendly issues for you." />

<meta http-equiv="Content-Security-Policy" content="
<meta http-equiv="Content-Security-Policy" content="
default-src
'self';
img-src
Expand Down Expand Up @@ -57,32 +57,33 @@
worker-src 'none';
" />

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://hacktoberfest.appwrite.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Hacktoberfest 2021 | Appwrite" />
<meta property="og:description"
content="Celebrate Hacktoberfest with Appwrite! Your open source journey begins with a pull request and we've curated a list of beginner friendly issues for you." />
<meta property="og:image" content="https://hacktoberfest.appwrite.io/banner.png" />
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://hacktoberfest.appwrite.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Hacktoberfest 2022 | Appwrite" />
<meta property="og:description"
content="Celebrate Hacktoberfest with Appwrite! Your open source journey begins with a pull request and we've curated a list of beginner friendly issues for you." />
<meta property="og:image" content="https://hacktoberfest.appwrite.io/banner.png" />

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="hacktoberfest.appwrite.io" />
<meta property="twitter:url" content="https://hacktoberfest.appwrite.io/" />
<meta name="twitter:title" content="Appwrite Hacktoberfest" />
<meta name="twitter:description"
content="Celebrate Hacktoberfest with Appwrite! Your open source journey begins with a pull request and we've curated a list of beginner friendly issues for you." />
<meta name="twitter:image" content="https://hacktoberfest.appwrite.io/banner.png" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="hacktoberfest.appwrite.io" />
<meta property="twitter:url" content="https://hacktoberfest.appwrite.io/" />
<meta name="twitter:title" content="Appwrite Hacktoberfest" />
<meta name="twitter:description"
content="Celebrate Hacktoberfest with Appwrite! Your open source journey begins with a pull request and we've curated a list of beginner friendly issues for you." />
<meta name="twitter:image" content="https://hacktoberfest.appwrite.io/banner.png" />
<meta name="twitter:site" content="@appwrite" />
<meta name="twitter:creator" content="@appwrite" />
<!-- Meta Tags Generated via https://www.opengraph.xyz -->

<!-- Meta Tags Generated via https://www.opengraph.xyz -->
%svelte.head%

%svelte.head%

<script defer data-domain="hacktoberfest.appwrite.io" src="https://plausible.io/js/plausible.js"></script>
<script defer data-domain="hacktoberfest.appwrite.io" src="https://plausible.io/js/plausible.js"></script>
</head>

<body>
<div id="svelte">%svelte.body%</div>
<div id="svelte">%svelte.body%</div>
</body>

</html>
</html>
28 changes: 24 additions & 4 deletions src/comps/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,26 @@
export let text: string = 'Empty Button';
export let type: 'primary' | 'secondary' | 'red' = 'primary';
export let icon: 'discord' | 'github' | 'none' | 'youtube' = 'none';
let clazz: string = '';
export { clazz as class };

const buttonCommonClasses = [
clazz,
'relative',
'focus:ring',
'transform',
'hover:scale-105',
'transition-transform',
'duration-300',
'rounded-md',
'px-[24px]',
'py-[12px]',
'border-[1px]',
'flex',
'items-center',
'justify-center',
'space-x-[12px]'
].join(' ');

const dispatch = createEventDispatcher();

Expand All @@ -16,10 +36,10 @@
aria-label={text}
on:click={submitButton}
class={type === 'primary'
? 'relative focus:ring focus:ring-gray-600 transform hover:scale-105 transition-transform duration-300 rounded-md px-[24px] py-[12px] border-black border-[1px] bg-black text-white flex items-center justify-center space-x-[12px]'
? buttonCommonClasses + ' focus:ring-gray-600 border-primary-300 bg-primary-200 text-white'
: type === 'secondary'
? 'relative focus:ring focus:ring-gray-600 transform hover:scale-105 transition-transform duration-300 rounded-md px-[24px] py-[12px] border-black border-[1px] bg-transparent text-black flex items-center justify-center space-x-[12px]'
: 'relative focus:ring focus:ring-gray-100 transform hover:scale-105 transition-transform duration-300 rounded-md px-[24px] py-[12px] border-white border-[1px] bg-white text-[#F02E65] flex items-center justify-center space-x-[12px]'}
? buttonCommonClasses + ' focus:ring-gray-600 border-neutral-150 bg-neutral-300 text-white'
: buttonCommonClasses + ' focus:ring-gray-100 border-white text-[#F02E65]'}
>
{#if icon === 'discord'}
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -48,7 +68,7 @@
>
{/if}

<span class="title text-[16px]">{text}</span>
<span>{text}</span>

<slot />
</button>
5 changes: 3 additions & 2 deletions src/comps/ButtonGithub.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@
import { totalIssuesAmount, githubLink } from '../stores';

export let showBadge = false;
export let showIcon = false;
</script>

<a aria-label="View all Hacktoberfest issues" target="_blank" rel="noopener" href={githubLink}>
<Button type="primary" icon="github" text="View all Hacktoberfest issues">
<Button type="primary" icon={showIcon ? 'github' : 'none'} text="View all Hacktoberfest issues">
{#if showBadge}
{#if $totalIssuesAmount !== null}
<div
class="rounded-full transform translate-x-1/2 -translate-y-1/2 absolute top-0 right-0 px-2 text-sm py-1 bg-[#F02E65] text-white"
class="rounded-full transform translate-x-1/2 -translate-y-1/2 absolute top-0 right-0 px-2 text-sm py-1 bg-neutral-170 text-white"
>
+{$totalIssuesAmount}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/__layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
import '../styles/tailwind-output.css';
</script>

<slot />
<div class="bg-neutral-200 text-neutral-30"><slot /></div>
13 changes: 11 additions & 2 deletions src/routes/github.json.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { githubQuery } from '../stores';

export const get = async (request) => {
const queryString = [
`q=${githubQuery}`,
'type=issues',
'per_page=10',
'sort=updated',
'order=asc',
].join('&')
const issuesQuery = await fetch(
'https://api.github.com/search/issues?q=org%3Aappwrite+org%3Autopia-php+is%3Aissue+label%3Ahacktoberfest+created%3A%3E2021-01-01+is%3Aopen&type=issues&per_page=100'
`https://api.github.com/search/issues?${queryString}`
);

const issuesJson = await issuesQuery.json();
Expand All @@ -22,7 +31,7 @@ export const get = async (request) => {
label: label.name,
backgroundColor: label.color,
style:
label.color === 'a0ccf7' || label.color === 'a2eeef' ? 'text-black' : 'text-white'
['22F50E', 'a0ccf7', 'a2eeef', '03CA45'].includes(label.color) ? 'text-black' : 'text-white'
};
})
};
Expand Down
63 changes: 36 additions & 27 deletions src/routes/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,76 +17,85 @@
</script>

<script lang="ts">
import { Rive } from 'rive-js';
import ButtonGithub from '../comps/ButtonGithub.svelte';
import About from './index/_about.svelte';
import Events from './index/_events.svelte';
import Footer from './index/_footer.svelte';
// import Footer from './index/_footer.svelte';
import Header from './index/_header.svelte';
import Howto from './index/_howto.svelte';
import Issues from './index/_issues.svelte';
import Rewards from './index/_rewards.svelte';
import Team from './index/_team.svelte';
import { onMount } from 'svelte';

export let issuesJson;
let canvas, rive;

onMount(() => {
loadStore(issuesJson);
rive = new Rive({
src: '/factory.riv',
// Or the path to a local Rive asset
// src: './example.riv',
canvas: canvas,
autoplay: true
});
});
</script>

<Header />

<!-- HERO START -->
<section class="bg-white relative">
<div class="flex flex-col min-h-[calc(100vh-100px)]">
<section class="relative mt-[59px]">
<div class="flex flex-col">
<div class="flex-1 flex items-center justify-center">
<div class="lg:container h-full lg:mx-auto grid gap-x-0 gap-y-12 lg:gap-12 grid-cols-12">
<div class="px-6 col-span-12 lg:col-span-6 flex items-center">
<div class="mt-12 flex flex-col lg:items-start items-center text-center lg:text-left">
<h1
class="text-[32px] lg:text-[54px] font-semibold !leading-[54px] lg:!leading-[72px] lg:max-w-lg title tracking-wide"
>
Celebrate Open Source with Hacktoberfest
<div class="px-6 col-span-12 lg:col-span-5 flex items-center">
<div class="flex flex-col lg:items-start items-center text-center lg:text-left">
<h1 class="lg:max-w-lg title">
Celebrate<br />Open Source with Hacktoberfest
</h1>
<p class="mt-[27px] mb-[40px] lg:max-w-lg leading-snug text-[18px] text-[#454545]">
<p class="mt-[27px] mb-[40px] lg:max-w-lg leading-snug">
Your open source journey begins with a pull request. We've curated a list of beginner
friendly issues for you to check out.
</p>

<ButtonGithub />
<ButtonGithub showIcon />
</div>
</div>
<div
class="py-[64px] lg:py-0 bg-[#20007F] z-20 col-span-12 lg:col-span-6 flex items-center justify-center"
class="img-container py-[64px] lg:py-0 z-20 col-span-12 lg:col-span-7 flex items-center justify-center relative w-full"
>
<img
class="w-[80%] max-w-[500px] lg:max-w-[600px] lg:w-[90%]"
width="300"
height="300"
src="/programmer.webp"
alt="Programmer character"
/>
<canvas class="w-full h-auto" height={1054} width={1080} bind:this={canvas} />

<!-- img src="/factory.svg" alt="Hacktoberfest 2022" /-->
</div>
</div>
</div>
</div>

<div class="hidden lg:block absolute right-0 top-0 h-full w-[50%] bg-[#20007F]" />
</section>
<div class="mx-auto container"><div class="bg-[#C4C4C4] w-full h-[1px]" /></div>

<!-- HERO END -->

<About />
<Howto />
<Rewards />

<div class="container mx-auto mt-[100px] max-w-[80vw]">
<hr class="border-t-[1px] border-gray-300" />
<div class="container mx-auto mt-[100px] px-6">
<hr class="border-t-[1px] border-neutral-150" />
</div>

<Events />
<Issues />
<Team />
<Footer />

<style>
.img-container:before {
content: '';
background: linear-gradient(90deg, rgba(100, 227, 255, 0.5) 0%, rgba(145, 146, 255, 0.5) 100%);
width: 100%;
height: 100%;
position: absolute;
opacity: 0.35;
filter: blur(150px);
}
</style>
Loading