Skip to content

Commit e3f7306

Browse files
j9tj9t
authored
Merge pull request #262 from css-naked-day/refactor/template
Introduce base template to de-duplicate and improve maintainability
2 parents bae85ee + 8135273 commit e3f7306

File tree

3 files changed

+153
-172
lines changed

3 files changed

+153
-172
lines changed

‎_src/_includes/base.njk‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{%- set title = title if title else "April 9 is CSS Naked Day" -%}
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
6+
<head>
7+
<meta charset="utf-8">
8+
<title>{{ title }}</title>
9+
<link rel="icon" href="/favicon.ico">
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo:900">
11+
<link rel="stylesheet" href="setup/default.css">
12+
<meta name="viewport" content="initial-scale=1,width=device-width">
13+
<meta name="twitter:card" content="summary">
14+
<meta property="og:title" content="{{ title }}">
15+
{% if description %}<meta property="og:description" name="description" content="{{ description | truncate(150, false, ' …') }}">{% endif %}
16+
<meta property="og:image" content="https://css-naked-day.org/media/logo.png">
17+
</head>
18+
19+
<body>
20+
21+
<div id="container">
22+
23+
<div class="inner">
24+
25+
<header>
26+
<h1>{% if page.url != '/' %}<a href="/">{% endif %}{{ title }}{% if page.url != '/' %}</a>{% endif %}</h1>
27+
<h2>Show off your semantic <code>&lt;body&gt;</code>!</h2>
28+
</header>
29+
30+
<hr>
31+
32+
<section id="main_content">
33+
{{ content | safe }}
34+
</section>
35+
36+
<footer>
37+
This is <a href="/">CSS Naked Day</a>. This page was generated by <a href="https://11ty.dev/">Eleventy</a> (<a href="https://github.com/css-naked-day/css-naked-day.org">view it on GitHub</a>). Tactile theme by <a href="https://x.com/jasonlong">Jason Long</a>.
38+
</footer>
39+
40+
</div>
41+
42+
</div>
43+
44+
</body>
45+
46+
</html>

‎_src/index.njk‎

Lines changed: 65 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,92 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>April 9 is CSS Naked Day</title>
6-
<link rel="icon" href="/favicon.ico">
7-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Chivo:900">
8-
<link rel="stylesheet" href="setup/default.css">
9-
<meta name="viewport" content="initial-scale=1,width=device-width">
10-
<meta name="description" property="og:description" content="April 9 is CSS Naked Day!">
11-
<meta name="twitter:card" content="summary">
12-
<meta property="og:title" content="CSS Naked Day">
13-
<meta property="og:image" content="https://css-naked-day.org/media/logo.png">
14-
</head>
1+
---
2+
# description: "TODO"
3+
layout: base.njk
4+
title: "CSS Naked Day"
5+
---
6+
<h3>April 9 is CSS Naked Day!</h3>
157

16-
<body>
17-
<div id="container">
18-
<div class="inner">
19-
<header>
20-
<h1>CSS Naked Day</h1>
21-
<h2>Show off your semantic <code>&lt;body&gt;</code>!</h2>
22-
</header>
8+
<p>Join us for the yearly festivities on April 9 of going nude on the Web!</p>
239

24-
<hr>
10+
<!-- <h3><a id="where-is-design" href="#where-is-design">Where did the design go?</a></h3>
11+
<p>The website you just came from is not broken, its owner has decided to participate to CSS Naked Day! CSS Naked Day is an event that is held once per year to celebrate good and well planned design. The website you come from will be back to its normal state tomorrow.</p>
2512
26-
<section id="main_content">
27-
<h3>April 9 is CSS Naked Day!</h3>
13+
<h3><a id="meaning" href="#meaning">What does that mean?</a></h3> -->
2814

29-
<p>Join us for the yearly festivities on April 9 of going nude on the Web!</p>
15+
<p>The idea behind CSS Naked Day is to promote web standards. Plain and simple. This includes proper use of HTML, semantic markup, a good hierarchy structure, and of course, a good old play on words. In the words of 2006, it’s time to show off your &lt;body&gt; for what it really is.</p>
3016

31-
<!-- <h3><a id="where-is-design" href="#where-is-design">Where did the design go?</a></h3>
17+
<h3><a id="editions" href="#editions">CSS Naked Day editions</a></h3>
3218

