Skip to content

Commit 1b2b8f0

Browse files
Copilotdannystaple
Copilot
and
dannystaple
committed
Add front page wireframe in docs folder and configure Eleventy to ignore docs
Co-authored-by: dannystaple <426859+dannystaple@users.noreply.github.com>
1 parent 07b21e8 commit 1b2b8f0

File tree

2 files changed

+163
-0
lines changed

2 files changed

+163
-0
lines changed

‎.eleventyignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
./_drafts
44
./tests
55
./.github
6+
docs
67
Dockerfile
78
DOCKER_OPTIMIZATION.md

‎docs/front-page-wireframe.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# Front Page Layout Wireframe
2+
3+
This wireframe describes the layout structure of the Orionrobots front page (index.md) without focusing on specific content.
4+
5+
## Overall Layout Structure
6+
7+
The front page uses a Bootstrap-based responsive layout with the following hierarchy:
8+
9+
```
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<!-- Meta tags, CSS, and script includes -->
14+
</head>
15+
<body class="template">
16+
<div class="container">
17+
<!-- HEADER SECTION -->
18+
<nav class="navbar navbar-expand-lg">
19+
<!-- Navigation bar content -->
20+
</nav>
21+
22+
<!-- MAIN CONTENT SECTION -->
23+
<div class="row">
24+
<div id="col-main" class="content col-md-12">
25+
<!-- Content area spans full width for index layout -->
26+
27+
<!-- TAG AND SOCIAL ROW -->
28+
<nav class="row g-0 border rounded tag-row">
29+
<!-- Tags section -->
30+
<!-- Social sharing section -->
31+
</nav>
32+
33+
<!-- PAGE HEADER -->
34+
<h2 class="page-header">
35+
<!-- Page title and optional tagline -->
36+
</h2>
37+
38+
<!-- POST INFO SECTION -->
39+
<div class="row-fluid post-full">
40+
<!-- Additional post information if needed -->
41+
</div>
42+
43+
<!-- MAIN ARTICLE CONTENT -->
44+
<article>
45+
<!-- Main page content -->
46+
</article>
47+
</div>
48+
<!-- Note: No sidebar for index layout (content_class="col-md-12") -->
49+
</div>
50+
51+
<!-- FOOTER SECTION -->
52+
<footer id="bottom">
53+
<!-- Footer content -->
54+
</footer>
55+
</div>
56+
</body>
57+
</html>
58+
```
59+
60+
## Header Section Layout
61+
62+
```
63+
+------------------------------------------------------------------+
64+
| NAVIGATION BAR |
65+
| [Logo + "Orionrobots"] [Menu Items...] [Search Box] |
66+
+------------------------------------------------------------------+
67+
```
68+
69+
### Navigation Components:
70+
- **Brand/Logo**: Left-aligned logo with site name
71+
- **Menu Items**: Horizontal navigation menu (collapses on mobile)
72+
- **Search Box**: Right-aligned Google Custom Search
73+
74+
## Main Content Area Layout
75+
76+
```
77+
+------------------------------------------------------------------+
78+
| TAG ROW |
79+
| [Tags] [Social Sharing Icons] |
80+
+------------------------------------------------------------------+
81+
| PAGE HEADER |
82+
| Main Title [Optional Tagline] |
83+
+------------------------------------------------------------------+
84+
| MAIN CONTENT AREA |
85+
| - Introductory text/description |
86+
| - Featured content (book banner, links) |
87+
| - Recent Posts section |
88+
| - Additional sections (Events, Policies, etc.) |
89+
+------------------------------------------------------------------+
90+
```
91+
92+
### Content Sections Structure:
93+
1. **Tag Row**: Horizontal bar with tags and social sharing
94+
2. **Page Header**: Main title with optional tagline
95+
3. **Content Article**: Main content area containing:
96+
- Introduction paragraph
97+
- Featured content (images, links)
98+
- Recent posts list
99+
- Additional navigation sections
100+
101+
## Recent Posts Section Layout
102+
103+
```
104+
+------------------------------------------------------------------+
105+
| ## Recent Posts |
106+
+------------------------------------------------------------------+
107+
| [Thumbnail] | Post Date » Post Title |
108+
| | Post excerpt... [more...] |
109+
+------------------------------------------------------------------+
110+
| [Thumbnail] | Post Date » Post Title |
111+
| | Post excerpt... [more...] |
112+
+------------------------------------------------------------------+
113+
| ... (up to 6 posts) |
114+
+------------------------------------------------------------------+
115+
```
116+
117+
### Recent Posts Components:
118+
- **Thumbnail**: Left-aligned post image
119+
- **Post Meta**: Date and title as clickable link
120+
- **Excerpt**: Brief post description with "more..." link
121+
122+
## Footer Section Layout
123+
124+
```
125+
+------------------------------------------------------------------+
126+
| FOOTER NAVIGATION |
127+
| - Discord link |
128+
| - YouTube link |
129+
| - Facebook link |
130+
| - Privacy & Cookies link |
131+
+------------------------------------------------------------------+
132+
| COPYRIGHT & CREDITS |
133+
| © Year OrionRobots | Powered by Bootstrap |
134+
+------------------------------------------------------------------+
135+
```
136+
137+
## Responsive Behavior
138+
139+
- **Desktop**: Full width layout (col-md-12)
140+
- **Tablet**: Menu collapses to hamburger button
141+
- **Mobile**: Stacked vertical layout, responsive navigation
142+
143+
## Layout Differences from Other Pages
144+
145+
The front page (index layout) differs from other page layouts:
146+
147+
- **No Sidebar**: Uses full width (col-md-12) instead of col-md-8 with sidebar
148+
- **Custom Content Structure**: Optimized for home page content presentation
149+
- **Featured Content**: Designed to showcase recent posts and key information
150+
151+
## CSS Framework
152+
153+
- **Bootstrap 5**: Primary responsive framework
154+
- **Custom CSS**: Additional styling via bundle.js and inline styles
155+
- **Responsive Grid**: Uses Bootstrap's grid system for layout
156+
157+
## JavaScript Dependencies
158+
159+
- **bundle.js**: Main JavaScript bundle containing site functionality
160+
- **Google Custom Search**: Search functionality
161+
- **Bootstrap JS**: Navigation and responsive behavior
162+
- **Social Media SDKs**: For social sharing functionality

0 commit comments

Comments
 (0)