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

Update learn page

Browse Source
This commit is contained in:
adilallo
2026-05-20 22:17:00 -06:00
parent 7ee6282c1a
commit 1688ac85c9
45 changed files with 1203 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(marketing)/blog/[slug]/page.tsx
+6 -60
View File
@@ -4,7 +4,7 @@ import dynamic from "next/dynamic";
import {
getBlogPostBySlug,
getAllBlogPosts as getAllPosts,
type BlogPost,
getRelatedBlogPosts,
} from "../../../../lib/content";
import { logger } from "../../../../lib/logger";
import ContentBanner from "../../../components/sections/ContentBanner";
@@ -111,66 +111,12 @@ export default async function BlogPostPage({ params }: PageProps) {
// Get related articles with improved algorithm
const allPosts = getAllPosts();
// Create slug order for consistent background cycling
const slugOrder = allPosts.map((post) => post.slug);
// Simple related articles algorithm based on content similarity
const getRelatedArticles = (
currentPost: BlogPost,
allPosts: BlogPost[],
limit = 3,
): BlogPost[] => {
const otherPosts = allPosts.filter((p) => p.slug !== currentPost.slug);
// Score posts based on content similarity
const scoredPosts = otherPosts.map((post) => {
let score = 0;
// Check for similar keywords in title and description
const currentTitle = currentPost.frontmatter.title.toLowerCase();
const currentDesc = currentPost.frontmatter.description.toLowerCase();
const postTitle = post.frontmatter.title.toLowerCase();
const postDesc = post.frontmatter.description.toLowerCase();
// Common keywords that indicate similarity
const keywords = [
"community",
"conflict",
"decision",
"governance",
"security",
"trust",
"collaboration",
"organization",
];
keywords.forEach((keyword) => {
if (currentTitle.includes(keyword) && postTitle.includes(keyword))
score += 3;
if (currentDesc.includes(keyword) && postDesc.includes(keyword))
score += 2;
if (currentTitle.includes(keyword) && postDesc.includes(keyword))
score += 1;
if (currentDesc.includes(keyword) && postTitle.includes(keyword))
score += 1;
});
return { ...post, score };
});
// Sort by score and return top posts
return scoredPosts
.sort((a, b) => b.score - a.score)
.slice(0, limit)
.map(({ score, ...post }) => {
// Score used for sorting, removed from final result
void score;
return post;
});
};
const relatedArticles = getRelatedArticles(post, allPosts);
const relatedArticles = getRelatedBlogPosts(
post.slug,
post.frontmatter.related,
3,
);
// Generate structured data for search engines
const structuredData = {
app/(marketing)/learn/page.tsx
+10 -24
View File
@@ -6,10 +6,8 @@ import AskOrganizer from "../../components/sections/AskOrganizer";
import { getAllBlogPosts } from "../../../lib/content";
export default function LearnPage() {
// Get real blog posts from the content system
const allPosts = getAllBlogPosts();
// Use direct message access for server components
const t = (key: string) => getTranslation(messages, key);
const contentLockupData = {
@@ -31,36 +29,24 @@ export default function LearnPage() {
<div className="min-h-screen bg-[var(--color-surface-default-primary)]">
<ContentLockup {...contentLockupData} />
{/* Horizontal list (below smd) */}
<div className="smd:hidden sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-020)] space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)]">
{allPosts.slice(0, 3).map((post, index) => (
{allPosts.map((post) => (
<ContentThumbnailTemplate
key={`${post.slug}-${index}-${
post.frontmatter.thumbnail?.horizontal || "default"
}`}
key={`${post.slug}-horizontal`}
post={post}
variant="horizontal"
/>
))}
</div>
{/* smd and up: 2x3 grid of vertical thumbnails, repeat posts as needed */}
<div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 xl:grid-cols-5 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)]">
{Array.from({ length: 16 }).map((_, i) => {
const post = allPosts[i % allPosts.length];
return (
<ContentThumbnailTemplate
key={`grid-${post.slug}-${i}-${
post.frontmatter.thumbnail?.vertical || "default"
}`}
post={post}
variant="vertical"
className={`${i >= 6 ? "hidden lg2:block" : ""} ${
i >= 10 ? "xl:hidden" : ""
}`}
/>
);
})}
<div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 xl:grid-cols-5 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] [&>*]:min-w-0">
{allPosts.map((post) => (
<ContentThumbnailTemplate
key={`${post.slug}-vertical`}
post={post}
variant="vertical"
/>
))}
</div>
<AskOrganizer {...askOrganizerData} />
app/components/content/ContentContainer/ContentContainer.container.tsx
+27 -18
View File
@@ -1,7 +1,16 @@
"use client";
/**
* Figma: "Components" / Container (19614-14838, 19003-23432).
* XS thumbnail copy: title 18/22, description 12/16, metadata 10/14.
*/
import { memo } from "react";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import {
getAssetPath,
ASSETS,
contentBlogTagPath,
CONTENT_CATALOG_SLUG_ORDER,
} from "../../../../lib/assetUtils";
import ContentContainerView from "./ContentContainer.view";
import type { ContentContainerProps } from "./ContentContainer.types";
@@ -25,7 +34,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const bodyColor = onLight
? "text-[var(--color-content-default-secondary)]"
: "text-[var(--color-content-inverse-brand-royal)]";
// Get the corresponding icon based on the same logic as background images
const getIconImage = (slug: string): string => {
const icons = [
getAssetPath(ASSETS.ICON_1),
@@ -35,23 +44,24 @@ const ContentContainerContainer = memo<ContentContainerProps>(
if (!slug) return icons[0];
// Use the same cycling logic as background images to ensure matching
const slugOrder = [
"building-community-trust",
"operational-security-mutual-aid",
"making-decisions-without-hierarchy",
"resolving-active-conflicts",
];
const index = slugOrder.indexOf(slug);
const finalIndex = index >= 0 ? index % icons.length : 0;
return icons[finalIndex];
const index = CONTENT_CATALOG_SLUG_ORDER.indexOf(
slug as (typeof CONTENT_CATALOG_SLUG_ORDER)[number],
);
if (index >= 0) {
return contentBlogTagPath(slug);
}
const fallbackIndex =
Math.abs(
slug.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0),
) % icons.length;
return icons[fallbackIndex];
};
const iconImage = leadingImageSrc ?? getIconImage(post.slug);
const iconAlt =
leadingImageAlt ?? `Icon for ${post.frontmatter.title}`;
// Format date
const formattedDate = new Date(post.frontmatter.date).toLocaleDateString(
"en-US",
{
@@ -60,10 +70,9 @@ const ContentContainerContainer = memo<ContentContainerProps>(
},
);
// Choose styling based on size prop
const containerClasses =
size === "xs"
? "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)]"
? "relative z-20 flex h-full flex-col gap-[var(--measures-spacing-012)]"
: "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
const contentGapClasses =
@@ -78,7 +87,7 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const titleClasses =
size === "xs"
? `font-bricolage font-medium text-[18px] leading-[120%] transition-colors ${titleColor}`
? `font-bricolage font-medium text-[18px] leading-[22px] transition-colors ${titleColor}`
: `font-bricolage font-medium text-[18px] leading-[120%] sm:text-[24px] sm:leading-[24px] md:text-[32px] md:leading-[110%] lg:text-[44px] lg:leading-[110%] xl:text-[64px] xl:leading-[110%] transition-colors ${titleColor}`;
const descriptionClasses =
@@ -88,12 +97,12 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const authorClasses =
size === "xs"
? `font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
: `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`;
const dateClasses =
size === "xs"
? `font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
? `overflow-hidden text-ellipsis whitespace-nowrap font-inter font-normal text-[10px] leading-[14px] ${bodyColor}`
: `font-inter font-normal text-[10px] leading-[14px] md:text-[12px] md:leading-[16px] lg:text-[14px] lg:leading-[20px] xl:text-[18px] xl:leading-[130%] ${bodyColor}`;
return (
app/components/content/ContentContainer/ContentContainer.view.tsx
+2 -3
View File
@@ -20,7 +20,7 @@ function ContentContainerView({
return (
<div
className={containerClasses}
style={size === "responsive" ? {} : { width }}
style={size === "responsive" || size === "xs" ? {} : { width }}
>
{/* Content Container - gap between icon and text */}
<div className={contentGapClasses}>
@@ -45,8 +45,7 @@ function ContentContainerView({
</div>
</div>
{/* Metadata Container - horizontal with 8px gap */}
<div className="flex items-center gap-[var(--measures-spacing-008)]">
<div className="flex min-w-0 items-end gap-[var(--measures-spacing-008)]">
{/* Author Name */}
<span className={authorClasses}>{post.frontmatter.author}</span>
app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
+12 -1
View File
@@ -1,13 +1,23 @@
"use client";
/**
* Figma: "Components" / ContentThumnailTemplate (19614-14838, 19041-13415).
* Vertical 260×390 (19060-15787); horizontal 320×225.5 (19041-13550).
*/
import { memo } from "react";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
({ post, className = "", variant: variantProp = "vertical" }) => {
({
post,
className = "",
variant: variantProp = "vertical",
sizing: sizingProp = "fluid",
}) => {
const variant = variantProp;
const sizing = sizingProp;
// Get article-specific background image from frontmatter
const getBackgroundImage = (
post: ContentThumbnailTemplateProps["post"],
@@ -42,6 +52,7 @@ const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
post={post}
className={className}
variant={variant}
sizing={sizing}
backgroundImage={backgroundImage}
/>
);
app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
+7
View File
@@ -2,6 +2,8 @@ import type { BlogPost } from "../../../../lib/content";
export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal";
export type ContentThumbnailTemplateSizingValue = "fluid" | "fixed";
export interface ContentThumbnailTemplateProps {
post: BlogPost;
className?: string;
@@ -9,6 +11,10 @@ export interface ContentThumbnailTemplateProps {
* Content thumbnail variant.
*/
variant?: ContentThumbnailTemplateVariantValue;
/**
* fluid — fill parent (Learn grid). fixed — Figma px dimensions (Related Articles).
*/
sizing?: ContentThumbnailTemplateSizingValue;
slugOrder?: string[];
}
@@ -16,5 +22,6 @@ export interface ContentThumbnailTemplateViewProps {
post: BlogPost;
className: string;
variant: "vertical" | "horizontal";
sizing: ContentThumbnailTemplateSizingValue;
backgroundImage: string;
}
app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
+61 -21
View File
@@ -7,55 +7,95 @@ function ContentThumbnailTemplateView({
post,
className,
variant,
sizing,
backgroundImage,
}: ContentThumbnailTemplateViewProps) {
if (variant === "vertical") {
if (sizing === "fixed") {
return (
<Link
href={`/blog/${post.slug}`}
className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative h-[390px] w-[260px] overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt=""
className="pointer-events-none size-full object-cover"
/>
</div>
<div className="absolute left-[18px] top-[18px] z-20 w-[200px]">
<ContentContainer post={post} width="200px" size="xs" />
</div>
</div>
</Link>
);
}
return (
<Link
href={`/blog/${post.slug}`}
className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative w-full aspect-[2/3] overflow-hidden pt-[18px] pl-[18px] pr-[42px] pb-[212px]">
{/* Background SVG - fills container with maintained aspect */}
<div className="relative aspect-[260/390] w-full overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt={`Background for ${post.frontmatter.title}`}
className="w-full h-full object-cover"
alt=""
className="pointer-events-none size-full object-cover"
/>
{/* Gradient overlay for better text readability */}
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60 z-10" />
</div>
{/* Content Section - positioned within the padding constraints */}
<ContentContainer post={post} width="200px" size="xs" />
<div className="absolute left-[6.923%] top-[4.615%] z-20 w-[76.923%]">
<ContentContainer post={post} size="xs" />
</div>
</div>
</Link>
);
}
if (sizing === "fixed") {
return (
<Link
href={`/blog/${post.slug}`}
className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative h-[225.5px] w-[320px] overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt=""
className="pointer-events-none size-full object-cover"
/>
</div>
<div className="absolute left-[14px] top-[13.75px] z-20 w-[230px]">
<ContentContainer post={post} width="230px" size="xs" />
</div>
</div>
</Link>
);
}
// Horizontal variant
return (
<Link
href={`/blog/${post.slug}`}
className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
>
<div className="relative min-w-[320px] max-w-[800px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
{/* Background SVG - sized to fit the 320x225.5 container exactly */}
<div className="relative aspect-[320/225.5] w-full overflow-hidden">
<div className="absolute inset-0 z-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={backgroundImage}
alt={`Background for ${post.frontmatter.title}`}
className="w-full h-[225.5px] object-cover"
alt=""
className="pointer-events-none size-full object-cover"
/>
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
</div>
{/* Content - positioned within the padding constraints */}
<ContentContainer post={post} width="230px" size="xs" />
<div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%]">
<ContentContainer post={post} size="xs" />
</div>
</div>
</Link>
);
app/components/sections/RelatedArticles/RelatedArticles.view.tsx
+3 -2
View File
@@ -62,7 +62,7 @@ export function RelatedArticlesView({
</h2>
)}
{/* Horizontal Articles Row - Carousel on mobile, Scrollable slider on desktop */}
{/* Horizontal Articles Row - Carousel on mobile, scrollable slider on desktop */}
<div
className={
isUseCases
@@ -86,12 +86,13 @@ export function RelatedArticlesView({
{filteredPosts.map((relatedPost) => (
<div
key={relatedPost.slug}
className="flex flex-col items-center flex-shrink-0"
className="flex flex-shrink-0 flex-col items-center"
data-testid={`related-${relatedPost.slug}`}
>
<ContentThumbnailTemplate
post={relatedPost}
variant="vertical"
sizing="fixed"
slugOrder={slugOrder}
/>
</div>
content/blog/avoiding-burnout-sustainability-in-the-ruins.md
+75
View File
@@ -0,0 +1,75 @@
---
title: "Avoiding Burnout: Sustainability in the Ruins"
description: "Building a practice of resistance that doesn't consume you"
author: "Author name"
date: "2025-08-12"
related:
- "resolving-active-conflicts"
- "integrating-new-members-without-dilution"
- "how-chaos-concentrates-control"
thumbnail:
vertical: "avoiding-burnout-sustainability-in-the-ruins-vertical.svg"
horizontal: "avoiding-burnout-sustainability-in-the-ruins-horizontal.svg"
background:
color: "#EDCC8F"
---
The pattern repeats itself across every worker coop, mutual aid network, and organizing project. Someone who was essential suddenly stops showing up. They apologize, say they need to step back, talk about self-care and boundaries. Everyone nods sympathetically. The work gets redistributed to whoever's left. Six months later, someone else burns out. The cycle continues.
We've learned to treat burnout as an individual problem requiring individual solutions. Take a break. Practice self-care. Set boundaries. Prioritize your mental health. This framing is everywhere, and it's almost entirely useless. Not because self-care is bad, but because it locates the problem in the individual rather than in the conditions that produce exhaustion as a constant state.
Burnout in activist spaces isn't a personal failure. It's a political symptom. Specifically, it's what happens when capitalist temporality infiltrates movements that claim to oppose capitalism.
Capitalist time operates in resistance spaces in a specific way: endless acceleration, perpetual crisis, the elimination of rest as a category. There's always more to do, more to respond to, more urgency. The logic of productivity infects everything. If you're not constantly doing, you're not committed. If you're not sacrificing yourself, you don't really care.
This temporality gets imported wholesale into resistance movements. The world is burning, people are suffering, we can't afford to slow down. Anyone who suggests limits or sustainability gets accused of not understanding the urgency. The person who works themselves into the ground becomes the model of commitment.
The result is predictable. Your most dedicated people destroy themselves. They leave, taking years of knowledge and relationships with them. New people step up, replicate the same patterns, and burn out in turn. The movement doesn't grow, it churns. Meanwhile, the systems you're fighting remain perfectly intact, staffed by people working forty-hour weeks with healthcare and retirement plans.
This isn't strategy, it's self-sabotage dressed up as virtue. And it will continue until we build structures that make sustainability possible rather than treating it as a personal responsibility.
Rotation as structure means that if the same people are always doing the critical work, burnout isn't a risk, it's a timeline. You're just waiting to see who collapses first.
This feels wrong to people raised on the myth of indispensability. What if the new person isn't as good at it? What if things slip? These are real concerns, but they reveal the problem. If your group can't survive someone rotating out of a role, you don't have an organization, you have a house of cards.
Rotation forces knowledge distribution. The person leaving a role has to document what they did and train their replacement. This is when you discover that half of what made something work was informal knowledge living in one person's head. Get it out of their head. Write it down. Make it teachable.
Rotation also prevents the accumulation of informal power. The person who's always been the treasurer starts to feel ownership over financial decisions. The person who always coordinates meetings starts shaping what gets discussed. This isn't malicious, it's structural. Rotation disrupts it.
Set the schedule in advance. You're not rotating people out because they're failing, you're rotating them because that's how the system works. This removes the stigma and the guilt. Everyone knows from the start that roles are temporary.
Documentation isn't optional, it's infrastructure. Every role needs a guide: what it involves, how to do it, what to watch out for. When someone learns something important, it gets added to the guide. When someone rotates out, they update it with everything they learned.
Run regular retrospectives, not as therapy but as knowledge capture. Every few months, sit down and discuss what worked, what didn't, what you learned. Write it down. This becomes your institutional memory, accessible to anyone who needs it.
The person who's leaving needs to do a handoff. Not just "here's the password," but sitting down with their replacement for however long it takes to transfer what they know. This is part of the role, not an optional kindness. If you can't make time for handoffs, you can't actually rotate roles.
Limiting scope is something groups avoid because it feels like admitting defeat, but here it is: you cannot do everything. Trying to do everything guarantees you'll do nothing well and burn out everyone involved.
Define what you're actually trying to accomplish. Be specific. Not "fight capitalism" but "provide food assistance to fifty families in the neighborhood" or "support workers organizing in the service industry" or "maintain this piece of software that solves this specific problem." Scope that's too broad becomes an excuse for unlimited work.
When something falls outside that scope, the answer is no. Not "we'll try to fit it in," not "maybe later," but no. This is impossible for people who've internalized the idea that saying no means you don't care. You have to care selectively or you'll care yourself into complete ineffectiveness.
Urgency is constant under capitalism. There will always be another crisis, another person who needs help, another fight that demands attention. If your response is always yes, you're not building a movement, you're building a machine that consumes people.
Rest as strategy is the hardest thing to accept because rest isn't something you earn after the work is done. The work is never done. Rest has to be structural, built into how you operate, or it won't happen.
Schedule breaks into your calendar the same way you schedule meetings. Not "take a break when you need it" no one ever needs it until they're already destroyed. Monthly week-long breaks where nothing happens. Quarterly weekend retreats that aren't about work. Built-in downtime between major projects.
Normalize people being unavailable. If someone says they can't take something on, that's the end of the discussion. No guilt, no pressure, no subtle implications that they're not committed enough. The person who protects their capacity is more valuable than the person who destroys themselves.
Building structures for sustainability isn't about being nice to ourselves. It's about building movements that can actually win. That means rotation so knowledge spreads and no one becomes indispensable. That means preserving institutional memory so learning accumulates. That means limiting scope so the work remains possible. That means treating rest as strategy, not weakness.
Rotation means no role is permanent. The person coordinating meetings, managing the budget, maintaining relationships with allied groups, running the communication channels all of it rotates on a set schedule. Six months, a year, whatever makes sense for the role and the group.
Preserving institutional memory becomes critical when someone burns out and leaves, because they take everything they learned with them. How to navigate specific relationships. What strategies failed before. Why certain decisions were made. The new person starts from zero, makes the same mistakes, learns the same lessons. The group never accumulates knowledge, it just cycles through individuals.
Maintain a history document. Not meeting minutes, but narrative. Why did you start focusing on this issue? What was the context for that major decision? What conflicts came up and how did you work through them? New people need this to understand why things are the way they are.
Set actual limits on meeting times, on how many projects you take on, on what you expect from participants. Two hours for meetings, not whenever people run out of steam. Three active projects, not whatever comes up. One meeting per week, not whenever something urgent appears.
Celebrate the person who steps back before they burn out, not the person who pushes through until they collapse. Right now we do the opposite. We venerate sacrifice and treat boundaries as suspect. This has to invert.
Why this matters is clear: treating burnout as individual failure serves power perfectly. It ensures that resistance movements constantly lose their most experienced people. It prevents the accumulation of knowledge and relationships. It makes organizing seem impossible to anyone with responsibilities or limitations. It turns politics into a game that only the young, unencumbered, or self-destructive can play.
The alternative is what we have now: an endless cycle of people burning bright and flaming out, while the systems we oppose continue grinding forward, staffed by people who go home at five and take vacations. We can do better. We have to.
content/blog/building-community-trust.md
-27
View File
@@ -1,27 +0,0 @@
---
title: "Sample: Building Community Trust"
description: "Strategies for fostering trust, transparency, and accountability in community organizations"
author: "Author name"
date: "2025-04-20"
related:
[
"resolving-active-conflicts",
"operational-security-mutual-aid",
"making-decisions-without-hierarchy",
]
thumbnail:
vertical: "building-community-trust-vertical.svg"
horizontal: "building-community-trust-horizontal.svg"
background:
color: "#EDCC8F"
---
Trust is the foundation of any successful community organization. Without it, even the best structures and processes will struggle to function effectively. Building and maintaining trust requires intentional effort, clear communication, and consistent follow-through on commitments.
One key element of building trust is transparency. When community members understand how decisions are made, where resources go, and what challenges the organization faces, they're more likely to feel invested and supportive. This doesn't mean sharing every detail, but it does mean being open about the big picture and the reasoning behind important choices.
Another crucial factor is accountability. When people make mistakes or fail to follow through on commitments, there need to be clear, fair processes for addressing these issues. This might involve mediation, restorative justice practices, or other approaches that focus on learning and repair rather than punishment.
Regular communication also plays a vital role. Whether through newsletters, community meetings, or informal conversations, keeping people informed about what's happening helps prevent misunderstandings and builds a sense of shared purpose. It's especially important to communicate both successes and challenges honestly.
Finally, trust is built through consistent action over time. When community members see that the organization follows through on its promises and treats people fairly, even in difficult situations, trust grows stronger. This consistency creates a foundation that can weather conflicts and challenges when they inevitably arise.
content/blog/digital-mediation-and-the-death-of-nuance.md
+77
View File
@@ -0,0 +1,77 @@
---
title: "Digital Mediation and the Death of Nuance"
description: "How corporate platforms undermine solidarity and what to build instead"
author: "Author name"
date: "2025-08-18"
related:
- "operational-security-mutual-aid"
- "how-chaos-concentrates-control"
- "knowledge-management-and-institutional-amnesia"
thumbnail:
vertical: "digital-mediation-and-the-death-of-nuance-vertical.svg"
horizontal: "digital-mediation-and-the-death-of-nuance-horizontal.svg"
background:
color: "#E2EFFF"
---
This isn't neutral. The medium shapes the message, and algorithmic mediation shapes how we relate to each other in ways that actively undermine the solidarity we're trying to build.
Watch what happens in a group chat when someone raises a contentious point. The conversation accelerates. People respond immediately, reacting to the last message without absorbing the whole thread. Nuance disappears. Someone misreads tone, someone else gets defensive, and within twenty minutes you've got a full-blown conflict that wouldn't have happened in a room together.
This isn't because people are worse online. It's because the platform is designed to encourage rapid response over thoughtful engagement. The notification pulls you back in. The threading makes it easy to miss context. The lack of physical presence removes all the social cues that normally moderate conflict. The result is that digital platforms produce a specific kind of politics: reactive, fragmented, prone to escalation.
Then there's the algorithm. Even in platforms that claim not to use algorithmic feeds, the structure determines what you see. The most active conversations rise to the top. The people who post most shape the space. The quiet person who thinks carefully before speaking gets buried. Leadership emerges not from wisdom or trust but from who has time to be constantly online.
Worse, these platforms are surveillance infrastructure. Every conversation gets harvested for data. Your organizing discussions train the same AI systems being sold to police departments. Even the encrypted platforms require trusting that encryption holds and that the company won't change the terms.
The fundamental problem is this: you're trying to build alternative structures for human coordination using tools built by and for capitalism. The contradiction isn't incidental, it's definitional.
There's a move happening right now where the right claims technology as their territory. Tech becomes associated with libertarian fantasies, surveillance capitalism, and fascist aesthetics of efficiency. The response from much of the left is retreat: reject technology, return to analog, treat digital tools as inherently corrupting.
This is a catastrophic mistake. Technology isn't neutral, but it isn't predetermined either. It's a tool, and tools can be built differently depending on who builds them and for what purpose. Ceding technology to techno-fascists means ceding the future. We can't organize a post-capitalist world using only the tools of the past.
The question isn't whether to use technology but what kind of technology to build and how to use it. This means understanding that the platforms we rely on weren't designed for us and won't serve our purposes. It also means recognizing that alternatives exist and more can be created.
Nathan Schneider's work on digital democracy points toward what's possible: platforms owned and governed by their users rather than by shareholders. Platform cooperatives apply cooperative principles to digital infrastructure. The people using the tool control how it operates, how it develops, what happens to the data.
This isn't hypothetical. Platform coops exist for ride-sharing, delivery work, freelancing, social media. They're small compared to their corporate competitors, but they demonstrate that different models are viable. A messaging platform owned by the organizing groups using it would make different design choices than Slack or Discord. It wouldn't optimize for engagement metrics. It would optimize for the things communities actually need: clarity, accessibility, privacy, sustainability.
Building platform coops requires resources and technical knowledge, which many groups lack. But so does building anything else worth having. The question is whether we're willing to invest in infrastructure we actually control or whether we'll keep building movements on foundations owned by people actively hostile to our goals.
The Secret Riso Project understands something crucial: print isn't obsolete, it's liberated. Risograph printing produces zines, posters, and pamphlets outside the surveillance apparatus. The medium is tangible, shareable, untrackable. You can't delete a zine from someone's shelf. You can't change what a poster says after it's wheat-pasted to a wall.
Print works differently than digital communication. It's slower, more deliberate. You can't dash off a hot take on a riso-printed newsletter. The friction is a feature. It creates space for thought, for editing, for collective decision-making about what actually needs to be said.
Print also reaches different people. Not everyone lives online. The person who won't join your Discord might read a zine left at the coffee shop. The neighborhood that needs organizing might not be checking Instagram, but they see the posters on their walk to work.
The solution isn't to abandon digital tools entirely. It's to use them strategically while refusing to let them monopolize how you organize. Use encrypted messaging for urgent coordination, not for extended discussions. When a conversation needs nuance, move it to a meeting. When something's important enough to debate, debate it in person where you can see faces and hear tone.
Use digital tools for logistics: scheduling, sharing documents, quick updates. Don't use them for conflict resolution, major decisions, or relationship building. Those require physical presence.
The right wants you to believe that technology inevitably produces surveillance, hierarchy, and control. They want this because it justifies their vision of techno-fascism as the only possible future. Don't give them that.
But it also means recognizing that no tool solves political problems. Platform coops won't create solidarity if the people using them haven't built it face-to-face. Print won't reach people if no one's doing the work of distribution. Technology, whether digital or analog, is only ever a tool for amplifying and supporting organizing work that happens between actual humans.
Stop letting convenience dictate strategy. Yes, everyone's already on Facebook. That doesn't mean Facebook is where organizing should happen. Build spaces you control, even if it takes more work. Invest in hybrid infrastructure: print capabilities, secure digital tools, physical meeting spaces. Treat this as seriously as you treat any other resource question.
Learn about alternatives. Research platform coops, explore democratic technology projects, understand what's possible beyond corporate platforms. Support these projects with money and labor when you can. Develop technical literacy within your group. Not everyone needs to code, but someone should understand how your tools work and what the alternatives are.
The anti-social network isn't about rejecting technology. It's about refusing to let corporate platforms mediate all human connection and political organizing. It's about building tools that serve us rather than extract from us. It's about remembering that the most important networks are the ones between actual people, in actual space, building actual power together.
Your organizing group lives in a Discord server. Your mutual aid network coordinates through a Facebook group. Your worker coop runs on Slack. Every conversation, every decision, every conflict gets filtered through platforms designed by corporations to maximize engagement, which is just a polite word for addiction.
The cooperative model also solves the governance problem. When users control the platform, they can decide collectively what features to build, what data to collect, how to handle moderation. This is democratic technology: tools that serve their users rather than extracting value from them.
Use print for things that matter: analysis that took time to develop, information the community needs, calls to action, documentation of victories and lessons. Use it to create physical artifacts of your work that persist beyond the lifespan of any platform.
Maintain analog systems alongside digital ones. Keep paper records. Print important documents. Create physical spaces where your group exists outside the digital panopticon. Host regular in-person gatherings, not as special events but as the default.
Build your own tools when you can. Use platform coops. Support projects creating democratic alternatives to corporate platforms. Recognize that building infrastructure is organizing work, not a distraction from organizing.
Produce print materials regularly. Zines that explain your analysis, posters that announce actions, newsletters that keep people informed. Make them beautiful. Make them worth keeping. Make them shareable outside digital networks.
Technology is shaped by the social relations of its production. Capitalist technology serves capitalist ends. Cooperative technology can serve cooperative ends. The tools we build and how we build them are political choices.
This means investing in democratic alternatives. It means learning technical skills or supporting people who have them. It means treating digital infrastructure as seriously as physical infrastructure. It means refusing to accept that organizing must happen on terms set by corporations.
Use print strategically and beautifully. Make things people want to keep and share. Use risograph, xerox, whatever you have access to. The Secret Riso Project shows that small-scale print production can be both accessible and powerful.
content/blog/how-chaos-concentrates-control.md
+75
View File
@@ -0,0 +1,75 @@
---
title: "How Chaos Concentrates Control"
description: "How to limit informal hierarchies inevitably emerging in horizontal groups"
author: "Author name"
date: "2025-08-15"
related:
- "making-decisions-without-hierarchy"
- "resolving-active-conflicts"
- "digital-mediation-and-the-death-of-nuance"
thumbnail:
vertical: "how-chaos-concentrates-control-vertical.svg"
horizontal: "how-chaos-concentrates-control-horizontal.svg"
background:
color: "#C8E6F0"
---
Every failing collective tells itself the same story: we don't need formal structures because we trust each other. We're not like those hierarchical organizations. We make decisions organically, by consensus, through the natural flow of discussion. We don't have leaders.
This is a fantasy. Worse, it's a fantasy that actively produces the hierarchies it claims to prevent.
Here's what actually happens in structureless groups. Decisions get made, but no one can say exactly how or by whom. Some people's opinions carry more weight, but there's no acknowledged reason why. Information flows through informal networks, which means who you know determines what you know. Conflicts fester because there's no legitimate process for working through them. New members can't figure out how anything works because there's nothing to figure out, just vibes and unspoken norms.
The group congratulates itself on being non-hierarchical while a small clique makes all the real decisions over drinks after meetings. This isn't an accident or a failure of the group's principles. This is what structurelessness produces.
Jo Freeman named this decades ago: the tyranny of structurelessness. When you refuse to create explicit structures, you don't eliminate power. You make power invisible and therefore unaccountable. The hierarchies that emerge are based on personal relationships, charisma, free time, and existing social capital. In other words, they reproduce all the inequalities you were supposedly trying to escape.
The solution isn't to embrace traditional hierarchy. It's to build transparent structures that acknowledge what every group actually needs: ways to make decisions, coordinate action, resolve conflicts, and distribute responsibility. Structures aren't the enemy. Hidden structures are.
Explicit decision-making is the first step. Stop pretending decisions emerge organically. They don't. Someone proposes something, some people support it, and somehow it becomes what the group does. Make that process visible.
Decide how you make decisions. Consensus? Majority vote? Consensus with fallback to voting? Different methods for different types of decisions? It doesn't matter which you choose as long as everyone knows what it is.
Set time limits for discussion. This sounds bureaucratic but it's the opposite. Without limits, discussions go until the people with the most stamina or free time get their way. That's not democracy, that's a war of attrition.
Make decisions in meetings, not in back channels. If it affects the group, it gets discussed where the group can hear it. The post-meeting group chat can't be where real decisions happen.
Rotating responsibilities prevents the accumulation of informal power. Your group has functions that need doing: taking notes, managing money, communicating with outside groups, maintaining your tools or space, coordinating meetings. Pretending these aren't positions of influence is delusional.
Name the roles explicitly. Note-taker, treasurer, communications coordinator, whatever you need. Write down what each role does. This isn't about creating a bureaucracy, it's about making power visible so it can be shared.
When someone rotates out, they document what they did and train their replacement. Knowledge can't be hoarded. If only one person understands the finances or the website or the coalition relationships, they have structural power whether you acknowledge it or not.
Keep records. Meeting notes, decisions made, rationales discussed. This isn't paranoia, it's memory. Without records, the people who were there control the narrative.
Share context proactively. When discussing something that builds on previous decisions or ongoing situations, take a minute to recap for people who weren't there. Otherwise participation becomes impossible for anyone who can't attend everything.
Legitimate conflict resolution matters because conflicts will happen. In structureless groups, they get resolved through whoever has more social capital, who can mobilize their friends, who's willing to make things uncomfortable until they get their way. This is violence pretending to be harmony.
Create a process. When there's a conflict between members, what happens? Mediation by agreed-upon people? A structured conversation using specific guidelines? Bringing it to the full group? Figure it out before you need it.
Make it legitimate. Everyone agrees this is how conflicts get worked through, which means everyone agrees to accept the outcome even if they don't like it. Without legitimacy, people just route around the process until they get what they want.
The process should be separate from personal relationships. Your closest friend in the group shouldn't be mediating your conflicts. That's not neutrality, that's just a different kind of power play.
Accountability structures ensure that actions have consequences. If someone consistently doesn't do what they committed to, what happens? If someone treats others badly, what's the recourse? In structureless groups, the answer is usually nothing, or else someone gets quietly frozen out through social pressure.
Decide what accountability looks like. Checking in on commitments? Having conversations when things slip? Clear consequences for patterns of behavior that harm the group? This feels uncomfortable because we're taught that structure equals oppression. But without accountability, you just have unaccountable power.
Make it proportional and restorative when possible. The point isn't punishment, it's maintaining the group's capacity to function and keeping people safe. But sometimes people need to leave, and there should be a legitimate process for that too.
Why this matters comes down to power. The fantasy of structurelessness serves power in two ways. First, it allows informal elites to consolidate control while claiming there's no hierarchy. Second, it makes groups dysfunctional, which is convenient for anyone who benefits from the absence of organized opposition.
When your worker coop can't make decisions, when your mutual aid network splinters over unresolved conflicts, when your organizing committee burns out because a few people do everything, that's not a failure of the people involved. That's structurelessness working exactly as it's designed to.
The choice isn't between structure and freedom. It's between explicit structures that can be challenged and changed, and implicit structures that operate in the shadows. One enables democracy. The other prevents it.
Build structures. Make them visible. Change them when they don't work. That's not selling out, that's how you build something that lasts.
Name who can bring proposals and how they get on the agenda. Otherwise the people who are most comfortable speaking up or who talk to the right people beforehand set the agenda by default.
Rotate them. Six months, a year, whatever makes sense. This prevents anyone from accumulating informal power through being the only person who knows how things work. It also distributes skills across the group.
Information access is crucial because hidden information is hidden power. If discussions happen in private chats, if decisions get made in informal hangouts, if context lives in the heads of a few long-timers, you have an invisible hierarchy.
Make information accessible. Use shared documents, public channels, whatever works. The point is that anyone in the group can access what they need to participate fully.
content/blog/integrating-new-members-without-dilution.md
+53
View File
@@ -0,0 +1,53 @@
---
title: "Integrating New Members Without Dilution"
description: "How to Bring New People In Without Everything Falling Apart"
author: "Author name"
date: "2025-08-05"
related:
- "making-decisions-without-hierarchy"
- "knowledge-management-and-institutional-amnesia"
- "avoiding-burnout-sustainability-in-the-ruins"
thumbnail:
vertical: "integrating-new-members-without-dilution-vertical.svg"
horizontal: "integrating-new-members-without-dilution-horizontal.svg"
background:
color: "#F5D4C8"
---
Your worker coop is finally stable. Your mutual aid group actually delivers. Your open source project has momentum. People show up, work gets done, meetings function. You've built something that works, which means people want to join. That's where the problem starts.
Every new person threatens what you've built. Not because they're incompetent, but because integration takes work. Someone has to explain how things operate, translate the shared references, bring them up to speed. Usually that someone is whoever has spare energy, which means your best people become full-time onboarding machines while actual work suffers.
The usual response is to stop letting people in. But a collective that can't grow is already dying. Your members will move, burn out, lose interest. If you haven't figured out how to integrate new people, you're counting down to collapse.
You need a system. Here's what works.
The buddy system means pairing every new person with an established member for three months. The buddy meets them before the first meeting to explain basics: who's who, what the projects are, how meetings actually run. They sit together during meetings for real-time context. They check in between meetings to answer questions.
This works because what makes a group function can't be written down. When is it okay to disagree? How do decisions actually get made? What does "I'll look into that" really mean? The buddy translates this.
Critical part: rotate who does it. If it's always the same people, you burn them out and create an insider class. Everyone around for six months should buddy someone.
Splitting when you get big becomes necessary because past twenty people, the dynamics change. Intimacy that worked for a small group can't cover dozens. The culture doesn't scale, it just thins out.
This requires the original core to accept that different groups will operate differently. That's not a threat, that's how things spread.
Growth means change, and you can't add people without things changing. New people bring new perspectives and energy. If your group can't absorb that, the problem isn't them.
These practices make change manageable. They create structures so integration doesn't depend on heroes working themselves to death. The alternative is slow collapse: your best people burn out, new people drift away, eventually no one's left.
You need more people. You need them to actually become part of what you're building. This is how.
Staged responsibility means not giving new people important roles immediately. Map which tasks need deep organizational knowledge and which just need someone willing. Coalition negotiations? That needs context. Social media? Less so. Note-taking? Anyone can do it.
Month one: observe and take simple tasks. Show up, help with setup, take notes. Month two: join working groups, contribute to discussions, take on contained tasks. Month three onward: more autonomy as understanding deepens.
Make this visible. Otherwise committed people stay peripheral forever because no one thought to offer them more.
Making knowledge redundant matters because if one person holds crucial knowledge, you have a failure point. When they leave, the knowledge leaves.
Document processes, but recognize documentation misses most of what matters. Meeting notes say you decided X, not why everyone was skeptical or how you got there. That lives in stories.
Every few months, talk through key moments: actions that worked, conflicts resolved, important decisions. Make sure newer members hear it. The informal spaces matter too. Pre-meeting chat, post-action talk, group messages. This is where people learn what actually gets valued.
Split into smaller working groups with real autonomy. Five to ten people, focused on specific work. They coordinate through assemblies but operate independently. A new person joining a six-person group can be effectively integrated. A new person joining a forty-person meeting just gets lost.
content/blog/knowledge-management-and-institutional-amnesia.md
+63
View File
@@ -0,0 +1,63 @@
---
title: "Knowledge Management and Institutional Amnesia"
description: "Preserving what we learn without surveillance infrastructure"
author: "Author name"
date: "2025-08-20"
related:
- "integrating-new-members-without-dilution"
- "operational-security-mutual-aid"
- "avoiding-burnout-sustainability-in-the-ruins"
thumbnail:
vertical: "knowledge-management-and-institutional-amnesia-vertical.svg"
horizontal: "knowledge-management-and-institutional-amnesia-horizontal.svg"
background:
color: "#D4F0E0"
---
Someone leaves the group and takes three years of operational knowledge with them. Not because they're selfish, but because that knowledge lived in their head and in message threads that have already disappeared. The new person trying to figure out how intake works has to reconstruct the process from fragments and half-remembered explanations. Six months later, someone else leaves and the cycle repeats.
This is the tax encrypted organizing pays. Signal, Matrix, and similar tools protect vulnerable people from surveillance. The ephemerality is the point. But groups need institutional memory to function. You can't rediscover how to verify requests or coordinate emergency response every time your membership turns over. The energy cost is unsustainable.
This isn't a personal failure. It's what happens when the tools we use for privacy conflict with the requirements of institutional memory. The question isn't whether to use encrypted messaging, it's how to preserve knowledge without compromising security.
Signal's disappearing messages and lack of cloud storage are features, not bugs. They protect people. But cooperatives and organizing groups need to document procedures: how intake works, how resources get distributed, how conflicts get resolved, what to do in emergencies. The solution isn't abandoning encrypted tools. It's building complementary systems that respect both privacy and sustainability.
The most effective approach separates operational communication from institutional documentation. Signal, Matrix, or whatever encrypted tool you use stays as the primary channel for real-time coordination, personal information, and sensitive discussions. Meanwhile, procedural knowledge that doesn't contain identifying information lives somewhere more permanent.
For documentation, use password-protected wikis, encrypted cloud documents like those provided by Nextcloud cooperatives, or collaborative platforms like CryptPad that prioritize privacy. The commercial option is Notion, though it's surveillance infrastructure pretending to be helpful. Better to support cooperative alternatives when possible.
Essential documentation includes onboarding guides for new volunteers explaining roles and expectations. Step-by-step protocols for common tasks like intake, verification, and distribution. Decision-making processes and governance structures so people understand how choices actually get made. Contact trees and escalation procedures for when things go wrong. Templates for common messages or forms so people aren't reinventing basic communications. Retrospectives on what worked and what didn't during major operations.
This last one matters more than groups realize. After a big action or crisis response, you know what succeeded and what failed. Six months later, that knowledge has evaporated. Document it while it's fresh. Future members will thank you for not making them learn through the same painful trial and error.
Knowledge management requires ongoing attention, which means it needs to be someone's responsibility. Designate a rotating documentation coordinator. Not a permanent position, because that creates the same knowledge hoarding problem you're trying to solve. Rotate every few months. The coordinator's job is capturing new procedures as they emerge and making sure documentation stays current.
After significant operations or when processes change, hold brief documentation sessions. Thirty minutes where participants help update guides while details are still clear. This isn't bureaucracy, it's preventing the loss of hard-won understanding.
Worker cooperatives face similar challenges. Member composition changes over time. If operational knowledge lives only in people's heads or in vanished message threads, every transition becomes a crisis. Documenting procedures isn't about control, it's about continuity. It's ensuring that the person who developed the accounting workflow or the member intake process doesn't become a single point of failure.
The hardest part isn't technical, it's cultural. Groups that move fast and prioritize immediate needs often see documentation as bureaucracy. This is backwards. Documentation is care work. You're caring for future volunteers and the sustainability of your mission. When exhausted members can find clear procedures instead of piecing together information from scattered message threads, everyone benefits.
Frame it as preparation for growth, not paranoia about decline. If your group succeeds, you'll need to onboard new people efficiently. If your project gains users, you'll need documentation they can actually use. If your cooperative expands, new members need to understand how things work. The alternative is that your most knowledgeable people become bottlenecks, explaining the same things over and over until they burn out.
Consider what gets lost when documentation doesn't exist. The person who set up your verification process leaves. No one remembers exactly how it worked or why certain steps matter. You reinvent something inferior. The coop member who negotiated your supplier relationships retires. No one documented those connections or the reasoning behind vendor choices. You start from scratch. The developer who built a critical feature disappears. No one understands the architecture decisions. The technical debt accumulates.
This pattern repeats endlessly in groups that don't take knowledge management seriously. It's not dramatic, it's grinding. Constant small losses of understanding that accumulate into major dysfunction.
Tools matter here. CryptPad offers encrypted collaborative documents without corporate surveillance. Nextcloud can be run by cooperative hosting providers, keeping your data under collective control rather than corporate ownership. BookStack provides wiki functionality with granular permissions. Zulip offers persistent, threaded communication that's more searchable than Signal while still being open source.
The point isn't specific tools, it's the principle: use encrypted ephemeral channels for sensitive operational communication, use persistent documentation systems for procedural knowledge, and make sure those systems align with your values around surveillance and ownership.
Stop treating institutional memory as a luxury you'll get to when things calm down. Things won't calm down. The crisis is permanent under capitalism. Either you build systems that preserve knowledge despite constant turbulence, or you accept endless cycles of reinvention that exhaust everyone involved.
Documentation isn't about bureaucracy. It's about refusing to let hard-won knowledge disappear when it could help the next person trying to do the work. It's about building organizations that can outlast any individual member. It's about sustainability in the ruins.
The critical distinction: these repositories contain procedures, not personal data. Document the how of your work without including identifying information. How to verify requests, how to coordinate pickups, how to handle disputes. The process, not the people.
Build redundancy into your system. Multiple members should have access to documentation repositories. Critical information should exist in at least two forms. If the wiki goes down or someone loses the password, you need backup. Consider quarterly reviews where coordinators check that documentation remains current and accessible.
Not everything needs the same security level. Public-facing resources like volunteer signup information can live openly. Internal procedures might use password protection. Only information that could directly harm community members requires encryption. Create clear guidelines about what stays in encrypted channels versus what moves to documentation.
Case-specific details stay in Signal. Personal information stays in Signal. Real-time sensitive coordination stays in Signal. General procedures, lessons learned, organizational structures can move to documentation. The line is whether the information could identify or harm specific people. If yes, it stays ephemeral. If no, it gets preserved.
The open source model offers useful parallels here. Successful projects separate community discussion, which happens in ephemeral channels, from documentation, which lives in wikis and readme files. They have contribution guidelines, architecture decisions, and troubleshooting guides that persist. The knowledge exists independently of any individual contributor. When someone leaves, their specific conversations may disappear, but their contributions to understanding how the system works remain.
content/blog/making-decisions-without-hierarchy.md
+25
View File
@@ -0,0 +1,25 @@
---
title: "Making decisions without hierarchy"
description: "A brief guide to collaborative nonhierarchical decision making"
author: "Author name"
date: "2025-08-01"
related:
- "resolving-active-conflicts"
- "integrating-new-members-without-dilution"
- "how-chaos-concentrates-control"
thumbnail:
vertical: "making-decisions-without-hierarchy-vertical.svg"
horizontal: "making-decisions-without-hierarchy-horizontal.svg"
background:
color: "#E8D4F4"
---
Many groups try to work without bosses, managers, or traditional leadership structures. But when no one's in charge, how do decisions actually get made? Non-hierarchical groups often rely on collective processes that prioritize trust, transparency, and shared responsibility. These approaches can take more time upfront, but they help build stronger, more equitable communities in the long run.
One common method is consensus-based decision-making. In this approach, the goal isn't just to get majority agreement but to ensure that everyone can live with the outcome. Consensus doesn't mean everyone gets exactly what they want. It means no one is actively opposed. This usually requires open discussion, active listening, and a willingness to compromise. It also works best when the group has shared values and clear communication norms.
Another option is to use roles or working groups that have specific scopes of responsibility, even if the group itself is flat. For example, one team might handle finances while another focuses on outreach. These roles can rotate or be chosen by the group, and decisions within those areas can be made autonomously, provided there's transparency and accountability back to the wider group.
Tools also matter. Structured facilitation, shared agendas, and decision logs can keep the process from getting stuck or dominated by a few voices. Some groups use hand signals or colored cards during meetings to check for consensus or surface concerns. Others rely on asynchronous tools like polls, shared documents, or messaging platforms to give everyone a chance to weigh in.
Non-hierarchical decision-making isn't about having no structure. It's about choosing structures that reflect the group's values and support participation. It takes intention and care, but done well, it creates space for more voices, deeper buy-in, and decisions that reflect collective wisdom rather than individual authority.
content/blog/operational-security-mutual-aid.md
+16 -19
View File
@@ -1,36 +1,33 @@
---
title: "Sample: Operational Security for Mutual Aid"
description: "Tactics to protect members, secure communication, and prevent infiltration"
title: "Operational Security for Mutual Aid"
description: "Why protecting information isn't paranoia: it's care work in a hostile world"
author: "Author name"
date: "2025-04-10"
related: ["resolving-active-conflicts", "making-decisions-without-hierarchy"]
date: "2025-08-10"
related:
- "resolving-active-conflicts"
- "digital-mediation-and-the-death-of-nuance"
- "knowledge-management-and-institutional-amnesia"
thumbnail:
vertical: "operational-security-mutual-aid-vertical.svg"
horizontal: "operational-security-mutual-aid-horizontal.svg"
banner:
horizontal: "operational-security-mutual-aid-banner.svg"
background:
color: "#F4F3F1"
---
Mutual aid organizations face unique security challenges. Unlike traditional nonprofits, they often operate in politically sensitive environments and may be targets of surveillance, infiltration, or repression. This guide provides practical strategies for protecting your organization and its members.
We like to think of mutual aid as something pure, outside the machinery of state surveillance and corporate extraction. But the reality is messier. The moment you start organizing, you're generating data. Names, addresses, health conditions, immigration status, financial need. All of it stored somewhere, passed between people, vulnerable to exactly the kind of scrutiny that could harm the people you're trying to help.
Understanding the threat landscape is crucial before implementing security measures. External threats include surveillance by government or corporate entities, infiltration by agents or informants, legal or extralegal repression, and doxxing of members' personal information. Internal threats can include burnout leading to security lapses, inadvertent information sharing through gossip, poor communication creating vulnerabilities, and lack of training resulting in risky decisions.
Operational security isn't about cosplaying as revolutionaries or obsessing over encrypted everything. It's about recognizing that care work happens in a context where information itself can become a weapon. When you're distributing food to undocumented neighbors or running an underground HRT network, a single careless spreadsheet can translate directly into state violence. The risk isn't theoretical.
Secure communication forms the foundation of operational security. For digital communication, use Signal for sensitive conversations and avoid SMS for anything confidential. Consider Matrix for larger group communications and regularly update apps and devices. For email security, use encrypted services like ProtonMail or Tutanota, enable two-factor authentication, be cautious with attachments, and avoid discussing sensitive topics in email. On social media, use separate accounts for personal and organizational use, be mindful of location data in photos, don't post about future activities, and consider using pseudonyms.
The problem is that most mutual aid networks inherit their infrastructure from the nonprofit world or just use whatever's convenient. Google Sheets because everyone has access. Facebook groups because that's where people already are. Venmo because it's fast. Each of these choices makes perfect sense in isolation, but together they create a surveillance surface that would make any security professional wince.
For in-person communication, choose meeting locations carefully and be aware of your surroundings. Don't discuss sensitive topics in public and use code words when necessary. Keep physical documents secure, shred sensitive materials, don't leave notes in public places, and use secure storage for important files.
Start with the basics. Who actually needs to know what? Not everyone in your network needs access to intake forms with people's full legal names and why they need help. Compartmentalization isn't about mistrust, it's about minimizing exposure. If someone's phone gets seized or their account gets compromised, what can they give up? The less any single person knows, the safer everyone is.
Protecting information is crucial for member safety and organizational effectiveness. Classify data into public information (general organizational goals, public events, contact information for inquiries, educational materials), internal information (member contact details, meeting schedules, internal processes, financial information), and confidential information (personal details of vulnerable members, security procedures, legal strategies, sources of funding). Implement access control by limiting access based on need, using secure passwords and two-factor authentication, regularly reviewing who has access to what, and following a "need to know" principle.
Think about your tools. Signal is free and actually encrypted. Proton Mail costs nothing for basic use. There are alternatives to Google Drive that don't scan your files for content. These aren't difficult switches to make, but they require convincing people to change habits, which is always harder than the technical side. Frame it as part of the work, not an optional extra. If you're serious about care, you have to be serious about protection.
Physical security is equally important. For meeting spaces, choose neutral, accessible locations, avoid predictable patterns, consider multiple backup locations, and be aware of surveillance capabilities. During meetings, check for recording devices, ensure exits are accessible, have a security plan for disruptions, and know your legal rights. For events, assess potential risks, plan for different scenarios, coordinate with other organizations, and have legal observers present. During events, monitor for infiltrators, document any incidents, have medical support available, and know emergency procedures.
Data retention matters too. How long are you keeping intake forms? Why? Every piece of information you hold is a potential liability. Set up systems where sensitive data gets deleted on a schedule, not kept indefinitely because you might need it someday. You probably won't, and if you do, the risk of keeping it likely outweighs the benefit.
Member protection is paramount. For personal security, use strong, unique passwords, enable two-factor authentication, keep software updated, and be cautious with public WiFi. For physical safety, vary your routines, be aware of surveillance, trust your instincts, and have emergency contacts. Support systems should include recognizing signs of burnout, providing emotional support, connecting members with resources, and creating safe spaces for discussion. For legal support, know your rights, have legal contacts ready, document incidents, and support members facing legal issues.
And then there's the cultural piece, which is harder to solve with an app. Mutual aid attracts people who want to be helpful, who want to share and connect. That openness is beautiful but it's also a vulnerability. Teaching people to be thoughtful about what they post, what they photograph, who they name, requires ongoing conversation. It's not natural to most people raised in an attention economy where sharing everything is the default.
Organizational security requires systematic approaches. For structure and processes, use consensus-based decision making, document decisions securely, limit information to necessary people, and conduct regular security reviews. For financial security, use secure banking methods, keep financial records private, diversify funding sources, and conduct regular financial audits. Training and education should include regular security briefings, role-playing scenarios, updates on new threats, and individual security assessments. Legal education should cover knowing your rights, understanding local laws, legal observer training, and emergency legal procedures.
None of this is about becoming invisible or retreating into bunkers. It's about building practices that match the stakes. You can still be open, still be welcoming, still operate with trust at the center. But you do it with eyes open to the fact that the state is watching, that platforms will comply with subpoenas, that one mistake can unravel months of work and endanger real people.
Despite best efforts, infiltration can still occur. Warning signs include asking too many questions, pushing for sensitive information, creating division within the group, and unusual interest in security procedures. Response procedures should include documenting suspicious behavior, discussing concerns with trusted members, implementing additional security measures, and considering removing problematic individuals. After infiltration, assess what information was compromised, update security procedures, support affected members, and learn from the experience.
Long-term security comes from building resilient organizations. Strong relationships are built through consistent action, supporting each other through challenges, creating multiple communication channels, and regular check-ins and support. Diversification means not relying on single points of failure, having multiple leaders and organizers, diverse funding sources, and various communication methods. Continuous improvement involves monthly security assessments, annual security audits, learning from incidents, and updating procedures. Adaptation requires staying informed about new threats, updating security measures, training new members, and sharing knowledge with allies.
Operational security is not about paranoia—it's about practical protection that allows your organization to continue its important work safely and effectively. By implementing these strategies thoughtfully and consistently, you can create a secure foundation for your mutual aid efforts. Remember: security is everyone's responsibility, and it's better to be prepared than to react to a crisis.
Operational security is another form of solidarity. It says: your safety matters enough that we'll do the boring, annoying work of protecting it. It's not glamorous, but neither is most care work. And like all care work, it's political whether we admit it or not.
content/blog/resolving-active-conflicts.md
+12 -8
View File
@@ -4,22 +4,26 @@ description: "Practical steps for resolving conflicts while maintaining trust, c
author: "Author name"
date: "2025-04-15"
related:
["operational-security-mutual-aid", "making-decisions-without-hierarchy"]
- "operational-security-mutual-aid"
- "making-decisions-without-hierarchy"
- "avoiding-burnout-sustainability-in-the-ruins"
thumbnail:
vertical: "resolving-active-conflicts-vertical.svg"
horizontal: "resolving-active-conflicts-horizontal.svg"
banner:
horizontal: "resolving-active-conflicts-banner.svg"
background:
color: "#E2EFFF"
---
Many groups strive to work without bosses, managers, or traditional leadership structures. But when no one's in charge, how do decisions get made? Non-hierarchical groups often rely on collective processes that prioritize trust, transparency, and shared responsibility. These approaches can take more time upfront, but they help build stronger, more equitable communities in the long run.
Conflict is not the enemy of mutual aid. It's an inevitable feature of any genuine collective effort. The sanitized fantasy of frictionless cooperation belongs to corporate team-building retreats, not to the real work of building alternative structures of care and support. When people come together with different experiences, needs, and visions, tension emerges. The question isn't how to avoid conflict, but how to metabolize it productively.
One common method is consensus-based decision-making. In this approach, the goal is not just to get majority agreement but to ensure that everyone can live with the outcome. Consensus doesn't mean everyone gets exactly what they want—it means no one is actively opposed. This usually requires open discussion, active listening, and a willingness to compromise. It also works best when the group has shared values and clear communication norms.
The neoliberal imagination wants us to believe that conflict signals failure, that properly functioning groups hum along without disagreement. This is ideological mystification. Real solidarity is forged through working through differences, not around them.
Another option is to use roles or working groups that have specific scopes of responsibility, even if the group itself is flat. For example, one team might handle finances while another focuses on outreach. These roles can rotate or be chosen by the group, and decisions within those areas can be made autonomously—provided there's transparency and accountability back to the wider group.
Any approach to conflict resolution needs to rest on three foundational pillars. First is structural clarity: clear, agreed-upon processes for decision-making, membership, and conflict resolution. Ambiguity breeds conflict. Second is political analysis. Most conflicts aren't about surface disagreements but deeper questions of power, resources, and strategy. Resolution must excavate these underlying dimensions. Third is collective responsibility. Conflict resolution isn't something that happens to a group. It's work the group does together.
Tools also matter. Structured facilitation, shared agendas, and decision logs can keep the process from getting stuck or dominated by a few voices. Some groups use hand signals or colored cards during meetings to check for consensus or surface concerns. Others rely on asynchronous tools like polls, shared documents, or messaging platforms to give everyone a chance to weigh in.
Mutual aid groups have various conflict resolution methods at their disposal, tools that can strengthen collective capacity and create structural options before conflicts escalate. Which methods work depends on material realities like group size, not abstract preferences about process. Consensus building works when groups can afford the time investment but breaks down under resource pressure or tight deadlines. Conflict workshops provide skill-building before tensions arise, though they're only as effective as people's willingness to actually use the tools. Supermajority voting (75-80%) balances efficiency with broad buy-in when consensus feels impossible. Facilitated group conversations create structured space for working through tensions collectively rather than letting them fester in side conversations. Facilitated negotiation brings in outside support when internal dynamics make resolution difficult, though finding truly neutral facilitators with political analysis can be challenging. Circle processes draw on indigenous practices to center relationship and accountability, particularly effective for addressing harm. Code of conduct enforcement establishes clear boundaries and consequences, essential for groups serious about creating safer spaces and after conflict. Direct negotiation between affected parties works when power dynamics are relatively balanced and people have conflict resolution skills. Conflict management councils create dedicated structures for handling disputes, drawing on the experience and long standing context of respected group members willing to take on this responsibility.
Non-hierarchical decision-making isn't about having no structure—it's about choosing structures that reflect the group's values and support participation. It takes intention and care, but done well, it creates space for more voices, deeper buy-in, and decisions that reflect collective wisdom, not just individual authority.
Building conflict resolution capacity isn't optional. It's infrastructure. Groups that wait until conflicts explode to think about resolution processes are like activists who wait until the police arrive to think about security culture. The methods you choose depend on your group's material conditions and scale, but the principle remains constant: conflict-capable groups are built, not born, through deliberate practice and structural preparation. The key is having multiple tools available and choosing strategically rather than defaulting to whatever feels most comfortable. Writing down the methods that your group has chosen to use can make it easy to choose what method might work best for your group when a situation arises.
Capitalist competition trains us to see conflict as zero-sum. Mutual aid offers a different model: conflict as compost, messy organic matter that, when processed well, creates richer soil for collective flourishing. Most conflicts contain valuable information about what needs to change. They reveal hidden assumptions, unmet needs, and structural problems invisible during smooth times. Groups that learn to metabolize conflict develop stronger practices, deeper relationships, and more effective organizing. The goal isn't harmony but antifragility, groups that get stronger through stress rather than breaking under pressure. In a world designed to isolate us, learning to work through conflict together is both means and end.
The revolution will not be conflict-free. But it can be prepared to manage conflicts before they inevitably arise.
lib/assetUtils.ts
+17
View File
@@ -68,6 +68,23 @@ export function guideBannerLogoArrowPath(): string {
return "assets/shapes/guide-banner-logo-arrow.svg";
}
/** Per-article Tag mark for ContentContainer (Figma Tag frame 19600:15534). */
export function contentBlogTagPath(slug: string): string {
return `/content/blog/${slug}-tag.svg`;
}
/** Stable catalog slug order for icon fallbacks when a tag asset is missing. */
export const CONTENT_CATALOG_SLUG_ORDER = [
"resolving-active-conflicts",
"operational-security-mutual-aid",
"making-decisions-without-hierarchy",
"integrating-new-members-without-dilution",
"avoiding-burnout-sustainability-in-the-ruins",
"how-chaos-concentrates-control",
"digital-mediation-and-the-death-of-nuance",
"knowledge-management-and-institutional-amnesia",
] as const;
/**
* Asset paths for common components
*/
lib/content.ts
+3 -1
View File
@@ -71,7 +71,9 @@ export function getBlogPostFiles(): string[] {
try {
const files = fs.readdirSync(contentDirectory);
return files.filter(
(file) => file.endsWith(".md") || file.endsWith(".mdx"),
(file) =>
(file.endsWith(".md") || file.endsWith(".mdx")) &&
!file.startsWith("_"),
);
} catch (error) {
logger.error("Error reading blog content directory:", error);
public/content/blog/avoiding-burnout-sustainability-in-the-ruins-horizontal.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19244_45768)">
<path d="M0 0C105.6 0 211.2 0 320 0C320 74.415 320 148.83 320 225.5C214.4 225.5 108.8 225.5 0 225.5C0 151.085 0 76.67 0 0Z" fill="#EDCC8F"/>
<path d="M115.5 191L116.609 222.823L139.895 201.105L118.178 224.391L150 225.5L118.178 226.609L139.895 249.895L116.609 228.178L115.5 260L114.391 228.178L91.1048 249.895L112.823 226.609L81 225.5L112.823 224.391L91.1048 201.105L114.391 222.823L115.5 191Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 183.5L188 172L174.169 172C166.53 172 160 182.297 160 195C160 207.702 166.53 218 174.169 218L188 218L188 206.5C188 200.149 183.048 195 179.229 195C183.048 195 188 189.851 188 183.5Z" fill="#D96043"/>
<circle cx="272.745" cy="122.485" r="22.4851" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.526 184.726C298.26 184.726 306.961 176.118 306.961 165.5C306.961 154.881 298.26 146.274 287.526 146.274L269.16 146.274L269.16 184.726L287.526 184.726Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M269.16 146.274C258.722 146.274 250.26 154.882 250.26 165.5C250.26 176.119 258.722 184.727 269.16 184.727L269.16 146.274Z" fill="#D96043"/>
<path d="M269.87 205.918C266.339 210.468 259.788 211.294 255.238 207.763C250.688 204.232 249.862 197.682 253.393 193.132C256.924 188.582 272.663 184.921 272.705 185.256C272.705 185.256 273.4 201.369 269.87 205.918Z" fill="#0BA960"/>
<rect x="12" y="189" width="12.5" height="12.5" fill="#16A9C4"/>
<rect x="24.5" y="189" width="12.5" height="12.5" fill="#D93529"/>
<rect x="12" y="201.5" width="12.5" height="12.5" fill="#8D5AC4"/>
<rect x="24.5" y="201.5" width="12.5" height="12.5" fill="#0BA960"/>
<g clip-path="url(#clip1_19244_45768)">
<mask id="mask0_19244_45768" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="281" y="8" width="23" height="27">
<path d="M304 8H281V35H304V8Z" fill="white"/>
</mask>
<g mask="url(#mask0_19244_45768)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M286.75 8H281V21.5C281 28.9558 286.149 35 292.5 35C298.851 35 304 28.9558 304 21.5V8H298.25C295.074 8 292.5 11.0221 292.5 14.75C292.5 11.0221 289.926 8 286.75 8Z" fill="#0BA960"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_19244_45768">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
<clipPath id="clip1_19244_45768">
<rect width="23" height="27" fill="white" transform="translate(281 8)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/content/blog/avoiding-burnout-sustainability-in-the-ruins-tag.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="60" height="30" viewBox="0 0 60 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="60" height="30" fill="#080033"/>
<circle cx="12" cy="15" r="8" fill="#D96043"/>
<g clip-path="url(#clip0_19000_22880)">
<mask id="mask0_19000_22880" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="7" width="16" height="16">
<path d="M38 7H22V23H38V7Z" fill="white"/>
</mask>
<g mask="url(#mask0_19000_22880)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8 7C31.2418 7 31.6 7.35817 31.6 7.8V9.20589C31.6 9.91861 32.4617 10.2755 32.9657 9.77157L33.9598 8.77746C34.2722 8.46504 34.7787 8.46504 35.0912 8.77746L36.2226 9.90883C36.535 10.2212 36.535 10.7278 36.2226 11.0402L35.2284 12.0343C34.7245 12.5383 35.0814 13.4 35.7941 13.4H37.2C37.6418 13.4 38 13.7582 38 14.2V15.8C38 16.2418 37.6418 16.6 37.2 16.6H35.7941C35.0814 16.6 34.7245 17.4617 35.2284 17.9657L36.2226 18.9598C36.535 19.2722 36.535 19.7787 36.2226 20.0912L35.0912 21.2226C34.7787 21.535 34.2722 21.535 33.9598 21.2226L32.9657 20.2284C32.4617 19.7245 31.6 20.0814 31.6 20.7941V22.2C31.6 22.6418 31.2418 23 30.8 23H29.2C28.7582 23 28.4 22.6418 28.4 22.2V20.7941C28.4 20.0814 27.5383 19.7245 27.0343 20.2284L26.0402 21.2226C25.7278 21.535 25.2212 21.535 24.9088 21.2226L23.7775 20.0912C23.465 19.7787 23.465 19.2722 23.7775 18.9598L24.7716 17.9657C25.2755 17.4617 24.9186 16.6 24.2059 16.6H22.8C22.3582 16.6 22 16.2418 22 15.8V14.2C22 13.7582 22.3582 13.4 22.8 13.4H24.2059C24.9186 13.4 25.2755 12.5383 24.7716 12.0343L23.7775 11.0402C23.465 10.7278 23.465 10.2212 23.7775 9.90883L24.9088 8.77746C25.2212 8.46504 25.7278 8.46504 26.0402 8.77746L27.0343 9.77157C27.5383 10.2755 28.4 9.91861 28.4 9.20589V7.8C28.4 7.35817 28.7582 7 29.2 7H30.8ZM30 19C32.2091 19 34 17.2091 34 15C34 12.7909 32.2091 11 30 11C27.7909 11 26 12.7909 26 15C26 17.2091 27.7909 19 30 19Z" fill="#8D5AC4"/>
</g>
</g>
<path d="M47.75 7.14746C48.2092 7.29305 48.2092 7.29305 48.6885 7.61627C49.1175 7.84798 49.5478 8.07728 49.979 8.30483C50.1992 8.42298 50.4194 8.54112 50.6463 8.66285C51.8368 9.1622 53.0636 9.43863 54.3199 9.72591C54.3374 10.9601 54.3501 12.1942 54.3585 13.4285C54.362 13.8478 54.3668 14.267 54.373 14.6862C54.3816 15.2914 54.3855 15.8964 54.3886 16.5017C54.3922 16.6868 54.3959 16.872 54.3996 17.0627C54.4001 18.7597 53.9936 20.2344 52.8387 21.534C52.7089 21.6857 52.5792 21.8374 52.4455 21.9937C51.8601 22.4774 51.2856 22.6283 50.5656 22.8525C50.5623 22.5529 50.5623 22.5529 50.559 22.2471C50.5486 21.5022 50.5342 20.7574 50.5169 20.0126C50.5103 19.691 50.5054 19.3693 50.502 19.0475C50.497 18.5837 50.4856 18.12 50.474 17.6563C50.4691 17.3776 50.4641 17.099 50.4591 16.8119C50.3078 15.9178 50.0208 15.5251 49.3924 14.8828C48.6346 14.2603 47.5523 14.2603 46.8114 14.6484C45.8847 15.1339 45.7104 15.6041 45.4036 16.5236C45.3683 17.0074 45.3453 17.492 45.3293 17.9768C45.3195 18.26 45.3097 18.5433 45.2995 18.8352C45.2903 19.1311 45.2811 19.4271 45.2716 19.732C45.2615 20.0307 45.2513 20.3294 45.2409 20.6371C45.216 21.3756 45.192 22.114 45.1689 22.8525C44.2349 22.4268 43.552 22.0349 42.8812 21.2557C42.7469 21.1043 42.6126 20.9529 42.4742 20.7969C41.5992 19.5105 41.5847 18.227 41.6035 16.7306C41.6042 16.5296 41.6048 16.3287 41.6055 16.1217C41.6081 15.4841 41.614 14.8465 41.62 14.2089C41.6224 13.7749 41.6245 13.3409 41.6264 12.9068C41.6316 11.8465 41.6397 10.7862 41.6493 9.72591C41.8866 9.66876 42.1238 9.61161 42.3682 9.55274C42.685 9.47325 43.0017 9.39362 43.3184 9.31387C43.4741 9.27676 43.6298 9.23965 43.7902 9.20142C45.1203 8.86158 46.1218 8.25822 47.2174 7.42765C47.3932 7.33519 47.5689 7.24272 47.75 7.14746Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19000_22880">
<rect width="16" height="16" fill="white" transform="translate(22 7)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

public/content/blog/avoiding-burnout-sustainability-in-the-ruins-vertical.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="260" height="390" fill="#EDCC8F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.258 311.992C156.1 310.897 156.715 309.645 157.07 308.311C157.608 306.304 157.54 304.183 156.874 302.215C156.208 300.247 154.974 298.52 153.328 297.253C151.682 295.986 149.697 295.235 147.624 295.095C145.551 294.955 143.483 295.432 141.681 296.467L138.817 297.987L137.111 295.25C135.715 292.835 133.417 291.074 130.722 290.353C128.027 289.633 125.157 290.013 122.742 291.409C120.327 292.805 118.566 295.103 117.845 297.798C117.125 300.493 117.505 303.363 118.901 305.778L130.286 325.835C130.38 326.002 130.508 326.149 130.66 326.267C130.812 326.384 130.986 326.47 131.172 326.52C131.357 326.57 131.551 326.582 131.742 326.556C131.932 326.531 132.116 326.467 132.282 326.37L152.17 314.692C153.368 314.005 154.417 313.087 155.258 311.992ZM103.329 355.054C102.488 356.149 101.872 357.4 101.518 358.735C100.979 360.742 101.047 362.863 101.713 364.831C102.379 366.799 103.613 368.525 105.259 369.792C106.906 371.06 108.891 371.811 110.964 371.951C113.036 372.091 115.104 371.613 116.906 370.579L119.77 369.059L121.476 371.796C122.872 374.211 125.171 375.972 127.865 376.692C130.56 377.413 133.431 377.033 135.846 375.637C138.26 374.241 140.021 371.942 140.742 369.248C141.462 366.553 141.082 363.683 139.686 361.268L128.301 341.211C128.207 341.044 128.08 340.897 127.927 340.779C127.775 340.661 127.601 340.575 127.416 340.525C127.23 340.476 127.036 340.463 126.845 340.489C126.655 340.515 126.471 340.579 126.305 340.676L106.418 352.353C105.22 353.041 104.17 353.958 103.329 355.054ZM154.506 361.299C153.171 360.945 151.92 360.329 150.824 359.488C149.729 358.647 148.811 357.597 148.124 356.399L136.447 336.511C136.349 336.345 136.286 336.162 136.26 335.971C136.234 335.781 136.246 335.587 136.296 335.401C136.346 335.215 136.432 335.041 136.55 334.889C136.667 334.737 136.814 334.61 136.982 334.515L157.038 323.131C159.453 321.734 162.324 321.355 165.019 322.075C167.713 322.795 170.012 324.557 171.408 326.971C172.804 329.386 173.183 332.257 172.463 334.951C171.743 337.646 169.982 339.944 167.567 341.34L164.829 343.046L166.35 345.911C167.384 347.712 167.861 349.78 167.721 351.853C167.581 353.926 166.83 355.911 165.563 357.557C164.296 359.204 162.57 360.438 160.602 361.104C158.634 361.77 156.512 361.838 154.506 361.299ZM107.763 307.558C106.668 306.717 105.416 306.101 104.082 305.747C102.075 305.208 99.9538 305.276 97.9858 305.942C96.0178 306.608 94.2912 307.842 93.024 309.488C91.7568 311.135 91.0059 313.12 90.8659 315.193C90.7259 317.265 91.2032 319.333 92.2375 321.135L93.7578 323.999L91.0205 325.705C88.6056 327.102 86.8444 329.4 86.1241 332.095C85.4038 334.789 85.7836 337.659 87.1797 340.074C88.5757 342.489 90.874 344.251 93.5687 344.971C96.2634 345.691 99.1339 345.311 101.549 343.915L121.606 332.531C121.773 332.436 121.92 332.309 122.037 332.156C122.155 332.004 122.241 331.83 122.291 331.645C122.341 331.459 122.353 331.265 122.327 331.074C122.301 330.884 122.238 330.7 122.141 330.535L110.463 310.647C109.776 309.449 108.858 308.399 107.763 307.558Z" fill="#080033"/>
<rect x="184" y="276" width="13" height="13" fill="#16A9C4"/>
<rect x="197" y="276" width="13" height="13" fill="#D93529"/>
<rect x="184" y="289" width="13" height="13" fill="#8D5AC4"/>
<rect x="197" y="289" width="13" height="13" fill="#0BA960"/>
<g clip-path="url(#clip0_19192_4776)">
<mask id="mask0_19192_4776" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="205" y="327" width="38" height="45">
<path d="M243 327H205V372H243V327Z" fill="white"/>
</mask>
<g mask="url(#mask0_19192_4776)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 327H205V349.5C205 361.926 213.507 372 224 372C234.493 372 243 361.926 243 349.5V327H233.5C228.253 327 224 332.037 224 338.25C224 332.037 219.747 327 214.5 327Z" fill="#0BA960"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136 227.75L136 215L119.699 215C110.696 215 103 226.417 103 240.5C103 254.583 110.696 266 119.699 266L136 266L136 253.25C136 246.208 130.164 240.5 125.663 240.5C130.164 240.5 136 234.792 136 227.75Z" fill="#D96043"/>
<path d="M56.5 205.855H72.9998L56.5 222.355L40.0002 205.855H56.5Z" fill="#8D5AC4"/>
<path d="M56.5 239.039L40.0002 239.039L56.5 222.54L72.9998 239.039L56.5 239.039Z" fill="#080033"/>
<path d="M45.5 270L46.6092 301.823L69.8953 280.105L48.1775 303.391L80 304.5L48.1775 305.609L69.8953 328.895L46.6092 307.178L45.5 339L44.391 307.178L21.1048 328.895L42.8226 305.609L11 304.5L42.8226 303.391L21.1048 280.105L44.391 301.823L45.5 270Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1683 374.4C58.1683 361.05 49.3981 351.008 38.5797 351.008C32.9369 351.008 23.966 351 23.0332 351C23.0332 356.846 23.0332 368.013 23.0332 374.4H58.1683Z" fill="#D96043"/>
<path d="M211.503 172C214.195 172 216.378 174.183 216.378 176.875V188.842L220.392 177.568C221.295 175.032 224.083 173.708 226.619 174.611C229.155 175.514 230.479 178.303 229.576 180.839L225.367 192.659L233.363 182.989C235.079 180.915 238.152 180.623 240.227 182.339C242.301 184.054 242.592 187.127 240.877 189.202L233.065 198.648L243.611 192.404C245.928 191.033 248.918 191.798 250.29 194.114C251.662 196.431 250.896 199.421 248.579 200.793L237.601 207.293L250.152 204.967C252.799 204.476 255.343 206.224 255.834 208.871C256.325 211.518 254.576 214.062 251.929 214.553L239.103 216.93L251.957 219.159C254.61 219.619 256.388 222.143 255.928 224.796C255.468 227.448 252.944 229.225 250.292 228.766L237.573 226.56L248.74 233.026C251.07 234.376 251.865 237.358 250.516 239.688C249.166 242.017 246.184 242.812 243.854 241.463L232.332 234.79L240.781 245.082C242.489 247.163 242.187 250.234 240.106 251.942C238.026 253.65 234.954 253.348 233.246 251.268L225.427 241.742L229.554 253.354C230.455 255.89 229.13 258.677 226.594 259.579C224.057 260.481 221.269 259.155 220.367 256.618L216.378 245.393V257.307C216.378 259.999 214.195 262.182 211.503 262.182C208.811 262.182 206.628 259.999 206.628 257.307V245.295L202.599 256.612C201.695 259.148 198.908 260.472 196.372 259.569C193.836 258.666 192.511 255.878 193.414 253.342L197.625 241.512L189.624 251.189C187.908 253.264 184.836 253.555 182.761 251.84C180.686 250.124 180.395 247.052 182.11 244.978L189.924 235.526L179.371 241.776C177.055 243.148 174.065 242.382 172.693 240.065C171.322 237.749 172.087 234.759 174.403 233.387L185.371 226.891L172.845 229.214C170.198 229.705 167.654 227.956 167.163 225.31C166.672 222.662 168.42 220.119 171.067 219.628L183.893 217.25L171.042 215.021C168.39 214.561 166.612 212.038 167.072 209.386C167.532 206.733 170.055 204.956 172.708 205.416L185.412 207.618L174.251 201.155C171.922 199.806 171.127 196.824 172.476 194.494C173.825 192.164 176.808 191.37 179.138 192.719L190.66 199.391L182.212 189.1C180.504 187.019 180.806 183.947 182.887 182.239C184.968 180.531 188.039 180.833 189.747 182.914L197.554 192.424L193.434 180.83C192.532 178.293 193.858 175.506 196.395 174.604C198.931 173.703 201.719 175.029 202.62 177.565L206.628 188.842V176.875C206.628 174.183 208.811 172 211.503 172Z" fill="#080033"/>
<circle cx="231.433" cy="23.8333" r="10.8333" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.706 35.2948C224.677 35.2948 220.6 39.4421 220.6 44.558C220.6 49.674 224.677 53.8213 229.706 53.8213L229.706 35.2948Z" fill="#D96043"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M238.554 53.8215C243.726 53.8215 247.918 49.6741 247.918 44.5582C247.918 39.4422 243.726 35.2949 238.554 35.2949L229.705 35.2949L229.705 53.8215L238.554 53.8215Z" fill="#16A9C4"/>
<path d="M230.047 64.0307C228.346 66.2228 225.19 66.6208 222.998 64.9196C220.806 63.2184 220.408 60.0623 222.109 57.8702C223.81 55.6781 231.393 53.9142 231.413 54.0756C231.413 54.0756 231.749 61.8386 230.047 64.0307Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19192_4776">
<rect width="38" height="45" fill="white" transform="translate(205 327)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/content/blog/building-community-trust-horizontal.svg
-28
View File
@@ -1,28 +0,0 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19041_13609)">
<rect width="320" height="225.5" fill="#EECB8F"/>
<path d="M236.806 172.167C245.394 172.167 253.983 172.167 262.832 172.167C262.905 175.76 262.978 179.353 263.054 183.055C264.607 190.191 266.732 195.544 271.729 200.833C271.882 201 272.034 201.166 272.191 201.337C277.017 206.427 283.757 208.688 290.415 210.166C290.415 204.96 290.415 199.753 290.415 194.389C300.178 194.389 309.941 194.389 320 194.389C320 204.655 320 214.922 320 225.5C292.546 225.5 265.092 225.5 236.806 225.5C236.806 207.9 236.806 190.3 236.806 172.167Z" fill="#52829B"/>
<path d="M274.443 112.026H236.821V137.312V137.537V157.856H274.443V112.026Z" fill="#7372A9"/>
<path d="M236.806 172.167C245.394 172.167 253.983 172.167 262.832 172.167C262.832 189.766 262.832 207.366 262.832 225.5C254.243 225.5 245.655 225.5 236.806 225.5C236.806 207.9 236.806 190.3 236.806 172.167Z" fill="#5777AA"/>
<path d="M262.831 172.167C271.934 172.167 281.036 172.167 290.414 172.167C290.414 184.706 290.414 197.246 290.414 210.166C287.906 209.916 287.906 209.916 287.076 209.686C286.798 209.608 286.798 209.608 286.514 209.53C286.324 209.474 286.134 209.418 285.938 209.361C285.735 209.302 285.532 209.243 285.323 209.182C277.353 206.786 270.577 201.549 266.53 194.251C262.74 187.173 262.831 180.448 262.831 172.167Z" fill="#E17C24"/>
<path d="M296.058 112.71V79.6019C284.428 79.5943 285.115 79.4535 273.485 79.6018V112.439C274.96 112.436 276.312 112.436 277.757 112.439L278.283 112.436C278.89 112.436 279.498 112.436 280.106 112.435C280.504 112.433 280.902 112.433 281.3 112.432C281.87 112.432 281.878 112.432 283.059 112.431L283.107 112.431L286.125 112.425C289.391 112.42 292.888 112.714 296.058 112.71Z" fill="#7372A8"/>
<path d="M262.831 183.056C262.904 183.056 262.978 183.056 263.053 183.056C263.08 183.192 263.107 183.328 263.134 183.468C264.481 190.235 266.94 195.764 271.729 200.833C271.881 201 272.033 201.166 272.19 201.338C277.017 206.427 283.756 208.689 290.414 210.167C290.414 215.227 290.414 220.287 290.414 225.5C281.312 225.5 272.209 225.5 262.831 225.5C262.831 211.493 262.831 197.487 262.831 183.056Z" fill="#18465E"/>
<path d="M236.805 79.5C248.917 79.5 261.029 79.5 273.508 79.5C273.508 90.3533 273.508 101.207 273.508 112.389C261.396 112.389 249.284 112.389 236.805 112.389C236.805 101.536 236.805 90.6822 236.805 79.5Z" fill="#17465E"/>
<path d="M295.975 112.389C303.903 112.389 311.831 112.389 319.999 112.389C319.999 127.422 319.999 142.456 319.999 157.945C312.071 157.945 304.143 157.945 295.975 157.945C295.975 142.911 295.975 127.878 295.975 112.389Z" fill="#7C9E75"/>
<path d="M273.73 112.389C281.071 112.389 288.412 112.389 295.975 112.389C295.975 127.422 295.975 142.456 295.975 157.945C288.634 157.945 281.294 157.945 273.73 157.945C273.73 142.911 273.73 127.878 273.73 112.389Z" fill="#18465E"/>
<path d="M295.975 79.5C303.903 79.5 311.831 79.5 319.999 79.5C319.999 90.3533 319.999 101.207 319.999 112.389C312.071 112.389 304.143 112.389 295.975 112.389C295.975 101.536 295.975 90.6822 295.975 79.5Z" fill="#17465E"/>
<path d="M267.058 195.278C267.72 195.906 268.247 196.557 268.768 197.306C269.673 198.566 270.661 199.708 271.729 200.833C271.894 201.008 272.06 201.182 272.23 201.362C273.322 202.482 274.473 203.463 275.733 204.389C274.906 204.389 274.724 204.179 274.092 203.667C273.829 203.454 273.829 203.454 273.56 203.237C273.396 203.104 273.232 202.971 273.064 202.833C272.839 202.664 272.614 202.494 272.382 202.319C272.24 202.196 272.098 202.072 271.951 201.944C271.951 201.798 271.951 201.651 271.951 201.5C271.818 201.441 271.684 201.382 271.547 201.321C271.043 201.046 270.781 200.797 270.419 200.357C270.306 200.219 270.192 200.08 270.074 199.938C269.514 199.232 268.968 198.517 268.434 197.792C268.325 197.647 268.216 197.503 268.104 197.354C268.001 197.213 267.897 197.073 267.79 196.928C267.697 196.803 267.604 196.678 267.509 196.549C267.258 196.13 267.153 195.755 267.058 195.278Z" fill="#144069"/>
<path d="M280.628 207.5C281.419 207.635 282.114 207.851 282.852 208.166C282.779 208.386 282.706 208.606 282.63 208.833C282.199 208.75 282.199 208.75 281.74 208.611C281.667 208.464 281.593 208.318 281.518 208.166C281.069 207.915 281.069 207.915 280.628 207.722C280.628 207.649 280.628 207.575 280.628 207.5Z" fill="#114268"/>
<rect width="33.8244" height="34.2017" transform="translate(203.028 138.02)" fill="#4F7353"/>
<path d="M219.941 140.727C220.801 140.727 221.497 141.423 221.497 142.283V146.103L222.779 142.504C223.067 141.695 223.957 141.272 224.766 141.56C225.576 141.849 225.999 142.739 225.71 143.548L224.367 147.321L226.919 144.235C227.467 143.573 228.448 143.48 229.11 144.027C229.772 144.575 229.865 145.556 229.318 146.218L226.824 149.234L230.191 147.24C230.93 146.802 231.885 147.047 232.322 147.786C232.76 148.526 232.516 149.48 231.776 149.918L228.272 151.993L232.279 151.25C233.124 151.094 233.936 151.652 234.092 152.497C234.249 153.342 233.691 154.154 232.846 154.31L228.752 155.069L232.855 155.781C233.702 155.928 234.269 156.733 234.122 157.58C233.975 158.426 233.17 158.994 232.323 158.847L228.263 158.143L231.828 160.207C232.571 160.638 232.825 161.59 232.394 162.334C231.964 163.077 231.012 163.331 230.268 162.9L226.591 160.771L229.287 164.055C229.832 164.72 229.736 165.7 229.072 166.246C228.408 166.791 227.427 166.694 226.882 166.03L224.387 162.991L225.704 166.696C225.991 167.506 225.568 168.395 224.759 168.683C223.949 168.971 223.059 168.548 222.771 167.738L221.497 164.154V167.958C221.497 168.817 220.801 169.514 219.941 169.514C219.082 169.514 218.385 168.817 218.385 167.958V164.123L217.099 167.736C216.811 168.546 215.921 168.968 215.111 168.68C214.302 168.392 213.879 167.502 214.167 166.692L215.512 162.915L212.957 166.005C212.409 166.668 211.429 166.761 210.766 166.213C210.104 165.665 210.011 164.684 210.558 164.022L213.052 161.006L209.684 163C208.945 163.438 207.99 163.194 207.553 162.454C207.115 161.715 207.359 160.76 208.099 160.323L211.6 158.249L207.601 158.99C206.756 159.147 205.944 158.589 205.788 157.744C205.631 156.899 206.189 156.087 207.034 155.93L211.128 155.171L207.026 154.46C206.179 154.313 205.612 153.508 205.758 152.661C205.905 151.814 206.711 151.247 207.558 151.393L211.612 152.097L208.05 150.034C207.306 149.603 207.052 148.651 207.483 147.907C207.914 147.164 208.866 146.91 209.61 147.341L213.288 149.471L210.591 146.185C210.046 145.521 210.142 144.541 210.806 143.995C211.471 143.45 212.451 143.546 212.996 144.211L215.489 147.247L214.173 143.545C213.886 142.736 214.309 141.846 215.119 141.558C215.928 141.27 216.818 141.693 217.106 142.503L218.385 146.103V142.283C218.385 141.423 219.082 140.727 219.941 140.727Z" fill="#CBA21C"/>
<path d="M76 212.841C56.2 212.841 36.4 212.841 16 212.841C16 201.178 16 189.516 16 177.5C35.8 177.5 55.6 177.5 76 177.5C76 189.162 76 200.825 76 212.841Z" fill="#0BA960"/>
<path d="M16 212.841L76 212.841L16 177.5L16 212.841Z" fill="#D96043"/>
<path d="M130.097 166.532C130.694 166.522 131.29 166.515 131.887 166.51C132.054 166.506 132.222 166.503 132.394 166.5C133.893 166.49 135.075 166.8 136.422 167.468C136.756 167.63 136.756 167.63 137.097 167.796C142.194 170.513 145.138 175.363 146.956 180.685C147.355 182.031 147.642 183.394 147.9 184.774C147.98 184.488 148.06 184.202 148.142 183.907C149.907 177.721 152.2 171.885 157.973 168.403C160.06 167.248 161.857 166.46 164.283 166.503C164.444 166.505 164.604 166.507 164.769 166.51C165.159 166.515 165.548 166.523 165.938 166.532C165.962 169.255 165.973 171.977 165.968 174.699C165.966 175.964 165.968 177.228 165.98 178.492C165.992 179.715 165.992 180.937 165.985 182.159C165.984 182.623 165.987 183.088 165.995 183.552C166.036 186.328 165.879 188.138 163.965 190.238C163.666 190.544 163.666 190.544 163.361 190.855C163.011 191.281 162.664 191.709 162.322 192.141C161.658 192.946 160.985 193.742 160.307 194.534C159.052 196.003 157.853 197.506 156.686 199.046C156.28 199.578 155.87 200.107 155.46 200.635C153.505 203.165 151.645 205.737 149.862 208.39C149.377 209.103 148.874 209.801 148.369 210.5C147.398 210.147 146.962 209.466 146.407 208.644C146.199 208.345 145.991 208.047 145.783 207.749C145.671 207.589 145.56 207.429 145.445 207.264C142.608 203.23 139.573 199.325 136.422 195.532C136.029 195.058 135.637 194.584 135.245 194.11C134.98 193.789 134.714 193.468 134.448 193.147C134.177 192.82 133.91 192.488 133.647 192.154C133.252 191.687 132.859 191.276 132.421 190.853C130.287 188.675 129.982 186.787 130.001 183.794C130.013 183.263 130.026 182.733 130.038 182.202C130.041 181.653 130.043 181.105 130.043 180.557C130.046 179.453 130.057 178.349 130.075 177.245C130.098 175.768 130.1 174.291 130.092 172.813C130.083 170.719 130.085 168.626 130.097 166.532Z" fill="#7C9E75"/>
<path d="M294.05 10.3243C295.743 11.6522 296.661 13.483 297.005 15.613C297.364 19.0393 296.236 22.5228 294.988 25.6694C294.708 26.424 294.545 27.1777 294.436 27.975C295.425 27.3699 296.359 26.7438 297.24 25.9836C299.492 24.0774 301.9 22.6703 304.862 22.6428C305.085 22.6399 305.085 22.6399 305.312 22.637C306.386 22.6613 307.195 22.9374 308.138 23.4481C308.283 23.5257 308.428 23.6034 308.577 23.6834C310.321 24.8141 311.427 26.4525 311.906 28.4973C312.152 30.342 311.948 32.0966 310.912 33.6656C309.397 35.6792 307.71 36.8082 305.226 37.203C302.527 37.44 299.837 36.9244 297.176 36.5065C297.579 37.0447 297.95 37.4877 298.499 37.8702C298.678 37.9967 298.678 37.9967 298.861 38.1257C298.987 38.2126 299.113 38.2996 299.242 38.3891C299.505 38.5745 299.767 38.76 300.03 38.9455C300.277 39.1192 300.525 39.2929 300.773 39.4665C303.051 41.0663 304.992 42.8093 305.676 45.6583C305.917 47.9072 305.604 49.708 304.241 51.5564C303.006 53.0054 301.562 53.793 299.684 53.9729C297.627 54.0437 296.05 53.4547 294.436 52.1767C294.281 52.0578 294.281 52.0578 294.122 51.9366C291.964 50.0398 291.323 46.6213 290.818 43.9281C290.75 43.5714 290.682 43.2147 290.613 42.8581C290.552 42.5374 290.491 42.2165 290.431 41.8956C290.334 41.3749 290.334 41.3749 290.154 40.8594C290.115 41.0126 290.115 41.0126 290.076 41.1689C289.764 42.402 289.447 43.6333 289.126 44.864C289.082 45.0339 289.039 45.2038 288.993 45.3788C288.242 48.2663 287.438 51.0701 284.877 52.8514C283.19 53.7997 281.455 54.1833 279.535 53.9178C277.594 53.3143 276.144 51.8895 275.157 50.12C274.332 48.5127 274.318 46.5634 274.825 44.8422C275.747 42.366 277.471 40.6143 279.61 39.1944C281.522 38.0814 281.522 38.0814 282.96 36.5065C282.867 36.5215 282.773 36.5364 282.676 36.5517C278.994 37.1333 278.994 37.1333 277.651 37.203C277.457 37.2162 277.263 37.2295 277.063 37.2431C274.388 37.3477 271.899 36.5014 269.901 34.6566C268.318 32.9695 267.961 31.05 268.003 28.8245C268.088 26.9815 268.916 25.6953 270.156 24.3914C272.109 22.6508 274.205 22.4112 276.695 22.536C279.864 22.8336 282.447 25.3958 284.657 27.4962C285.011 27.8347 285.011 27.8347 285.53 27.975C285.276 26.2231 284.751 24.5885 284.207 22.9108C283.546 20.8177 283.242 18.8212 283.239 16.625C283.235 16.4505 283.23 16.276 283.226 16.0962C283.218 14.04 283.983 12.5354 285.358 11.0691C287.907 8.59362 291.142 8.33191 294.05 10.3243Z" fill="#6E956E"/>
</g>
<defs>
<clipPath id="clip0_19041_13609">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

public/content/blog/building-community-trust-vertical.svg
-34
View File
@@ -1,34 +0,0 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.99" clip-path="url(#clip0_19192_4888)">
<path d="M0 0C85.8 0 171.6 0 260 0C260 128.7 260 257.4 260 390C174.2 390 88.4 390 0 390C0 261.3 0 132.6 0 0Z" fill="#EECB8F"/>
<path d="M158.311 290.745C168.808 290.745 179.306 290.745 190.122 290.745C190.212 295.142 190.302 299.538 190.394 304.068C192.292 312.798 194.89 319.348 200.998 325.82C201.184 326.023 201.37 326.227 201.562 326.437C207.462 332.664 215.7 335.431 223.838 337.239C223.838 330.869 223.838 324.498 223.838 317.935C235.771 317.935 247.705 317.935 260 317.935C260 330.496 260 343.058 260 356C226.442 356 192.885 356 158.311 356C158.311 334.466 158.311 312.932 158.311 290.745Z" fill="#52829B"/>
<path d="M158.311 273.344C191.868 273.344 225.425 273.344 260 273.344C260 288.059 260 302.774 260 317.935C248.066 317.935 236.133 317.935 223.838 317.935C223.838 324.305 223.838 330.676 223.838 337.239C220.771 336.933 220.771 336.933 219.757 336.651C219.417 336.557 219.417 336.557 219.07 336.46C218.838 336.392 218.605 336.324 218.366 336.254C218.118 336.181 217.87 336.109 217.614 336.035C207.872 333.103 199.59 326.696 194.644 317.766C190.011 309.106 190.122 300.878 190.122 290.745C179.624 290.745 169.127 290.745 158.311 290.745C158.311 285.003 158.311 279.26 158.311 273.344Z" fill="#EECB8F"/>
<path d="M222.618 10.9312C225.127 12.8676 226.488 15.5374 226.998 18.6436C227.531 23.6401 225.858 28.7201 224.008 33.3087C223.593 34.4091 223.352 35.5083 223.19 36.671C224.657 35.7886 226.041 34.8755 227.347 33.7669C230.685 30.9872 234.254 28.9353 238.646 28.8951C238.977 28.8909 238.977 28.8909 239.314 28.8867C240.905 28.922 242.104 29.3247 243.502 30.0694C243.717 30.1827 243.932 30.2959 244.154 30.4126C246.738 32.0614 248.379 34.4507 249.088 37.4327C249.453 40.1227 249.151 42.6815 247.615 44.9696C245.368 47.9058 242.867 49.5524 239.186 50.128C235.184 50.4736 231.197 49.7218 227.252 49.1124C227.849 49.8972 228.399 50.5432 229.213 51.101C229.479 51.2854 229.479 51.2854 229.75 51.4736C229.937 51.6004 230.123 51.7271 230.315 51.8577C230.704 52.1281 231.093 52.3985 231.482 52.6691C231.85 52.9225 232.217 53.1757 232.584 53.4288C235.962 55.7618 238.839 58.3036 239.852 62.4583C240.21 65.7379 239.747 68.3639 237.726 71.0594C235.894 73.1724 233.755 74.321 230.97 74.5834C227.92 74.6865 225.582 73.8276 223.19 71.964C222.959 71.7906 222.959 71.7906 222.725 71.6138C219.525 68.8477 218.576 63.8626 217.826 59.9351C217.725 59.4149 217.625 58.8948 217.523 58.3747C217.432 57.907 217.342 57.4391 217.253 56.9712C217.109 56.2118 217.109 56.2118 216.842 55.46C216.785 55.6835 216.785 55.6835 216.726 55.9115C216.265 57.7096 215.794 59.5052 215.319 61.2999C215.254 61.5477 215.189 61.7954 215.122 62.0507C214.008 66.2615 212.816 70.3502 209.019 72.9478C206.518 74.3308 203.946 74.8902 201.1 74.503C198.222 73.6229 196.074 71.5452 194.609 68.9647C193.387 66.6208 193.367 63.7781 194.117 61.2682C195.485 57.6571 198.04 55.1027 201.211 53.0321C204.046 51.409 204.046 51.409 206.178 49.1124C206.039 49.1341 205.9 49.1559 205.756 49.1783C200.298 50.0264 200.298 50.0264 198.307 50.128C198.02 50.1473 197.732 50.1666 197.436 50.1865C193.469 50.3391 189.781 49.1049 186.818 46.4146C184.472 43.9543 183.942 41.1553 184.005 37.9098C184.131 35.2222 185.358 33.3465 187.197 31.4451C190.092 28.9067 193.198 28.5573 196.89 28.7394C201.588 29.1734 205.418 32.9098 208.693 35.9727C209.218 36.4664 209.218 36.4664 209.987 36.671C209.611 34.1162 208.832 31.7324 208.026 29.2859C207.046 26.2337 206.595 23.3221 206.591 20.1195C206.584 19.865 206.578 19.6105 206.572 19.3483C206.56 16.3497 207.694 14.1556 209.733 12.0173C213.511 8.40739 218.307 8.02573 222.618 10.9312Z" fill="#6E956E"/>
<path d="M204.316 217.16H158.33V248.098V248.374V273.235H204.316V217.16Z" fill="#7372A9"/>
<path d="M158.311 290.745C168.808 290.745 179.306 290.745 190.122 290.745C190.122 312.279 190.122 333.813 190.122 356C179.624 356 169.127 356 158.311 356C158.311 334.466 158.311 312.932 158.311 290.745Z" fill="#5777AA"/>
<path d="M13.3623 201.03C13.9092 201.021 14.456 201.014 15.003 201.009C15.1565 201.006 15.31 201.003 15.4682 201C16.842 200.99 17.9256 201.279 19.1601 201.902C19.4665 202.053 19.4665 202.053 19.7791 202.207C24.4516 204.739 27.1499 209.259 28.8164 214.218C29.1822 215.472 29.4452 216.742 29.682 218.028C29.7551 217.762 29.8282 217.495 29.9035 217.22C31.5211 211.456 33.6237 206.018 38.9155 202.774C40.8283 201.697 42.4756 200.963 44.6999 201.003C44.8468 201.005 44.9936 201.007 45.1449 201.009C45.5021 201.014 45.8593 201.022 46.2165 201.03C46.2382 203.567 46.2483 206.103 46.2437 208.64C46.242 209.819 46.2441 210.997 46.2555 212.175C46.2663 213.314 46.2665 214.452 46.2596 215.591C46.2588 216.024 46.2617 216.457 46.2685 216.889C46.3065 219.476 46.1628 221.163 44.4082 223.12C44.1341 223.404 44.1341 223.404 43.8544 223.694C43.5332 224.091 43.215 224.49 42.9015 224.893C42.2933 225.643 41.6767 226.384 41.0551 227.123C39.9046 228.491 38.805 229.892 37.7356 231.327C37.3637 231.822 36.988 232.315 36.6122 232.808C34.82 235.165 33.1143 237.562 31.4801 240.034C31.0354 240.698 30.5743 241.349 30.1115 242C29.2216 241.671 28.8221 241.036 28.3131 240.27C28.1227 239.992 27.932 239.714 27.741 239.437C27.6388 239.288 27.5366 239.138 27.4313 238.984C24.8306 235.226 22.0489 231.587 19.1601 228.053C18.8003 227.611 18.4407 227.169 18.0814 226.727C17.8381 226.428 17.5946 226.129 17.3508 225.831C17.1023 225.525 16.8577 225.216 16.6161 224.905C16.2547 224.47 15.8938 224.087 15.4928 223.692C13.5365 221.663 13.2566 219.903 13.2742 217.115C13.2854 216.62 13.2969 216.126 13.3086 215.631C13.3114 215.12 13.3129 214.609 13.3133 214.098C13.316 213.07 13.3257 212.041 13.3419 211.013C13.363 209.636 13.3648 208.26 13.3581 206.883C13.3494 204.932 13.3512 202.981 13.3623 201.03Z" fill="#7C9E75"/>
<path d="M190.123 290.745C201.249 290.745 212.375 290.745 223.838 290.745C223.838 306.088 223.838 321.431 223.838 337.239C220.772 336.933 220.772 336.933 219.758 336.651C219.418 336.557 219.418 336.557 219.071 336.46C218.839 336.392 218.606 336.324 218.366 336.254C218.119 336.181 217.871 336.109 217.615 336.035C207.873 333.103 199.591 326.696 194.644 317.766C190.012 309.106 190.123 300.878 190.123 290.745Z" fill="#E17C24"/>
<path d="M230.736 217.998V177.489C216.52 177.48 217.36 177.308 203.145 177.489V217.666C204.947 217.663 206.6 217.663 208.366 217.666L209.008 217.663C209.751 217.663 210.494 217.663 211.237 217.661C211.723 217.66 212.21 217.659 212.697 217.658C213.395 217.658 213.403 217.658 214.857 217.657L214.905 217.657L218.594 217.649C222.586 217.644 226.861 218.003 230.736 217.998Z" fill="#7372A8"/>
<path d="M190.123 304.067C190.213 304.067 190.302 304.067 190.395 304.067C190.428 304.234 190.46 304.401 190.494 304.572C192.139 312.851 195.145 319.617 200.999 325.819C201.185 326.023 201.371 326.226 201.563 326.436C207.462 332.663 215.7 335.43 223.838 337.239C223.838 343.43 223.838 349.621 223.838 356C212.712 356 201.586 356 190.123 356C190.123 338.862 190.123 321.724 190.123 304.067Z" fill="#18465E"/>
<path d="M158.311 177.364C173.116 177.364 187.921 177.364 203.174 177.364C203.174 190.644 203.174 203.923 203.174 217.605C188.369 217.605 173.564 217.605 158.311 217.605C158.311 204.325 158.311 191.046 158.311 177.364Z" fill="#17465E"/>
<path d="M230.635 217.606C240.326 217.606 250.016 217.606 260 217.606C260 236 260 254.394 260 273.345C250.31 273.345 240.619 273.345 230.635 273.345C230.635 254.951 230.635 236.557 230.635 217.606Z" fill="#7C9E75"/>
<path d="M203.446 217.606C212.418 217.606 221.391 217.606 230.635 217.606C230.635 236 230.635 254.394 230.635 273.345C221.663 273.345 212.69 273.345 203.446 273.345C203.446 254.951 203.446 236.557 203.446 217.606Z" fill="#18465E"/>
<path d="M230.635 177.364C240.326 177.364 250.016 177.364 260 177.364C260 190.644 260 203.923 260 217.605C250.31 217.605 240.619 217.605 230.635 217.605C230.635 204.325 230.635 191.046 230.635 177.364Z" fill="#17465E"/>
<path d="M195.289 319.022C196.099 319.791 196.742 320.588 197.379 321.504C198.486 323.045 199.694 324.444 200.999 325.82C201.201 326.033 201.403 326.247 201.612 326.467C202.946 327.838 204.352 329.037 205.893 330.17C204.882 330.17 204.659 329.913 203.888 329.287C203.565 329.026 203.565 329.026 203.237 328.761C203.037 328.598 202.836 328.435 202.63 328.267C202.355 328.059 202.081 327.852 201.798 327.638C201.624 327.487 201.45 327.335 201.271 327.179C201.271 327 201.271 326.82 201.271 326.636C201.108 326.563 200.944 326.491 200.776 326.417C200.161 326.08 199.841 325.775 199.398 325.237C199.259 325.068 199.12 324.898 198.976 324.724C198.292 323.86 197.625 322.986 196.971 322.098C196.838 321.921 196.705 321.745 196.568 321.562C196.442 321.391 196.315 321.219 196.184 321.042C196.071 320.888 195.957 320.735 195.84 320.578C195.534 320.065 195.406 319.606 195.289 319.022Z" fill="#144069"/>
<path d="M189.414 22.0898C189.498 22.2574 189.582 22.425 189.668 22.5977C188.991 23.2747 188.314 23.9518 187.637 24.6289C187.385 24.5451 187.134 24.4613 186.875 24.375C187.202 24.041 187.53 23.7079 187.859 23.3752C188.133 23.0969 188.133 23.0969 188.412 22.8129C188.906 22.3437 188.906 22.3437 189.414 22.0898Z" fill="#5F8F69"/>
<path d="M211.875 333.977C212.842 334.142 213.692 334.406 214.594 334.792C214.504 335.061 214.415 335.331 214.322 335.608C213.795 335.506 213.795 335.506 213.234 335.336C213.145 335.157 213.055 334.977 212.963 334.792C212.414 334.484 212.414 334.484 211.875 334.248C211.875 334.159 211.875 334.069 211.875 333.977Z" fill="#114268"/>
<path d="M147.565 338.992C147.565 339.808 147.565 339.808 146.885 340.539C146.661 340.746 146.436 340.954 146.205 341.167C146.273 340.386 146.273 340.386 146.477 339.536C147.038 339.162 147.038 339.162 147.565 338.992Z" fill="#729A72"/>
<rect width="41.3439" height="41.8469" transform="translate(117.027 248.965)" fill="#4F7353"/>
<path d="M137.756 253.18C138.754 253.18 139.563 253.989 139.563 254.986V259.421L141.05 255.243C141.385 254.304 142.418 253.813 143.357 254.148C144.297 254.482 144.788 255.515 144.453 256.455L142.894 260.835L145.856 257.252C146.492 256.483 147.631 256.375 148.399 257.011C149.168 257.647 149.276 258.786 148.64 259.554L145.746 263.055L149.654 260.741C150.512 260.232 151.62 260.516 152.128 261.375C152.637 262.233 152.353 263.341 151.495 263.849L147.427 266.258L152.078 265.396C153.059 265.214 154.001 265.862 154.183 266.843C154.365 267.823 153.717 268.766 152.736 268.948L147.984 269.829L152.747 270.655C153.73 270.825 154.388 271.76 154.218 272.743C154.047 273.726 153.112 274.385 152.129 274.214L147.416 273.397L151.554 275.793C152.418 276.293 152.712 277.398 152.212 278.262C151.712 279.125 150.607 279.42 149.744 278.92L145.475 276.448L148.605 280.26C149.238 281.031 149.126 282.17 148.355 282.803C147.584 283.436 146.446 283.324 145.813 282.553L142.917 279.025L144.445 283.326C144.779 284.266 144.288 285.298 143.348 285.632C142.408 285.967 141.375 285.475 141.041 284.535L139.563 280.375V284.79C139.563 285.788 138.754 286.597 137.756 286.597C136.759 286.597 135.95 285.788 135.95 284.79V280.339L134.457 284.533C134.122 285.473 133.089 285.963 132.149 285.629C131.21 285.294 130.719 284.261 131.054 283.321L132.615 278.936L129.649 282.524C129.013 283.293 127.874 283.401 127.106 282.765C126.337 282.129 126.229 280.991 126.864 280.222L129.76 276.72L125.85 279.036C124.991 279.544 123.883 279.26 123.375 278.402C122.867 277.543 123.151 276.435 124.009 275.927L128.074 273.52L123.432 274.381C122.451 274.562 121.508 273.915 121.326 272.934C121.144 271.953 121.792 271.01 122.773 270.828L127.525 269.947L122.764 269.122C121.781 268.951 121.122 268.016 121.292 267.033C121.463 266.05 122.398 265.392 123.381 265.562L128.087 266.378L123.952 263.984C123.089 263.484 122.795 262.379 123.294 261.515C123.794 260.652 124.9 260.357 125.763 260.857L130.033 263.33L126.902 259.516C126.269 258.745 126.381 257.607 127.152 256.974C127.923 256.341 129.061 256.453 129.694 257.224L132.588 260.748L131.061 256.452C130.727 255.512 131.218 254.479 132.158 254.145C133.098 253.811 134.131 254.302 134.465 255.242L135.95 259.421V254.986C135.95 253.989 136.759 253.18 137.756 253.18Z" fill="#CBA21C"/>
<path d="M67.4346 259.434H90.869L67.4346 282.869L44.0002 259.434H67.4346Z" fill="#8D5AC4"/>
<path d="M67.4346 306.566L44.0002 306.566L67.4346 283.131L90.869 306.566L67.4346 306.566Z" fill="#080033"/>
<path d="M62.4624 382.451C47.0029 382.451 31.5435 382.451 15.6156 382.451C15.6156 373.336 15.6156 364.221 15.6156 354.83C31.075 354.83 46.5345 354.83 62.4624 354.83C62.4624 363.945 62.4624 373.06 62.4624 382.451Z" fill="#0BA960"/>
<path d="M15.6156 382.451L62.4624 382.451L15.6156 354.83L15.6156 382.451Z" fill="#D96043"/>
<path d="M99.4879 365.937C87.3115 360.274 82.0904 345.84 87.8261 333.698C92.5025 323.799 103.018 318.479 113.342 319.921L100.371 347.38L127.922 360.193C120.91 367.913 109.419 370.555 99.4879 365.937Z" fill="#D96043"/>
</g>
<defs>
<clipPath id="clip0_19192_4888">
<rect width="260" height="390" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

public/content/blog/digital-mediation-and-the-death-of-nuance-horizontal.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19244_45768)">
<path d="M0 0C105.6 0 211.2 0 320 0C320 74.415 320 148.83 320 225.5C214.4 225.5 108.8 225.5 0 225.5C0 151.085 0 76.67 0 0Z" fill="#E2EFFF"/>
<path d="M115.5 191L116.609 222.823L139.895 201.105L118.178 224.391L150 225.5L118.178 226.609L139.895 249.895L116.609 228.178L115.5 260L114.391 228.178L91.1048 249.895L112.823 226.609L81 225.5L112.823 224.391L91.1048 201.105L114.391 222.823L115.5 191Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 183.5L188 172L174.169 172C166.53 172 160 182.297 160 195C160 207.702 166.53 218 174.169 218L188 218L188 206.5C188 200.149 183.048 195 179.229 195C183.048 195 188 189.851 188 183.5Z" fill="#D96043"/>
<circle cx="272.745" cy="122.485" r="22.4851" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.526 184.726C298.26 184.726 306.961 176.118 306.961 165.5C306.961 154.881 298.26 146.274 287.526 146.274L269.16 146.274L269.16 184.726L287.526 184.726Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M269.16 146.274C258.722 146.274 250.26 154.882 250.26 165.5C250.26 176.119 258.722 184.727 269.16 184.727L269.16 146.274Z" fill="#D96043"/>
<path d="M269.87 205.918C266.339 210.468 259.788 211.294 255.238 207.763C250.688 204.232 249.862 197.682 253.393 193.132C256.924 188.582 272.663 184.921 272.705 185.256C272.705 185.256 273.4 201.369 269.87 205.918Z" fill="#0BA960"/>
<rect x="12" y="189" width="12.5" height="12.5" fill="#16A9C4"/>
<rect x="24.5" y="189" width="12.5" height="12.5" fill="#D93529"/>
<rect x="12" y="201.5" width="12.5" height="12.5" fill="#8D5AC4"/>
<rect x="24.5" y="201.5" width="12.5" height="12.5" fill="#0BA960"/>
<g clip-path="url(#clip1_19244_45768)">
<mask id="mask0_19244_45768" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="281" y="8" width="23" height="27">
<path d="M304 8H281V35H304V8Z" fill="white"/>
</mask>
<g mask="url(#mask0_19244_45768)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M286.75 8H281V21.5C281 28.9558 286.149 35 292.5 35C298.851 35 304 28.9558 304 21.5V8H298.25C295.074 8 292.5 11.0221 292.5 14.75C292.5 11.0221 289.926 8 286.75 8Z" fill="#0BA960"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_19244_45768">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
<clipPath id="clip1_19244_45768">
<rect width="23" height="27" fill="white" transform="translate(281 8)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/content/blog/digital-mediation-and-the-death-of-nuance-tag.svg
+14
View File
@@ -0,0 +1,14 @@
<svg width="61" height="30" viewBox="0 0 61 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="61" height="30" fill="#080033"/>
<circle cx="10" cy="10" r="6" fill="#D93529"/>
<path d="M57 20.3103C57 23.4527 53.6421 26 49.5 26C45.3579 26 42 23.4527 42 20.3103C42 17.168 45.3579 4 49.5 4C53.6421 4 57 17.168 57 20.3103Z" fill="#16A9C4"/>
<rect width="10.625" height="10.625" transform="matrix(0.8 0.6 -0.8 0.6 31 3.20361)" fill="#0BA960"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 26C25 21.0294 20.9705 17 16 17C11.0294 17 7 21.0294 7 26H25Z" fill="url(#paint0_linear_19000_22890)"/>
<rect x="29" y="18" width="4" height="8.25" fill="#7771C2"/>
<defs>
<linearGradient id="paint0_linear_19000_22890" x1="9.475" y1="17.855" x2="13.2947" y2="27.6322" gradientUnits="userSpaceOnUse">
<stop stop-color="#7871C3"/>
<stop offset="1" stop-color="#B099FA"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 906 B

public/content/blog/digital-mediation-and-the-death-of-nuance-vertical.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="260" height="390" fill="#E2EFFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.258 311.992C156.1 310.897 156.715 309.645 157.07 308.311C157.608 306.304 157.54 304.183 156.874 302.215C156.208 300.247 154.974 298.52 153.328 297.253C151.682 295.986 149.697 295.235 147.624 295.095C145.551 294.955 143.483 295.432 141.681 296.467L138.817 297.987L137.111 295.25C135.715 292.835 133.417 291.074 130.722 290.353C128.027 289.633 125.157 290.013 122.742 291.409C120.327 292.805 118.566 295.103 117.845 297.798C117.125 300.493 117.505 303.363 118.901 305.778L130.286 325.835C130.38 326.002 130.508 326.149 130.66 326.267C130.812 326.384 130.986 326.47 131.172 326.52C131.357 326.57 131.551 326.582 131.742 326.556C131.932 326.531 132.116 326.467 132.282 326.37L152.17 314.692C153.368 314.005 154.417 313.087 155.258 311.992ZM103.329 355.054C102.488 356.149 101.872 357.4 101.518 358.735C100.979 360.742 101.047 362.863 101.713 364.831C102.379 366.799 103.613 368.525 105.259 369.792C106.906 371.06 108.891 371.811 110.964 371.951C113.036 372.091 115.104 371.613 116.906 370.579L119.77 369.059L121.476 371.796C122.872 374.211 125.171 375.972 127.865 376.692C130.56 377.413 133.431 377.033 135.846 375.637C138.26 374.241 140.021 371.942 140.742 369.248C141.462 366.553 141.082 363.683 139.686 361.268L128.301 341.211C128.207 341.044 128.08 340.897 127.927 340.779C127.775 340.661 127.601 340.575 127.416 340.525C127.23 340.476 127.036 340.463 126.845 340.489C126.655 340.515 126.471 340.579 126.305 340.676L106.418 352.353C105.22 353.041 104.17 353.958 103.329 355.054ZM154.506 361.299C153.171 360.945 151.92 360.329 150.824 359.488C149.729 358.647 148.811 357.597 148.124 356.399L136.447 336.511C136.349 336.345 136.286 336.162 136.26 335.971C136.234 335.781 136.246 335.587 136.296 335.401C136.346 335.215 136.432 335.041 136.55 334.889C136.667 334.737 136.814 334.61 136.982 334.515L157.038 323.131C159.453 321.734 162.324 321.355 165.019 322.075C167.713 322.795 170.012 324.557 171.408 326.971C172.804 329.386 173.183 332.257 172.463 334.951C171.743 337.646 169.982 339.944 167.567 341.34L164.829 343.046L166.35 345.911C167.384 347.712 167.861 349.78 167.721 351.853C167.581 353.926 166.83 355.911 165.563 357.557C164.296 359.204 162.57 360.438 160.602 361.104C158.634 361.77 156.512 361.838 154.506 361.299ZM107.763 307.558C106.668 306.717 105.416 306.101 104.082 305.747C102.075 305.208 99.9538 305.276 97.9858 305.942C96.0178 306.608 94.2912 307.842 93.024 309.488C91.7568 311.135 91.0059 313.12 90.8659 315.193C90.7259 317.265 91.2032 319.333 92.2375 321.135L93.7578 323.999L91.0205 325.705C88.6056 327.102 86.8444 329.4 86.1241 332.095C85.4038 334.789 85.7836 337.659 87.1797 340.074C88.5757 342.489 90.874 344.251 93.5687 344.971C96.2634 345.691 99.1339 345.311 101.549 343.915L121.606 332.531C121.773 332.436 121.92 332.309 122.037 332.156C122.155 332.004 122.241 331.83 122.291 331.645C122.341 331.459 122.353 331.265 122.327 331.074C122.301 330.884 122.238 330.7 122.141 330.535L110.463 310.647C109.776 309.449 108.858 308.399 107.763 307.558Z" fill="#080033"/>
<rect x="184" y="276" width="13" height="13" fill="#16A9C4"/>
<rect x="197" y="276" width="13" height="13" fill="#D93529"/>
<rect x="184" y="289" width="13" height="13" fill="#8D5AC4"/>
<rect x="197" y="289" width="13" height="13" fill="#0BA960"/>
<g clip-path="url(#clip0_19192_4776)">
<mask id="mask0_19192_4776" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="205" y="327" width="38" height="45">
<path d="M243 327H205V372H243V327Z" fill="white"/>
</mask>
<g mask="url(#mask0_19192_4776)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 327H205V349.5C205 361.926 213.507 372 224 372C234.493 372 243 361.926 243 349.5V327H233.5C228.253 327 224 332.037 224 338.25C224 332.037 219.747 327 214.5 327Z" fill="#0BA960"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136 227.75L136 215L119.699 215C110.696 215 103 226.417 103 240.5C103 254.583 110.696 266 119.699 266L136 266L136 253.25C136 246.208 130.164 240.5 125.663 240.5C130.164 240.5 136 234.792 136 227.75Z" fill="#D96043"/>
<path d="M56.5 205.855H72.9998L56.5 222.355L40.0002 205.855H56.5Z" fill="#8D5AC4"/>
<path d="M56.5 239.039L40.0002 239.039L56.5 222.54L72.9998 239.039L56.5 239.039Z" fill="#080033"/>
<path d="M45.5 270L46.6092 301.823L69.8953 280.105L48.1775 303.391L80 304.5L48.1775 305.609L69.8953 328.895L46.6092 307.178L45.5 339L44.391 307.178L21.1048 328.895L42.8226 305.609L11 304.5L42.8226 303.391L21.1048 280.105L44.391 301.823L45.5 270Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1683 374.4C58.1683 361.05 49.3981 351.008 38.5797 351.008C32.9369 351.008 23.966 351 23.0332 351C23.0332 356.846 23.0332 368.013 23.0332 374.4H58.1683Z" fill="#D96043"/>
<path d="M211.503 172C214.195 172 216.378 174.183 216.378 176.875V188.842L220.392 177.568C221.295 175.032 224.083 173.708 226.619 174.611C229.155 175.514 230.479 178.303 229.576 180.839L225.367 192.659L233.363 182.989C235.079 180.915 238.152 180.623 240.227 182.339C242.301 184.054 242.592 187.127 240.877 189.202L233.065 198.648L243.611 192.404C245.928 191.033 248.918 191.798 250.29 194.114C251.662 196.431 250.896 199.421 248.579 200.793L237.601 207.293L250.152 204.967C252.799 204.476 255.343 206.224 255.834 208.871C256.325 211.518 254.576 214.062 251.929 214.553L239.103 216.93L251.957 219.159C254.61 219.619 256.388 222.143 255.928 224.796C255.468 227.448 252.944 229.225 250.292 228.766L237.573 226.56L248.74 233.026C251.07 234.376 251.865 237.358 250.516 239.688C249.166 242.017 246.184 242.812 243.854 241.463L232.332 234.79L240.781 245.082C242.489 247.163 242.187 250.234 240.106 251.942C238.026 253.65 234.954 253.348 233.246 251.268L225.427 241.742L229.554 253.354C230.455 255.89 229.13 258.677 226.594 259.579C224.057 260.481 221.269 259.155 220.367 256.618L216.378 245.393V257.307C216.378 259.999 214.195 262.182 211.503 262.182C208.811 262.182 206.628 259.999 206.628 257.307V245.295L202.599 256.612C201.695 259.148 198.908 260.472 196.372 259.569C193.836 258.666 192.511 255.878 193.414 253.342L197.625 241.512L189.624 251.189C187.908 253.264 184.836 253.555 182.761 251.84C180.686 250.124 180.395 247.052 182.11 244.978L189.924 235.526L179.371 241.776C177.055 243.148 174.065 242.382 172.693 240.065C171.322 237.749 172.087 234.759 174.403 233.387L185.371 226.891L172.845 229.214C170.198 229.705 167.654 227.956 167.163 225.31C166.672 222.662 168.42 220.119 171.067 219.628L183.893 217.25L171.042 215.021C168.39 214.561 166.612 212.038 167.072 209.386C167.532 206.733 170.055 204.956 172.708 205.416L185.412 207.618L174.251 201.155C171.922 199.806 171.127 196.824 172.476 194.494C173.825 192.164 176.808 191.37 179.138 192.719L190.66 199.391L182.212 189.1C180.504 187.019 180.806 183.947 182.887 182.239C184.968 180.531 188.039 180.833 189.747 182.914L197.554 192.424L193.434 180.83C192.532 178.293 193.858 175.506 196.395 174.604C198.931 173.703 201.719 175.029 202.62 177.565L206.628 188.842V176.875C206.628 174.183 208.811 172 211.503 172Z" fill="#080033"/>
<circle cx="231.433" cy="23.8333" r="10.8333" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.706 35.2948C224.677 35.2948 220.6 39.4421 220.6 44.558C220.6 49.674 224.677 53.8213 229.706 53.8213L229.706 35.2948Z" fill="#D96043"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M238.554 53.8215C243.726 53.8215 247.918 49.6741 247.918 44.5582C247.918 39.4422 243.726 35.2949 238.554 35.2949L229.705 35.2949L229.705 53.8215L238.554 53.8215Z" fill="#16A9C4"/>
<path d="M230.047 64.0307C228.346 66.2228 225.19 66.6208 222.998 64.9196C220.806 63.2184 220.408 60.0623 222.109 57.8702C223.81 55.6781 231.393 53.9142 231.413 54.0756C231.413 54.0756 231.749 61.8386 230.047 64.0307Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19192_4776">
<rect width="38" height="45" fill="white" transform="translate(205 327)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/content/blog/how-chaos-concentrates-control-horizontal.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19244_45768)">
<path d="M0 0C105.6 0 211.2 0 320 0C320 74.415 320 148.83 320 225.5C214.4 225.5 108.8 225.5 0 225.5C0 151.085 0 76.67 0 0Z" fill="#C8E6F0"/>
<path d="M115.5 191L116.609 222.823L139.895 201.105L118.178 224.391L150 225.5L118.178 226.609L139.895 249.895L116.609 228.178L115.5 260L114.391 228.178L91.1048 249.895L112.823 226.609L81 225.5L112.823 224.391L91.1048 201.105L114.391 222.823L115.5 191Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 183.5L188 172L174.169 172C166.53 172 160 182.297 160 195C160 207.702 166.53 218 174.169 218L188 218L188 206.5C188 200.149 183.048 195 179.229 195C183.048 195 188 189.851 188 183.5Z" fill="#D96043"/>
<circle cx="272.745" cy="122.485" r="22.4851" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.526 184.726C298.26 184.726 306.961 176.118 306.961 165.5C306.961 154.881 298.26 146.274 287.526 146.274L269.16 146.274L269.16 184.726L287.526 184.726Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M269.16 146.274C258.722 146.274 250.26 154.882 250.26 165.5C250.26 176.119 258.722 184.727 269.16 184.727L269.16 146.274Z" fill="#D96043"/>
<path d="M269.87 205.918C266.339 210.468 259.788 211.294 255.238 207.763C250.688 204.232 249.862 197.682 253.393 193.132C256.924 188.582 272.663 184.921 272.705 185.256C272.705 185.256 273.4 201.369 269.87 205.918Z" fill="#0BA960"/>
<rect x="12" y="189" width="12.5" height="12.5" fill="#16A9C4"/>
<rect x="24.5" y="189" width="12.5" height="12.5" fill="#D93529"/>
<rect x="12" y="201.5" width="12.5" height="12.5" fill="#8D5AC4"/>
<rect x="24.5" y="201.5" width="12.5" height="12.5" fill="#0BA960"/>
<g clip-path="url(#clip1_19244_45768)">
<mask id="mask0_19244_45768" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="281" y="8" width="23" height="27">
<path d="M304 8H281V35H304V8Z" fill="white"/>
</mask>
<g mask="url(#mask0_19244_45768)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M286.75 8H281V21.5C281 28.9558 286.149 35 292.5 35C298.851 35 304 28.9558 304 21.5V8H298.25C295.074 8 292.5 11.0221 292.5 14.75C292.5 11.0221 289.926 8 286.75 8Z" fill="#0BA960"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_19244_45768">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
<clipPath id="clip1_19244_45768">
<rect width="23" height="27" fill="white" transform="translate(281 8)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/content/blog/how-chaos-concentrates-control-tag.svg
+16
View File
@@ -0,0 +1,16 @@
<svg width="60" height="30" viewBox="0 0 60 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="60" height="30.0044" fill="#080033"/>
<circle cx="8.35979" cy="8.67912" r="5.9633" fill="#D96043"/>
<mask id="mask0_19020_33870" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="16" y="2" width="13" height="13">
<path d="M28.7499 2.71582H16.8232V14.6424H28.7499V2.71582Z" fill="white"/>
</mask>
<g mask="url(#mask0_19020_33870)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8234 14.6424C16.8233 14.6325 16.8232 14.6226 16.8232 14.6126C16.8232 13.0986 17.9406 11.8455 19.3956 11.6329C17.9426 11.4335 16.8232 10.187 16.8232 8.67913C16.8232 7.03241 18.1582 5.69747 19.8049 5.69747H19.8347C18.1815 5.69747 16.8394 4.36528 16.8234 2.71582H28.7497C28.7337 4.36528 27.3917 5.69747 25.7384 5.69747H25.7682C27.4149 5.69747 28.7499 7.03241 28.7499 8.67913C28.7499 10.187 27.6305 11.4335 26.1775 11.6329C27.6325 11.8455 28.7499 13.0986 28.7499 14.6126C28.7499 14.6226 28.7498 14.6325 28.7497 14.6424H16.8234Z" fill="#406C01"/>
</g>
<rect x="31.25" y="2.71582" width="11.9266" height="11.9266" fill="#F9B0A6"/>
<path d="M51.6412 10.9866C46.5453 17.908 42.4138 13.7766 49.3339 8.67892C42.4107 3.58207 46.5421 -0.54777 51.6412 6.37206C56.7371 -0.550149 60.8685 3.58207 53.9484 8.67892C60.8654 13.7766 56.7339 17.908 51.6412 10.9866Z" fill="#05728C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.96187 22.0409C4.66909 22.0402 2 19.3706 2 16.0776L13.9266 16.0776C13.9266 19.3706 11.2576 22.0402 7.96474 22.0409C11.2576 22.0417 13.9266 24.7113 13.9266 28.0042H2C2 24.7113 4.66909 22.0417 7.96187 22.0409Z" fill="#16A9C4"/>
<path d="M25.9778 24.0706C25.6518 24.3966 25.1232 24.3966 24.7971 24.0706L23.3578 22.6311C23.0317 22.3051 23.0317 21.7765 23.3578 21.4505L24.7971 20.0111C25.1232 19.6851 25.6518 19.6851 25.9778 20.0111L27.4172 21.4505C27.7433 21.7765 27.7433 22.3051 27.4172 22.6311L25.9778 24.0706ZM19.2913 24.0706C18.9653 24.3966 18.4367 24.3966 18.1107 24.0706L16.6713 22.6311C16.3452 22.3051 16.3452 21.7765 16.6713 21.4505L18.1107 20.0111C18.4367 19.6851 18.9653 19.6851 19.2913 20.0111L20.7307 21.4505C21.0568 21.7765 21.0568 22.3051 20.7307 22.6311L19.2913 24.0706ZM22.6346 27.4138C22.3085 27.7398 21.78 27.7398 21.4539 27.4138L20.0145 25.9744C19.6885 25.6484 19.6885 25.1198 20.0145 24.7937L21.4539 23.3544C21.78 23.0283 22.3085 23.0283 22.6346 23.3544L24.074 24.7937C24.4 25.1198 24.4 25.6484 24.074 25.9744L22.6346 27.4138ZM22.6346 20.7273C22.3085 21.0533 21.78 21.0533 21.4539 20.7273L20.0145 19.2879C19.6885 18.9619 19.6885 18.4333 20.0145 18.1072L21.4539 16.6679C21.78 16.3418 22.3085 16.3418 22.6346 16.6679L24.074 18.1072C24.4 18.4333 24.4 18.9619 24.074 19.2879L22.6346 20.7273Z" fill="#FDA8B7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.0408 25.8895C37.4621 26.854 36.7623 27.2887 36.1244 27.2887C35.4865 27.2887 34.7867 26.854 34.208 25.8895C33.6379 24.9392 33.2621 23.5802 33.2621 22.0409C33.2621 20.5016 33.6379 19.1427 34.208 18.1924C34.7867 17.2279 35.4865 16.7932 36.1244 16.7932C36.7623 16.7932 37.4621 17.2279 38.0408 18.1924C38.611 19.1427 38.9868 20.5016 38.9868 22.0409C38.9868 23.5802 38.611 24.9392 38.0408 25.8895ZM42.0877 22.0409C42.0877 18.7475 39.4179 16.0776 36.1244 16.0776C32.831 16.0776 30.1611 18.7475 30.1611 22.0409C30.1611 25.3344 32.831 28.0042 36.1244 28.0042C39.4179 28.0042 42.0877 25.3344 42.0877 22.0409ZM30.8767 22.0409C30.8767 24.1836 32.1608 26.0262 34.0013 26.8414C33.1188 25.7554 32.5465 24.0096 32.5465 22.0409C32.5465 20.0723 33.1188 18.3264 34.0013 17.2405C32.1608 18.0557 30.8767 19.8984 30.8767 22.0409ZM41.3721 22.0409C41.3721 24.1836 40.0881 26.0262 38.2476 26.8414C39.1301 25.7554 39.7024 24.0096 39.7024 22.0409C39.7024 20.0723 39.1301 18.3264 38.2476 17.2405C40.0881 18.0557 41.3721 19.8984 41.3721 22.0409ZM36.1244 22.6969C36.4867 22.6969 36.7804 22.4032 36.7804 22.0409C36.7804 21.6787 36.4867 21.385 36.1244 21.385C35.7622 21.385 35.4685 21.6787 35.4685 22.0409C35.4685 22.4032 35.7622 22.6969 36.1244 22.6969Z" fill="#C9CDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M56.5145 19.0593V16.0776L50.5512 16.0776V19.0581C50.5506 17.4119 49.2159 16.0776 47.5695 16.0776H44.5879V22.0409H47.5695C45.9228 22.0409 44.5879 23.3759 44.5879 25.0226L44.5879 28.0042H50.5512V25.0226C50.5512 26.6693 51.8861 28.0042 53.5328 28.0042H56.5145V22.0409H53.534C55.1802 22.0403 56.5145 20.7056 56.5145 19.0593Z" fill="#0BA960"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

public/content/blog/how-chaos-concentrates-control-vertical.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="260" height="390" fill="#C8E6F0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.258 311.992C156.1 310.897 156.715 309.645 157.07 308.311C157.608 306.304 157.54 304.183 156.874 302.215C156.208 300.247 154.974 298.52 153.328 297.253C151.682 295.986 149.697 295.235 147.624 295.095C145.551 294.955 143.483 295.432 141.681 296.467L138.817 297.987L137.111 295.25C135.715 292.835 133.417 291.074 130.722 290.353C128.027 289.633 125.157 290.013 122.742 291.409C120.327 292.805 118.566 295.103 117.845 297.798C117.125 300.493 117.505 303.363 118.901 305.778L130.286 325.835C130.38 326.002 130.508 326.149 130.66 326.267C130.812 326.384 130.986 326.47 131.172 326.52C131.357 326.57 131.551 326.582 131.742 326.556C131.932 326.531 132.116 326.467 132.282 326.37L152.17 314.692C153.368 314.005 154.417 313.087 155.258 311.992ZM103.329 355.054C102.488 356.149 101.872 357.4 101.518 358.735C100.979 360.742 101.047 362.863 101.713 364.831C102.379 366.799 103.613 368.525 105.259 369.792C106.906 371.06 108.891 371.811 110.964 371.951C113.036 372.091 115.104 371.613 116.906 370.579L119.77 369.059L121.476 371.796C122.872 374.211 125.171 375.972 127.865 376.692C130.56 377.413 133.431 377.033 135.846 375.637C138.26 374.241 140.021 371.942 140.742 369.248C141.462 366.553 141.082 363.683 139.686 361.268L128.301 341.211C128.207 341.044 128.08 340.897 127.927 340.779C127.775 340.661 127.601 340.575 127.416 340.525C127.23 340.476 127.036 340.463 126.845 340.489C126.655 340.515 126.471 340.579 126.305 340.676L106.418 352.353C105.22 353.041 104.17 353.958 103.329 355.054ZM154.506 361.299C153.171 360.945 151.92 360.329 150.824 359.488C149.729 358.647 148.811 357.597 148.124 356.399L136.447 336.511C136.349 336.345 136.286 336.162 136.26 335.971C136.234 335.781 136.246 335.587 136.296 335.401C136.346 335.215 136.432 335.041 136.55 334.889C136.667 334.737 136.814 334.61 136.982 334.515L157.038 323.131C159.453 321.734 162.324 321.355 165.019 322.075C167.713 322.795 170.012 324.557 171.408 326.971C172.804 329.386 173.183 332.257 172.463 334.951C171.743 337.646 169.982 339.944 167.567 341.34L164.829 343.046L166.35 345.911C167.384 347.712 167.861 349.78 167.721 351.853C167.581 353.926 166.83 355.911 165.563 357.557C164.296 359.204 162.57 360.438 160.602 361.104C158.634 361.77 156.512 361.838 154.506 361.299ZM107.763 307.558C106.668 306.717 105.416 306.101 104.082 305.747C102.075 305.208 99.9538 305.276 97.9858 305.942C96.0178 306.608 94.2912 307.842 93.024 309.488C91.7568 311.135 91.0059 313.12 90.8659 315.193C90.7259 317.265 91.2032 319.333 92.2375 321.135L93.7578 323.999L91.0205 325.705C88.6056 327.102 86.8444 329.4 86.1241 332.095C85.4038 334.789 85.7836 337.659 87.1797 340.074C88.5757 342.489 90.874 344.251 93.5687 344.971C96.2634 345.691 99.1339 345.311 101.549 343.915L121.606 332.531C121.773 332.436 121.92 332.309 122.037 332.156C122.155 332.004 122.241 331.83 122.291 331.645C122.341 331.459 122.353 331.265 122.327 331.074C122.301 330.884 122.238 330.7 122.141 330.535L110.463 310.647C109.776 309.449 108.858 308.399 107.763 307.558Z" fill="#080033"/>
<rect x="184" y="276" width="13" height="13" fill="#16A9C4"/>
<rect x="197" y="276" width="13" height="13" fill="#D93529"/>
<rect x="184" y="289" width="13" height="13" fill="#8D5AC4"/>
<rect x="197" y="289" width="13" height="13" fill="#0BA960"/>
<g clip-path="url(#clip0_19192_4776)">
<mask id="mask0_19192_4776" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="205" y="327" width="38" height="45">
<path d="M243 327H205V372H243V327Z" fill="white"/>
</mask>
<g mask="url(#mask0_19192_4776)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 327H205V349.5C205 361.926 213.507 372 224 372C234.493 372 243 361.926 243 349.5V327H233.5C228.253 327 224 332.037 224 338.25C224 332.037 219.747 327 214.5 327Z" fill="#0BA960"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136 227.75L136 215L119.699 215C110.696 215 103 226.417 103 240.5C103 254.583 110.696 266 119.699 266L136 266L136 253.25C136 246.208 130.164 240.5 125.663 240.5C130.164 240.5 136 234.792 136 227.75Z" fill="#D96043"/>
<path d="M56.5 205.855H72.9998L56.5 222.355L40.0002 205.855H56.5Z" fill="#8D5AC4"/>
<path d="M56.5 239.039L40.0002 239.039L56.5 222.54L72.9998 239.039L56.5 239.039Z" fill="#080033"/>
<path d="M45.5 270L46.6092 301.823L69.8953 280.105L48.1775 303.391L80 304.5L48.1775 305.609L69.8953 328.895L46.6092 307.178L45.5 339L44.391 307.178L21.1048 328.895L42.8226 305.609L11 304.5L42.8226 303.391L21.1048 280.105L44.391 301.823L45.5 270Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1683 374.4C58.1683 361.05 49.3981 351.008 38.5797 351.008C32.9369 351.008 23.966 351 23.0332 351C23.0332 356.846 23.0332 368.013 23.0332 374.4H58.1683Z" fill="#D96043"/>
<path d="M211.503 172C214.195 172 216.378 174.183 216.378 176.875V188.842L220.392 177.568C221.295 175.032 224.083 173.708 226.619 174.611C229.155 175.514 230.479 178.303 229.576 180.839L225.367 192.659L233.363 182.989C235.079 180.915 238.152 180.623 240.227 182.339C242.301 184.054 242.592 187.127 240.877 189.202L233.065 198.648L243.611 192.404C245.928 191.033 248.918 191.798 250.29 194.114C251.662 196.431 250.896 199.421 248.579 200.793L237.601 207.293L250.152 204.967C252.799 204.476 255.343 206.224 255.834 208.871C256.325 211.518 254.576 214.062 251.929 214.553L239.103 216.93L251.957 219.159C254.61 219.619 256.388 222.143 255.928 224.796C255.468 227.448 252.944 229.225 250.292 228.766L237.573 226.56L248.74 233.026C251.07 234.376 251.865 237.358 250.516 239.688C249.166 242.017 246.184 242.812 243.854 241.463L232.332 234.79L240.781 245.082C242.489 247.163 242.187 250.234 240.106 251.942C238.026 253.65 234.954 253.348 233.246 251.268L225.427 241.742L229.554 253.354C230.455 255.89 229.13 258.677 226.594 259.579C224.057 260.481 221.269 259.155 220.367 256.618L216.378 245.393V257.307C216.378 259.999 214.195 262.182 211.503 262.182C208.811 262.182 206.628 259.999 206.628 257.307V245.295L202.599 256.612C201.695 259.148 198.908 260.472 196.372 259.569C193.836 258.666 192.511 255.878 193.414 253.342L197.625 241.512L189.624 251.189C187.908 253.264 184.836 253.555 182.761 251.84C180.686 250.124 180.395 247.052 182.11 244.978L189.924 235.526L179.371 241.776C177.055 243.148 174.065 242.382 172.693 240.065C171.322 237.749 172.087 234.759 174.403 233.387L185.371 226.891L172.845 229.214C170.198 229.705 167.654 227.956 167.163 225.31C166.672 222.662 168.42 220.119 171.067 219.628L183.893 217.25L171.042 215.021C168.39 214.561 166.612 212.038 167.072 209.386C167.532 206.733 170.055 204.956 172.708 205.416L185.412 207.618L174.251 201.155C171.922 199.806 171.127 196.824 172.476 194.494C173.825 192.164 176.808 191.37 179.138 192.719L190.66 199.391L182.212 189.1C180.504 187.019 180.806 183.947 182.887 182.239C184.968 180.531 188.039 180.833 189.747 182.914L197.554 192.424L193.434 180.83C192.532 178.293 193.858 175.506 196.395 174.604C198.931 173.703 201.719 175.029 202.62 177.565L206.628 188.842V176.875C206.628 174.183 208.811 172 211.503 172Z" fill="#080033"/>
<circle cx="231.433" cy="23.8333" r="10.8333" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.706 35.2948C224.677 35.2948 220.6 39.4421 220.6 44.558C220.6 49.674 224.677 53.8213 229.706 53.8213L229.706 35.2948Z" fill="#D96043"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M238.554 53.8215C243.726 53.8215 247.918 49.6741 247.918 44.5582C247.918 39.4422 243.726 35.2949 238.554 35.2949L229.705 35.2949L229.705 53.8215L238.554 53.8215Z" fill="#16A9C4"/>
<path d="M230.047 64.0307C228.346 66.2228 225.19 66.6208 222.998 64.9196C220.806 63.2184 220.408 60.0623 222.109 57.8702C223.81 55.6781 231.393 53.9142 231.413 54.0756C231.413 54.0756 231.749 61.8386 230.047 64.0307Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19192_4776">
<rect width="38" height="45" fill="white" transform="translate(205 327)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/content/blog/integrating-new-members-without-dilution-horizontal.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19244_45768)">
<path d="M0 0C105.6 0 211.2 0 320 0C320 74.415 320 148.83 320 225.5C214.4 225.5 108.8 225.5 0 225.5C0 151.085 0 76.67 0 0Z" fill="#F5D4C8"/>
<path d="M115.5 191L116.609 222.823L139.895 201.105L118.178 224.391L150 225.5L118.178 226.609L139.895 249.895L116.609 228.178L115.5 260L114.391 228.178L91.1048 249.895L112.823 226.609L81 225.5L112.823 224.391L91.1048 201.105L114.391 222.823L115.5 191Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 183.5L188 172L174.169 172C166.53 172 160 182.297 160 195C160 207.702 166.53 218 174.169 218L188 218L188 206.5C188 200.149 183.048 195 179.229 195C183.048 195 188 189.851 188 183.5Z" fill="#D96043"/>
<circle cx="272.745" cy="122.485" r="22.4851" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.526 184.726C298.26 184.726 306.961 176.118 306.961 165.5C306.961 154.881 298.26 146.274 287.526 146.274L269.16 146.274L269.16 184.726L287.526 184.726Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M269.16 146.274C258.722 146.274 250.26 154.882 250.26 165.5C250.26 176.119 258.722 184.727 269.16 184.727L269.16 146.274Z" fill="#D96043"/>
<path d="M269.87 205.918C266.339 210.468 259.788 211.294 255.238 207.763C250.688 204.232 249.862 197.682 253.393 193.132C256.924 188.582 272.663 184.921 272.705 185.256C272.705 185.256 273.4 201.369 269.87 205.918Z" fill="#0BA960"/>
<rect x="12" y="189" width="12.5" height="12.5" fill="#16A9C4"/>
<rect x="24.5" y="189" width="12.5" height="12.5" fill="#D93529"/>
<rect x="12" y="201.5" width="12.5" height="12.5" fill="#8D5AC4"/>
<rect x="24.5" y="201.5" width="12.5" height="12.5" fill="#0BA960"/>
<g clip-path="url(#clip1_19244_45768)">
<mask id="mask0_19244_45768" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="281" y="8" width="23" height="27">
<path d="M304 8H281V35H304V8Z" fill="white"/>
</mask>
<g mask="url(#mask0_19244_45768)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M286.75 8H281V21.5C281 28.9558 286.149 35 292.5 35C298.851 35 304 28.9558 304 21.5V8H298.25C295.074 8 292.5 11.0221 292.5 14.75C292.5 11.0221 289.926 8 286.75 8Z" fill="#0BA960"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_19244_45768">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
<clipPath id="clip1_19244_45768">
<rect width="23" height="27" fill="white" transform="translate(281 8)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/content/blog/integrating-new-members-without-dilution-tag.svg
+14
View File
@@ -0,0 +1,14 @@
<svg width="61" height="30" viewBox="0 0 61 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="61" height="30" fill="#080033"/>
<circle cx="10" cy="10" r="6" fill="#D93529"/>
<path d="M57 20.3103C57 23.4527 53.6421 26 49.5 26C45.3579 26 42 23.4527 42 20.3103C42 17.168 45.3579 4 49.5 4C53.6421 4 57 17.168 57 20.3103Z" fill="#16A9C4"/>
<rect width="10.625" height="10.625" transform="matrix(0.8 0.6 -0.8 0.6 31 3.20361)" fill="#0BA960"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 26C25 21.0294 20.9705 17 16 17C11.0294 17 7 21.0294 7 26H25Z" fill="url(#paint0_linear_19000_22890)"/>
<rect x="29" y="18" width="4" height="8.25" fill="#7771C2"/>
<defs>
<linearGradient id="paint0_linear_19000_22890" x1="9.475" y1="17.855" x2="13.2947" y2="27.6322" gradientUnits="userSpaceOnUse">
<stop stop-color="#7871C3"/>
<stop offset="1" stop-color="#B099FA"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 906 B

public/content/blog/integrating-new-members-without-dilution-vertical.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="260" height="390" fill="#F5D4C8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.258 311.992C156.1 310.897 156.715 309.645 157.07 308.311C157.608 306.304 157.54 304.183 156.874 302.215C156.208 300.247 154.974 298.52 153.328 297.253C151.682 295.986 149.697 295.235 147.624 295.095C145.551 294.955 143.483 295.432 141.681 296.467L138.817 297.987L137.111 295.25C135.715 292.835 133.417 291.074 130.722 290.353C128.027 289.633 125.157 290.013 122.742 291.409C120.327 292.805 118.566 295.103 117.845 297.798C117.125 300.493 117.505 303.363 118.901 305.778L130.286 325.835C130.38 326.002 130.508 326.149 130.66 326.267C130.812 326.384 130.986 326.47 131.172 326.52C131.357 326.57 131.551 326.582 131.742 326.556C131.932 326.531 132.116 326.467 132.282 326.37L152.17 314.692C153.368 314.005 154.417 313.087 155.258 311.992ZM103.329 355.054C102.488 356.149 101.872 357.4 101.518 358.735C100.979 360.742 101.047 362.863 101.713 364.831C102.379 366.799 103.613 368.525 105.259 369.792C106.906 371.06 108.891 371.811 110.964 371.951C113.036 372.091 115.104 371.613 116.906 370.579L119.77 369.059L121.476 371.796C122.872 374.211 125.171 375.972 127.865 376.692C130.56 377.413 133.431 377.033 135.846 375.637C138.26 374.241 140.021 371.942 140.742 369.248C141.462 366.553 141.082 363.683 139.686 361.268L128.301 341.211C128.207 341.044 128.08 340.897 127.927 340.779C127.775 340.661 127.601 340.575 127.416 340.525C127.23 340.476 127.036 340.463 126.845 340.489C126.655 340.515 126.471 340.579 126.305 340.676L106.418 352.353C105.22 353.041 104.17 353.958 103.329 355.054ZM154.506 361.299C153.171 360.945 151.92 360.329 150.824 359.488C149.729 358.647 148.811 357.597 148.124 356.399L136.447 336.511C136.349 336.345 136.286 336.162 136.26 335.971C136.234 335.781 136.246 335.587 136.296 335.401C136.346 335.215 136.432 335.041 136.55 334.889C136.667 334.737 136.814 334.61 136.982 334.515L157.038 323.131C159.453 321.734 162.324 321.355 165.019 322.075C167.713 322.795 170.012 324.557 171.408 326.971C172.804 329.386 173.183 332.257 172.463 334.951C171.743 337.646 169.982 339.944 167.567 341.34L164.829 343.046L166.35 345.911C167.384 347.712 167.861 349.78 167.721 351.853C167.581 353.926 166.83 355.911 165.563 357.557C164.296 359.204 162.57 360.438 160.602 361.104C158.634 361.77 156.512 361.838 154.506 361.299ZM107.763 307.558C106.668 306.717 105.416 306.101 104.082 305.747C102.075 305.208 99.9538 305.276 97.9858 305.942C96.0178 306.608 94.2912 307.842 93.024 309.488C91.7568 311.135 91.0059 313.12 90.8659 315.193C90.7259 317.265 91.2032 319.333 92.2375 321.135L93.7578 323.999L91.0205 325.705C88.6056 327.102 86.8444 329.4 86.1241 332.095C85.4038 334.789 85.7836 337.659 87.1797 340.074C88.5757 342.489 90.874 344.251 93.5687 344.971C96.2634 345.691 99.1339 345.311 101.549 343.915L121.606 332.531C121.773 332.436 121.92 332.309 122.037 332.156C122.155 332.004 122.241 331.83 122.291 331.645C122.341 331.459 122.353 331.265 122.327 331.074C122.301 330.884 122.238 330.7 122.141 330.535L110.463 310.647C109.776 309.449 108.858 308.399 107.763 307.558Z" fill="#080033"/>
<rect x="184" y="276" width="13" height="13" fill="#16A9C4"/>
<rect x="197" y="276" width="13" height="13" fill="#D93529"/>
<rect x="184" y="289" width="13" height="13" fill="#8D5AC4"/>
<rect x="197" y="289" width="13" height="13" fill="#0BA960"/>
<g clip-path="url(#clip0_19192_4776)">
<mask id="mask0_19192_4776" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="205" y="327" width="38" height="45">
<path d="M243 327H205V372H243V327Z" fill="white"/>
</mask>
<g mask="url(#mask0_19192_4776)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 327H205V349.5C205 361.926 213.507 372 224 372C234.493 372 243 361.926 243 349.5V327H233.5C228.253 327 224 332.037 224 338.25C224 332.037 219.747 327 214.5 327Z" fill="#0BA960"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136 227.75L136 215L119.699 215C110.696 215 103 226.417 103 240.5C103 254.583 110.696 266 119.699 266L136 266L136 253.25C136 246.208 130.164 240.5 125.663 240.5C130.164 240.5 136 234.792 136 227.75Z" fill="#D96043"/>
<path d="M56.5 205.855H72.9998L56.5 222.355L40.0002 205.855H56.5Z" fill="#8D5AC4"/>
<path d="M56.5 239.039L40.0002 239.039L56.5 222.54L72.9998 239.039L56.5 239.039Z" fill="#080033"/>
<path d="M45.5 270L46.6092 301.823L69.8953 280.105L48.1775 303.391L80 304.5L48.1775 305.609L69.8953 328.895L46.6092 307.178L45.5 339L44.391 307.178L21.1048 328.895L42.8226 305.609L11 304.5L42.8226 303.391L21.1048 280.105L44.391 301.823L45.5 270Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1683 374.4C58.1683 361.05 49.3981 351.008 38.5797 351.008C32.9369 351.008 23.966 351 23.0332 351C23.0332 356.846 23.0332 368.013 23.0332 374.4H58.1683Z" fill="#D96043"/>
<path d="M211.503 172C214.195 172 216.378 174.183 216.378 176.875V188.842L220.392 177.568C221.295 175.032 224.083 173.708 226.619 174.611C229.155 175.514 230.479 178.303 229.576 180.839L225.367 192.659L233.363 182.989C235.079 180.915 238.152 180.623 240.227 182.339C242.301 184.054 242.592 187.127 240.877 189.202L233.065 198.648L243.611 192.404C245.928 191.033 248.918 191.798 250.29 194.114C251.662 196.431 250.896 199.421 248.579 200.793L237.601 207.293L250.152 204.967C252.799 204.476 255.343 206.224 255.834 208.871C256.325 211.518 254.576 214.062 251.929 214.553L239.103 216.93L251.957 219.159C254.61 219.619 256.388 222.143 255.928 224.796C255.468 227.448 252.944 229.225 250.292 228.766L237.573 226.56L248.74 233.026C251.07 234.376 251.865 237.358 250.516 239.688C249.166 242.017 246.184 242.812 243.854 241.463L232.332 234.79L240.781 245.082C242.489 247.163 242.187 250.234 240.106 251.942C238.026 253.65 234.954 253.348 233.246 251.268L225.427 241.742L229.554 253.354C230.455 255.89 229.13 258.677 226.594 259.579C224.057 260.481 221.269 259.155 220.367 256.618L216.378 245.393V257.307C216.378 259.999 214.195 262.182 211.503 262.182C208.811 262.182 206.628 259.999 206.628 257.307V245.295L202.599 256.612C201.695 259.148 198.908 260.472 196.372 259.569C193.836 258.666 192.511 255.878 193.414 253.342L197.625 241.512L189.624 251.189C187.908 253.264 184.836 253.555 182.761 251.84C180.686 250.124 180.395 247.052 182.11 244.978L189.924 235.526L179.371 241.776C177.055 243.148 174.065 242.382 172.693 240.065C171.322 237.749 172.087 234.759 174.403 233.387L185.371 226.891L172.845 229.214C170.198 229.705 167.654 227.956 167.163 225.31C166.672 222.662 168.42 220.119 171.067 219.628L183.893 217.25L171.042 215.021C168.39 214.561 166.612 212.038 167.072 209.386C167.532 206.733 170.055 204.956 172.708 205.416L185.412 207.618L174.251 201.155C171.922 199.806 171.127 196.824 172.476 194.494C173.825 192.164 176.808 191.37 179.138 192.719L190.66 199.391L182.212 189.1C180.504 187.019 180.806 183.947 182.887 182.239C184.968 180.531 188.039 180.833 189.747 182.914L197.554 192.424L193.434 180.83C192.532 178.293 193.858 175.506 196.395 174.604C198.931 173.703 201.719 175.029 202.62 177.565L206.628 188.842V176.875C206.628 174.183 208.811 172 211.503 172Z" fill="#080033"/>
<circle cx="231.433" cy="23.8333" r="10.8333" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.706 35.2948C224.677 35.2948 220.6 39.4421 220.6 44.558C220.6 49.674 224.677 53.8213 229.706 53.8213L229.706 35.2948Z" fill="#D96043"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M238.554 53.8215C243.726 53.8215 247.918 49.6741 247.918 44.5582C247.918 39.4422 243.726 35.2949 238.554 35.2949L229.705 35.2949L229.705 53.8215L238.554 53.8215Z" fill="#16A9C4"/>
<path d="M230.047 64.0307C228.346 66.2228 225.19 66.6208 222.998 64.9196C220.806 63.2184 220.408 60.0623 222.109 57.8702C223.81 55.6781 231.393 53.9142 231.413 54.0756C231.413 54.0756 231.749 61.8386 230.047 64.0307Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19192_4776">
<rect width="38" height="45" fill="white" transform="translate(205 327)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/content/blog/knowledge-management-and-institutional-amnesia-horizontal.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19244_45768)">
<path d="M0 0C105.6 0 211.2 0 320 0C320 74.415 320 148.83 320 225.5C214.4 225.5 108.8 225.5 0 225.5C0 151.085 0 76.67 0 0Z" fill="#D4F0E0"/>
<path d="M115.5 191L116.609 222.823L139.895 201.105L118.178 224.391L150 225.5L118.178 226.609L139.895 249.895L116.609 228.178L115.5 260L114.391 228.178L91.1048 249.895L112.823 226.609L81 225.5L112.823 224.391L91.1048 201.105L114.391 222.823L115.5 191Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 183.5L188 172L174.169 172C166.53 172 160 182.297 160 195C160 207.702 166.53 218 174.169 218L188 218L188 206.5C188 200.149 183.048 195 179.229 195C183.048 195 188 189.851 188 183.5Z" fill="#D96043"/>
<circle cx="272.745" cy="122.485" r="22.4851" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.526 184.726C298.26 184.726 306.961 176.118 306.961 165.5C306.961 154.881 298.26 146.274 287.526 146.274L269.16 146.274L269.16 184.726L287.526 184.726Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M269.16 146.274C258.722 146.274 250.26 154.882 250.26 165.5C250.26 176.119 258.722 184.727 269.16 184.727L269.16 146.274Z" fill="#D96043"/>
<path d="M269.87 205.918C266.339 210.468 259.788 211.294 255.238 207.763C250.688 204.232 249.862 197.682 253.393 193.132C256.924 188.582 272.663 184.921 272.705 185.256C272.705 185.256 273.4 201.369 269.87 205.918Z" fill="#0BA960"/>
<rect x="12" y="189" width="12.5" height="12.5" fill="#16A9C4"/>
<rect x="24.5" y="189" width="12.5" height="12.5" fill="#D93529"/>
<rect x="12" y="201.5" width="12.5" height="12.5" fill="#8D5AC4"/>
<rect x="24.5" y="201.5" width="12.5" height="12.5" fill="#0BA960"/>
<g clip-path="url(#clip1_19244_45768)">
<mask id="mask0_19244_45768" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="281" y="8" width="23" height="27">
<path d="M304 8H281V35H304V8Z" fill="white"/>
</mask>
<g mask="url(#mask0_19244_45768)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M286.75 8H281V21.5C281 28.9558 286.149 35 292.5 35C298.851 35 304 28.9558 304 21.5V8H298.25C295.074 8 292.5 11.0221 292.5 14.75C292.5 11.0221 289.926 8 286.75 8Z" fill="#0BA960"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_19244_45768">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
<clipPath id="clip1_19244_45768">
<rect width="23" height="27" fill="white" transform="translate(281 8)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/content/blog/knowledge-management-and-institutional-amnesia-tag.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="60" height="30" viewBox="0 0 60 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="60" height="30" fill="#080033"/>
<circle cx="12" cy="15" r="8" fill="#D96043"/>
<g clip-path="url(#clip0_19000_22880)">
<mask id="mask0_19000_22880" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="7" width="16" height="16">
<path d="M38 7H22V23H38V7Z" fill="white"/>
</mask>
<g mask="url(#mask0_19000_22880)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8 7C31.2418 7 31.6 7.35817 31.6 7.8V9.20589C31.6 9.91861 32.4617 10.2755 32.9657 9.77157L33.9598 8.77746C34.2722 8.46504 34.7787 8.46504 35.0912 8.77746L36.2226 9.90883C36.535 10.2212 36.535 10.7278 36.2226 11.0402L35.2284 12.0343C34.7245 12.5383 35.0814 13.4 35.7941 13.4H37.2C37.6418 13.4 38 13.7582 38 14.2V15.8C38 16.2418 37.6418 16.6 37.2 16.6H35.7941C35.0814 16.6 34.7245 17.4617 35.2284 17.9657L36.2226 18.9598C36.535 19.2722 36.535 19.7787 36.2226 20.0912L35.0912 21.2226C34.7787 21.535 34.2722 21.535 33.9598 21.2226L32.9657 20.2284C32.4617 19.7245 31.6 20.0814 31.6 20.7941V22.2C31.6 22.6418 31.2418 23 30.8 23H29.2C28.7582 23 28.4 22.6418 28.4 22.2V20.7941C28.4 20.0814 27.5383 19.7245 27.0343 20.2284L26.0402 21.2226C25.7278 21.535 25.2212 21.535 24.9088 21.2226L23.7775 20.0912C23.465 19.7787 23.465 19.2722 23.7775 18.9598L24.7716 17.9657C25.2755 17.4617 24.9186 16.6 24.2059 16.6H22.8C22.3582 16.6 22 16.2418 22 15.8V14.2C22 13.7582 22.3582 13.4 22.8 13.4H24.2059C24.9186 13.4 25.2755 12.5383 24.7716 12.0343L23.7775 11.0402C23.465 10.7278 23.465 10.2212 23.7775 9.90883L24.9088 8.77746C25.2212 8.46504 25.7278 8.46504 26.0402 8.77746L27.0343 9.77157C27.5383 10.2755 28.4 9.91861 28.4 9.20589V7.8C28.4 7.35817 28.7582 7 29.2 7H30.8ZM30 19C32.2091 19 34 17.2091 34 15C34 12.7909 32.2091 11 30 11C27.7909 11 26 12.7909 26 15C26 17.2091 27.7909 19 30 19Z" fill="#8D5AC4"/>
</g>
</g>
<path d="M47.75 7.14746C48.2092 7.29305 48.2092 7.29305 48.6885 7.61627C49.1175 7.84798 49.5478 8.07728 49.979 8.30483C50.1992 8.42298 50.4194 8.54112 50.6463 8.66285C51.8368 9.1622 53.0636 9.43863 54.3199 9.72591C54.3374 10.9601 54.3501 12.1942 54.3585 13.4285C54.362 13.8478 54.3668 14.267 54.373 14.6862C54.3816 15.2914 54.3855 15.8964 54.3886 16.5017C54.3922 16.6868 54.3959 16.872 54.3996 17.0627C54.4001 18.7597 53.9936 20.2344 52.8387 21.534C52.7089 21.6857 52.5792 21.8374 52.4455 21.9937C51.8601 22.4774 51.2856 22.6283 50.5656 22.8525C50.5623 22.5529 50.5623 22.5529 50.559 22.2471C50.5486 21.5022 50.5342 20.7574 50.5169 20.0126C50.5103 19.691 50.5054 19.3693 50.502 19.0475C50.497 18.5837 50.4856 18.12 50.474 17.6563C50.4691 17.3776 50.4641 17.099 50.4591 16.8119C50.3078 15.9178 50.0208 15.5251 49.3924 14.8828C48.6346 14.2603 47.5523 14.2603 46.8114 14.6484C45.8847 15.1339 45.7104 15.6041 45.4036 16.5236C45.3683 17.0074 45.3453 17.492 45.3293 17.9768C45.3195 18.26 45.3097 18.5433 45.2995 18.8352C45.2903 19.1311 45.2811 19.4271 45.2716 19.732C45.2615 20.0307 45.2513 20.3294 45.2409 20.6371C45.216 21.3756 45.192 22.114 45.1689 22.8525C44.2349 22.4268 43.552 22.0349 42.8812 21.2557C42.7469 21.1043 42.6126 20.9529 42.4742 20.7969C41.5992 19.5105 41.5847 18.227 41.6035 16.7306C41.6042 16.5296 41.6048 16.3287 41.6055 16.1217C41.6081 15.4841 41.614 14.8465 41.62 14.2089C41.6224 13.7749 41.6245 13.3409 41.6264 12.9068C41.6316 11.8465 41.6397 10.7862 41.6493 9.72591C41.8866 9.66876 42.1238 9.61161 42.3682 9.55274C42.685 9.47325 43.0017 9.39362 43.3184 9.31387C43.4741 9.27676 43.6298 9.23965 43.7902 9.20142C45.1203 8.86158 46.1218 8.25822 47.2174 7.42765C47.3932 7.33519 47.5689 7.24272 47.75 7.14746Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19000_22880">
<rect width="16" height="16" fill="white" transform="translate(22 7)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

public/content/blog/knowledge-management-and-institutional-amnesia-vertical.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="260" height="390" fill="#D4F0E0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.258 311.992C156.1 310.897 156.715 309.645 157.07 308.311C157.608 306.304 157.54 304.183 156.874 302.215C156.208 300.247 154.974 298.52 153.328 297.253C151.682 295.986 149.697 295.235 147.624 295.095C145.551 294.955 143.483 295.432 141.681 296.467L138.817 297.987L137.111 295.25C135.715 292.835 133.417 291.074 130.722 290.353C128.027 289.633 125.157 290.013 122.742 291.409C120.327 292.805 118.566 295.103 117.845 297.798C117.125 300.493 117.505 303.363 118.901 305.778L130.286 325.835C130.38 326.002 130.508 326.149 130.66 326.267C130.812 326.384 130.986 326.47 131.172 326.52C131.357 326.57 131.551 326.582 131.742 326.556C131.932 326.531 132.116 326.467 132.282 326.37L152.17 314.692C153.368 314.005 154.417 313.087 155.258 311.992ZM103.329 355.054C102.488 356.149 101.872 357.4 101.518 358.735C100.979 360.742 101.047 362.863 101.713 364.831C102.379 366.799 103.613 368.525 105.259 369.792C106.906 371.06 108.891 371.811 110.964 371.951C113.036 372.091 115.104 371.613 116.906 370.579L119.77 369.059L121.476 371.796C122.872 374.211 125.171 375.972 127.865 376.692C130.56 377.413 133.431 377.033 135.846 375.637C138.26 374.241 140.021 371.942 140.742 369.248C141.462 366.553 141.082 363.683 139.686 361.268L128.301 341.211C128.207 341.044 128.08 340.897 127.927 340.779C127.775 340.661 127.601 340.575 127.416 340.525C127.23 340.476 127.036 340.463 126.845 340.489C126.655 340.515 126.471 340.579 126.305 340.676L106.418 352.353C105.22 353.041 104.17 353.958 103.329 355.054ZM154.506 361.299C153.171 360.945 151.92 360.329 150.824 359.488C149.729 358.647 148.811 357.597 148.124 356.399L136.447 336.511C136.349 336.345 136.286 336.162 136.26 335.971C136.234 335.781 136.246 335.587 136.296 335.401C136.346 335.215 136.432 335.041 136.55 334.889C136.667 334.737 136.814 334.61 136.982 334.515L157.038 323.131C159.453 321.734 162.324 321.355 165.019 322.075C167.713 322.795 170.012 324.557 171.408 326.971C172.804 329.386 173.183 332.257 172.463 334.951C171.743 337.646 169.982 339.944 167.567 341.34L164.829 343.046L166.35 345.911C167.384 347.712 167.861 349.78 167.721 351.853C167.581 353.926 166.83 355.911 165.563 357.557C164.296 359.204 162.57 360.438 160.602 361.104C158.634 361.77 156.512 361.838 154.506 361.299ZM107.763 307.558C106.668 306.717 105.416 306.101 104.082 305.747C102.075 305.208 99.9538 305.276 97.9858 305.942C96.0178 306.608 94.2912 307.842 93.024 309.488C91.7568 311.135 91.0059 313.12 90.8659 315.193C90.7259 317.265 91.2032 319.333 92.2375 321.135L93.7578 323.999L91.0205 325.705C88.6056 327.102 86.8444 329.4 86.1241 332.095C85.4038 334.789 85.7836 337.659 87.1797 340.074C88.5757 342.489 90.874 344.251 93.5687 344.971C96.2634 345.691 99.1339 345.311 101.549 343.915L121.606 332.531C121.773 332.436 121.92 332.309 122.037 332.156C122.155 332.004 122.241 331.83 122.291 331.645C122.341 331.459 122.353 331.265 122.327 331.074C122.301 330.884 122.238 330.7 122.141 330.535L110.463 310.647C109.776 309.449 108.858 308.399 107.763 307.558Z" fill="#080033"/>
<rect x="184" y="276" width="13" height="13" fill="#16A9C4"/>
<rect x="197" y="276" width="13" height="13" fill="#D93529"/>
<rect x="184" y="289" width="13" height="13" fill="#8D5AC4"/>
<rect x="197" y="289" width="13" height="13" fill="#0BA960"/>
<g clip-path="url(#clip0_19192_4776)">
<mask id="mask0_19192_4776" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="205" y="327" width="38" height="45">
<path d="M243 327H205V372H243V327Z" fill="white"/>
</mask>
<g mask="url(#mask0_19192_4776)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 327H205V349.5C205 361.926 213.507 372 224 372C234.493 372 243 361.926 243 349.5V327H233.5C228.253 327 224 332.037 224 338.25C224 332.037 219.747 327 214.5 327Z" fill="#0BA960"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136 227.75L136 215L119.699 215C110.696 215 103 226.417 103 240.5C103 254.583 110.696 266 119.699 266L136 266L136 253.25C136 246.208 130.164 240.5 125.663 240.5C130.164 240.5 136 234.792 136 227.75Z" fill="#D96043"/>
<path d="M56.5 205.855H72.9998L56.5 222.355L40.0002 205.855H56.5Z" fill="#8D5AC4"/>
<path d="M56.5 239.039L40.0002 239.039L56.5 222.54L72.9998 239.039L56.5 239.039Z" fill="#080033"/>
<path d="M45.5 270L46.6092 301.823L69.8953 280.105L48.1775 303.391L80 304.5L48.1775 305.609L69.8953 328.895L46.6092 307.178L45.5 339L44.391 307.178L21.1048 328.895L42.8226 305.609L11 304.5L42.8226 303.391L21.1048 280.105L44.391 301.823L45.5 270Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1683 374.4C58.1683 361.05 49.3981 351.008 38.5797 351.008C32.9369 351.008 23.966 351 23.0332 351C23.0332 356.846 23.0332 368.013 23.0332 374.4H58.1683Z" fill="#D96043"/>
<path d="M211.503 172C214.195 172 216.378 174.183 216.378 176.875V188.842L220.392 177.568C221.295 175.032 224.083 173.708 226.619 174.611C229.155 175.514 230.479 178.303 229.576 180.839L225.367 192.659L233.363 182.989C235.079 180.915 238.152 180.623 240.227 182.339C242.301 184.054 242.592 187.127 240.877 189.202L233.065 198.648L243.611 192.404C245.928 191.033 248.918 191.798 250.29 194.114C251.662 196.431 250.896 199.421 248.579 200.793L237.601 207.293L250.152 204.967C252.799 204.476 255.343 206.224 255.834 208.871C256.325 211.518 254.576 214.062 251.929 214.553L239.103 216.93L251.957 219.159C254.61 219.619 256.388 222.143 255.928 224.796C255.468 227.448 252.944 229.225 250.292 228.766L237.573 226.56L248.74 233.026C251.07 234.376 251.865 237.358 250.516 239.688C249.166 242.017 246.184 242.812 243.854 241.463L232.332 234.79L240.781 245.082C242.489 247.163 242.187 250.234 240.106 251.942C238.026 253.65 234.954 253.348 233.246 251.268L225.427 241.742L229.554 253.354C230.455 255.89 229.13 258.677 226.594 259.579C224.057 260.481 221.269 259.155 220.367 256.618L216.378 245.393V257.307C216.378 259.999 214.195 262.182 211.503 262.182C208.811 262.182 206.628 259.999 206.628 257.307V245.295L202.599 256.612C201.695 259.148 198.908 260.472 196.372 259.569C193.836 258.666 192.511 255.878 193.414 253.342L197.625 241.512L189.624 251.189C187.908 253.264 184.836 253.555 182.761 251.84C180.686 250.124 180.395 247.052 182.11 244.978L189.924 235.526L179.371 241.776C177.055 243.148 174.065 242.382 172.693 240.065C171.322 237.749 172.087 234.759 174.403 233.387L185.371 226.891L172.845 229.214C170.198 229.705 167.654 227.956 167.163 225.31C166.672 222.662 168.42 220.119 171.067 219.628L183.893 217.25L171.042 215.021C168.39 214.561 166.612 212.038 167.072 209.386C167.532 206.733 170.055 204.956 172.708 205.416L185.412 207.618L174.251 201.155C171.922 199.806 171.127 196.824 172.476 194.494C173.825 192.164 176.808 191.37 179.138 192.719L190.66 199.391L182.212 189.1C180.504 187.019 180.806 183.947 182.887 182.239C184.968 180.531 188.039 180.833 189.747 182.914L197.554 192.424L193.434 180.83C192.532 178.293 193.858 175.506 196.395 174.604C198.931 173.703 201.719 175.029 202.62 177.565L206.628 188.842V176.875C206.628 174.183 208.811 172 211.503 172Z" fill="#080033"/>
<circle cx="231.433" cy="23.8333" r="10.8333" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.706 35.2948C224.677 35.2948 220.6 39.4421 220.6 44.558C220.6 49.674 224.677 53.8213 229.706 53.8213L229.706 35.2948Z" fill="#D96043"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M238.554 53.8215C243.726 53.8215 247.918 49.6741 247.918 44.5582C247.918 39.4422 243.726 35.2949 238.554 35.2949L229.705 35.2949L229.705 53.8215L238.554 53.8215Z" fill="#16A9C4"/>
<path d="M230.047 64.0307C228.346 66.2228 225.19 66.6208 222.998 64.9196C220.806 63.2184 220.408 60.0623 222.109 57.8702C223.81 55.6781 231.393 53.9142 231.413 54.0756C231.413 54.0756 231.749 61.8386 230.047 64.0307Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19192_4776">
<rect width="38" height="45" fill="white" transform="translate(205 327)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/content/blog/making-decisions-without-hierarchy-horizontal.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="320" height="226" viewBox="0 0 320 226" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_19244_45768)">
<path d="M0 0C105.6 0 211.2 0 320 0C320 74.415 320 148.83 320 225.5C214.4 225.5 108.8 225.5 0 225.5C0 151.085 0 76.67 0 0Z" fill="#E8D4F4"/>
<path d="M115.5 191L116.609 222.823L139.895 201.105L118.178 224.391L150 225.5L118.178 226.609L139.895 249.895L116.609 228.178L115.5 260L114.391 228.178L91.1048 249.895L112.823 226.609L81 225.5L112.823 224.391L91.1048 201.105L114.391 222.823L115.5 191Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M188 183.5L188 172L174.169 172C166.53 172 160 182.297 160 195C160 207.702 166.53 218 174.169 218L188 218L188 206.5C188 200.149 183.048 195 179.229 195C183.048 195 188 189.851 188 183.5Z" fill="#D96043"/>
<circle cx="272.745" cy="122.485" r="22.4851" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.526 184.726C298.26 184.726 306.961 176.118 306.961 165.5C306.961 154.881 298.26 146.274 287.526 146.274L269.16 146.274L269.16 184.726L287.526 184.726Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M269.16 146.274C258.722 146.274 250.26 154.882 250.26 165.5C250.26 176.119 258.722 184.727 269.16 184.727L269.16 146.274Z" fill="#D96043"/>
<path d="M269.87 205.918C266.339 210.468 259.788 211.294 255.238 207.763C250.688 204.232 249.862 197.682 253.393 193.132C256.924 188.582 272.663 184.921 272.705 185.256C272.705 185.256 273.4 201.369 269.87 205.918Z" fill="#0BA960"/>
<rect x="12" y="189" width="12.5" height="12.5" fill="#16A9C4"/>
<rect x="24.5" y="189" width="12.5" height="12.5" fill="#D93529"/>
<rect x="12" y="201.5" width="12.5" height="12.5" fill="#8D5AC4"/>
<rect x="24.5" y="201.5" width="12.5" height="12.5" fill="#0BA960"/>
<g clip-path="url(#clip1_19244_45768)">
<mask id="mask0_19244_45768" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="281" y="8" width="23" height="27">
<path d="M304 8H281V35H304V8Z" fill="white"/>
</mask>
<g mask="url(#mask0_19244_45768)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M286.75 8H281V21.5C281 28.9558 286.149 35 292.5 35C298.851 35 304 28.9558 304 21.5V8H298.25C295.074 8 292.5 11.0221 292.5 14.75C292.5 11.0221 289.926 8 286.75 8Z" fill="#0BA960"/>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_19244_45768">
<rect width="320" height="225.5" fill="white"/>
</clipPath>
<clipPath id="clip1_19244_45768">
<rect width="23" height="27" fill="white" transform="translate(281 8)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/content/blog/making-decisions-without-hierarchy-tag.svg
+16
View File
@@ -0,0 +1,16 @@
<svg width="60" height="30" viewBox="0 0 60 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="60" height="30.0044" fill="#080033"/>
<circle cx="8.35979" cy="8.67912" r="5.9633" fill="#D96043"/>
<mask id="mask0_19020_33870" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="16" y="2" width="13" height="13">
<path d="M28.7499 2.71582H16.8232V14.6424H28.7499V2.71582Z" fill="white"/>
</mask>
<g mask="url(#mask0_19020_33870)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8234 14.6424C16.8233 14.6325 16.8232 14.6226 16.8232 14.6126C16.8232 13.0986 17.9406 11.8455 19.3956 11.6329C17.9426 11.4335 16.8232 10.187 16.8232 8.67913C16.8232 7.03241 18.1582 5.69747 19.8049 5.69747H19.8347C18.1815 5.69747 16.8394 4.36528 16.8234 2.71582H28.7497C28.7337 4.36528 27.3917 5.69747 25.7384 5.69747H25.7682C27.4149 5.69747 28.7499 7.03241 28.7499 8.67913C28.7499 10.187 27.6305 11.4335 26.1775 11.6329C27.6325 11.8455 28.7499 13.0986 28.7499 14.6126C28.7499 14.6226 28.7498 14.6325 28.7497 14.6424H16.8234Z" fill="#406C01"/>
</g>
<rect x="31.25" y="2.71582" width="11.9266" height="11.9266" fill="#F9B0A6"/>
<path d="M51.6412 10.9866C46.5453 17.908 42.4138 13.7766 49.3339 8.67892C42.4107 3.58207 46.5421 -0.54777 51.6412 6.37206C56.7371 -0.550149 60.8685 3.58207 53.9484 8.67892C60.8654 13.7766 56.7339 17.908 51.6412 10.9866Z" fill="#05728C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.96187 22.0409C4.66909 22.0402 2 19.3706 2 16.0776L13.9266 16.0776C13.9266 19.3706 11.2576 22.0402 7.96474 22.0409C11.2576 22.0417 13.9266 24.7113 13.9266 28.0042H2C2 24.7113 4.66909 22.0417 7.96187 22.0409Z" fill="#16A9C4"/>
<path d="M25.9778 24.0706C25.6518 24.3966 25.1232 24.3966 24.7971 24.0706L23.3578 22.6311C23.0317 22.3051 23.0317 21.7765 23.3578 21.4505L24.7971 20.0111C25.1232 19.6851 25.6518 19.6851 25.9778 20.0111L27.4172 21.4505C27.7433 21.7765 27.7433 22.3051 27.4172 22.6311L25.9778 24.0706ZM19.2913 24.0706C18.9653 24.3966 18.4367 24.3966 18.1107 24.0706L16.6713 22.6311C16.3452 22.3051 16.3452 21.7765 16.6713 21.4505L18.1107 20.0111C18.4367 19.6851 18.9653 19.6851 19.2913 20.0111L20.7307 21.4505C21.0568 21.7765 21.0568 22.3051 20.7307 22.6311L19.2913 24.0706ZM22.6346 27.4138C22.3085 27.7398 21.78 27.7398 21.4539 27.4138L20.0145 25.9744C19.6885 25.6484 19.6885 25.1198 20.0145 24.7937L21.4539 23.3544C21.78 23.0283 22.3085 23.0283 22.6346 23.3544L24.074 24.7937C24.4 25.1198 24.4 25.6484 24.074 25.9744L22.6346 27.4138ZM22.6346 20.7273C22.3085 21.0533 21.78 21.0533 21.4539 20.7273L20.0145 19.2879C19.6885 18.9619 19.6885 18.4333 20.0145 18.1072L21.4539 16.6679C21.78 16.3418 22.3085 16.3418 22.6346 16.6679L24.074 18.1072C24.4 18.4333 24.4 18.9619 24.074 19.2879L22.6346 20.7273Z" fill="#FDA8B7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.0408 25.8895C37.4621 26.854 36.7623 27.2887 36.1244 27.2887C35.4865 27.2887 34.7867 26.854 34.208 25.8895C33.6379 24.9392 33.2621 23.5802 33.2621 22.0409C33.2621 20.5016 33.6379 19.1427 34.208 18.1924C34.7867 17.2279 35.4865 16.7932 36.1244 16.7932C36.7623 16.7932 37.4621 17.2279 38.0408 18.1924C38.611 19.1427 38.9868 20.5016 38.9868 22.0409C38.9868 23.5802 38.611 24.9392 38.0408 25.8895ZM42.0877 22.0409C42.0877 18.7475 39.4179 16.0776 36.1244 16.0776C32.831 16.0776 30.1611 18.7475 30.1611 22.0409C30.1611 25.3344 32.831 28.0042 36.1244 28.0042C39.4179 28.0042 42.0877 25.3344 42.0877 22.0409ZM30.8767 22.0409C30.8767 24.1836 32.1608 26.0262 34.0013 26.8414C33.1188 25.7554 32.5465 24.0096 32.5465 22.0409C32.5465 20.0723 33.1188 18.3264 34.0013 17.2405C32.1608 18.0557 30.8767 19.8984 30.8767 22.0409ZM41.3721 22.0409C41.3721 24.1836 40.0881 26.0262 38.2476 26.8414C39.1301 25.7554 39.7024 24.0096 39.7024 22.0409C39.7024 20.0723 39.1301 18.3264 38.2476 17.2405C40.0881 18.0557 41.3721 19.8984 41.3721 22.0409ZM36.1244 22.6969C36.4867 22.6969 36.7804 22.4032 36.7804 22.0409C36.7804 21.6787 36.4867 21.385 36.1244 21.385C35.7622 21.385 35.4685 21.6787 35.4685 22.0409C35.4685 22.4032 35.7622 22.6969 36.1244 22.6969Z" fill="#C9CDFE"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M56.5145 19.0593V16.0776L50.5512 16.0776V19.0581C50.5506 17.4119 49.2159 16.0776 47.5695 16.0776H44.5879V22.0409H47.5695C45.9228 22.0409 44.5879 23.3759 44.5879 25.0226L44.5879 28.0042H50.5512V25.0226C50.5512 26.6693 51.8861 28.0042 53.5328 28.0042H56.5145V22.0409H53.534C55.1802 22.0403 56.5145 20.7056 56.5145 19.0593Z" fill="#0BA960"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

public/content/blog/making-decisions-without-hierarchy-vertical.svg
+31
View File
@@ -0,0 +1,31 @@
<svg width="260" height="390" viewBox="0 0 260 390" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="260" height="390" fill="#E8D4F4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.258 311.992C156.1 310.897 156.715 309.645 157.07 308.311C157.608 306.304 157.54 304.183 156.874 302.215C156.208 300.247 154.974 298.52 153.328 297.253C151.682 295.986 149.697 295.235 147.624 295.095C145.551 294.955 143.483 295.432 141.681 296.467L138.817 297.987L137.111 295.25C135.715 292.835 133.417 291.074 130.722 290.353C128.027 289.633 125.157 290.013 122.742 291.409C120.327 292.805 118.566 295.103 117.845 297.798C117.125 300.493 117.505 303.363 118.901 305.778L130.286 325.835C130.38 326.002 130.508 326.149 130.66 326.267C130.812 326.384 130.986 326.47 131.172 326.52C131.357 326.57 131.551 326.582 131.742 326.556C131.932 326.531 132.116 326.467 132.282 326.37L152.17 314.692C153.368 314.005 154.417 313.087 155.258 311.992ZM103.329 355.054C102.488 356.149 101.872 357.4 101.518 358.735C100.979 360.742 101.047 362.863 101.713 364.831C102.379 366.799 103.613 368.525 105.259 369.792C106.906 371.06 108.891 371.811 110.964 371.951C113.036 372.091 115.104 371.613 116.906 370.579L119.77 369.059L121.476 371.796C122.872 374.211 125.171 375.972 127.865 376.692C130.56 377.413 133.431 377.033 135.846 375.637C138.26 374.241 140.021 371.942 140.742 369.248C141.462 366.553 141.082 363.683 139.686 361.268L128.301 341.211C128.207 341.044 128.08 340.897 127.927 340.779C127.775 340.661 127.601 340.575 127.416 340.525C127.23 340.476 127.036 340.463 126.845 340.489C126.655 340.515 126.471 340.579 126.305 340.676L106.418 352.353C105.22 353.041 104.17 353.958 103.329 355.054ZM154.506 361.299C153.171 360.945 151.92 360.329 150.824 359.488C149.729 358.647 148.811 357.597 148.124 356.399L136.447 336.511C136.349 336.345 136.286 336.162 136.26 335.971C136.234 335.781 136.246 335.587 136.296 335.401C136.346 335.215 136.432 335.041 136.55 334.889C136.667 334.737 136.814 334.61 136.982 334.515L157.038 323.131C159.453 321.734 162.324 321.355 165.019 322.075C167.713 322.795 170.012 324.557 171.408 326.971C172.804 329.386 173.183 332.257 172.463 334.951C171.743 337.646 169.982 339.944 167.567 341.34L164.829 343.046L166.35 345.911C167.384 347.712 167.861 349.78 167.721 351.853C167.581 353.926 166.83 355.911 165.563 357.557C164.296 359.204 162.57 360.438 160.602 361.104C158.634 361.77 156.512 361.838 154.506 361.299ZM107.763 307.558C106.668 306.717 105.416 306.101 104.082 305.747C102.075 305.208 99.9538 305.276 97.9858 305.942C96.0178 306.608 94.2912 307.842 93.024 309.488C91.7568 311.135 91.0059 313.12 90.8659 315.193C90.7259 317.265 91.2032 319.333 92.2375 321.135L93.7578 323.999L91.0205 325.705C88.6056 327.102 86.8444 329.4 86.1241 332.095C85.4038 334.789 85.7836 337.659 87.1797 340.074C88.5757 342.489 90.874 344.251 93.5687 344.971C96.2634 345.691 99.1339 345.311 101.549 343.915L121.606 332.531C121.773 332.436 121.92 332.309 122.037 332.156C122.155 332.004 122.241 331.83 122.291 331.645C122.341 331.459 122.353 331.265 122.327 331.074C122.301 330.884 122.238 330.7 122.141 330.535L110.463 310.647C109.776 309.449 108.858 308.399 107.763 307.558Z" fill="#080033"/>
<rect x="184" y="276" width="13" height="13" fill="#16A9C4"/>
<rect x="197" y="276" width="13" height="13" fill="#D93529"/>
<rect x="184" y="289" width="13" height="13" fill="#8D5AC4"/>
<rect x="197" y="289" width="13" height="13" fill="#0BA960"/>
<g clip-path="url(#clip0_19192_4776)">
<mask id="mask0_19192_4776" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="205" y="327" width="38" height="45">
<path d="M243 327H205V372H243V327Z" fill="white"/>
</mask>
<g mask="url(#mask0_19192_4776)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M214.5 327H205V349.5C205 361.926 213.507 372 224 372C234.493 372 243 361.926 243 349.5V327H233.5C228.253 327 224 332.037 224 338.25C224 332.037 219.747 327 214.5 327Z" fill="#0BA960"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136 227.75L136 215L119.699 215C110.696 215 103 226.417 103 240.5C103 254.583 110.696 266 119.699 266L136 266L136 253.25C136 246.208 130.164 240.5 125.663 240.5C130.164 240.5 136 234.792 136 227.75Z" fill="#D96043"/>
<path d="M56.5 205.855H72.9998L56.5 222.355L40.0002 205.855H56.5Z" fill="#8D5AC4"/>
<path d="M56.5 239.039L40.0002 239.039L56.5 222.54L72.9998 239.039L56.5 239.039Z" fill="#080033"/>
<path d="M45.5 270L46.6092 301.823L69.8953 280.105L48.1775 303.391L80 304.5L48.1775 305.609L69.8953 328.895L46.6092 307.178L45.5 339L44.391 307.178L21.1048 328.895L42.8226 305.609L11 304.5L42.8226 303.391L21.1048 280.105L44.391 301.823L45.5 270Z" fill="#16A9C4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.1683 374.4C58.1683 361.05 49.3981 351.008 38.5797 351.008C32.9369 351.008 23.966 351 23.0332 351C23.0332 356.846 23.0332 368.013 23.0332 374.4H58.1683Z" fill="#D96043"/>
<path d="M211.503 172C214.195 172 216.378 174.183 216.378 176.875V188.842L220.392 177.568C221.295 175.032 224.083 173.708 226.619 174.611C229.155 175.514 230.479 178.303 229.576 180.839L225.367 192.659L233.363 182.989C235.079 180.915 238.152 180.623 240.227 182.339C242.301 184.054 242.592 187.127 240.877 189.202L233.065 198.648L243.611 192.404C245.928 191.033 248.918 191.798 250.29 194.114C251.662 196.431 250.896 199.421 248.579 200.793L237.601 207.293L250.152 204.967C252.799 204.476 255.343 206.224 255.834 208.871C256.325 211.518 254.576 214.062 251.929 214.553L239.103 216.93L251.957 219.159C254.61 219.619 256.388 222.143 255.928 224.796C255.468 227.448 252.944 229.225 250.292 228.766L237.573 226.56L248.74 233.026C251.07 234.376 251.865 237.358 250.516 239.688C249.166 242.017 246.184 242.812 243.854 241.463L232.332 234.79L240.781 245.082C242.489 247.163 242.187 250.234 240.106 251.942C238.026 253.65 234.954 253.348 233.246 251.268L225.427 241.742L229.554 253.354C230.455 255.89 229.13 258.677 226.594 259.579C224.057 260.481 221.269 259.155 220.367 256.618L216.378 245.393V257.307C216.378 259.999 214.195 262.182 211.503 262.182C208.811 262.182 206.628 259.999 206.628 257.307V245.295L202.599 256.612C201.695 259.148 198.908 260.472 196.372 259.569C193.836 258.666 192.511 255.878 193.414 253.342L197.625 241.512L189.624 251.189C187.908 253.264 184.836 253.555 182.761 251.84C180.686 250.124 180.395 247.052 182.11 244.978L189.924 235.526L179.371 241.776C177.055 243.148 174.065 242.382 172.693 240.065C171.322 237.749 172.087 234.759 174.403 233.387L185.371 226.891L172.845 229.214C170.198 229.705 167.654 227.956 167.163 225.31C166.672 222.662 168.42 220.119 171.067 219.628L183.893 217.25L171.042 215.021C168.39 214.561 166.612 212.038 167.072 209.386C167.532 206.733 170.055 204.956 172.708 205.416L185.412 207.618L174.251 201.155C171.922 199.806 171.127 196.824 172.476 194.494C173.825 192.164 176.808 191.37 179.138 192.719L190.66 199.391L182.212 189.1C180.504 187.019 180.806 183.947 182.887 182.239C184.968 180.531 188.039 180.833 189.747 182.914L197.554 192.424L193.434 180.83C192.532 178.293 193.858 175.506 196.395 174.604C198.931 173.703 201.719 175.029 202.62 177.565L206.628 188.842V176.875C206.628 174.183 208.811 172 211.503 172Z" fill="#080033"/>
<circle cx="231.433" cy="23.8333" r="10.8333" fill="#D93529"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.706 35.2948C224.677 35.2948 220.6 39.4421 220.6 44.558C220.6 49.674 224.677 53.8213 229.706 53.8213L229.706 35.2948Z" fill="#D96043"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M238.554 53.8215C243.726 53.8215 247.918 49.6741 247.918 44.5582C247.918 39.4422 243.726 35.2949 238.554 35.2949L229.705 35.2949L229.705 53.8215L238.554 53.8215Z" fill="#16A9C4"/>
<path d="M230.047 64.0307C228.346 66.2228 225.19 66.6208 222.998 64.9196C220.806 63.2184 220.408 60.0623 222.109 57.8702C223.81 55.6781 231.393 53.9142 231.413 54.0756C231.413 54.0756 231.749 61.8386 230.047 64.0307Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19192_4776">
<rect width="38" height="45" fill="white" transform="translate(205 327)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

public/content/blog/operational-security-mutual-aid-tag.svg
+18
View File
@@ -0,0 +1,18 @@
<svg width="60" height="30" viewBox="0 0 60 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="60" height="30" fill="#080033"/>
<circle cx="12" cy="15" r="8" fill="#D96043"/>
<g clip-path="url(#clip0_19000_22880)">
<mask id="mask0_19000_22880" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="7" width="16" height="16">
<path d="M38 7H22V23H38V7Z" fill="white"/>
</mask>
<g mask="url(#mask0_19000_22880)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8 7C31.2418 7 31.6 7.35817 31.6 7.8V9.20589C31.6 9.91861 32.4617 10.2755 32.9657 9.77157L33.9598 8.77746C34.2722 8.46504 34.7787 8.46504 35.0912 8.77746L36.2226 9.90883C36.535 10.2212 36.535 10.7278 36.2226 11.0402L35.2284 12.0343C34.7245 12.5383 35.0814 13.4 35.7941 13.4H37.2C37.6418 13.4 38 13.7582 38 14.2V15.8C38 16.2418 37.6418 16.6 37.2 16.6H35.7941C35.0814 16.6 34.7245 17.4617 35.2284 17.9657L36.2226 18.9598C36.535 19.2722 36.535 19.7787 36.2226 20.0912L35.0912 21.2226C34.7787 21.535 34.2722 21.535 33.9598 21.2226L32.9657 20.2284C32.4617 19.7245 31.6 20.0814 31.6 20.7941V22.2C31.6 22.6418 31.2418 23 30.8 23H29.2C28.7582 23 28.4 22.6418 28.4 22.2V20.7941C28.4 20.0814 27.5383 19.7245 27.0343 20.2284L26.0402 21.2226C25.7278 21.535 25.2212 21.535 24.9088 21.2226L23.7775 20.0912C23.465 19.7787 23.465 19.2722 23.7775 18.9598L24.7716 17.9657C25.2755 17.4617 24.9186 16.6 24.2059 16.6H22.8C22.3582 16.6 22 16.2418 22 15.8V14.2C22 13.7582 22.3582 13.4 22.8 13.4H24.2059C24.9186 13.4 25.2755 12.5383 24.7716 12.0343L23.7775 11.0402C23.465 10.7278 23.465 10.2212 23.7775 9.90883L24.9088 8.77746C25.2212 8.46504 25.7278 8.46504 26.0402 8.77746L27.0343 9.77157C27.5383 10.2755 28.4 9.91861 28.4 9.20589V7.8C28.4 7.35817 28.7582 7 29.2 7H30.8ZM30 19C32.2091 19 34 17.2091 34 15C34 12.7909 32.2091 11 30 11C27.7909 11 26 12.7909 26 15C26 17.2091 27.7909 19 30 19Z" fill="#8D5AC4"/>
</g>
</g>
<path d="M47.75 7.14746C48.2092 7.29305 48.2092 7.29305 48.6885 7.61627C49.1175 7.84798 49.5478 8.07728 49.979 8.30483C50.1992 8.42298 50.4194 8.54112 50.6463 8.66285C51.8368 9.1622 53.0636 9.43863 54.3199 9.72591C54.3374 10.9601 54.3501 12.1942 54.3585 13.4285C54.362 13.8478 54.3668 14.267 54.373 14.6862C54.3816 15.2914 54.3855 15.8964 54.3886 16.5017C54.3922 16.6868 54.3959 16.872 54.3996 17.0627C54.4001 18.7597 53.9936 20.2344 52.8387 21.534C52.7089 21.6857 52.5792 21.8374 52.4455 21.9937C51.8601 22.4774 51.2856 22.6283 50.5656 22.8525C50.5623 22.5529 50.5623 22.5529 50.559 22.2471C50.5486 21.5022 50.5342 20.7574 50.5169 20.0126C50.5103 19.691 50.5054 19.3693 50.502 19.0475C50.497 18.5837 50.4856 18.12 50.474 17.6563C50.4691 17.3776 50.4641 17.099 50.4591 16.8119C50.3078 15.9178 50.0208 15.5251 49.3924 14.8828C48.6346 14.2603 47.5523 14.2603 46.8114 14.6484C45.8847 15.1339 45.7104 15.6041 45.4036 16.5236C45.3683 17.0074 45.3453 17.492 45.3293 17.9768C45.3195 18.26 45.3097 18.5433 45.2995 18.8352C45.2903 19.1311 45.2811 19.4271 45.2716 19.732C45.2615 20.0307 45.2513 20.3294 45.2409 20.6371C45.216 21.3756 45.192 22.114 45.1689 22.8525C44.2349 22.4268 43.552 22.0349 42.8812 21.2557C42.7469 21.1043 42.6126 20.9529 42.4742 20.7969C41.5992 19.5105 41.5847 18.227 41.6035 16.7306C41.6042 16.5296 41.6048 16.3287 41.6055 16.1217C41.6081 15.4841 41.614 14.8465 41.62 14.2089C41.6224 13.7749 41.6245 13.3409 41.6264 12.9068C41.6316 11.8465 41.6397 10.7862 41.6493 9.72591C41.8866 9.66876 42.1238 9.61161 42.3682 9.55274C42.685 9.47325 43.0017 9.39362 43.3184 9.31387C43.4741 9.27676 43.6298 9.23965 43.7902 9.20142C45.1203 8.86158 46.1218 8.25822 47.2174 7.42765C47.3932 7.33519 47.5689 7.24272 47.75 7.14746Z" fill="#0BA960"/>
<defs>
<clipPath id="clip0_19000_22880">
<rect width="16" height="16" fill="white" transform="translate(22 7)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

public/content/blog/resolving-active-conflicts-tag.svg
+14
View File
@@ -0,0 +1,14 @@
<svg width="61" height="30" viewBox="0 0 61 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="61" height="30" fill="#080033"/>
<circle cx="10" cy="10" r="6" fill="#D93529"/>
<path d="M57 20.3103C57 23.4527 53.6421 26 49.5 26C45.3579 26 42 23.4527 42 20.3103C42 17.168 45.3579 4 49.5 4C53.6421 4 57 17.168 57 20.3103Z" fill="#16A9C4"/>
<rect width="10.625" height="10.625" transform="matrix(0.8 0.6 -0.8 0.6 31 3.20361)" fill="#0BA960"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25 26C25 21.0294 20.9705 17 16 17C11.0294 17 7 21.0294 7 26H25Z" fill="url(#paint0_linear_19000_22890)"/>
<rect x="29" y="18" width="4" height="8.25" fill="#7771C2"/>
<defs>
<linearGradient id="paint0_linear_19000_22890" x1="9.475" y1="17.855" x2="13.2947" y2="27.6322" gradientUnits="userSpaceOnUse">
<stop stop-color="#7871C3"/>
<stop offset="1" stop-color="#B099FA"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 906 B

stories/content/ContentThumbnailTemplate.stories.js
+9 -5
View File
@@ -1,13 +1,17 @@
import ContentThumbnailTemplate from "../../app/components/content/ContentThumbnailTemplate";
const mockPost = {
slug: "sample-article",
slug: "resolving-active-conflicts",
frontmatter: {
title: "Sample Article Title",
title: "Resolving Active Conflicts",
description:
"This is a sample article description that explains what the article covers.",
author: "Sample Author",
date: "2025-01-15",
"Practical steps for resolving conflicts while maintaining trust, cooperation, and shared goals",
author: "Author name",
date: "2025-04-15",
thumbnail: {
vertical: "resolving-active-conflicts-vertical.svg",
horizontal: "resolving-active-conflicts-horizontal.svg",
},
},
};
tests/pages/learn.test.tsx
+113
View File
@@ -0,0 +1,113 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { screen, within } from "@testing-library/react";
import { renderWithProviders as render } from "../utils/test-utils";
import LearnPage from "../../app/(marketing)/learn/page";
vi.mock("../../lib/content", () => ({
getAllBlogPosts: vi.fn(),
}));
vi.mock("../../app/components/sections/AskOrganizer", () => ({
default: ({
title,
subtitle,
buttonText,
}: {
title: string;
subtitle: string;
buttonText: string;
}) => (
<div data-testid="ask-organizer">
<h2>{title}</h2>
<p>{subtitle}</p>
<button type="button">{buttonText}</button>
</div>
),
}));
const mockPosts = [
{
slug: "resolving-active-conflicts",
frontmatter: {
title: "Resolving Active Conflicts",
description: "Practical steps for resolving conflicts",
author: "Author name",
date: "2025-04-15",
thumbnail: {
vertical: "resolving-active-conflicts-vertical.svg",
horizontal: "resolving-active-conflicts-horizontal.svg",
},
},
content: "",
htmlContent: "",
filePath: "resolving-active-conflicts.md",
lastModified: new Date(),
},
{
slug: "operational-security-mutual-aid",
frontmatter: {
title: "Operational Security for Mutual Aid",
description: "Tactics to protect members",
author: "Author name",
date: "2025-04-10",
thumbnail: {
vertical: "operational-security-mutual-aid-vertical.svg",
horizontal: "operational-security-mutual-aid-horizontal.svg",
},
},
content: "",
htmlContent: "",
filePath: "operational-security-mutual-aid.md",
lastModified: new Date(),
},
];
describe("LearnPage", () => {
beforeEach(async () => {
vi.clearAllMocks();
const { getAllBlogPosts } = await import("../../lib/content");
vi.mocked(getAllBlogPosts).mockReturnValue(mockPosts);
});
it("renders content lockup and ask organizer copy", () => {
render(<LearnPage />);
expect(screen.getByText("Organizing is hard")).toBeInTheDocument();
expect(
screen.getByText(
/Find answers to your questions and see how other groups/,
),
).toBeInTheDocument();
expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
expect(screen.getByText("Still have questions?")).toBeInTheDocument();
});
it("renders one card per post in each layout region without duplication", () => {
const { container } = render(<LearnPage />);
const mobileRegion = container.querySelector(".smd\\:hidden");
const desktopRegion = container.querySelector(".smd\\:grid");
expect(mobileRegion).toBeTruthy();
expect(desktopRegion).toBeTruthy();
const mobileLinks = within(mobileRegion as HTMLElement).getAllByRole(
"link",
);
const desktopLinks = within(desktopRegion as HTMLElement).getAllByRole(
"link",
);
expect(mobileLinks).toHaveLength(mockPosts.length);
expect(desktopLinks).toHaveLength(mockPosts.length);
expect(mobileLinks[0]).toHaveAttribute(
"href",
"/blog/resolving-active-conflicts",
);
expect(desktopLinks[1]).toHaveAttribute(
"href",
"/blog/operational-security-mutual-aid",
);
});
});
tests/unit/ContentContainer.test.jsx
+18 -8
View File
@@ -5,6 +5,12 @@ import ContentContainer from "../../app/components/content/ContentContainer";
// Mock asset utils
vi.mock("../../lib/assetUtils", () => ({
getAssetPath: vi.fn((asset) => `/assets/${asset}`),
contentBlogTagPath: vi.fn((slug) => `/content/blog/${slug}-tag.svg`),
CONTENT_CATALOG_SLUG_ORDER: [
"resolving-active-conflicts",
"operational-security-mutual-aid",
"making-decisions-without-hierarchy",
],
ASSETS: {
ICON_1: "Icon_1.svg",
ICON_2: "Icon_2.svg",
@@ -121,7 +127,8 @@ describe("ContentContainer", () => {
const metadataContainer = screen.getByText("Test Author").closest("div");
expect(metadataContainer).toHaveClass(
"flex",
"items-center",
"min-w-0",
"items-end",
"gap-[var(--measures-spacing-008)]",
);
});
@@ -148,26 +155,29 @@ describe("ContentContainer", () => {
);
});
it("cycles through different icons based on slug", () => {
it("uses per-article tag assets for catalog slugs", () => {
const { rerender } = render(<ContentContainer post={mockPost} />);
// First render should use Icon_1
let icon = screen.getByAltText("Icon for Test Article Title");
expect(icon).toHaveAttribute("src", "/assets/Icon_1.svg");
// Test with different slug
const post2 = { ...mockPost, slug: "operational-security-mutual-aid" };
rerender(<ContentContainer post={post2} />);
icon = screen.getByAltText("Icon for Test Article Title");
expect(icon).toHaveAttribute("src", "/assets/Icon_2.svg");
expect(icon).toHaveAttribute(
"src",
"/content/blog/operational-security-mutual-aid-tag.svg",
);
// Test with another slug
const post3 = { ...mockPost, slug: "making-decisions-without-hierarchy" };
rerender(<ContentContainer post={post3} />);
icon = screen.getByAltText("Icon for Test Article Title");
expect(icon).toHaveAttribute("src", "/assets/Icon_3.svg");
expect(icon).toHaveAttribute(
"src",
"/content/blog/making-decisions-without-hierarchy-tag.svg",
);
});
it("handles missing post data gracefully", () => {
@@ -191,7 +201,7 @@ describe("ContentContainer", () => {
expect(icon).toHaveClass("w-[60px]", "h-[30px]");
const title = screen.getByText("Test Article Title");
expect(title).toHaveClass("text-[18px]", "leading-[120%]");
expect(title).toHaveClass("text-[18px]", "leading-[22px]");
const description = screen.getByText(/This is a test article description/);
expect(description).toHaveClass("text-[12px]", "leading-[16px]");
tests/unit/ContentThumbnailTemplate.test.jsx
+19 -91
View File
@@ -2,7 +2,6 @@ import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import ContentThumbnailTemplate from "../../app/components/content/ContentThumbnailTemplate";
// Mock Next.js components
vi.mock("next/link", () => {
return {
default: ({ children, href, ...props }) => (
@@ -13,13 +12,6 @@ vi.mock("next/link", () => {
};
});
vi.mock("next/image", () => {
return {
default: ({ src, alt, ...props }) => <img src={src} alt={alt} {...props} />,
};
});
// Mock blog post data
const mockPost = {
slug: "test-post",
frontmatter: {
@@ -35,18 +27,14 @@ const mockPost = {
},
};
// Pure presentational; no provider context needed.
describe("ContentThumbnailTemplate", () => {
describe("Vertical Variant", () => {
it("should render vertical variant with responsive dimensions", () => {
it("should render vertical variant with fluid Figma aspect ratio", () => {
render(<ContentThumbnailTemplate post={mockPost} />);
const container = screen.getByRole("link");
expect(container).toBeInTheDocument();
// Check that the component has the correct classes for responsive dimensions
const thumbnailDiv = container.querySelector("div");
expect(thumbnailDiv).toHaveClass("w-full", "aspect-[2/3]");
const thumbnailDiv = container.querySelector("div.relative");
expect(thumbnailDiv).toHaveClass("aspect-[260/390]", "w-full");
});
it("should display post title and description", () => {
@@ -67,29 +55,20 @@ describe("ContentThumbnailTemplate", () => {
});
describe("Horizontal Variant", () => {
it("should render horizontal variant with responsive sizing", () => {
it("should render horizontal variant with fluid Figma aspect ratio", () => {
render(<ContentThumbnailTemplate post={mockPost} variant="horizontal" />);
const container = screen.getByRole("link");
expect(container).toBeInTheDocument();
// Check that the component has the correct classes for horizontal layout
const thumbnailDiv = container.querySelector("div");
expect(thumbnailDiv).toHaveClass(
"min-w-[320px]",
"max-w-[800px]",
"h-[225.5px]",
);
const thumbnailDiv = container.querySelector("div.relative");
expect(thumbnailDiv).toHaveClass("aspect-[320/225.5]", "w-full");
});
it("should display post information in horizontal layout", () => {
render(<ContentThumbnailTemplate post={mockPost} />);
it("should render fixed vertical dimensions when sizing is fixed", () => {
render(<ContentThumbnailTemplate post={mockPost} sizing="fixed" />);
expect(screen.getByText("Test Blog Post Title")).toBeInTheDocument();
expect(
screen.getByText(/This is a test description/),
).toBeInTheDocument();
expect(screen.getByText("Test Author")).toBeInTheDocument();
const container = screen.getByRole("link");
const thumbnailDiv = container.querySelector("div.relative");
expect(thumbnailDiv).toHaveClass("h-[390px]", "w-[260px]");
});
});
@@ -99,83 +78,32 @@ describe("ContentThumbnailTemplate", () => {
<ContentThumbnailTemplate post={mockPost} className="custom-class" />,
);
const container = screen.getByRole("link");
expect(container).toHaveClass("custom-class");
expect(screen.getByRole("link")).toHaveClass("custom-class");
});
it("should generate correct link href", () => {
render(<ContentThumbnailTemplate post={mockPost} />);
const link = screen.getByRole("link");
expect(link).toHaveAttribute("href", "/blog/test-post");
});
it("should handle posts without tags gracefully", () => {
const postWithoutTags = {
...mockPost,
frontmatter: {
...mockPost.frontmatter,
tags: [],
},
};
render(<ContentThumbnailTemplate post={postWithoutTags} />);
// Should still render without errors
expect(screen.getByText("Test Blog Post Title")).toBeInTheDocument();
});
it("should handle posts without thumbnail images", () => {
const postWithoutImages = {
...mockPost,
frontmatter: {
...mockPost.frontmatter,
thumbnail: undefined,
},
};
render(<ContentThumbnailTemplate post={postWithoutImages} />);
// Should still render without errors
expect(screen.getByText("Test Blog Post Title")).toBeInTheDocument();
expect(screen.getByRole("link")).toHaveAttribute(
"href",
"/blog/test-post",
);
});
it("should use article-specific thumbnail images when provided", () => {
render(<ContentThumbnailTemplate post={mockPost} />);
// Check that the background image uses the article-specific thumbnail
const backgroundImg = document.querySelector(
"img[alt*='Background for']",
);
const backgroundImg = document.querySelector('img[src*="test-post-vertical"]');
expect(backgroundImg).toBeInTheDocument();
expect(backgroundImg.src).toContain("test-post-vertical.svg");
});
it("should use article-specific horizontal images for horizontal variant", () => {
it("should use horizontal thumbnail for horizontal variant", () => {
render(<ContentThumbnailTemplate post={mockPost} variant="horizontal" />);
// Check that the background image uses the article-specific horizontal thumbnail
const backgroundImg = document.querySelector(
"img[alt*='Background for']",
'img[src*="test-post-horizontal"]',
);
expect(backgroundImg).toBeInTheDocument();
expect(backgroundImg.src).toContain("test-post-horizontal.svg");
});
});
describe("Default Behavior", () => {
it("should default to vertical variant when no variant specified", () => {
render(<ContentThumbnailTemplate post={mockPost} />);
const thumbnailDiv = screen.getByRole("link").querySelector("div");
expect(thumbnailDiv).toHaveClass("w-full", "aspect-[2/3]");
});
it("should show metadata by default", () => {
render(<ContentThumbnailTemplate post={mockPost} />);
expect(screen.getByText("Test Author")).toBeInTheDocument();
expect(screen.getByText("April 2025")).toBeInTheDocument();
});
});
});