From 03ffbf305e8014d7c207844326b82175cb780abb Mon Sep 17 00:00:00 2001 From: michealdev Date: Mon, 11 Nov 2024 13:02:09 +0000 Subject: [PATCH 1/2] Enhance layout and styling across multiple components; fix hero section social links; add contributors section. --- astro.config.mjs | 3 + src/components/Contubuters.astro | 399 +++++++++++++++++++++++++++++ src/components/Header.astro | 2 +- src/components/Hero.astro | 73 ++++++ src/layouts/Layout.astro | 180 +++++++++++++ src/pages/about.astro | 2 + src/pages/api/contributors.json.ts | 119 +++++++++ src/pages/contributors.json.ts | 121 +++++++++ src/pages/index.astro | 2 +- src/pages/team.astro | 397 ++++++++++++++++++++++++++++ src/styles/Contributors.css | 186 ++++++++++++++ src/styles/Header.css | 19 +- src/styles/Hero.css | 85 +++++- src/styles/about.css | 4 +- src/styles/blog.css | 5 +- src/styles/global.css | 38 ++- 16 files changed, 1607 insertions(+), 28 deletions(-) create mode 100644 src/components/Contubuters.astro create mode 100644 src/layouts/Layout.astro create mode 100644 src/pages/api/contributors.json.ts create mode 100644 src/pages/contributors.json.ts create mode 100644 src/pages/team.astro create mode 100644 src/styles/Contributors.css diff --git a/astro.config.mjs b/astro.config.mjs index f9a2204..65c2f1f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -15,4 +15,7 @@ export default defineConfig({ }), sitemap(), ], + vite: { + envPrefix: 'GITHUB_', + }, }); diff --git a/src/components/Contubuters.astro b/src/components/Contubuters.astro new file mode 100644 index 0000000..0f61577 --- /dev/null +++ b/src/components/Contubuters.astro @@ -0,0 +1,399 @@ +--- +import { Icon } from "astro-icon/components"; +import "../styles/Contributors.css"; + +const GITHUB_TOKEN = import.meta.env.PUBLIC_GITHUB_TOKEN; +if (!GITHUB_TOKEN) { + console.error("Missing PUBLIC_GITHUB_TOKEN environment variable"); +} + +// Simplified GraphQL query to reduce nested properties +const query = ` +query { + organization(login: "Vortex-Linux") { + repositories(first: 100, privacy: PUBLIC) { + nodes { + name + defaultBranchRef { + target { + ... on Commit { + history(first: 100) { + nodes { + author { + user { + login + url + avatarUrl + name + } + date + } + } + } + } + } + } + } + } + } +}`; + +const getContributorsData = async () => { + try { + if (!GITHUB_TOKEN) { + throw new Error( + "GitHub token is not configured. Please add PUBLIC_GITHUB_TOKEN to your .env file", + ); + } + + const response = await fetch("https://api.github.com/graphql", { + method: "POST", + headers: { + Authorization: `Bearer ${GITHUB_TOKEN}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ query }), + }); + + if (!response.ok) { + throw new Error(`GitHub API responded with ${response.status}`); + } + + const { data, errors } = await response.json(); + + if (errors) { + throw new Error(errors[0].message); + } + + if (!data?.organization?.repositories?.nodes) { + throw new Error("No repository data received"); + } + + const repositories = data.organization.repositories.nodes; + const contributorsMap = new Map(); + + repositories.forEach((repo) => { + if (!repo?.defaultBranchRef?.target?.history?.nodes) return; + + const commits = repo.defaultBranchRef.target.history.nodes; + commits.forEach((commit) => { + if (!commit?.author?.user) return; + + const user = commit.author.user; + const date = new Date(commit.author.date); + + if (!contributorsMap.has(user.login)) { + contributorsMap.set(user.login, { + login: user.login, + url: user.url, + avatarUrl: user.avatarUrl, + contributions: 1, // Count commits instead of using contributionsCollection + lastContribution: date, + firstContribution: date, + repositories: new Set([repo.name]), + }); + } else { + const contributor = contributorsMap.get(user.login); + contributor.contributions++; + contributor.repositories.add(repo.name); + contributor.lastContribution = + date > contributor.lastContribution + ? date + : contributor.lastContribution; + contributor.firstContribution = + date < contributor.firstContribution + ? date + : contributor.firstContribution; + } + }); + }); + + // Convert contributors map to array and format data + const contributors = Array.from(contributorsMap.values()).map((c) => ({ + ...c, + repositories: Array.from(c.repositories), + })); + + const oneMonthAgo = new Date(); + oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1); + + return { + activeContributors: contributors + .filter((c) => c.lastContribution >= oneMonthAgo) + .sort((a, b) => b.contributions - a.contributions), + inactiveContributors: contributors + .filter((c) => c.lastContribution < oneMonthAgo) + .sort((a, b) => b.contributions - a.contributions), + }; + } catch (error) { + console.error("Failed to fetch contributors:", error); + return { activeContributors: [], inactiveContributors: [] }; + } +}; + +const { activeContributors, inactiveContributors } = + await getContributorsData(); +--- + +
+

