Skip to content

Commit 8cf7b3f

Browse files
mtrythallmtrythall
authored
Merge pull request #88 from djangocon/styleguide
Adds styleguide to site
2 parents 4fe206c + 36ad2af commit 8cf7b3f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+661
-60
lines changed

‎README.md

+12-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Dates are formatted with [date-fns](https://date-fns.org/), due to some wonkines
4242
{{ post.data.published_datetime | formatDateTime: "MMMM d, yyyy" }}
4343
```
4444

45-
# Social Media Images
45+
## Social Media Images
4646

4747
1. Presenter images are created at `/presenters/{{ slug }}/`
4848
2. Session images are created at `/{{ talks,tutorials }}/{{ slug }}/social/`
@@ -52,3 +52,14 @@ Dates are formatted with [date-fns](https://date-fns.org/), due to some wonkines
5252
1. When adding images, if they are below the "fold", consider adding a `loading="lazy"` attribute to the image tag.
5353
2. When adding images, consider adding an `alt` attribute to the image tag.
5454
3. Keep copy short and to the point. The site is most likely scanned, not read.
55+
4. Make sure to keep the styleguide up-to-date with any new components or styles.
56+
57+
## Styleguide
58+
59+
The styleguide lives at `/styleguide/` (respectively `styleguide.html`). The guide is built from content within `src/_content/styleguide/`. Each HTML page represents a section. Sections can be ordered with `order`. Each section can have a `description`.
60+
61+
When using code samples, be sure to use `{% capture code %}` to capture sample and pass it to the `code-snippet.html` include like so:
62+
63+
```liquid
64+
{% include "code-snippet.html", code:code, lang:'html' %}
65+
```

‎ROBOTS.txt

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Sitemap: /sitemap.xml
2+
3+
User-agent: *
4+
Disallow:

‎eleventy.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const { formatInTimeZone } = require('date-fns-tz');
1313
const siteConfig = require('./src/_data/site.json');
1414
const timezone = siteConfig.timezone || 'UTC'; // Default to 'UTC' if not specified
1515

16-
1716
module.exports = (config) => {
1817
setupCollections(config);
1918
setupSessions(config);
@@ -31,6 +30,8 @@ module.exports = (config) => {
3130
"src/_content/places/*.{png,jpg,jpeg,webp,svg}": "venue/",
3231
});
3332
config.addPassthroughCopy("CNAME");
33+
config.addPassthroughCopy("ROBOTS.txt");
34+
3435

3536
/*
3637
Setup watch targets

‎lib/collections.js

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const siteData = require('../src/_data/site.json');
2+
13
module.exports = function(config) {
24
/*
35
Setup collections
@@ -33,19 +35,14 @@ module.exports = function(config) {
3335
}).filter(item => !item.data.hidden);
3436
});
3537

38+
config.addCollection("guides", function(collectionApi) {
39+
return collectionApi.getFilteredByGlob("src/_content/styleguide/*.html").sort((a, b) => a.data.order - b.data.order);
40+
});
41+
3642
config.addCollection("sponsorsByLevel", function(collectionApi) {
3743
const sponsors = collectionApi.getFilteredByGlob("src/_content/sponsors/*.md");
3844
const visibleSponsors = sponsors.filter(sponsor => !sponsor.data.hidden);
39-
const levelOrder = [
40-
"Diamond",
41-
"Platinum",
42-
"Gold",
43-
"Silver",
44-
"Bronze",
45-
"Coffee",
46-
"Opportunity Grants",
47-
"Community",
48-
];
45+
const levelOrder = siteData.sponsorsOrder;
4946

5047
const sponsorsByLevel = visibleSponsors.reduce((acc, sponsor) => {
5148
const level = sponsor.data.level;

‎package-lock.json

+5-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/404.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: default
33

44
title: Page Not Found
5-
description: >
5+
description: |
66
The page you're looking for doesn't exist.
77

88
permalink: /404.html

‎src/_content/styleguide/alerts.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Alerts
3+
4+
order: 60
5+
---
6+
{%- capture code -%}<section class="p-4 bg-orange-100 rounded">
7+
<h3 class="mb-4 text-lg font-bold font-heading lg:text-2xl">Attention!</h3>
8+
<div class="prose prose-lg">
9+
<p>If you try to book and the website says the capacity is full, please call the hotel to try to book your room. You may need to mention that you're with the DjangoCon US group.</p>
10+
</div>
11+
</section>
12+
{%- endcapture -%}
13+
14+
<div>
15+
{% include "code-snippet.html", code:code, lang:'html' %}
16+
</div>

‎src/_content/styleguide/badges.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Badges
3+
4+
order: 50
5+
6+
description: |
7+
Badges are used to indicate status, denote a count, or to draw attention to an element. Badges are created by applying `.badge` to an element. Colors may be changed by applying a background color utility class, e.g. `bg-blue` to create a blue badge.
8+
---
9+
10+
{%- capture code -%}<div class="flex flex-wrap gap-2">
11+
<span class="badge">🛜 Free Wi-Fi</span>
12+
<span class="badge">🧑‍💻 Room for hallway hacking</span>
13+
<span class="badge">🏙️ In the middle of downtown</span>
14+
</div>
15+
{%- endcapture -%}
16+
17+
<div>
18+
{% include "code-snippet.html", code:code, lang:'html' %}
19+
</div>

‎src/_content/styleguide/blocks-grids.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: "Blocks & Grids"
3+
4+
order: 80
5+
6+
description: |
7+
Blocks and grids are the building blocks of the website. They help to organize content and create a visual hierarchy.
8+
9+
There are a few key classes to use when shaping blocks:
10+
11+
- `.block-container` - The outermost container for a block. This class sets the padding for the block.
12+
13+
- `.wrapper` - The inner container for a block. This class sets the maximum width and centers the content.
14+
15+
Background colors and effects may be applied to `.block-container` to differentiate them.
16+
17+
Use Tailwind's grid classes to create a grid layout inside `.wrapper`.
18+
---
19+
20+
{%- capture code -%}
21+
<div class="block-container">
22+
<div class="wrapper">
23+
<p>Content goes here.</p>
24+
</div>
25+
</div>
26+
27+
<div class="py-8 bg-gray-100 block-container lg:py-10">
28+
<div class="wrapper">
29+
<p>Gray block with modified padding.</p>
30+
</div>
31+
</div>
32+
33+
<div class="block-container bg-blue">
34+
<div class="wrapper">
35+
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
36+
<div class="p-4 bg-gray-100">Column 1</div>
37+
<div class="p-4 bg-gray-200">Column 2</div>
38+
</div>
39+
</div>
40+
</div>
41+
{%- endcapture -%}
42+
43+
<div>
44+
{% include "code-snippet.html", code:code, lang:'html' %}
45+
</div>

‎src/_content/styleguide/buttons.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: Buttons
3+
4+
order: 40
5+
6+
description: |
7+
Buttons are created by applying `.button` to an element. The button class is a utility class that applies padding, border, and background color.
8+
9+
The button class can be combined with other utility classes to create different button styles. Changing button colors requires changing the background color, e.g. `bg-blue` to create a blue button.
10+
---
11+
12+
{%- capture code -%}<div class="flex flex-wrap gap-4">
13+
<a href="#" class="button">Button Text</a>
14+
<a href="#" class="button bg-blue">Button Text</a>
15+
<a href="#" class="button bg-light-blue">Button Text</a>
16+
<a href="#" class="button bg-green">Button Text</a>
17+
<a href="#" class="button bg-purple">Button Text</a>
18+
<a href="#" class="button bg-orange">Button Text</a>
19+
<a href="#" class="bg-yellow-100 button">Button Text</a>
20+
<button class="bg-green-300 button">Button Text</button>
21+
<button class="text-white bg-blue-900 button">Button Text</button>
22+
</div>
23+
{%- endcapture -%}
24+
25+
<div>
26+
{% include "code-snippet.html", code:code, lang:'html' %}
27+
</div>

‎src/_content/styleguide/colors.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Colors
3+
4+
order: 20
5+
6+
description: |
7+
The full color palette is configured in `tailwind.config.js`. The following is a full list of all defined colors and their shades. Note that Tailwind does not provide all of these classes unless used in _source_ files (not compiled output).
8+
---
9+
10+
<div class="space-y-6">
11+
{% for color in themeColors %}
12+
<div>
13+
{% assign name = color.id %}
14+
<h3 class="mb-2 text-lg font-bold lg:text-2xl font-heading">{{ color.id }}</h3>
15+
16+
<table>
17+
<thead>
18+
<tr>
19+
<th class="w-[16ch]">Shade</th>
20+
<th class="w-[20ch]">Color</th>
21+
<th>Class</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
{% for shade in color.value %}
26+
{% assign classname = ".bg-" | append: name | append: "-" | append: shade.id %}
27+
{% if shade.id == 'DEFAULT' %}
28+
{% assign classname = '.bg-' | append: name %}
29+
{% endif %}
30+
<tr>
31+
<td>{{ shade.id }}</td>
32+
<td style="background-color: {{ shade.color }}">{{ shade.color }}</td>
33+
<td><code>{{ classname }}</code></td>
34+
</tr>
35+
{% endfor %}
36+
</tbody>
37+
</table>
38+
</div>
39+
{% endfor %}
40+
</div>

‎src/_content/styleguide/forms.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Forms
3+
4+
order: 70
5+
---
6+
7+
{%- capture code -%}<form class="max-w-2xl p-4 mx-auto bg-white rounded lg:p-12" method="POST">
8+
<ul class="space-y-6">
9+
<li>
10+
<label for="fullname">Full Name</label>
11+
<input type="text" name="fullname" id="fullname" placeholder="Your name" required>
12+
</li>
13+
<li>
14+
<label for="email">Email</label>
15+
<input type="email" name="email" id="email" placeholder="Your email" required>
16+
</li>
17+
<li>
18+
<label for="password">Password</label>
19+
<input type="password" name="password" id="password" placeholder="Your password" required>
20+
</li>
21+
<li>
22+
<fieldset>
23+
<legend>T-shirt Size</legend>
24+
<label for="size-small">
25+
<input type="radio" name="gender" id="size-small" value="small" required>
26+
Small
27+
</label>
28+
<label for="size-medium">
29+
<input type="radio" name="gender" id="size-medium" value="medium" required>
30+
Medium
31+
</label>
32+
<label for="size-large">
33+
<input type="radio" name="gender" id="size-large" value="large" required>
34+
Large
35+
</label>
36+
</fieldset>
37+
</li>
38+
<li>
39+
<fieldset>
40+
<legend>Interests</legend>
41+
<label for="interest-django">
42+
<input type="checkbox" name="interests" id="interest-django" value="django">
43+
Django
44+
</label>
45+
<label for="interest-python">
46+
<input type="checkbox" name="interests" id="interest-python" value="python">
47+
Python
48+
</label>
49+
<label for="interest-ml">
50+
<input type="checkbox" name="interests" id="interest-ml" value="ml">
51+
Machine Learning
52+
</label>
53+
</fieldset>
54+
</li>
55+
<li>
56+
<label for="country">Country</label>
57+
<select name="country" id="country" required>
58+
<option value="">Select your country</option>
59+
<option value="us">United States</option>
60+
<option value="ca">Canada</option>
61+
<option value="uk">United Kingdom</option>
62+
<option value="au">Australia</option>
63+
</select>
64+
</li>
65+
<li>
66+
<label for="message">Message</label>
67+
<textarea name="message" id="message" placeholder="Your message" required></textarea>
68+
</li>
69+
</ul>
70+
71+
<div class="mt-8">
72+
<button id="submit" type="submit" class="button bg-light-blue">Submit</button>
73+
</div>
74+
</form>
75+
{%- endcapture -%}
76+
77+
<div>
78+
{% include "code-snippet.html", code:code, lang:'html' %}
79+
</div>

‎src/_content/styleguide/icons.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Icons
3+
4+
order: 30
5+
6+
description: |
7+
Icons are used to visually communicate an action or idea. The `.icon` class can be applied to give them a consistent width and height. Additional height and width classes can be applied to change their sizing, e.g. `w-12 h-12`.
8+
9+
icons:
10+
- /assets/img/theme/icons/Bag.svg
11+
- /assets/img/theme/icons/Bull.svg
12+
- /assets/img/theme/icons/Checklist.svg
13+
- /assets/img/theme/icons/Compass.svg
14+
- /assets/img/theme/icons/Document.svg
15+
- /assets/img/theme/icons/Globe.svg
16+
- /assets/img/theme/icons/Hands.svg
17+
- /assets/img/theme/icons/Hat.svg
18+
- /assets/img/theme/icons/Heart.svg
19+
- /assets/img/theme/icons/Megaphone.svg
20+
- /assets/img/theme/icons/Money.svg
21+
- /assets/img/theme/icons/People.svg
22+
- /assets/img/theme/icons/Prompt.svg
23+
- /assets/img/theme/icons/Star.svg
24+
- /assets/img/theme/icons/Triangle.svg
25+
---
26+
27+
<table>
28+
<thead>
29+
<tr>
30+
<th>Icon</th>
31+
<th>Path</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
{% for icon in icons %}
36+
<tr>
37+
<td><img src="{{ icon }}" alt="" class="icon" /></td>
38+
<td><code>{{ icon }}</code></td>
39+
</tr>
40+
{% endfor %}
41+
</tbody>
42+
</table>
43+
</ul>

0 commit comments

Comments
 (0)