33-
<p>The website you just came from is not broken, its owner has decided to participate to CSS Naked Day! CSS Naked Day is an event that is held once per year to celebrate good and well planned design. The website you come from will be back to its normal state tomorrow.</p>
19+
<ul>
20+
{% for year in range(globals.yearStart, globals.yearCurrent + 1) | reverse %}
21+
<li>
22+
{% if participationsCount[year] > 0 %}
23+
<a href="{{ year | slugify }}.html">{{ year }}</a>
24+
{% else %}
25+
{{ year }}
26+
{% endif %}
27+
</li>
28+
{% endfor %}
29+
</ul>
3430

35-
<h3><a id="meaning" href="#meaning">What does that mean?</a></h3> -->
31+
<h3><a id="participate" href="#participate">How to participate</a></h3>
3632

37-
<p>The idea behind CSS Naked Day is to promote web standards. Plain and simple. This includes proper use of HTML, semantic markup, a good hierarchy structure, and of course, a good old play on words. In the words of 2006, it’s time to show off your &lt;body&gt; for what it really is.</p>
33+
<p>On April 9, simply remove all CSS from your website, stripping it entirely of its design.</p>
3834

39-
<h3><a id="editions" href="#editions">CSS Naked Day editions</a></h3>
35+
<p>You can link to this page to let your visitors know about the nudity of your website! This option is for those who feel a need to give their visitors a reference as to what’s going on. This is not about getting traffic or making money. There are no ads on this site, nor will there ever be. This is about you, the people; getting naked.</p>
4036

41-
<ul>
42-
{% for year in range(globals.yearStart, globals.yearCurrent + 1) | reverse %}
43-
<li>
44-
{% if participationsCount[year] > 0 %}
45-
<a href="{{ year | slugify }}.html">{{ year }}</a>
46-
{% else %}
47-
{{ year }}
48-
{% endif %}
49-
</li>
50-
{% endfor %}
51-
</ul>
37+
<p>You can instead add your website(s) here by <a href="https://github.com/css-naked-day/css-naked-day.org/issues/new">creating an issue</a> or <a href="https://github.com/css-naked-day/css-naked-day.org">adding a file in the proper folder</a>!</p>
5238

53-
<h3><a id="participate" href="#participate">How to participate</a></h3>
39+
<h3><a id="developers" href="#developers">Don’t think, just strip</a></h3>
5440

55-
<p>On April 9, simply remove all CSS from your website, stripping it entirely of its design.</p>
41+
<p>Here is a sample PHP function for developers:</p>
5642

57-
<p>You can link to this page to let your visitors know about the nudity of your website! This option is for those who feel a need to give their visitors a reference as to what’s going on. This is not about getting traffic or making money. There are no ads on this site, nor will there ever be. This is about you, the people; getting naked.</p>
58-
59-
<p>You can instead add your website(s) here by <a href="https://github.com/css-naked-day/css-naked-day.org/issues/new">creating an issue</a> or <a href="https://github.com/css-naked-day/css-naked-day.org">adding a file in the proper folder</a>!</p>
60-
61-
<h3><a id="developers" href="#developers">Don’t think, just strip</a></h3>
62-
63-
<p>Here is a sample PHP function for developers:</p>
64-
65-
<pre><code>&lt;?php
66-
function isNakedDay()
67-
{
68-
$now = new \DateTime('now', new \DateTimeZone('UTC'));
69-
$start = new \DateTime('00:00, April 9', new \DateTimeZone('+14:00'));
70-
$end = new \DateTime('00:00, April 10', new \DateTimeZone('-12:00'));
71-
72-
return $now &gt;= $start && $now &lt; $end;
73-
}
43+
<pre><code>&lt;?php
44+
function isNakedDay() {
45+
$now = new \DateTime('now', new \DateTimeZone('UTC'));
46+
$start = new \DateTime('00:00, April 9', new \DateTimeZone('+14:00'));
47+
$end = new \DateTime('00:00, April 10', new \DateTimeZone('-12:00'));
48+
return $now &gt;= $start && $now &lt; $end;
49+
}
7450
?&gt;</code></pre>
7551

76-
<p>Use it like this:</p>
52+
<p>Use it like this:</p>
7753

78-
<pre><code>&lt;head&gt;
79-
…
80-
&lt;?php if(!isNakedDay()) : ?&gt;
81-
&lt;link rel="stylesheet" href="styles.css" /&gt;
82-
&lt;?php endif; ?&gt;
83-
…
54+
<pre><code>&lt;head&gt;
55+
…
56+
&lt;?php if(!isNakedDay()) : ?&gt;
57+
&lt;link rel="stylesheet" href="styles.css" /&gt;
58+
&lt;?php endif; ?&gt;
59+
…
8460
&lt;/head&gt;</code></pre>
8561