Active Contributors

+
+ { + activeContributors.length ? ( + activeContributors.map((contributor, index) => ( +
+
+
+ {`${contributor.login}'s +
{index + 1}
+
+
+

{contributor.login}

+

+ {contributor.contributions} contributions +
+ + Last active: + {new Date( + contributor.lastContribution, + ).toLocaleDateString()} + +

+
+ + + +
+
+ )) + ) : ( +
+ {Array(3) + .fill(0) + .map(() => ( +
+
+
+
+
+
+
+ ))} +
+ ) + } +
+ +

Past Contributors

+
+ { + inactiveContributors.length ? ( + inactiveContributors.map((contributor, index) => ( +
+
+
+ {`${contributor.login}'s +
{index + 1}
+
+
+

{contributor.login}

+

+ {contributor.contributions} contributions +
+ + Last active: + {new Date( + contributor.lastContribution, + ).toLocaleDateString()} + +

+
+ + + +
+
+ )) + ) : ( +
+
+
+ ) + } +
+
+ + diff --git a/src/components/Header.astro b/src/components/Header.astro index c07885d..599ad67 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -9,7 +9,7 @@ const isDownloadPage = currentPath === "/download" || currentPath === "/download/"; --- -
+
+ + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..97cd9c5 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,180 @@ +--- +import { SITE_TITLE } from "../consts"; +import { Icon } from "astro-icon/components"; +import { navData } from "../content/data/navData"; +import "../styles/Header.css"; + +const currentPath = Astro.url.pathname; +const isDownloadPage = + currentPath === "/download" || currentPath === "/download/"; +const { title, description, hasHero } = Astro.props; +--- + + + + + + {title ? `${title} - ${SITE_TITLE}` : SITE_TITLE} + + + + +
+
+ +
+ +
+ +
+ + { + !isDownloadPage && ( + + Download + + ) + } +
+
+
+ + + + + diff --git a/src/pages/about.astro b/src/pages/about.astro index 0c60824..daaac05 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -2,6 +2,7 @@ import Base from "../components/Base.astro"; import TeamMembers from "../components/TeamMembers.astro"; import { aboutData } from "../content/data/aboutData"; +import Contributors from "../components/Contubuters.astro"; import "../styles/about.css"; --- @@ -32,5 +33,6 @@ import "../styles/about.css"; + diff --git a/src/pages/api/contributors.json.ts b/src/pages/api/contributors.json.ts new file mode 100644 index 0000000..660e09f --- /dev/null +++ b/src/pages/api/contributors.json.ts @@ -0,0 +1,119 @@ +import type { APIRoute } from 'astro'; + +const GITHUB_TOKEN = import.meta.env.GITHUB_TOKEN; +const REPO_OWNER = "Vortex-Linux"; +const REPOS = [ + "Debian-VM-Base", + "Arch-VM-Base", + "ship", + "website", + "vortex-installer", + "Ship-GUI", + "FreeBSD-VM-Base", + "Alpine-VM-Base", + "documentation", + "live-iso", + ".github" +]; + +// Create the repositories query part dynamically +const repoQueries = REPOS.map((repo, index) => ` + repo${index}: repository(owner: "${REPO_OWNER}", name: "${repo}") { + name + defaultBranchRef { + target { + ... on Commit { + history(first: 100) { + nodes { + author { + user { + login + avatarUrl + url + } + } + committedDate + } + } + } + } + } + } +`).join('\n'); + +const query = `{ ${repoQueries} }`; + +function isActiveContributor(lastContributionDate: string) { + const threeMonthsAgo = new Date(); + threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3); + return new Date(lastContributionDate) > threeMonthsAgo; +} +export const GET: APIRoute = async () => { + try { + const response = await fetch("https://api.github.com/graphql", { + method: "POST", + headers: { + Authorization: `Bearer ${GITHUB_TOKEN}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ query }), + }); + + if (!response.ok) { + throw new Error(`GitHub API responded with status ${response.status}`); + } + + const data = await response.json(); + const allContributors = new Map(); + + Object.values(data.data).forEach((repo: any) => { + if (!repo?.defaultBranchRef?.target?.history?.nodes) return; + + repo.defaultBranchRef.target.history.nodes.forEach((commit: any) => { + const user = commit.author?.user; + if (!user) return; + + if (allContributors.has(user.login)) { + const existing = allContributors.get(user.login); + existing.contributions++; + if (!existing.lastContribution || commit.committedDate > existing.lastContribution) { + existing.lastContribution = commit.committedDate; + existing.isActive = isActiveContributor(commit.committedDate); + } + } else { + allContributors.set(user.login, { + login: user.login, + avatarUrl: user.avatarUrl, + url: user.url, + contributions: 1, + lastContribution: commit.committedDate, + isActive: isActiveContributor(commit.committedDate) + }); + } + }); + }); + const contributors = Array.from(allContributors.values()); + const activeContributors = contributors + .filter(c => c.isActive) + .sort((a, b) => b.contributions - a.contributions); + const inactiveContributors = contributors + .filter(c => !c.isActive) + .sort((a, b) => b.contributions - a.contributions); + + return new Response(JSON.stringify({ activeContributors, inactiveContributors }), { + status: 200, + headers: { + 'Content-Type': 'application/json', + 'Cache-Control': 'public, max-age=3600' // Cache for 1 hour + } + }); + } catch (error) { + console.error('Error:', error); + return new Response(JSON.stringify({ error: 'Failed to fetch contributors' }), { + status: 500, + headers: { + 'Content-Type': 'application/json' + } + }); + } +} diff --git a/src/pages/contributors.json.ts b/src/pages/contributors.json.ts new file mode 100644 index 0000000..c988679 --- /dev/null +++ b/src/pages/contributors.json.ts @@ -0,0 +1,121 @@ +import type { APIRoute } from 'astro'; + +const GITHUB_TOKEN = import.meta.env.GITHUB_TOKEN; +const REPO_OWNER = "Vortex-Linux"; +const REPOS = [ + "Debian-VM-Base", + "Arch-VM-Base", + "ship", + "website", + "vortex-installer", + "Ship-GUI", + "FreeBSD-VM-Base", + "Alpine-VM-Base", + "documentation", + "live-iso", + ".github" +]; + +// Create the repositories query part dynamically +const repoQueries = REPOS.map((repo, index) => ` + repo${index}: repository(owner: "${REPO_OWNER}", name: "${repo}") { + name + defaultBranchRef { + target { + ... on Commit { + history(first: 100) { + nodes { + author { + user { + login + avatarUrl + url + } + } + committedDate + } + } + } + } + } + } +`).join('\n'); + +const query = `{ ${repoQueries} }`; + +function isActiveContributor(lastContributionDate: string) { + const threeMonthsAgo = new Date(); + threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3); + return new Date(lastContributionDate) > threeMonthsAgo; +} + +export const GET: APIRoute = async () => { + try { + const response = await fetch("https://api.github.com/graphql", { + method: "POST", + headers: { + Authorization: `Bearer ${GITHUB_TOKEN}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ query }), + }); + + if (!response.ok) { + throw new Error(`GitHub API responded with status ${response.status}`); + } + + const data = await response.json(); + const allContributors = new Map(); + + Object.values(data.data).forEach((repo: any) => { + if (!repo?.defaultBranchRef?.target?.history?.nodes) return; + + repo.defaultBranchRef.target.history.nodes.forEach((commit: any) => { + const user = commit.author?.user; + if (!user) return; + + if (allContributors.has(user.login)) { + const existing = allContributors.get(user.login); + existing.contributions++; + if (!existing.lastContribution || commit.committedDate > existing.lastContribution) { + existing.lastContribution = commit.committedDate; + existing.isActive = isActiveContributor(commit.committedDate); + } + } else { + allContributors.set(user.login, { + login: user.login, + avatarUrl: user.avatarUrl, + url: user.url, + contributions: 1, + lastContribution: commit.committedDate, + isActive: isActiveContributor(commit.committedDate) + }); + } + }); + }); + + const contributors = Array.from(allContributors.values()); + const activeContributors = contributors + .filter(c => c.isActive) + .sort((a, b) => b.contributions - a.contributions); + const inactiveContributors = contributors + .filter(c => !c.isActive) + .sort((a, b) => b.contributions - a.contributions); + + return new Response(JSON.stringify({ activeContributors, inactiveContributors }), { + status: 200, + headers: { + 'Content-Type': 'application/json', + 'Cache-Control': 'public, max-age=3600' // Cache for 1 hour + } + }); + } catch (error) { + console.error('Error:', error); + return new Response(JSON.stringify({ error: 'Failed to fetch contributors' }), { + status: 500, + headers: { + 'Content-Type': 'application/json' + } + }); + } +} diff --git a/src/pages/index.astro b/src/pages/index.astro index 3bd14c9..58a8629 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,7 +6,7 @@ import KeyFeatures from "../components/KeyFeatures.astro"; import ContributorSection from "../components/ContributorSection.astro"; --- - + diff --git a/src/pages/team.astro b/src/pages/team.astro new file mode 100644 index 0000000..f2bc1e2 --- /dev/null +++ b/src/pages/team.astro @@ -0,0 +1,397 @@ +--- +import { Icon } from "astro-icon/components"; +import "../styles/Contributors.css"; + +const GITHUB_TOKEN = import.meta.env.PUBLIC_GITHUB_TOKEN; +if (!GITHUB_TOKEN) { + console.error("Missing PUBLIC_GITHUB_TOKEN environment variable"); +} + +// Simplified GraphQL query to reduce nested properties +const query = ` +query { + organization(login: "Vortex-Linux") { + repositories(first: 100, privacy: PUBLIC) { + nodes { + name + defaultBranchRef { + target { + ... on Commit { + history(first: 100) { + nodes { + author { + user { + login + url + avatarUrl + name + } + date + } + } + } + } + } + } + } + } + } +}`; + +const getContributorsData = async () => { + try { + if (!GITHUB_TOKEN) { + throw new Error( + "GitHub token is not configured. Please add PUBLIC_GITHUB_TOKEN to your .env file", + ); + } + + const response = await fetch("https://api.github.com/graphql", { + method: "POST", + headers: { + Authorization: `Bearer ${GITHUB_TOKEN}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ query }), + }); + + if (!response.ok) { + throw new Error(`GitHub API responded with ${response.status}`); + } + + const { data, errors } = await response.json(); + + if (errors) { + throw new Error(errors[0].message); + } + + if (!data?.organization?.repositories?.nodes) { + throw new Error("No repository data received"); + } + + const repositories = data.organization.repositories.nodes; + const contributorsMap = new Map(); + + repositories.forEach((repo) => { + if (!repo?.defaultBranchRef?.target?.history?.nodes) return; + + const commits = repo.defaultBranchRef.target.history.nodes; + commits.forEach((commit) => { + if (!commit?.author?.user) return; + + const user = commit.author.user; + const date = new Date(commit.author.date); + + if (!contributorsMap.has(user.login)) { + contributorsMap.set(user.login, { + login: user.login, + url: user.url, + avatarUrl: user.avatarUrl, + contributions: 1, // Count commits instead of using contributionsCollection + lastContribution: date, + firstContribution: date, + repositories: new Set([repo.name]), + }); + } else { + const contributor = contributorsMap.get(user.login); + contributor.contributions++; + contributor.repositories.add(repo.name); + contributor.lastContribution = + date > contributor.lastContribution + ? date + : contributor.lastContribution; + contributor.firstContribution = + date < contributor.firstContribution + ? date + : contributor.firstContribution; + } + }); + }); + + // Convert contributors map to array and format data + const contributors = Array.from(contributorsMap.values()).map((c) => ({ + ...c, + repositories: Array.from(c.repositories), + })); + + const oneMonthAgo = new Date(); + oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1); + + return { + activeContributors: contributors + .filter((c) => c.lastContribution >= oneMonthAgo) + .sort((a, b) => b.contributions - a.contributions), + inactiveContributors: contributors + .filter((c) => c.lastContribution < oneMonthAgo) + .sort((a, b) => b.contributions - a.contributions), + }; + } catch (error) { + console.error("Failed to fetch contributors:", error); + return { activeContributors: [], inactiveContributors: [] }; + } +}; + +const { activeContributors, inactiveContributors } = + await getContributorsData(); +--- + + +
+

Active Contributors

+
+ { + activeContributors.length ? ( + activeContributors.map((contributor, index) => ( +
+
+
+ {`${contributor.login}'s +
{index + 1}
+
+
+

{contributor.login}

+

+ {contributor.contributions} contributions +
+ + Last active: + {new Date( + contributor.lastContribution, + ).toLocaleDateString()} + +

+
+ + + +
+
+ )) + ) : ( +
+ {Array(3) + .fill(0) + .map(() => ( +
+
+
+
+
+
+
+ ))} +
+ ) + } +
+ +

Past Contributors

+
+ { + inactiveContributors.length ? ( + inactiveContributors.map((contributor, index) => ( +
+
+
+ {`${contributor.login}'s +
{index + 1}
+
+
+

{contributor.login}

+

+ {contributor.contributions} contributions +
+ + Last active: + {new Date( + contributor.lastContribution, + ).toLocaleDateString()} + +

+
+ + + +
+
+ )) + ) : ( +
+
+
+ ) + } +
+
+ + + diff --git a/src/styles/Contributors.css b/src/styles/Contributors.css new file mode 100644 index 0000000..53e3eab --- /dev/null +++ b/src/styles/Contributors.css @@ -0,0 +1,186 @@ +:root { + --contributor-bg: #1a1a1a; + --contributor-hover: #252525; + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --border-color: #333333; +} + +.contributors-section { + padding: 4rem 2rem; + ` color: var(--text-primary); +} + +.contributors-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; + margin: 2rem 0; +} + +.contributor { + background: var(--contributor-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + transition: all 0.2s ease; +} + +.contributor:hover { + background: var(--contributor-hover); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.contributor-inner { + padding: 1.5rem; + display: grid; + grid-template-columns: auto 1fr auto; + gap: 1rem; + align-items: center; +} + +.contributor-photo-wrapper { + position: relative; + width: 80px; + height: 80px; +} + +.contributor-photo { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; +} + +.contributor-rank { + position: absolute; + bottom: -5px; + right: -5px; + background: var(--contributor-hover); + border: 2px solid var(--contributor-bg); + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + font-weight: bold; +} + +.contributor-info { + overflow: hidden; +} + +.contributor-info h3 { + color: var(--text-primary); + margin: 0 0 0.5rem 0; + font-size: 1.2rem; +} + +.stats { + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.4; + margin: 0; +} + +.profile-link { + color: var(--text-secondary); + transition: color 0.2s ease; +} + +.profile-link:hover { + color: var(--text-primary); +} + +.profile-link svg { + width: 24px; + height: 24px; +} + +/* Loading states */ +.contributors-loading { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 2rem; +} + +.contributor-skeleton { + background: var(--contributor-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 1.5rem; + display: flex; + gap: 1rem; + animation: pulse 1.5s infinite; +} + +.photo-skeleton { + width: 80px; + height: 80px; + border-radius: 50%; + background: var(--contributor-hover); + flex-shrink: 0; +} + +.info-skeleton { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.8rem; +} + +.name-skeleton { + height: 24px; + background: var(--contributor-hover); + border-radius: 4px; + width: 60%; +} + +.stats-skeleton { + height: 16px; + background: var(--contributor-hover); + border-radius: 4px; + width: 80%; + opacity: 0.7; +} + +@keyframes pulse { + 0% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} + +.section-title { + font-size: 2.5rem; + margin: 0 0 2rem 0; + color: var(--text-primary); + font-weight: bold; + text-transform: uppercase; + letter-spacing: 2px; + text-align: center; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .contributors-section { + padding: 2rem 1rem; + } + + .contributors-grid { + grid-template-columns: 1fr; + } + + .section-title { + font-size: 2rem; + } +} \ No newline at end of file diff --git a/src/styles/Header.css b/src/styles/Header.css index 4310cce..d254599 100644 --- a/src/styles/Header.css +++ b/src/styles/Header.css @@ -1,12 +1,13 @@ -header { - position: sticky; +.header { + position: fixed; top: 0; left: 0; right: 0; z-index: 1000; - background-color: var(--background-secondary); - box-shadow: 0 2px 4px var(--shadow-color); - transition: background-color 0.3s ease; + background: rgba(var(--background-color-rgb), 0.8); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-content { @@ -48,7 +49,7 @@ header { gap: 1.5rem; } -.nav-item > a { +.nav-item>a { color: var(--text-primary); text-decoration: none; font-size: 1rem; @@ -218,7 +219,7 @@ header .nav-actions .download-button:hover { width: 100%; } - .nav-item > a { + .nav-item>a { padding: 0.5rem 0; width: 100%; justify-content: space-between; @@ -236,7 +237,7 @@ header .nav-actions .download-button:hover { transition: max-height 0.3s ease-out; } - .nav-item.dropdown-open > .dropdown { + .nav-item.dropdown-open>.dropdown { display: block; max-height: 500px; transition: max-height 0.5s ease-in; @@ -297,4 +298,4 @@ header .nav-items a { header .nav-items a:hover { color: var(--accent); -} +} \ No newline at end of file diff --git a/src/styles/Hero.css b/src/styles/Hero.css index 43c3ec3..2f82910 100644 --- a/src/styles/Hero.css +++ b/src/styles/Hero.css @@ -1,17 +1,20 @@ .hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: flex-start; + overflow: hidden; + padding: 2rem; + padding-top: calc(2rem + 70px); background-image: url("/banner.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; height: calc(70vh - 60px); - display: flex; - align-items: center; - justify-content: center; color: var(--text-primary); text-align: center; - padding: 0 20px; opacity: 0.9; - position: relative; } .hero::before { @@ -26,9 +29,34 @@ } .hero-content { - max-width: 800px; position: relative; z-index: 2; + max-width: 800px; + width: 100%; + margin: 0 auto; +} + +.hero-title { + font-size: clamp(2.5rem, 5vw, 4rem); + line-height: 1.2; + margin-bottom: 1rem; +} + +.hero-subtitle { + font-size: clamp(1rem, 2vw, 1.5rem); + line-height: 1.5; + margin-bottom: 2rem; +} + +.hero-image { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + max-width: 50%; + height: auto; + object-fit: contain; + z-index: 1; } h1 { @@ -111,6 +139,23 @@ h1 { } @media (max-width: 768px) { + .hero { + padding: 1rem; + min-height: 80vh; + } + + .hero-content { + text-align: center; + padding: 0 1rem; + } + + .hero-image { + opacity: 0.3; + max-width: 80%; + right: 50%; + transform: translate(50%, -50%); + } + .social-links-container { flex-direction: column; } @@ -121,10 +166,21 @@ h1 { } } +@media (max-width: 480px) { + .hero-content { + padding: 0; + } + + .hero-title { + font-size: clamp(2rem, 4vw, 2.5rem); + } +} + @media (max-width: 375px) { h1 { font-size: 2rem; } + .subtitle { font-size: 1rem; } @@ -137,19 +193,24 @@ h1 { } .hero .subtitle { - font-size: 1.2rem; /* Increase font size */ - color: #ffffff; /* White text for better contrast */ - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add subtle shadow */ + font-size: 1.2rem; + /* Increase font size */ + color: #ffffff; + /* White text for better contrast */ + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + /* Add subtle shadow */ } .download-btn { - transition: background-color 0.3s ease; /* Smooth transition for hover effect */ + transition: background-color 0.3s ease; + /* Smooth transition for hover effect */ } .download-btn:hover { - background-color: #2980b9; /* Darker blue on hover */ + background-color: #2980b9; + /* Darker blue on hover */ } .social-links { color: #ffffff; -} +} \ No newline at end of file diff --git a/src/styles/about.css b/src/styles/about.css index 49360cb..14afcfe 100644 --- a/src/styles/about.css +++ b/src/styles/about.css @@ -3,10 +3,12 @@ margin: 0 auto; padding: 2rem 1rem; color: var(--text-primary); + padding-top: 90px; } .about-section { margin-bottom: 4rem; + } h1, @@ -56,4 +58,4 @@ p { p { font-size: 18px; } -} +} \ No newline at end of file diff --git a/src/styles/blog.css b/src/styles/blog.css index 2e2e4b8..dc68836 100644 --- a/src/styles/blog.css +++ b/src/styles/blog.css @@ -3,6 +3,7 @@ max-width: 1200px; margin: 0 auto; padding: 2rem; + padding-top: 90px; } .sidebar { @@ -50,6 +51,7 @@ .blog-posts { flex: 1; + } .post-item { @@ -78,6 +80,7 @@ .post-title { font-size: 1.5rem; margin-bottom: 0.5rem; + } .post-author { @@ -214,4 +217,4 @@ .post-meta { display: flex; align-items: center; -} +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 6716f50..d3dbe79 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -53,6 +53,7 @@ html.dark { font-style: normal; font-display: swap; } + @font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Regular.woff") format("woff"); @@ -60,6 +61,7 @@ html.dark { font-style: normal; font-display: swap; } + @font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Italic.woff") format("woff"); @@ -67,6 +69,7 @@ html.dark { font-style: italic; font-display: swap; } + @font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.woff") format("woff"); @@ -74,6 +77,7 @@ html.dark { font-style: bold; font-display: swap; } + body { font-family: "Poppins", sans-serif; margin: 0; @@ -87,14 +91,21 @@ body { flex-direction: column; min-height: 100vh; } + main { width: 100%; max-width: 100%; margin: auto; - padding: 0 1rem; + padding: 90px 1rem 1rem; flex: 1 0 auto; box-sizing: border-box; } + +/* Remove top padding only for pages with hero sections */ +.hero-page main { + padding-top: 0; +} + h1, h2, h3, @@ -105,80 +116,101 @@ h6 { color: var(--text-primary); line-height: 1.2; } + h1 { font-size: 3.052em; } + h2 { font-size: 2.441em; } + h3 { font-size: 1.953em; } + h4 { font-size: 1.563em; } + h5 { font-size: 1.25em; } + strong, b { font-weight: 700; } + a { color: var(--accent-primary); text-decoration: none; } + a:hover { color: var(--accent-secondary); text-decoration: underline; } + p { margin-bottom: 1em; } + .prose p { margin-bottom: 2em; } + textarea { width: 100%; font-size: 16px; } + input { font-size: 16px; } + table { width: 100%; } + img { max-width: 100%; height: auto; border-radius: 8px; } + code { padding: 2px 5px; background-color: rgb(var(--secondary-white)); border-radius: 2px; } + pre { padding: 1.5em; border-radius: 8px; } -pre > code { + +pre>code { all: unset; } + blockquote { border-left: 4px solid var(--primary-light); padding: 0 0 0 20px; margin: 0px; font-size: 1.333em; } + hr { border: none; border-top: 1px solid rgb(var(--secondary-white)); } + @media (max-width: 720px) { body { font-size: 18px; } + main { padding: 1em; } @@ -216,4 +248,4 @@ body { main { padding: 0 2rem; } -} +} \ No newline at end of file From f2f6260702d3f752efc791a186113eb499b001e1 Mon Sep 17 00:00:00 2001 From: swayz8148 Date: Sun, 24 Nov 2024 13:24:17 +0000 Subject: [PATCH 2/2] update deploy.yml and fixed error in css code --- .github/workflows/deploy.yml | 29 ++++++++++++++++------------- src/styles/Contributors.css | 2 +- 2 files changed, 17 insertions(+), 14 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 816e015..47c0447 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,14 +1,10 @@ name: Deploy to GitHub Pages on: - # Trigger the workflow every time you push to the `main` branch - # Using a different branch name? Replace `main` with your branch’s name push: branches: [ main ] - # Allows you to run this workflow manually from the Actions tab on GitHub. workflow_dispatch: -# Allow this job to clone the repo and create a page deployment permissions: contents: read pages: write @@ -17,15 +13,22 @@ permissions: jobs: build: runs-on: ubuntu-latest + environment: + name: github-pages + env: + PUBLIC_GITHUB_TOKEN: ${{ secrets.CONTRIBUTOR_SECRET }} steps: - - name: Checkout your repository using git - uses: actions/checkout@v4 - - name: Install, build, and upload your site - uses: withastro/action@v2 - # with: - # path: . # The root location of your Astro project inside the repository. (optional) - # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional) - # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional) + - name: Checkout + uses: actions/checkout@v3 + + - name: Install, build, and upload + uses: withastro/action@v1 + with: + path: ./ + node-version: 18 + package-manager: npm + env: + PUBLIC_GITHUB_TOKEN: ${{ secrets.CONTRIBUTOR_SECRET }} deploy: needs: build @@ -36,4 +39,4 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v4 + uses: actions/deploy-pages@v1 \ No newline at end of file diff --git a/src/styles/Contributors.css b/src/styles/Contributors.css index 53e3eab..8a79710 100644 --- a/src/styles/Contributors.css +++ b/src/styles/Contributors.css @@ -8,7 +8,7 @@ .contributors-section { padding: 4rem 2rem; - ` color: var(--text-primary); + color: var(--text-primary); } .contributors-grid {