ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add github stars to landing page (#543)

Browse Source 
* added github stars

* Update Navigation.svelte

* debug data

* remove prerender

* feat: githubstar change

* pass data from server to client

* remove console.log

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Pranav Murali
2025-01-22 15:39:22 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 8eb9236bc0
commit 29fa038760
5 changed files with 79 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/classroomio-com/src/lib/Navigation/Navigation.svelte
+59 -49
View File
@@ -1,12 +1,14 @@
<script lang="ts"> <script lang="ts">
import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
import { fly } from 'svelte/transition';
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
import CourseIcon from '$lib/Icons/CourseIcon.svelte';
import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
import CloseLarge from 'carbon-icons-svelte/lib/CloseLarge.svelte';
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
import MapCenter from 'carbon-icons-svelte/lib/MapCenter.svelte';
import TextAlignJustify from 'carbon-icons-svelte/lib/TextAlignJustify.svelte';
import { fly } from 'svelte/transition';
export let stars = 0;
let showDrawer = false; let showDrawer = false;
let showSolutions = false; let showSolutions = false;
@@ -78,7 +80,7 @@
on:mouseenter={() => (showSolutions = true)} on:mouseenter={() => (showSolutions = true)}
on:mouseleave={closeSolutions} on:mouseleave={closeSolutions}
class="flex items-center hover:bg-gray-100 {showSolutions && class="flex items-center hover:bg-gray-100 {showSolutions &&
'bg-gray-100'} px-4 py-2 rounded-md" 'bg-gray-100'} px-4 py-2 rounded-md transition-all duration-200"
on:click={() => (showSolutions = !showSolutions)} on:click={() => (showSolutions = !showSolutions)}
class:active={isSolutionsActive} class:active={isSolutionsActive}
> >
@@ -93,7 +95,7 @@
> >
{#each solutions as solution} {#each solutions as solution}
<a <a
class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2" class="flex justify-between items-center w-full rounded-lg hover:bg-gray-100 hover:cursor-pointer p-2 transition-colors duration-200"
href="/{solution.key}" href="/{solution.key}"
on:click={() => (showSolutions = false)} on:click={() => (showSolutions = false)}
> >
@@ -123,7 +125,9 @@
class="text-gray-800 font-semibold text-sm cursor-pointer" class="text-gray-800 font-semibold text-sm cursor-pointer"
class:active={activeLink.startsWith('/tools')} class:active={activeLink.startsWith('/tools')}
> >
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Free Tools</li> <li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">
Free Tools
</li>
</a> </a>
<a <a
@@ -131,37 +135,52 @@
class="text-gray-800 font-semibold text-sm cursor-pointer" class="text-gray-800 font-semibold text-sm cursor-pointer"
class:active={activeLink.startsWith('/blog')} class:active={activeLink.startsWith('/blog')}
> >
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Blog</li> <li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">Blog</li>
</a> </a>
<a <a
href="/pricing" href="/pricing"
class="text-gray-800 font-semibold text-sm cursor-pointer" class="text-gray-800 font-semibold text-sm cursor-pointer"
class:active={activeLink.startsWith('/pricing')} class:active={activeLink.startsWith('/pricing')}
> >
<li class="hover:bg-gray-100 px-4 py-2 rounded-md">Pricing</li> <li class="hover:bg-gray-100 px-4 py-2 rounded-md transition-all duration-200">Pricing</li>
</a> </a>
</ul> </ul>
</nav> </nav>
<div class="justify-between items-center flex-row hidden md:hidden lg:flex"> <div class="justify-between items-center flex-row hidden md:hidden lg:flex gap-3">
<a href="/discord" target="_blank"> <a
href="/discord"
target="_blank"
class="flex items-center hover:opacity-80 transition-opacity duration-200"
>
<img <img
loading="lazy" loading="lazy"
alt="discord logo" alt="discord logo"
src="/discord-blue.png" src="/discord-blue.png"
class="w-8 h-6 mr-4 cursor-pointer" class="w-6 h-5 cursor-pointer"
/>
</a>
<a href="/github" target="_blank">
<img
loading="lazy"
alt="github logo"
src="/github-mark.png"
class="w-6 h-6 mr-4 cursor-pointer"
/> />
</a> </a>
<div class="flex items-center">
<a
href="/github"
target="_blank"
class="flex items-center gap-1.5 p-2 rounded-md transition-all duration-200 ease-in-out hover:bg-gray-100 group"
>
<img
loading="lazy"
alt="github logo"
src="/github-mark.png"
class="w-5 h-5 cursor-pointer transition-transform duration-200 group-hover:scale-110"
/>
<span
class="text-sm text-gray-600 font-medium leading-none transition-colors duration-200 group-hover:text-black"
>
{stars}
</span>
</a>
</div>
<a <a
class="font-medium text-sm after:content-['→'] after:ml-2" class="font-medium text-sm after:content-['→'] after:ml-2 hover:opacity-80 transition-opacity duration-200"
href="https://app.classroomio.com" href="https://app.classroomio.com"
> >
Dashboard Dashboard
@@ -200,7 +219,7 @@
<ul class="flex items-center flex-col lg:flex-row justify-between w-full"> <ul class="flex items-center flex-col lg:flex-row justify-between w-full">
<li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full"> <li class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer w-full">
<button <button
class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg" class="w-full flex items-center justify-between hover:bg-gray-100 py-3 px-4 rounded-lg transition-all duration-200"
on:click={handleShowDrawer} on:click={handleShowDrawer}
class:active={isSolutionsActive} class:active={isSolutionsActive}
> >
@@ -216,7 +235,7 @@
}} }}
> >
<p <p
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5" class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5 transition-colors duration-200"
> >
{solution.title} {solution.title}
</p> </p>
@@ -225,27 +244,15 @@
</div> </div>
{/if} {/if}
</li> </li>
<!-- Free Tools -->
<a <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full transition-all duration-200"
on:click={handleShowSolutions} on:click={handleShowSolutions}
href="/tools" href="/tools"
> >
<li>Free Tools</li> <li>Free Tools</li>
</a> </a>
<!-- <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={() => {
handleShowSolutions();
}}
class:active={activeLink.startsWith('/docs')}
href="/docs"
target="_blank"
>
<li>Docs</li>
</a> -->
<a <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full transition-all duration-200"
on:click={() => { on:click={() => {
handleShowSolutions(); handleShowSolutions();
}} }}
@@ -254,9 +261,8 @@
> >
<li>Blog</li> <li>Blog</li>
</a> </a>
<!-- Pricing -->
<a <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full transition-all duration-200"
on:click={() => { on:click={() => {
handleShowSolutions(); handleShowSolutions();
}} }}
@@ -266,7 +272,7 @@
<li>Pricing</li> <li>Pricing</li>
</a> </a>
<a <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full transition-all duration-200"
on:click={() => { on:click={() => {
handleShowSolutions(); handleShowSolutions();
}} }}
@@ -281,31 +287,35 @@
<a <a
href="/discord" href="/discord"
target="_blank" target="_blank"
class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg" class="flex items-center rounded-md w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg transition-all duration-200"
> >
<img <img
loading="lazy" loading="lazy"
alt="discord logo" alt="discord logo"
src="/discord-blue.png" src="/discord-blue.png"
class="w-8 h-6 mr-2 cursor-pointer" class="w-6 h-5 mr-2 cursor-pointer"
/> />
<span>Discord</span> <span>Discord</span>
</a> </a>
<a <a
href="/github" href="/github"
target="_blank" target="_blank"
class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg" class="flex items-center rounded-md w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg group transition-all duration-200"
> >
<img <img
loading="lazy" loading="lazy"
alt="github logo" alt="github logo"
src="/github-mark.png" src="/github-mark.png"
class="w-6 h-6 mr-3 cursor-pointer" class="w-5 h-5 cursor-pointer transition-transform duration-200 group-hover:scale-110"
/> />
<span>Github</span> <span class="ml-3 transition-colors duration-200 group-hover:text-black">Github</span>
<span
class="text-sm text-gray-600 font-medium ml-1 transition-colors duration-200 group-hover:text-black"
>({stars})</span
>
</a> </a>
<a <a
class="font-semibold after:content-['→'] rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg" class="font-semibold after:content-['→'] rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg transition-all duration-200"
href="https://app.classroomio.com" href="https://app.classroomio.com"
> >
Dashboard Dashboard
apps/classroomio-com/src/routes/+layout.server.ts
+15
View File
@@ -0,0 +1,15 @@
export async function load({ fetch }) {
let githubStars = 0;
try {
const response = await fetch('http://api.github.com/repos/classroomio/classroomio');
const data = await response.json();
githubStars = data?.stargazers_count || 0;
} catch (error) {
console.error('Error fetching GitHub stars:', error);
}
return {
githubStars
};
}
apps/classroomio-com/src/routes/+layout.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
<MetaTags {...metaTags} /> <MetaTags {...metaTags} />
<div class="overflow-hidden bg-white"> <div class="overflow-hidden bg-white">
<Navigation /> <Navigation stars={data.githubStars} />
<PageTransition url={data.url}> <PageTransition url={data.url}>
{#if $page.status === 404} {#if $page.status === 404}
apps/classroomio-com/src/routes/+layout.ts
+3 -2
View File
@@ -2,10 +2,11 @@ import type { MetaTagsProps } from 'svelte-meta-tags';
export const prerender = true; export const prerender = true;
export function load({ url }) { export function load({ url, data }) {
return { return {
baseMetaTags: getBaseMetaTags(url), baseMetaTags: getBaseMetaTags(url),
url: url.pathname url: url.pathname,
...data,
}; };
} }
package.json
+1 -1
View File
@@ -3,7 +3,7 @@
"version": "0.1.1", "version": "0.1.1",
"scripts": { "scripts": {
"build": "turbo run build", "build": "turbo run build",
"dev": "turbo prepare && turbo run dev", "dev": "turbo prepare --concurrency 13 && turbo run dev",
"lint": "turbo run lint", "lint": "turbo run lint",
"clean": "turbo clean && rm -rf node_modules", "clean": "turbo clean && rm -rf node_modules",
"format": "prettier . --write", "format": "prettier . --write",