💄 add tailwindcss (#1)

Reviewed-on: #1
This commit is contained in:
James Walker 2022-06-13 20:51:44 -04:00
parent 475def08ca
commit 1e23aa628c
8 changed files with 2074 additions and 85 deletions

View File

@ -31,7 +31,6 @@ module.exports = function(eleventyConfig) {
}); });
collection.forEach((post) => { collection.forEach((post) => {
console.log(post, "post")
post.url = stripDomain(post.url); post.url = stripDomain(post.url);
post.primary_author.url = stripDomain(post.primary_author.url); post.primary_author.url = stripDomain(post.primary_author.url);

View File

@ -9,27 +9,14 @@
<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}"> <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}"> <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
</head> </head>
<body> <body class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<header> <div class="container max-w-2xl mb-24 mt-8 mx-auto">
<h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1> <div class="px-5 md:px-8">
<nav> <main id="main">
<ul class="nav">
{%- for entry in collections.all | eleventyNavigation %}
<li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}">
<a href="{{ entry.url | url }}">{{ entry.title }}</a>
</li>
{%- endfor %}
</ul>
</nav>
</header>
<main>
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}
</main> </main>
</div>
<footer> </div>
&copy;
</footer>
</body> </body>
</html> </html>

View File

@ -5,17 +5,21 @@
{% set codeinjection_foot = post.codeinjection_foot %} {% set codeinjection_foot = post.codeinjection_foot %}
{% block content %} {% block content %}
<article class="content"> <article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
<header>
<h1 class="p-name">{{ title }}</h1>
<time class="dt-published" datetime={{ post.published_at }} pubdate><a class="u-url text-gray-500 text-sm" href={{ post.url }}>{{ post.published_at }}</a></time>
</header>
{% if post.feature_image %} {% if post.feature_image %}
<figure class="post-feature-image"> <figure class="md:-mx-12">
<img src="{{ post.feature_image }}" alt="{{ title }}"> <img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ title }}">
</figure> </figure>
{% endif %} {% endif %}
<section class="post-full-content"> <section class="e-content load-external-scripts">
<h1 class="content-title">{{ title }}</h1>
<section class="content-body load-external-scripts">
{{ content | safe}} {{ content | safe}}
</section> </section>
</section> <footer class="flex flex-row not-prose">
</footer>
</article> </article>
{% endblock %} {% endblock %}

View File

@ -1,32 +1,3 @@
:root { @tailwind base;
--white: #fff; @tailwind components;
} @tailwind utilities;
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
color: var(--darkgray);
background-color: var(--white);
}
body>header,
body>main,
body>footer {
padding: 1rem;
margin: auto;
max-width: 1024px;
}
h1,
h2 {
font-weight: 600;
}
a {
text-decoration: none;
}

View File

@ -8,7 +8,8 @@ pagination:
{% block content %} {% block content %}
{% set postslist = collections.posts %} {% set postslist = collections.posts %}
{% for post in postslist | reverse %} <section class="h-feed prose">
{% for post in postslist %}
<article class="h-entry"> <article class="h-entry">
<h2 class="p-name"> <h2 class="p-name">
<a href="{{ post.url }}">{{ post.title }}</a> <a href="{{ post.url }}">{{ post.title }}</a>
@ -18,4 +19,5 @@ pagination:
</div> </div>
</article> </article>
{% endfor %} {% endfor %}
</section>
{% endblock %} {% endblock %}

2020
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,8 +3,13 @@
"version": "1.0.0", "version": "1.0.0",
"description": "The new blog. Just like the old blog.", "description": "The new blog. Just like the old blog.",
"scripts": { "scripts": {
"build": "eleventy", "build": "run-s clean prod css:prod",
"start": "eleventy --serve --watch" "clean": "rimraf ./_site",
"css:prod": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --minify",
"css:dev": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --watch",
"dev": "eleventy --serve --watch",
"prod": "eleventy",
"start": "run-p clean css:dev dev"
}, },
"author": { "author": {
"name": "James Walker", "name": "James Walker",
@ -16,7 +21,11 @@
"@11ty/eleventy": "^1.0.1", "@11ty/eleventy": "^1.0.1",
"@11ty/eleventy-navigation": "^0.3.3", "@11ty/eleventy-navigation": "^0.3.3",
"@11ty/eleventy-plugin-rss": "^1.0.9", "@11ty/eleventy-plugin-rss": "^1.0.9",
"@tailwindcss/typography": "^0.5.2",
"@tryghost/content-api": "^1.9.4", "@tryghost/content-api": "^1.9.4",
"dotenv": "^16.0.1" "dotenv": "^16.0.1",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.2",
"tailwindcss": "^3.0.24"
} }
} }

11
tailwind.config.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
mode: "jit",
darkMode: "media",
content: ["./**/*.{html,md,njk}"],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
],
}