86-
<h3 id="forty-height"><a id="timespan" href="#timespan">Wait… isn’t that 50 hours?</a></h3>
87-
88-
<p>That’s correct. CSS Naked Day lasts for one international day. Technically speaking, it will be April 9 somewhere in the world for 50 hours, from <strong>00:00, April 9 UTC+14:00</strong> to <strong>00:00, April 10 UTC-12:00</strong> (<em>10:00, April 8 UTC+00:00</em> to <em>12:00, April 10 UTC+00:00</em>). This is to ensure that everyone’s website will be publicly nude for the entire world to see at any given time during April 9.</p>
62+
<h3><a id="timespan" href="#timespan">Wait… isn’t that 50 hours?</a></h3>
8963

90-
<h3><a id="tools" href="#tools">Tools and plugins</a></h3>
64+
<p>That’s correct. CSS Naked Day lasts for one international day. Technically speaking, it will be April 9 somewhere in the world for 50 hours, from <strong>00:00, April 9 UTC+14:00</strong> to <strong>00:00, April 10 UTC-12:00</strong> (<em>10:00, April 8 UTC+00:00</em> to <em>12:00, April 10 UTC+00:00</em>). This is to ensure that everyone’s website will be publicly nude for the entire world to see at any given time during April 9.</p>
9165

92-
<p>Attention plugin developers: If you have a CSS Naked Day plugin for a popular CMS, or written in a programming language not listed here, feel free to make a pull request and add it, or to post an email on the <a href="https://groups.google.com/g/css-naked-day">dedicated Google group</a> if you’re not familiar with Git.</p>
66+
<h3><a id="tools" href="#tools">Tools and plugins</a></h3>
9367

94-
<ul>
95-
<li><a href="https://www.ajalapus.com/">Aja</a> updated their most excellent <a href="https://www.ajalapus.com/downloads/css-naked-day/">WordPress Naked Day Plugin</a>.</li>
96-
<li><a href="https://web.archive.org/web/20150227130740/http://hugi.to/blog/">Reto</a> has created a <a href="http://downloads.sourceforge.net/lifetype/1.2_cssnaked.zip?download">Naked Day plugin for the LifeType Blogging platform</a>.</li>
97-
<li>Sasha Gerrand <a href="https://sasha.gerrand.id.au/2009/04/05/css-naked-day/">gives us a great Perl subroutine</a>.</li>
98-
<li><a href="https://jefftriplett.com/">Jeff Triplett</a> gives us a nice <a href="https://www.djangosnippets.org/snippets/1421/">Django Snippet</a> for you Python folk.</li>
99-
<li>Drupal users, <a href="https://www.drupal.org/project/naked">get the module</a>!</li>
100-
<li>If you are game you can use <a href="https://weblog.200ok.com.au/">Ben Buchanan</a>’s <a href="https://bitbucket.org/snippets/200ok/dKpk">JavaScript snippet</a>. Works anywhere, removes everything, buyer beware!</li>
101-
<li>If you are a Gopher, check out the <a href="https://github.com/omz13/today-go">today-go</a> package by <a href="https://omz13.com/">David Somers</a>.</li>
102-
<li>If you are a Rails developer, check out the <a href="https://github.com/danielsellergren/css_naked_day_rails">css_naked_day_rails</a> gem by <a href="https://danielsellergren.com/">Daniel Sellergren</a>.</li>
103-
<li>If you have lots of raw HTML, use <a href="https://gist.github.com/alifeee/75df204c2be3815806e1d4be47e54d08">this bash script</a> to remove style sheets, <code>style</code> elements, and inline styles.</li>
104-
</ul>
68+
<p>Attention plugin developers: If you have a CSS Naked Day plugin for a popular CMS, or written in a programming language not listed here, feel free to make a pull request and add it, or to post an email on the <a href="https://groups.google.com/g/css-naked-day">dedicated Google group</a> if you’re not familiar with Git.</p>
10569

