CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update blog page asset and md loading

Browse Source
This commit is contained in:
adilallo
2025-09-05 09:46:48 -06:00
parent 5e83655f49
commit b85b4248c0
11 changed files with 126 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[slug]/page.js
+9 -4
View File
@@ -24,7 +24,8 @@ export async function generateStaticParams() {
*/
export async function generateMetadata({ params }) {
try {
const post = getBlogPostBySlug(params.slug);
const { slug } = await params;
const post = getBlogPostBySlug(slug);
if (!post) {
return {
@@ -57,9 +58,10 @@ export async function generateMetadata({ params }) {
/**
* Dynamic blog post page
*/
export default function BlogPostPage({ params }) {
export default async function BlogPostPage({ params }) {
// Get the blog post data
const post = getBlogPostBySlug(params.slug);
const { slug } = await params;
const post = getBlogPostBySlug(slug);
// If post doesn't exist, show 404
if (!post) {
@@ -71,7 +73,10 @@ export default function BlogPostPage({ params }) {
const relatedPosts = allPosts.filter((p) => p.slug !== post.slug).slice(0, 3); // Show up to 3 related posts
return (
<div className="min-h-screen bg-gray-50">
<div
className="min-h-screen"
style={{ backgroundColor: "var(--color-content-default-primary)" }}
>
{/* Main Content */}
<article className="max-w-4xl mx-auto px-4 py-8">
{/* Article Header */}
app/components/ContentContainer.js
+4 -3
View File
@@ -1,14 +1,15 @@
"use client";
import React from "react";
import { getAssetPath, ASSETS } from "../../lib/assetUtils";
const ContentContainer = ({ post, width = "200px", size = "responsive" }) => {
// Get the corresponding icon based on the same logic as background images
const getIconImage = (slug) => {
const icons = [
"/assets/Content_Thumbnail/Icon_1.svg",
"/assets/Content_Thumbnail/Icon_2.svg",
"/assets/Content_Thumbnail/Icon_3.svg",
getAssetPath(ASSETS.ICON_1),
getAssetPath(ASSETS.ICON_2),
getAssetPath(ASSETS.ICON_3),
];
if (!slug) return icons[0];
app/components/ContentThumbnailTemplate.js
+15 -11
View File
@@ -3,6 +3,7 @@
import React from "react";
import Link from "next/link";
import ContentContainer from "./ContentContainer";
import { getAssetPath, ASSETS } from "../../lib/assetUtils";
/**
* ContentThumbnailTemplate component for displaying blog post previews
@@ -16,15 +17,15 @@ const ContentThumbnailTemplate = ({
// Post-specific background selection - different SVG for each post
const getBackgroundImage = (slug, variant) => {
const verticalImages = [
"/assets/Content_Thumbnail/Vertical_1.svg",
"/assets/Content_Thumbnail/Vertical_2.svg",
"/assets/Content_Thumbnail/Vertical_3.svg",
getAssetPath(ASSETS.VERTICAL_1),
getAssetPath(ASSETS.VERTICAL_2),
getAssetPath(ASSETS.VERTICAL_3),
];
const horizontalImages = [
"/assets/Content_Thumbnail/Horizontal_1.svg",
"/assets/Content_Thumbnail/Horizontal_2.svg",
"/assets/Content_Thumbnail/Horizontal_3.svg",
getAssetPath(ASSETS.HORIZONTAL_1),
getAssetPath(ASSETS.HORIZONTAL_2),
getAssetPath(ASSETS.HORIZONTAL_3),
];
const images = variant === "vertical" ? verticalImages : horizontalImages;
@@ -32,12 +33,15 @@ const ContentThumbnailTemplate = ({
if (!slug) return images[0];
// Use the slug to deterministically select an image
const hash = slug.split("").reduce((a, b) => {
a = (a << 5) - a + b.charCodeAt(0);
return a & a;
}, 0);
// More robust hash function using djb2 algorithm
let hash = 5381;
for (let i = 0; i < slug.length; i++) {
hash = (hash << 5) + hash + slug.charCodeAt(i);
}
return images[Math.abs(hash) % images.length];
// Ensure positive number and get index
const index = Math.abs(hash) % images.length;
return images[index];
};
const backgroundImage = getBackgroundImage(post.slug, variant);
app/components/Footer.js
+3 -2
View File
@@ -1,5 +1,6 @@
import Logo from "./Logo";
import Separator from "./Separator";
import { getAssetPath, ASSETS } from "../../lib/assetUtils";
export default function Footer() {
// Schema markup for organization information
@@ -70,7 +71,7 @@ export default function Footer() {
aria-label="Follow us on Bluesky"
>
<img
src="assets/Bluesky_Logo.svg"
src={getAssetPath(ASSETS.BLUESKY_LOGO)}
alt="Bluesky"
width={24}
height={22}
@@ -86,7 +87,7 @@ export default function Footer() {
aria-label="Follow us on GitLab"
>
<img
src="assets/GitLab_Icon.png"
src={getAssetPath(ASSETS.GITLAB_ICON)}
alt="GitLab"
width={22}
height={22}
app/components/Header.js
+4 -3
View File
@@ -4,6 +4,7 @@ import MenuBarItem from "./MenuBarItem";
import Button from "./Button";
import AvatarContainer from "./AvatarContainer";
import Avatar from "./Avatar";
import { getAssetPath, ASSETS } from "../../lib/assetUtils";
// Configuration data for testing
export const navigationItems = [
@@ -13,9 +14,9 @@ export const navigationItems = [
];
export const avatarImages = [
{ src: "assets/Avatar_1.png", alt: "Avatar 1" },
{ src: "assets/Avatar_2.png", alt: "Avatar 2" },
{ src: "assets/Avatar_3.png", alt: "Avatar 3" },
{ src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
{ src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
{ src: getAssetPath(ASSETS.AVATAR_3), alt: "Avatar 3" },
];
export const logoConfig = [
app/components/Logo.js
+23 -21
View File
@@ -1,3 +1,5 @@
import { getAssetPath, ASSETS } from "../../lib/assetUtils";
export default function Logo({ size = "default", showText = true }) {
// Size configurations
const sizes = {
@@ -91,26 +93,26 @@ export default function Logo({ size = "default", showText = true }) {
size === "homeHeaderXsmall"
? sizes.homeHeaderXsmall
: size === "homeHeaderSm"
? sizes.homeHeaderSm
: size === "homeHeaderMd"
? sizes.homeHeaderMd
: size === "homeHeaderLg"
? sizes.homeHeaderLg
: size === "homeHeaderXl"
? sizes.homeHeaderXl
: size === "header"
? sizes.header
: size === "headerMd"
? sizes.headerMd
: size === "headerLg"
? sizes.headerLg
: size === "headerXl"
? sizes.headerXl
: size === "footer"
? sizes.footer
: size === "footerLg"
? sizes.footerLg
: sizes.default;
? sizes.homeHeaderSm
: size === "homeHeaderMd"
? sizes.homeHeaderMd
: size === "homeHeaderLg"
? sizes.homeHeaderLg
: size === "homeHeaderXl"
? sizes.homeHeaderXl
: size === "header"
? sizes.header
: size === "headerMd"
? sizes.headerMd
: size === "headerLg"
? sizes.headerLg
: size === "headerXl"
? sizes.headerXl
: size === "footer"
? sizes.footer
: size === "footerLg"
? sizes.footerLg
: sizes.default;
return (
<div
@@ -142,7 +144,7 @@ export default function Logo({ size = "default", showText = true }) {
{/* Vector Icon */}
<img
src="assets/Logo.svg"
src={getAssetPath(ASSETS.LOGO)}
alt="CommunityRule Logo Icon"
width={27.05}
height={27.05}
app/layout.js
+2 -1
View File
@@ -1,6 +1,7 @@
import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
import "./globals.css";
import HomeHeader from "./components/HomeHeader";
import Header from "./components/Header";
import Footer from "./components/Footer";
const inter = Inter({
@@ -86,7 +87,7 @@ export default function RootLayout({ children }) {
className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`}
>
<div className="min-h-screen flex flex-col">
<HomeHeader />
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
app/page.js
+2
View File
@@ -5,6 +5,7 @@ import RuleStack from "./components/RuleStack";
import QuoteBlock from "./components/QuoteBlock";
import FeatureGrid from "./components/FeatureGrid";
import AskOrganizer from "./components/AskOrganizer";
import HomeHeader from "./components/HomeHeader";
export default function Page() {
const heroBannerData = {
@@ -53,6 +54,7 @@ export default function Page() {
return (
<div>
<HomeHeader />
<HeroBanner {...heroBannerData} />
<LogoWall />
<NumberedCards {...numberedCardsData} />