CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 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/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}