106-
<h3><a id="origins" href="#origins">Origins</a></h3>
70+
<ul>
71+
<li><a href="https://www.ajalapus.com/">Aja</a> updated their most excellent <a href="https://www.ajalapus.com/downloads/css-naked-day/">WordPress Naked Day Plugin</a>.</li>
72+
<li><a href="https://web.archive.org/web/20150227130740/http://hugi.to/blog/">Reto</a> has created a <a href="http://downloads.sourceforge.net/lifetype/1.2_cssnaked.zip?download">Naked Day plugin for the LifeType Blogging platform</a>.</li>
73+
<li>Sasha Gerrand <a href="https://sasha.gerrand.id.au/2009/04/05/css-naked-day/">gives us a great Perl subroutine</a>.</li>
74+
<li><a href="https://jefftriplett.com/">Jeff Triplett</a> gives us a nice <a href="https://www.djangosnippets.org/snippets/1421/">Django Snippet</a> for you Python folk.</li>
75+
<li>Drupal users, <a href="https://www.drupal.org/project/naked">get the module</a>!</li>
76+
<li>If you are game you can use <a href="https://weblog.200ok.com.au/">Ben Buchanan</a>’s <a href="https://bitbucket.org/snippets/200ok/dKpk">JavaScript snippet</a>. Works anywhere, removes everything, buyer beware!</li>
77+
<li>If you are a Gopher, check out the <a href="https://github.com/omz13/today-go">today-go</a> package by <a href="https://omz13.com/">David Somers</a>.</li>
78+
<li>If you are a Rails developer, check out the <a href="https://github.com/danielsellergren/css_naked_day_rails">css_naked_day_rails</a> gem by <a href="https://danielsellergren.com/">Daniel Sellergren</a>.</li>
79+
<li>If you have lots of raw HTML, use <a href="https://gist.github.com/alifeee/75df204c2be3815806e1d4be47e54d08">this bash script</a> to remove style sheets, <code>style</code> elements, and inline styles.</li>
80+
</ul>
10781

108-
<p>CSS Naked Day started in <a href="https://web.archive.org/web/20060409133500/http://naked.dustindiaz.com/">2006 by Dustin Diaz</a>, who organized it until <a href="https://web.archive.org/web/20090503155846/http://naked.dustindiaz.com:80/">2009</a>. From <a href="https://web.archive.org/web/20100516032732/http://naked.threepixeldrift.com/">2010</a> until <a href="https://web.archive.org/web/20140817035514/http://naked.threepixeldrift.com/">2014</a>, it was hosted by Taylor Satula. The content in this page is extracted from the content of the respective pages. Since 2015, the project is maintained by <a href="https://arkhi.org/">Fabien Basmaison</a> and <a href="https://meiert.com/">Jens Oliver Meiert</a>. (Jens once worked on a <a href="https://meiert.com/blog/css-naked-day-and-wikipedia/">proposal for a CSS Naked Day Wikipedia page</a> that retells the story.)</p>
82+
<h3><a id="origins" href="#origins">Origins</a></h3>
10983

110-
<h3>Famous words</h3>
84+
<p>CSS Naked Day started in <a href="https://web.archive.org/web/20060409133500/http://naked.dustindiaz.com/">2006 by Dustin Diaz</a>, who organized it until <a href="https://web.archive.org/web/20090503155846/http://naked.dustindiaz.com:80/">2009</a>. From <a href="https://web.archive.org/web/20100516032732/http://naked.threepixeldrift.com/">2010</a> until <a href="https://web.archive.org/web/20140817035514/http://naked.threepixeldrift.com/">2014</a>, it was hosted by Taylor Satula. The content in this page is extracted from the content of the respective pages. Since 2015, the project is maintained by <a href="https://arkhi.org/">Fabien Basmaison</a> and <a href="https://meiert.com/">Jens Oliver Meiert</a>. (Jens once worked on a <a href="https://meiert.com/blog/css-naked-day-and-wikipedia/">proposal for a CSS Naked Day Wikipedia page</a> that retells the story.)</p>
11185

112-
<blockquote>
113-
<p>This is a fun idea, fully in line with the reasons for creating CSS in the first place. While most designers are attracted by the extra presentational capabilities, saving HTML from becoming a presentational language was probably a more important motivation for most people who participated in the beginning.</p>
114-
</blockquote>
86+
<h3>Famous words</h3>
11587

116-
<p><cite>Håkon Wium Lie</cite></p>
117-
</section>
88+
<blockquote>
89+
<p>This is a fun idea, fully in line with the reasons for creating CSS in the first place. While most designers are attracted by the extra presentational capabilities, saving HTML from becoming a presentational language was probably a more important motivation for most people who participated in the beginning.</p>
90+
</blockquote>
11891

119-
<footer>
120-
This is CSS Naked Day. This page was generated by <a href="https://11ty.dev/">Eleventy</a> (<a href="https://github.com/css-naked-day/css-naked-day.org">view it on GitHub</a>). Tactile theme by <a href="https://x.com/jasonlong">Jason Long</a>.
121-
</footer>
122-
</div>
123-
</div>
124-
</body>
125-
</html>
92+
<p><cite>Håkon Wium Lie</cite></p>

0 commit comments

Comments
 (0)