Skip to content

Fix cards home #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 4, 2025
Merged

Fix cards home #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 39 additions & 28 deletions content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,39 +45,39 @@ Built for modern PHP development with functional programming principles
{% features() %}

{% feature_card(title="Built on PHP Ecosystem", description="Runs on the PHP ecosystem with access to all existing libraries", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 3l-7 7 7 7M15 3l7 7-7 7"/></svg>') %}
<li>• Seamless PHP interoperability</li>
<li>• Access to Composer packages</li>
<li>• Familiar deployment patterns</li>
• Seamless PHP interoperability
• Access to Composer packages
• Familiar deployment patterns
{% end %}

{% feature_card(title="Immutable Data Structures", description="Built-in persistent data structures like Lists, Vectors, Maps, and Sets", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>') %}
<li>• Structural sharing for performance</li>
<li>• Thread-safe by default</li>
<li>• Minimal, readable Lisp syntax</li>
• Structural sharing for performance
• Thread-safe by default
• Minimal, readable Lisp syntax
{% end %}

{% feature_card(title="Macro System", description="Advanced metaprogramming capabilities for code generation", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>') %}
<li>• Powerful macro system</li>
<li>• Code as data philosophy</li>
<li>• Extensible language constructs</li>
• Powerful macro system
• Code as data philosophy
• Extensible language constructs
{% end %}

{% feature_card(title="Interactive REPL", description="Interactive REPLs for iterating and prototyping", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>') %}
<li>• Live code evaluation</li>
<li>• Rapid prototyping</li>
<li>• Interactive development</li>
• Live code evaluation
• Rapid prototyping
• Interactive development
{% end %}

{% feature_card(title="Lisp-inspired Syntax", description="Clean, expressive, and easy to pick up syntax", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>') %}
<li>• Minimal, readable syntax</li>
<li>• Homoiconicity benefits</li>
<li>• Expressive and concise</li>
{% feature_card(title="Lisp-inspired Syntax", description="Clean, expressive, and easy to pick up syntax", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path><polyline points="10 2 10 10 12.5 7.5 15 10 15 2"></polyline></svg>') %}
• Minimal, readable syntax
• Homoiconicity benefits
• Expressive and concise
{% end %}

{% feature_card(title="Modern Tooling", description="Comprehensive development tools and ecosystem", icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>') %}
<li>• Plugin support</li>
<li>• Package management</li>
<li>• Testing frameworks</li>
• Plugin support
• Package management
• Testing frameworks
{% end %}

{% end %}
Expand All @@ -92,29 +92,40 @@ Phel started as an [experiment in writing functional PHP](/blog/functional-progr
<div class="why-card">
<div class="why-card-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
<path d="M9 18h6"></path>
<path d="M10 22h4"></path>
</svg>
</div>
<div class="why-card-text">A Lisp-inspired functional language</div>
</div>
<div class="why-card">
<div class="why-card-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
<path d="M12 2v2"></path>
<path d="M12 22v-2"></path>
<path d="m17 20.66-1-1.73"></path>
<path d="M11 10.27 7 3.34"></path>
<path d="m20.66 17-1.73-1"></path>
<path d="m3.34 7 1.73 1"></path>
<path d="M14 12h8"></path>
<path d="M2 12h2"></path>
<path d="m20.66 7-1.73 1"></path>
<path d="m3.34 17 1.73-1"></path>
<path d="m17 3.34-1 1.73"></path>
<path d="m11 13.73-4 6.93"></path>
</svg>
</div>
<div class="why-card-text">That runs on affordable PHP hosting</div>
</div>
<div class="why-card">
<div class="why-card-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
<path d="M18 16l4-4-4-4"></path>
<path d="M6 8l-4 4 4 4"></path>
<path d="M14.5 4l-5 16"></path>
</svg>
</div>
<div class="why-card-text">That's expressive, debug-friendly, and easy to pick up</div>
Expand Down
6 changes: 3 additions & 3 deletions content/documentation/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ require __DIR__ . '/../vendor/autoload.php';
php -S localhost:8000 ./src/index.php
```

> 📘 [More on running code](/documentation/cli-commands#run-a-script)
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg> [More on running code](/documentation/cli-commands#run-a-script)

## REPL

Expand All @@ -98,15 +98,15 @@ Try:
(println "Hello" name)
```

> 📘 [More on REPL](/documentation/repl)
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg> [More on REPL](/documentation/repl)

## Testing

```bash
vendor/bin/phel test --filter foo
```

> 📘 [More on testing](/documentation/testing)
> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px;"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg> [More on testing](/documentation/testing)

## Editor Support

Expand Down
2 changes: 1 addition & 1 deletion css/components/code-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

.copy-code-button {
position: absolute;
top: 0;
top: -0.5rem;
right: 0.75rem;
width: 36px;
height: 36px;
Expand Down
6 changes: 6 additions & 0 deletions css/components/dark-mode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,12 @@

.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb {
background: var(--color-dark-border);
background-clip: padding-box;
}

.dark .two-column-layout__sidebar::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-base);
background-clip: padding-box;
}

/* Dark TOC */
Expand Down
5 changes: 4 additions & 1 deletion css/components/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,20 +154,23 @@

/* Custom scrollbar for sidebar */
.two-column-layout__sidebar::-webkit-scrollbar {
width: 6px;
width: 8px;
}

.two-column-layout__sidebar::-webkit-scrollbar-track {
background: transparent;
margin: 8px 0;
}

.two-column-layout__sidebar::-webkit-scrollbar-thumb {
background: var(--color-light-border);
border-radius: var(--radius-full);
background-clip: padding-box;
}

.two-column-layout__sidebar::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-base);
background-clip: padding-box;
}
}

Expand Down
8 changes: 6 additions & 2 deletions templates/shortcodes/feature_card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
<h3 class="feature-title">{{ title }}</h3>
<p class="feature-description">{{ description }}</p>
<ul class="feature-items">
{{ body | safe }}
{% set lines = body | trim | split(pat="\n") %}
{% for line in lines %}
{% if line | trim %}
<li>{{ line | trim }}</li>
{% endif %}
{% endfor %}
</ul>
</div>

Loading