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

Feat: Update landing page for Hacktoberfest #18

Merged
christyjacob4 merged 7 commits into from
Sep 30, 2021
Merged

Feat: Update landing page for Hacktoberfest #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
058e15c
Multiple updates (desc)
Meldiron Sep 30, 2021
f6d091b
Fixed issue limit date
Meldiron Sep 30, 2021
8f1c32b
New section reffering to article on appwrite.io
Meldiron Sep 30, 2021
9e6deb5
Ninja fix padding
Meldiron Sep 30, 2021
9bd0408
Design updates
Meldiron Sep 30, 2021
810ada1
Responsivity fix
Meldiron Sep 30, 2021
c9869c6
feat: some minor fixes
christyjacob4 Sep 30, 2021
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
6 changes: 4 additions & 2 deletions src/comps/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { createEventDispatcher } from 'svelte';

export let text: string = 'Empty Button';
export let type: 'primary' | 'secondary' = 'primary';
export let type: 'primary' | 'secondary' | 'red' = 'primary';
export let icon: 'discord' | 'github' | 'none' | 'youtube' = 'none';

const dispatch = createEventDispatcher();
Expand All @@ -17,7 +17,9 @@
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]'
: '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]'}
: 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]'}
>
{#if icon === 'discord'}
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down
9 changes: 2 additions & 7 deletions src/comps/ButtonGithub.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
<script>
import Button from './Button.svelte';
import { totalIssuesAmount } from '../stores';
import { totalIssuesAmount, githubLink } from '../stores';

export let showBadge = false;
</script>

<a
aria-label="View all Hacktoberfest issues"
target="_blank"
rel="noopener"
href="https://github.com/search?q=org%3Aappwrite+org%3Autopia-php+is%3Aissue+label%3Ahacktoberfest+created%3A%3E2020-01-01&type=issues"
>
<a aria-label="View all Hacktoberfest issues" target="_blank" rel="noopener" href={githubLink}>
<Button type="primary" icon="github" text="View all Hacktoberfest issues">
{#if showBadge}
{#if $totalIssuesAmount !== null}
Expand Down
6 changes: 5 additions & 1 deletion src/routes/github.json.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
export const get = async (request) => {
const issuesQuery = await fetch(
'https://api.github.com/search/issues?q=org%3Aappwrite+org%3Autopia-php+is%3Aissue+label%3Ahacktoberfest+created%3A%3E2020-01-01&type=issues'
'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'
);

const issuesJson = await issuesQuery.json();

issuesJson.items = issuesJson.items
.filter((issue, index) => {
const firstIndex = issuesJson.items.findIndex((i) => i.title === issue.title);
return firstIndex === index;
})
.filter((_issue, index) => {
return index < 5;
})
Expand Down
2 changes: 1 addition & 1 deletion src/routes/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
>
Celebrate Open Source with Hacktoberfest
</h1>
<p class="mt-[27px] mb-[40px] lg:max-w-lg leading-snug text-[18px] text-black">
<p class="mt-[27px] mb-[40px] lg:max-w-lg leading-snug text-[18px] text-[#454545]">
Your open source journey begins with a pull request. We've curated a list of beginner
friendly issues for you to check out.
</p>
Expand Down
63 changes: 49 additions & 14 deletions src/routes/index/_about.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,59 @@

<section class="bg-white pt-[80px]" id="section-about">
<div class="container mx-auto px-6">
<div class="text-center max-w-4xl mx-auto">
<p class="text-black uppercase text-[14px] title tracking-[2px]">about the event</p>
<h1 class="title text-[32px] lg:text-[48px] font-semibold mt-[25px] mb-[32px]">
About Hacktoberfest
</h1>

<div class="flex justify-center mb-[32px]">
<img class="h-[140px]" src="/icons/bottles.svg" width="266" height="140" alt="Bottles" />
<div class="text-center">
<div class="max-w-4xl mx-auto">
<p class="text-black uppercase text-[14px] title tracking-[2px]">about the event</p>
<h1 class="title text-[32px] lg:text-[48px] font-semibold mt-[25px] mb-[32px]">
About Hacktoberfest
</h1>

<div class="flex justify-center mb-[32px]">
<img class="h-[140px]" src="/icons/bottles.svg" width="266" height="140" alt="Bottles" />
</div>

<p class="text-[16px] text-[#454545] leading-relaxed">
Hacktoberfest is a month-long celebration of open source software run by DigitalOcean.
Hacktoberfest is open to everyone, from first-time contributors to seasoned open source
developers. Appwrite is one of the projects that you can contribute to.
</p>
</div>

<p class="text-black text-[16px]">
Hacktoberfest is a month-long celebration of open source software run by DigitalOcean.
Hacktoberfest is open to everyone, from first-time contributors to seasoned open source
developers. Appwrite is one of the projects that you can contribute to.
</p>
<div
class="grid grid-cols-12 rounded-[1.5rem] mt-[5rem] mb-[1rem] lg:mt-[7.375rem] lg:mb-[5rem] p-[2.75rem] lg:p-[3.375rem] linear-bg"
>
<div class="w-full h-full flex items-center justify-center col-span-12 lg:col-span-3">
<img src="/hacktoberfest.svg" class="max-w-sm lg:max-w-none w-full" alt="" />
</div>
<div
class="lg:pl-20 col-span-12 lg:col-span-9 flex flex-col items-center justify-start lg:items-start"
>
<h1
class="text-center lg:text-left title my-10 lg:my-8 font-semibold text-white text-[1.8rem] lg:text-[2.1rem]"
>
Our journey with Hacktoberfest
</h1>
<p class=" hidden lg:block text-justify pb-[3rem] text-[1.1rem] text-white">
Hacktoberfest is an initiative that very deeply matters to us. We launched the first
iteration of Appwrite as a mere open-source project back in September 2019.
Hacktoberfest 2019 was truly a game-changer for us, as we saw over 200 contributions
from some lovely members of the open-source fraternity that October.
</p>

<div class="w-full flex justify-center lg:justify-start">
<a href="https://appwrite.io/hacktoberfest" target="_blank">
<Button text="Read our blog post" type="red" />
</a>
</div>
</div>
</div>
</div>

<div class="grid grid-cols-12 gap-x-0 gap-y-12 lg:gap-12">
<div class="col-span-12 lg:col-span-4 pt-20 flex items-center justify-center">
<div class="lg:max-w-md flex flex-col items-center lg:items-start text-center lg:text-left">
<h2 class="title text-[24px] lg:text-[32px] font-semibold">About Appwrite</h2>
<p class="py-8 text-[16px]">
<p class="py-8 text-[16px] text-[#454545] leading-relaxed">
Appwrite is an open source, secure end-to-end backend server for Web, Mobile, and
Flutter developers that is packaged as a set of Docker containers for easy deployment.
</p>
Expand All @@ -51,4 +82,8 @@
.custom-shadow {
box-shadow: -20px -9px 20px 0px rgb(0 0 0 / 5%);
}

.linear-bg {
background: linear-gradient(180deg, #f02e65 0%, #d72456 100%);
}
</style>
92 changes: 87 additions & 5 deletions src/routes/index/_howto.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script>
import { githubLink } from '../../stores';

import ButtonGithub from '../../comps/ButtonGithub.svelte';
</script>

Expand All @@ -8,7 +10,7 @@
<div class="col-span-12 lg:col-span-4">
<div class="lg:max-w-sm flex flex-col text-left items-start">
<h2 class="title text-[24px] lg:text-[32px] font-semibold">How can you contribute?</h2>
<p class="py-8 text-[16px]">
<p class="py-8 text-[16px] text-[#454545] leading-relaxed">
There are different ways you can contribute to Appwrite. All accepted contributions
qualify for receiving Appwrite Swag!
</p>
Expand Down Expand Up @@ -42,9 +44,29 @@
<div class="max-w-sm">
<h3 class="mt-[40px] mb-[16px] text-[18px] font-bold">Contributions to open issues</h3>

<p class="text-[16px]">
<p class="mb-[1.875rem] text-[16px] text-[#454545] leading-relaxed">
We have a curated list of Hacktoberfest issues that are ready for you to pick up.
</p>

<a
href={githubLink}
class="flex items-center space-x-[0.44rem] text-[16px] font-bold text-[#454545] leading-relaxed"
>
<span>View issues</span>

<svg
width="14"
height="8"
viewBox="0 0 14 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3536 3.64645C13.5488 3.84171 13.5488 4.15829 13.3536 4.35355L10.1716 7.53553C9.97631 7.7308 9.65973 7.7308 9.46447 7.53553C9.2692 7.34027 9.2692 7.02369 9.46447 6.82843L12.2929 4L9.46447 1.17157C9.2692 0.976311 9.2692 0.659728 9.46447 0.464466C9.65973 0.269204 9.97631 0.269204 10.1716 0.464466L13.3536 3.64645ZM13 4.5H0V3.5H13V4.5Z"
fill="#454545"
/>
</svg>
</a>
</div>
</div>

Expand All @@ -71,9 +93,29 @@
<div class="max-w-sm">
<h3 class="mt-[40px] mb-[16px] text-[18px] font-bold">Build a demo app</h3>

<p class="text-[16px]">
<p class="mb-[1.875rem] text-[16px] text-[#454545] leading-relaxed">
Build a demo app with your favourite technologies using an Appwrite Backend.
</p>

<a
href="https://github.com/appwrite/appwrite/issues/1773"
class="flex items-center space-x-[0.44rem] text-[16px] font-bold text-[#454545] leading-relaxed"
>
<span>View issue</span>

<svg
width="14"
height="8"
viewBox="0 0 14 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3536 3.64645C13.5488 3.84171 13.5488 4.15829 13.3536 4.35355L10.1716 7.53553C9.97631 7.7308 9.65973 7.7308 9.46447 7.53553C9.2692 7.34027 9.2692 7.02369 9.46447 6.82843L12.2929 4L9.46447 1.17157C9.2692 0.976311 9.2692 0.659728 9.46447 0.464466C9.65973 0.269204 9.97631 0.269204 10.1716 0.464466L13.3536 3.64645ZM13 4.5H0V3.5H13V4.5Z"
fill="#454545"
/>
</svg>
</a>
</div>
</div>

Expand Down Expand Up @@ -101,10 +143,30 @@
<div class="max-w-sm">
<h3 class="mt-[40px] mb-[16px] text-[18px] font-bold">Write a blog post</h3>

<p class="text-[16px]">
<p class="mb-[1.875rem] text-[16px] text-[#454545] leading-relaxed">
Used Appwrite in a recent project? Built something cool with Appwrite? Tell the
community about it in an awesome blog post.
</p>

<a
href="https://github.com/appwrite/appwrite/issues/1774"
class="flex items-center space-x-[0.44rem] text-[16px] font-bold text-[#454545] leading-relaxed"
>
<span>View issue</span>

<svg
width="14"
height="8"
viewBox="0 0 14 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3536 3.64645C13.5488 3.84171 13.5488 4.15829 13.3536 4.35355L10.1716 7.53553C9.97631 7.7308 9.65973 7.7308 9.46447 7.53553C9.2692 7.34027 9.2692 7.02369 9.46447 6.82843L12.2929 4L9.46447 1.17157C9.2692 0.976311 9.2692 0.659728 9.46447 0.464466C9.65973 0.269204 9.97631 0.269204 10.1716 0.464466L13.3536 3.64645ZM13 4.5H0V3.5H13V4.5Z"
fill="#454545"
/>
</svg>
</a>
</div>
</div>

Expand Down Expand Up @@ -136,10 +198,30 @@
<div class="max-w-sm">
<h3 class="mt-[40px] mb-[16px] title text-[18px] font-bold">Make a tutorial</h3>

<p class="text-[16px]">
<p class="mb-[1.875rem] text-[16px] text-[#454545] leading-relaxed">
From video tutorials to written tutorials, help new community members get started with
Appwrite!
</p>

<a
href="https://github.com/appwrite/appwrite/issues/1775"
class="flex items-center space-x-[0.44rem] text-[16px] font-bold text-[#454545] leading-relaxed"
>
<span>View issue</span>

<svg
width="14"
height="8"
viewBox="0 0 14 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.3536 3.64645C13.5488 3.84171 13.5488 4.15829 13.3536 4.35355L10.1716 7.53553C9.97631 7.7308 9.65973 7.7308 9.46447 7.53553C9.2692 7.34027 9.2692 7.02369 9.46447 6.82843L12.2929 4L9.46447 1.17157C9.2692 0.976311 9.2692 0.659728 9.46447 0.464466C9.65973 0.269204 9.97631 0.269204 10.1716 0.464466L13.3536 3.64645ZM13 4.5H0V3.5H13V4.5Z"
fill="#454545"
/>
</svg>
</a>
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/routes/index/_rewards.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
4 contributions or more
</h2>

<p class="text-[16px]">
<p class="text-[16px] text-[#454545] leading-relaxed">
Limited Edition Appwrite Hacktoberfest T-shirt + Hacktoberfest Sticker pack + OG
Appwrite Sticker Pack + Mug
</p>
Expand Down Expand Up @@ -59,7 +59,7 @@
4 contributions or more
</h2>

<p class="text-[16px]">
<p class="text-[16px] text-[#454545] leading-relaxed">
Limited Edition Appwrite Hacktoberfest T-shirt + Hacktoberfest Sticker pack + OG
Appwrite Sticker Pack + Mug
</p>
Expand All @@ -85,7 +85,7 @@
>
<h2 class="mt-[32px] mb-[12px] title text-[20px] font-semibold">3 contributions</h2>

<p class="text-[16px]">
<p class="text-[16px] text-[#454545] leading-relaxed">
OG Appwrite sticker pack + Limited Edition Hacktoberfest sticker pack + Mug
</p>

Expand All @@ -110,7 +110,7 @@
>
<h2 class="mt-[32px] mb-[12px] title text-[20px] font-semibold">2 contributions</h2>

<p class="text-[16px]">
<p class="text-[16px] text-[#454545] leading-relaxed">
OG Appwrite sticker pack + Limited Edition Hacktoberfest sticker pack
</p>

Expand All @@ -135,7 +135,7 @@
>
<h2 class="mt-[32px] mb-[12px] title text-[20px] font-semibold">1 contribution</h2>

<p class="text-[16px]">OG Appwrite sticker pack</p>
<p class="text-[16px] text-[#454545] leading-relaxed">OG Appwrite sticker pack</p>

<div class="flex justify-center absolute left-0 -top-10 w-full pointer-events-none">
<div
Expand Down
21 changes: 19 additions & 2 deletions src/stores.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { writable } from 'svelte/store';

export const DurationMinute = 1000 * 60;

export const githubLink =
'https://github.com/search?q=org%3Aappwrite+org%3Autopia-php+is%3Aissue+label%3Ahacktoberfest+created%3A%3E2021-01-01+is%3Aopen&type=issues';

export const totalIssuesAmount = writable(null);

export const githubIssues = writable(null);
Expand Down Expand Up @@ -132,12 +135,13 @@ export const events = writable([
},

{
isOpened: true,
isOpened: false,
timeISO: '2021-09-29T15:00:00.000Z',
durationInMs: DurationMinute * 105,
name: 'Hacktoberfest Kickoff #2',
link: 'https://www.linkedin.com/events/hacktoberfestkickoff-26844884710854811649/',
link: 'https://www.youtube.com/watch?v=cyJAz-c1OWs',
presenter: 'Julia, Lazy Git, Forem, HashiCorp, Symfony',
isFinished: true,
sessions: [
{
name: 'What is Hacktoberfest?',
Expand Down Expand Up @@ -213,12 +217,25 @@ export const events = writable([
}
]
},

{
isOpened: true,
timeISO: '2021-10-01T03:00:00.000Z',
durationInMs: DurationMinute * 60,
name: 'Hacktoberfest Countdown Party! 🥳',
link: 'https://www.linkedin.com/events/hacktoberfestcountdownparty6849034378459287554/',
presenter: 'Let the Hacktoberfest begin.',
isFinished: false,
sessions: []
},

{
isOpened: false,
timeISO: '2021-10-06T16:00:00.000Z',
durationInMs: DurationMinute * 90,
name: 'DevOps Day',
presenter: 'Appwrite, TBA',
// link: 'TODO: Add link to LinkedIn',
sessions: [
{
name: 'Intro to Docker Compose and Appwrite',
Expand Down
Loading