Skip to content

Commit f1bb801

Browse files
eelcojeelcoj
committed
Init
0 parents  commit f1bb801

23 files changed

+6577
-0
lines changed

‎.eleventy.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const now = String(Date.now())
2+
3+
module.exports = function(eleventyConfig) {
4+
eleventyConfig.addWatchTarget('./tailwind.config.js')
5+
eleventyConfig.addWatchTarget('./src/assets/css/index.css')
6+
7+
eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' })
8+
9+
eleventyConfig.addShortcode('version', function () {
10+
return now
11+
})
12+
}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
_site

‎README.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Eleventy documentation template using Tailwind CSS
2+
3+
An 11ty documentation site theme, built with Tailwind CSS.
4+
5+
6+
<img src="https://user-images.githubusercontent.com/988051/183708900-d2945c3b-8ff5-4aff-a3c1-98335cc90277.jpg" alt="preview of the Bridgetown documentation theme, built with Tailwind CSS" />
7+
8+
9+
## Sponsored By [Spinal](https://spinalcms.com/)
10+
11+
<a href="https://spinalcms.com/" target="_blank">
12+
<img src="https://user-images.githubusercontent.com/988051/183079316-af747ef2-42a9-47d8-9a0c-488ed4b6a689.jpg" alt="Spinal CMS logo" width="200"/>
13+
</a>
14+
15+
16+
## Getting started
17+
18+
1. Clone this repository
19+
20+
```shell
21+
git clone https://github.com/spinalcms/11ty-docs-template.git documentation
22+
```
23+
24+
2. Go into this new folder
25+
26+
```shell
27+
cd documentation
28+
```
29+
30+
3. Install dependencies
31+
32+
```shell
33+
npm install
34+
```
35+
36+
37+
### Development
38+
39+
```shell
40+
npm run dev
41+
```
42+
43+
44+
### Production
45+
46+
```shell
47+
npm run build
48+
```
49+
50+
51+
### Configuring
52+
53+
To change title, description, etc. Update files in ``src/_data``.
54+
55+
56+
## Related repo's
57+
- [Documentation theme built with Tailwind CSS](https://github.com/SpinalCMS/docs-template)
58+
- [Bridgetown documentation template using Tailwind CSS](https://github.com/SpinalCMS/bridgetown-docs-template)
59+
60+
61+
## Contributing
62+
63+
1. Fork it (https://github.com/spinalcms/11ty-docs-template/fork)
64+
2. Clone the fork using `git clone` to your local development machine.
65+
3. Create your feature branch (`git checkout -b my-new-feature`)
66+
4. Commit your changes (`git commit -am 'Add some feature'`)
67+
5. Push to the branch (`git push origin my-new-feature`)
68+
6. Create a new Pull Request

‎_data/metadata.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"title": "Spinal documentation",
3+
"description": "Need to get started quickly with Spinal? You will learn all the basics in just minutes.",
4+
"supportEmail": "[email protected]"
5+
}

‎_includes/content_footer.njk‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h3 class="mt-8 text-base font-bold tracking-tight text-slate-900">
2+
Have questions?
3+
</h3>
4+
5+
<p class="text-slate-900">
6+
Still have questions? <a href="mailto:{{ metadata.supportEmail }}" class="underline hover:no-underline">Talk to support</a>.
7+
</p>

‎_includes/content_navigation.njk‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{% if collections.docs %}
2+
{% set previousDoc = collections.docs | getPreviousCollectionItem(page) %}
3+
{% set nextDoc = collections.docs | getNextCollectionItem(page) %}
4+
5+
{% if nextDoc or previousDoc %}
6+
<dl class="flex pt-6 mt-6 border-t border-slate-200">
7+
{% if previousDoc %}
8+
<div class="mr-auto text-left">
9+
<dt class="text-sm font-normal tracking-tight text-slate-600">
10+
Previous
11+
</dt>
12+
13+
<dd class="mt-1">
14+
<a href="{{ previousDoc.url | url }}" class="text-base font-semibold text-slate-900 hover:underline">
15+
{{ previousDoc.data.title }}
16+
</a>
17+
</dd>
18+
</div>
19+
{% endif %}
20+
21+
{% if nextDoc %}
22+
<div class="ml-auto text-right">
23+
<dt class="text-sm font-normal tracking-tight text-slate-600">
24+
Next
25+
</dt>
26+
27+
<dd class="mt-1">
28+
<a href="{{ nextDoc.url | url }}" class="text-base font-semibold text-slate-900 hover:underline">
29+
{{ nextDoc.data.title }}
30+
</a>
31+
</dd>
32+
</div>
33+
{% endif %}
34+
</dl>
35+
{% endif %}
36+
{% endif %}

‎_includes/header.njk‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<header class="sticky top-0 z-50 flex items-center justify-between px-3 py-2 border-b shadow-lg bg-white/90 backdrop-blur-sm border-slate-400/40">
2+
<div class="flex items-center flex-grow basis-0">
3+
<a href="" class="text-lg font-semibold tracking-tight text-slate-900">
4+
Spinal docs
5+
</a>
6+
</div>
7+
8+
<form action="https://duckduckgo.com/" class="md:w-80 lg:w-96">
9+
<span class="relative flex items-center group">
10+
<svg aria-hidden="true" viewBox="0 0 20 20" class="absolute w-4 h-4 ml-3 fill-slate-400 group-hover:fill-slate-500 group-focus:fill-slate-500"><path d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z"></path></svg>
11+
<input type="text" name="q" placeholder="Search docs…" class="w-full py-2 pl-10 pr-2 border rounded bg-slate-100 placeholder-slate-400 text-slate-800 border-slate-100 outline outline-offset-2 outline-2 outline-transparent hover:border-slate-200 focus:border-slate-200 focus:outline-slate-600" />
12+
</span>
13+
<input type="hidden" name="sites" value="spinalcms.com">
14+
<input type="submit" value="Search" class="sr-only" />
15+
</form>
16+
17+
<div class="items-center justify-end flex-grow hidden basis-0 md:flex">
18+
<a href="https://spinalcms.com/" class="px-4 py-2 text-sm font-semibold rounded bg-slate-900 text-slate-50 transition ease-in-out delay-75 hover:scale-105 duration-200">
19+
Go to homepage
20+
</a>
21+
</div>
22+
</header>

‎_includes/layouts/default.njk‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en-GB">
3+
<head>
4+
<title>{{ title if title else metadata.title }}</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="/index.css" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
{% include "header.njk" %}
12+
13+
<main class="relative flex justify-center mx-auto max-w-8xl sm:px-2 lg:px-8 xl:px-12">
14+
{% include "navigation.njk" %}
15+
16+
<div class="flex-auto max-w-2xl min-w-0 px-4 py-10 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
17+
<article class="">
18+
<header class="">
19+
<p class="text-base font-medium text-slate-500">
20+
{{ section }}
21+
</p>
22+
23+
<h1 class="text-3xl font-bold tracking-tight text-slate-900">
24+
{{ title }}
25+
</h1>
26+
</header>
27+
28+
{% if intro %}
29+
<p class="mt-2 text-xl text-slate-600">
30+
{{ intro }}
31+
</p>
32+
{% endif %}
33+
34+
{% if show_video_tour %}
35+
{% include "video_tour.njk" %}
36+
{% endif %}
37+
38+
{% if show_quick_links %}
39+
{% include "quick_links.njk" %}
40+
{% endif %}
41+
42+
<div class="mt-8 prose prose-slate max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-lead:text-slate-500 prose-a:font-semibold prose-a:underline prose-pre:bg-slate-900">
43+
{{ content | safe }}
44+
</div>
45+
46+
{% include 'content_footer.njk' %}
47+
</article>
48+
49+
{% include 'content_navigation.njk' %}
50+
</div>
51+
</main>
52+
</body>
53+
</html>

‎_includes/navigation.njk‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<label for="navigation" class="fixed bottom-0 left-0 z-50 flex items-center justify-center w-12 h-12 mb-4 ml-4 bg-white border rounded-full shadow-lg cursor-pointer text-slate-600 border-slate-300 lg:hidden transition duration-200 ease-in-out active:scale-95">
2+
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
3+
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
4+
</svg>
5+
</label>
6+
7+
<input type="checkbox" name="navigation" id="navigation" class="hidden peer" />
8+
<div class="fixed top-[3.5rem] h-screen shadow-xl px-4 left-0 hidden peer-checked:block lg:relative lg:top-0 lg:h-auto lg:px-0 lg:block lg:flex-none lg:shadow-none">
9+
<div class="absolute inset-y-0 right-0 w-full lg:w-[50vw] bg-white lg:bg-slate-50"></div>
10+
11+
<nav class="sticky top-[4.5rem] w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
12+
<ul role="list" class="-ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-7 pl-0.5 space-y-8">
13+
{% for section, groupedDocs in collections.docs | sort(false, false, 'data.order') | groupby("data.section") %}
14+
15+
<li>
16+
<h3 class="font-semibold tracking-tight text-slate-900">
17+
{{ section }}
18+
</h3>
19+
20+
<ul role="list" class="pl-3 mt-3 space-y-2">
21+
{% for doc in groupedDocs | sort(false, false, 'data.order') %}
22+
<li>
23+
<a href="{{ doc.url }}" class="text-slate-900 hover:text-slate-800">
24+
{{ doc.data.title }}
25+
</a>
26+
</li>
27+
{% endfor %}
28+
</ul>
29+
</li>
30+
{% endfor %}
31+
</ul>
32+
</nav>
33+
</div>

‎_includes/quick_links.njk‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<h3 class="mt-16 text-base font-bold tracking-tight text-slate-900">
2+
Get set up quickly
3+
</h3>
4+
5+
<ul class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2">
6+
<li>
7+
<a href="#" class="block px-6 py-4 border rounded bg-slate-50 border-slate-100 hover:bg-white">
8+
<h4 class="font-bold tracking-tight text-slate-900">
9+
Connect your GitHub account
10+
</h4>
11+
12+
<p class="text-slate-600">
13+
What you need to know before connecting your GitHub account
14+
</p>
15+
</a>
16+
</li>
17+
18+
<li>
19+
<a href="#" class="block px-6 py-4 border rounded bg-slate-50 border-slate-100 hover:bg-white">
20+
<h4 class="font-bold tracking-tight text-slate-900">
21+
Add your first content type
22+
</h4>
23+
24+
<p class="text-slate-600">
25+
Learn what content types are in Spinal
26+
</p>
27+
</a>
28+
</li>
29+
30+
<li class="">
31+
<a href="#" class="block px-6 py-4 border rounded bg-slate-50 border-slate-100 hover:bg-white">
32+
<h4 class="font-bold tracking-tight text-slate-900">
33+
Invite your first team member
34+
</h4>
35+
36+
<p class="text-slate-600">
37+
You write your best marketing content with your team
38+
</p>
39+
</a>
40+
</li>
41+
42+
<li class="">
43+
<a href="#" class="block px-6 py-4 border rounded bg-slate-50 border-slate-100 hover:bg-white">
44+
<h4 class="font-bold tracking-tight text-slate-900">
45+
Publish your content
46+
</h4>
47+
48+
<p class="text-slate-600">
49+
Publishing with Spinal is really just one click of a button
50+
</p>
51+
</a>
52+
</li>
53+
</ul>

0 commit comments

Comments
 (0)