|
1 | | -# Stylish Project Showcases |
| 1 | +# Project Showcases |
2 | 2 |
|
3 | | -Fezcodex supports a "Stylish" project details page variant. This layout is designed for high-production, landing-page style showcases that are isolated from the main site's global layout. |
| 3 | +Fezcodex supports different project detail page styles to best present each project. Currently, there are two distinct styles available: "Stylish" and "Techno". |
4 | 4 |
|
5 | 5 | ## 1. Activation |
6 | 6 |
|
7 | | -To enable the stylish layout for a project, you must set the `(stylish)` flag to `true` in `public/projects/projects.piml`: |
| 7 | +To assign a style to a project, set the `(style)` field in `public/projects/projects.piml`: |
8 | 8 |
|
9 | 9 | ```piml |
10 | 10 | > (project) |
11 | 11 | (slug) my-cool-project |
12 | | - (stylish) true |
| 12 | + (style) stylish ; or 'techno' |
13 | 13 | ... |
14 | 14 | ``` |
15 | 15 |
|
16 | | -When this flag is detected, the site will automatically bypass the global sidebar/navbar and render the project using the `StylishProjectDetailsPage` component. |
| 16 | +If no style is specified, the default layout will be used. |
17 | 17 |
|
18 | | -## 2. Directory Structure |
| 18 | +--- |
19 | 19 |
|
20 | | -All content for a stylish project must be placed in a dedicated folder under `public/projects/[slug]/`. |
| 20 | +## 2. Stylish Layout |
| 21 | + |
| 22 | +This layout is designed for high-production, landing-page style showcases. It features a rich, component-driven design ideal for web apps and major projects. |
| 23 | + |
| 24 | +### Directory Structure |
| 25 | +Content resides in `public/projects/[slug]/` as `.txt` files (previously `.mdx`). |
21 | 26 |
|
22 | 27 | ```text |
23 | | -public/projects/my-cool-project/ |
24 | | -├── hero.txt # Hero title, typewriter words, and main image |
25 | | -├── partners.txt # Tech stack or "Trusted by" list |
| 28 | +public/projects/my-project/ |
| 29 | +├── hero.txt # Hero section |
| 30 | +├── partners.txt # Tech stack/Partners |
26 | 31 | ├── terminal.txt # Interactive terminal tabs |
27 | | -├── integrations.txt # Feature showcase with images (Exploration Modes) |
28 | | -├── features.txt # Grid of feature cards |
29 | | -├── technical.txt # Technical architecture overview |
30 | | -├── details.txt # Long-form markdown (Philosophy/Deep Dive) |
31 | | -└── cta.txt # Call to action and install command |
| 32 | +├── integrations.txt # Feature showcase grid |
| 33 | +├── features.txt # Icon cards grid |
| 34 | +├── technical.txt # Technical specs |
| 35 | +├── details.txt # Long-form content |
| 36 | +└── cta.txt # Call to action |
32 | 37 | ``` |
33 | 38 |
|
34 | | -## 3. MDX File Specifications |
| 39 | +### File Specifications |
| 40 | +(Same block parsing rules as before apply, e.g., `:::feature`, `:::tech`) |
| 41 | + |
| 42 | +--- |
35 | 43 |
|
36 | | -### `hero.txt` |
37 | | -The hero section expects a specific header format: |
38 | | -* **Line 1**: The prefix (e.g., `# Built for`) |
39 | | -* **Line 2**: Comma-separated words for the typewriter effect. |
40 | | -* **image:** tag: Path to the main hero image. |
41 | | -* **Body**: The main description paragraph. |
| 44 | +## 3. Editorial Layout |
42 | 45 |
|
43 | | -```mdx |
44 | | -# Built for |
45 | | -explorers, hackers, builders |
| 46 | +The **Editorial** style (formerly Techno) is a raw, brutalist, developer-focused aesthetic. It uses monospaced fonts, high-contrast dark modes, and terminal-inspired elements. It is perfect for CLIs, system tools, and low-level libraries. |
46 | 47 |
|
47 | | -image: /images/projects/my-hero.webp |
| 48 | +### Directory Structure |
| 49 | +Content resides in `public/projects/[slug]/` as `.txt` files. |
48 | 50 |
|
49 | | -This is the main description of the project. |
| 51 | +```text |
| 52 | +public/projects/my-cli-tool/ |
| 53 | +├── hero.txt # Hero title and description |
| 54 | +├── features.txt # (Not currently used in Editorial layout, but reserved) |
| 55 | +├── terminal.txt # Terminal session preview (supports colors) |
| 56 | +├── install.txt # Installation command(s) |
| 57 | +├── social.txt # Horizontal scrollable "social proof" or "explore" cards |
| 58 | +├── description.txt # Main project description (Overview, Features) |
| 59 | +└── footer.txt # (Reserved for footer links) |
50 | 60 | ``` |
51 | 61 |
|
52 | | -### `partners.txt` |
53 | | -Used to show a list of technologies or partners. |
54 | | -* **label**: The small header text. |
55 | | -* **logos**: Comma-separated list of items to display. |
| 62 | +### File Specifications |
56 | 63 |
|
57 | | -```mdx |
58 | | -label: Built with |
59 | | -logos: REACT, TAILWIND, RUST |
60 | | -``` |
| 64 | +#### `hero.txt` |
| 65 | +* **Lines starting with `#`**: Title lines (rendered in large serif font). |
| 66 | +* **image:** tag: (Ignored in Editorial layout as it uses a global background grid, but good to keep for metadata). |
| 67 | +* **Body**: Description text below the title. |
61 | 68 |
|
62 | | -### `terminal.txt` |
63 | | -Defines the interactive terminal component. Uses `:::tab` blocks. |
64 | | -* **id**: Unique identifier for the tab. |
65 | | -* **label**: Text displayed on the tab button. |
66 | | -* **command**: The "input" command shown after the `$`. |
67 | | -* **output**: The response text. |
68 | | - |
69 | | -```mdx |
70 | | -:::tab |
71 | | -id: scan |
72 | | -label: Scan |
73 | | -command: project --scan |
74 | | -output: Scanning system... Done. |
75 | | -::: |
76 | | -``` |
| 69 | +```txt |
| 70 | +# Engineered |
| 71 | +# For The Shell |
77 | 72 |
|
78 | | -### `integrations.txt` |
79 | | -Renders as a 3-column grid with images at the top. Uses `:::integration` blocks. |
80 | | -* **title**, **description**, **image**, **link** (optional). |
81 | | - |
82 | | -```mdx |
83 | | -# Navigation Modes |
84 | | -:::integration |
85 | | -title: Mobile App |
86 | | -description: Access on the go. |
87 | | -image: /images/projects/mobile.webp |
88 | | -link: /download |
89 | | -::: |
| 73 | +Dush is the custom terminal shell... |
90 | 74 | ``` |
91 | 75 |
|
92 | | -### `features.txt` |
93 | | -Renders as a 4-column grid of icon cards. Uses `:::feature` blocks. |
94 | | -* **icon**: Phosphor icon name (without 'Icon' suffix, e.g., `Cpu`, `Command`, `Globe`). |
95 | | -* **title**, **description**. |
96 | | - |
97 | | -```mdx |
98 | | -:::feature |
99 | | -icon: Lightning |
100 | | -title: Fast |
101 | | -description: Blazing fast execution. |
102 | | -::: |
| 76 | +#### `terminal.txt` |
| 77 | +Raw text that is rendered inside a terminal window component. |
| 78 | +* Supports standard Markdown code blocks. |
| 79 | +* Use `rehype-raw` compatible HTML spans for colors if needed (e.g., `<span class="text-yellow-500">warn</span>`). |
| 80 | + |
| 81 | +```txt |
| 82 | + <span class="text-[#b8bb26]">➜</span> ~ dush |
| 83 | + dush> echo "hello" |
103 | 84 | ``` |
104 | 85 |
|
105 | | -### `technical.txt` |
106 | | -Renders as a grid of architectural cards. Uses `:::tech` blocks. |
107 | | -* **Bold text** inside the block becomes the card title (Instrument Serif font). |
| 86 | +#### `install.txt` |
| 87 | +Contains the raw installation command string. |
| 88 | + |
| 89 | +```txt |
| 90 | +go install github.com/fezcode/dush@latest |
| 91 | +``` |
108 | 92 |
|
109 | | -```mdx |
110 | | -:::tech |
111 | | -**Frontend:** Built with React 19. |
112 | | -::: |
| 93 | +#### `social.txt` |
| 94 | +Defines the "Explore With Us" cards. Entries are separated by `---`. |
| 95 | +* **Line 1**: Title (optionally starts with `#`). |
| 96 | +* **Line 2**: Author / Subtitle. |
| 97 | +* **Line 3**: Stats string (e.g., `+10 -2 ~1`). |
| 98 | +* **link:**: URL for the card. |
| 99 | +* **image:**: (Optional) Background image URL. |
| 100 | + |
| 101 | +```txt |
| 102 | +# Why I built Dush |
| 103 | +fezcode |
| 104 | ++10 -2 ~1 |
| 105 | +link: https://github.com/fezcode/dush |
| 106 | +--- |
| 107 | +# Architecture |
| 108 | +... |
113 | 109 | ``` |
114 | 110 |
|
115 | | -### `details.txt` |
116 | | -Standard markdown for the "Philosophy" section. |
117 | | -* Supports `image: /path/to/img` for auto-styled image containers. |
118 | | -* Supports `## Headings` for section titles. |
119 | | -* Links are automatically rendered as stylized buttons. |
| 111 | +#### `description.txt` |
| 112 | +The main content area ("About the Project"). |
| 113 | +* Standard Markdown. |
| 114 | +* Supports lists, bolding, and headers. |
| 115 | +* `## Headings` separate the content into different grid rows in the layout. |
120 | 116 |
|
121 | | -### `cta.txt` |
122 | | -The final section. |
123 | | -* The first `# Heading` is the title. |
124 | | -* A code block (e.g., ` ```bash `) is rendered inside a terminal-style `ProjectUrlLine` component. |
| 117 | +```txt |
| 118 | +## Overview |
| 119 | +Dush is a minimalist shell... |
| 120 | +
|
| 121 | +## Key Features |
| 122 | +- Feature 1 |
| 123 | +- Feature 2 |
| 124 | +``` |
125 | 125 |
|
126 | 126 | ## 4. Assets |
127 | 127 |
|
128 | | -* **Images**: Place images in `public/images/projects/` or `public/images/asset/`. |
129 | | -* **Icons**: Use any icon name from `@phosphor-icons/react` (e.g., `User`, `Gear`, `ShieldCheck`). |
| 128 | +* **Images**: Place images in `public/images/projects/` or `public/images/bg/`. |
| 129 | +* **Icons**: Use Phosphor icons where applicable in code, or SVG assets. |
130 | 130 |
|
131 | 131 | ## 5. Adding a New Project Checklist |
132 | 132 |
|
133 | 133 | 1. Create the folder `public/projects/[your-slug]`. |
134 | | -2. Copy existing `.txt` files from `fezcodex` as templates. |
135 | | -3. Fill in the content. |
136 | | -4. Add the project to `public/projects/projects.piml` with `(stylish) true`. |
137 | | -5. Run `npm run lint` to ensure everything is correct. |
| 134 | +2. Choose your style: `stylish` or `editorial`. |
| 135 | +3. Create the corresponding `.txt` files based on the chosen style's structure. |
| 136 | +4. Add the project to `public/projects/projects.piml` with the correct `(style)` field. |
| 137 | +5. Run `npm run lint` to ensure code quality. |
0 commit comments