Skip to content

Commit bf10725

Browse files
lwasserlwasser
committed
add: contributing info on updating date updates
1 parent c56cdef commit bf10725

File tree

12 files changed

+575
-102
lines changed

12 files changed

+575
-102
lines changed

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/page__date.html

‎CONTRIBUTING.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,32 @@
55
If you are interested in contributing to pyOpenSci, please read about
66
how we work in [**pyOpenSci's organization-wide contributing guide**](https://www.pyopensci.org/handbook/CONTRIBUTING.html).
77

8-
## Repositories
8+
## Updating blog posts
9+
10+
Recently we added a bash script called: `scripts/date-updated.sh`. This script
11+
will run through all posts in the `_posts/` directory and add the date that it was
12+
last updated using your local git commit history. It will only update the date_update
13+
yaml key if the `last_updated:` yaml key exists in the page's front matter.
14+
15+
Right now
16+
it is a manual process to add `last_updated:` to all of our posts as a key.
17+
18+
You have to run the bash script at the command line, in the root of
19+
this repository.
20+
21+
You may have to update the permissions
22+
to allow it to modify files like this:
23+
24+
25+
`chmod +x scripts/date-updated.sh`
26+
27+
then you can run the script:
28+
29+
`./scripts/date-updated.sh`
30+
31+
In the future we will add this step to our CI build.
32+
33+
## Contributing to other pyOpenSci GitHub Repositories
934

1035
If you are interested in contributing to a specific repository, please review
1136
the `README.md` and `CONTRIBUTING.md` files in the repository. If you have any

‎_includes/page__date.html

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
1+
<!-- prettier-ignore-file -->
2+
13
{% assign date_format = site.date_format | default: "%B %-d, %Y" %}
2-
{% if page.last_modified_at %}
3-
<p class="page__date"><strong><i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}</strong> <time class="dt-published" datetime="{{ page.last_modified_at | date: "%Y-%m-%d" }}">{{ page.last_modified_at | date: date_format }}</time></p>
4+
{% if page.last_modified %}
5+
<p class="page__date">
6+
<strong>
7+
<i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i>
8+
{{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}
9+
</strong>
10+
<time class="dt-published" datetime="{{ page.last_modified | date: '%Y-%m-%d' }}">
11+
{{ page.last_modified | date: date_format }}
12+
</time>
13+
</p>
414
{% elsif page.date %}
5-
<p class="page__date"><strong><i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}</strong> <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: date_format }}</time></p>
15+
<p class="page__date">
16+
<strong>
17+
<i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i>
18+
{{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}
19+
</strong>
20+
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">
21+
{{ page.date | date: date_format }}
22+
</time>
23+
</p>
624
{% endif %}

‎_includes/pyos-blockquote.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<blockquote
2+
class="highlight-quote {% if include.class %}{{ include.class }}{% endif %}"
3+
>
4+
<p class="quote">{{ include.quote }}</p>
5+
<footer>
6+
{% if include.author %}<strong>~{{ include.author }}{% endif %}</strong>{%
7+
if include.event %}, <em>{{ include.event }}</em>{% endif %}
8+
</footer>
9+
</blockquote>

‎_posts/2019-10-26-pyos-min-mistakes-theme.md

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
---
2+
layout: single
3+
title: "pyOS Website Theme Docs"
4+
excerpt: "pyOpenSci minimal mistakes theme documentation."
5+
author: "Leah Wasser"
6+
permalink: docs/pyos-website/
7+
header:
8+
overlay_filter: 0.6
9+
overlay_color: "#333"
10+
last_modified: 2024-08-23
11+
toc: true
12+
categories:
13+
- docs
14+
- blog-post
15+
---
16+
17+
18+
## Text alignment
19+
20+
Align text blocks with the following classes.
21+
22+
Left aligned text `.text-left`
23+
{: .text-left}
24+
25+
```markdown
26+
Left aligned text
27+
{: .text-left}
28+
```
29+
30+
---
31+
32+
Center aligned text. `.text-center`
33+
{: .text-center}
34+
35+
```markdown
36+
Center aligned text.
37+
{: .text-center}
38+
```
39+
40+
---
41+
42+
Right aligned text. `.text-right`
43+
{: .text-right}
44+
45+
```markdown
46+
Right aligned text.
47+
{: .text-right}
48+
```
49+
50+
---
51+
52+
**Justified text.** `.text-justify` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel eleifend odio, eu elementum purus. In hac habitasse platea dictumst. Fusce sed sapien eleifend, sollicitudin neque non, faucibus est. Proin tempus nisi eu arcu facilisis, eget venenatis eros consequat.
53+
{: .text-justify}
54+
55+
```markdown
56+
Justified text.
57+
{: .text-justify}
58+
```
59+
60+
---
61+
62+
No wrap text. `.text-nowrap`
63+
{: .text-nowrap}
64+
65+
```markdown
66+
No wrap text.
67+
{: .text-nowrap}
68+
```
69+
70+
## Image alignment
71+
72+
Position images with the following classes.
73+
74+
75+
### Figure -- align center
76+
77+
<figure class="align-center">
78+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
79+
<figcaption>Growth of pyOpenSci from 2019 to 2024. Growth of pyOpenSci from 2019 to 2024. Growth of pyOpenSci from 2019 to 2024. Growth of pyOpenSci from 2019 to 2024. </figcaption>
80+
</figure>
81+
82+
The image above happens to be **centered**.
83+
84+
```html
85+
<figure class="align-center">
86+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
87+
<figcaption>Growth of pyOpenSci from 2019 to 2024</figcaption>
88+
</figure>
89+
```
90+
91+
92+
### Figure -- align left
93+
94+
<figure class="align-left">
95+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
96+
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
97+
</figure>
98+
99+
100+
The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**. There should be plenty of room above, below, and to the right of the image. Just look at him there --- Hey guy! Way to rock that left side. I don't care what the right aligned image says, you look great. Don't let anyone else tell you differently.
101+
102+
```html
103+
<figure class="align-left">
104+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
105+
<figcaption>Growth of pyOpenSci from 2019 to 2024</figcaption>
106+
</figure>
107+
```
108+
109+
You can also adjust the width inline:
110+
111+
```html
112+
<figure class="align-left">
113+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
114+
<figcaption>Growth of pyOpenSci from 2019 to 2024</figcaption>
115+
</figure>
116+
```
117+
118+
### Figure -- align right
119+
120+
And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
121+
122+
<figure class="align-right">
123+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024." style="width: 50%;">
124+
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
125+
</figure>
126+
127+
The html looks like this:
128+
129+
130+
```html
131+
<figure class="align-right">
132+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
133+
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
134+
</figure>
135+
```
136+
137+
### Figure -- full extending outside of the current area
138+
139+
The image below should extend outside of the parent container on right.
140+
141+
142+
<figure class="full">
143+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
144+
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
145+
</figure>
146+
147+
148+
149+
150+
```html
151+
<figure class="full">
152+
<img src="/images/pyopensci-general/pyopensci-timeline2019-2024.png" alt="A timeline showing the growth of pyOpenSci from 2019 to 2024.">
153+
<figcaption>Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024</figcaption>
154+
</figure>
155+
```
156+
157+
## Blockquote styles
158+
159+
### Regular blockquote
160+
161+
```markdown
162+
> This entire effort underscores the power of community when guided in
163+
> the right direction, showcasing how collective effort can drive
164+
> meaningful progress.
165+
{: .highlight-quote }
166+
```
167+
168+
> This entire effort underscores the power of community when guided in
169+
> the right direction, showcasing how collective effort can drive
170+
> meaningful progress.
171+
172+
173+
### Fancy blockquote
174+
175+
```markdown
176+
> This entire effort underscores the power of community when guided in
177+
> the right direction, showcasing how collective effort can drive
178+
> meaningful progress.
179+
{: .highlight-quote }
180+
```
181+
182+
> This entire effort underscores the power of community when guided in
183+
> the right direction, showcasing how collective effort can drive
184+
> meaningful progress.
185+
{: .highlight-quote }
186+
187+
## Buttons
188+
189+
Make any link standout more when applying the `.btn .btn--primary` classes.
190+
191+
```html
192+
<a href="#" class="btn btn--primary">Link Text</a>
193+
```
194+
195+
| Button Type | Example | Class | Kramdown |
196+
| ------ | ------- | ----- | ------- |
197+
| Default | [Text](#link){: .btn} | `.btn` | `[Text](#link){: .btn}` |
198+
| Primary | [Text](#link){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary}` |
199+
| Success | [Text](#link){: .btn .btn--success} | `.btn .btn--success` | `[Text](#link){: .btn .btn--success}` |
200+
| Warning | [Text](#link){: .btn .btn--warning} | `.btn .btn--warning` | `[Text](#link){: .btn .btn--warning}` |
201+
| Danger | [Text](#link){: .btn .btn--danger} | `.btn .btn--danger` | `[Text](#link){: .btn .btn--danger}` |
202+
| Info | [Text](#link){: .btn .btn--info} | `.btn .btn--info` | `[Text](#link){: .btn .btn--info}` |
203+
| Inverse | [Text](#link){: .btn .btn--inverse} | `.btn .btn--inverse` | `[Text](#link){: .btn .btn--inverse}` |
204+
| Light Outline | [Text](#link){: .btn .btn--light-outline} | `.btn .btn--light-outline` | `[Text](#link){: .btn .btn--light-outline}` |
205+
206+
| Button Size | Example | Class | Kramdown |
207+
| ----------- | ------- | ----- | -------- |
208+
| X-Large | [X-Large Button](#){: .btn .btn--primary .btn--x-large} | `.btn .btn--primary .btn--x-large` | `[Text](#link){: .btn .btn--primary .btn--x-large}` |
209+
| Large | [Large Button](#){: .btn .btn--primary .btn--large} | `.btn .btn--primary .btn--large` | `[Text](#link){: .btn .btn--primary .btn--large}` |
210+
| Default | [Default Button](#){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary }` |
211+
| Small | [Small Button](#){: .btn .btn--primary .btn--small} | `.btn .btn--primary .btn--small` | `[Text](#link){: .btn .btn--primary .btn--small}` |
212+
213+
## Notices
214+
215+
Call attention to a block of text.
216+
217+
| Notice Type | Class |
218+
| ----------- | ----- |
219+
| Default | `.notice` |
220+
| Primary | `.notice--primary` |
221+
| Info | `.notice--info` |
222+
| Warning | `.notice--warning` |
223+
| Success | `.notice--success` |
224+
| Danger | `.notice--danger` |
225+
226+
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class. The purpose of this test paragraph is to check how different styles are applied across various sections of text. You can [highlight](#) certain words or phrases, adjust the [font size](#), or change the [text color](#) to see how the styling adapts. Additionally, experimenting with [different classes](#) and observing the effects on alignment, spacing, and other typographic elements will help ensure that your CSS is applied consistently and effectively across your site.
227+
{: .notice}
228+
229+
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
230+
{: .notice--primary}
231+
232+
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
233+
{: .notice--info}
234+
235+
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
236+
{: .notice--warning}
237+
238+
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
239+
{: .notice--success}
240+
241+
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
242+
{: .notice--danger}
243+
244+
<div class="notice" markdown="1">
245+
You can also add the `.notice` class to a `<div>` element like this:
246+
247+
```html
248+
<div class="notice">
249+
You can also add the .notice class to a <div> element.
250+
251+
* Bullet point 1
252+
* Bullet point 2
253+
</div>
254+
```
255+
256+
</div>
257+
258+
To add a heading element to a notice block but ignore in the TOC, use `no_toc` as a class like this:
259+
260+
```html
261+
<div class="notice--info">
262+
<h4 class="no_toc">Notice Headline:</h4>
263+
here is some html text.
264+
</div>
265+
```
266+
267+
Which will render like this
268+
269+
<div class="notice--info">
270+
<h4 class="no_toc">Notice Headline that won't appear in toc</h4>
271+
{{ notice-text | markdownify }}.
272+
You can add more text here too
273+
</div>
274+
275+
276+
277+
278+
Using the Kramdown Markdown renderer with Jekyll allows you to add [block](http://kramdown.gettalong.org/quickref.html#block-attributes) and [inline attributes](http://kramdown.gettalong.org/quickref.html#inline-attributes). This is nice if you want to add custom styling to text and image, and still write in Markdown.
279+
280+
**Jekyll 3:** Kramdown is the default for `jekyll new` sites and those hosted on GitHub Pages. Not using Kramdown? That's OK. The following classes are still available when used with standard HTML.
281+
{: .notice--warning}

0 commit comments

Comments
 (0)