├── .gitignore
├── .gitattributes
├── postcss.config.js
├── assets
    ├── js
    │   ├── index.js
    │   ├── gallery.js
    │   └── fitvids.js
    └── css
    │   └── screen.css
├── partials
    └── card.hbs
├── index.hbs
├── page.hbs
├── error.hbs
├── tailwind.config.js
├── snowpack.config.js
├── post.hbs
├── LICENSE
├── default.hbs
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {}
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/assets/js/index.js:
--------------------------------------------------------------------------------
1 | import {fitVids} from './fitvids.js';
2 | import {gallery} from './gallery.js';
3 | 
4 | fitVids();
5 | gallery();
6 | 


--------------------------------------------------------------------------------
/partials/card.hbs:
--------------------------------------------------------------------------------
 1 | {{!--
 2 | Re-usable card for linking to posts
 3 | --}}
 4 | 
 5 | <article>
 6 |     <h2>
 7 |         <a href="{{url}}">{{title}}</a>
 8 |     </h2>
 9 |     <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
10 | </article>
11 | 


--------------------------------------------------------------------------------
/index.hbs:
--------------------------------------------------------------------------------
 1 | {{!< default}}
 2 | 
 3 | <header>
 4 |   <h1 class="text-2xl"><a href="{{@site.url}}">{{@site.title}}</a></h1>
 5 |   <p>{{@site.description}}</p>
 6 | </header>
 7 | 
 8 | <div class="container">
 9 |   {{#foreach posts}}
10 |   {{> "card"}} {{!-- partials/card.hbs --}}
11 |   {{/foreach}}
12 | </div>
13 | 


--------------------------------------------------------------------------------
/page.hbs:
--------------------------------------------------------------------------------
 1 | {{!< default}}
 2 | 
 3 | {{#post}}
 4 | <article>
 5 | 
 6 |     <header class="mb-8">
 7 |         <h1 class="text-4xl font-extrabold">{{title}}</h1>
 8 |     </header>
 9 | 
10 |     <div class="max-w-none prose lg:prose-lg">
11 |         {{content}}
12 |     </div>
13 | 
14 | </article>
15 | {{/post}}
16 | 


--------------------------------------------------------------------------------
/assets/js/gallery.js:
--------------------------------------------------------------------------------
 1 | export function gallery() {
 2 |   document.querySelectorAll('.kg-gallery-image img').forEach(function (el) {
 3 |     var container = el.closest('.kg-gallery-image');
 4 |     var width = el.attributes.width.value;
 5 |     var height = el.attributes.height.value;
 6 | 
 7 |     container.style.flex = width / height + ' 1 0%';
 8 |   })
 9 | }
10 | 


--------------------------------------------------------------------------------
/assets/js/fitvids.js:
--------------------------------------------------------------------------------
 1 | export function fitVids() {
 2 |   var selectors = [
 3 |     'iframe[src*="player.vimeo.com"]',
 4 |     'iframe[src*="youtube.com"]',
 5 |     'iframe[src*="youtube-nocookie.com"]',
 6 |     'iframe[src*="kickstarter.com"][src*="video.html"]',
 7 |     'object',
 8 |     'embed'
 9 |   ];
10 | 
11 |   var allVideos = document.querySelectorAll(selectors.join(','));
12 |   allVideos.forEach(function(el) {
13 |     el.parentElement.classList.add('aspect-w-16', 'aspect-h-9')
14 |   })
15 | }
16 | 


--------------------------------------------------------------------------------
/error.hbs:
--------------------------------------------------------------------------------
 1 | 
 2 | {{!< default}}
 3 | 
 4 | <div class="container">
 5 |     <h1>{{statusCode}}</h1>
 6 |     <p>{{message}}</p>
 7 |     <p><a href="{{@site.url}}">Go to the front page</a></p>
 8 | 
 9 |     {{#if errorDetails}}
10 |     <section>
11 |         <h4>Theme errors:</h4>
12 |         <ul>
13 |             {{#foreach errorDetails}}
14 |             <li>
15 |                 <h5>{{{rule}}}</h5>
16 | 
17 |                 {{#foreach failures}}
18 |                 <span><strong>Ref:</strong> {{ref}}</span><br>
19 |                 <span><strong>Message:</strong> {{message}}</span>
20 |                 {{/foreach}}
21 |             </li>
22 |             {{/foreach}}
23 |         </ul>
24 |     </section>
25 |     {{/if}}
26 | 
27 | 
28 | 
29 | </div>
30 | 


--------------------------------------------------------------------------------
/assets/css/screen.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer components {
 6 |   .kg-width-wide {
 7 |   }
 8 | 
 9 |   .kg-width-full {
10 |   }
11 | 
12 |   .kg-embed-card {
13 |   }
14 | 
15 |   .kg-bookmark-card {
16 |   }
17 | 
18 |   .kg-bookmark-container {
19 |   }
20 | 
21 |   .kg-bookmark-content {
22 |   }
23 | 
24 |   .kg-bookmark-thumbnail {
25 |   }
26 | 
27 |   .kg-bookmark-title {
28 |   }
29 | 
30 |   .kg-bookmark-description {
31 |   }
32 | 
33 |   .kg-bookmark-metadata {
34 |   }
35 | 
36 |   .kg-bookmark-icon {
37 |   }
38 | 
39 |   .kg-bookmark-author {
40 |   }
41 | 
42 |   .kg-bookmark-publisher {
43 |   }
44 | 
45 |   .kg-gallery-container {
46 |   }
47 | 
48 |   .kg-gallery-row {
49 |   }
50 | 
51 |   .kg-gallery-image {
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: ["./*.hbs", "./**/*.hbs"],
 3 |   safelist: [
 4 |     "kg-width-wide",
 5 |     "kg-width-full",
 6 |     "kg-embed-card",
 7 |     "kg-bookmark-card",
 8 |     "kg-bookmark-container",
 9 |     "kg-bookmark-content",
10 |     "kg-bookmark-thumbnail",
11 |     "kg-gallery-container",
12 |     "kg-bookmark-title",
13 |     "kg-bookmark-description",
14 |     "kg-bookmark-metadata",
15 |     "kg-bookmark-icon",
16 |     "kg-bookmark-author",
17 |     "kg-bookmark-publisher ",
18 |     "kg-gallery-row",
19 |     "kg-gallery-image",
20 |     "aspect-w-16",
21 |     "aspect-h-9",
22 |   ],
23 |   plugins: [
24 |     require("@tailwindcss/typography"),
25 |     require("@tailwindcss/aspect-ratio"),
26 |     require("@tailwindcss/line-clamp"),
27 |   ],
28 |   theme: {
29 |     extend: {
30 |       colors: {},
31 |     },
32 |   },
33 | };
34 | 


--------------------------------------------------------------------------------
/snowpack.config.js:
--------------------------------------------------------------------------------
 1 | // Snowpack Configuration File
 2 | // See all supported options: https://www.snowpack.dev/reference/configuration
 3 | 
 4 | /** @type {import("snowpack").SnowpackUserConfig } */
 5 | module.exports = {
 6 |   exclude: [
 7 |     '**/node_modules/**/*',
 8 |     '**/LICENSE',
 9 |     '**/package-lock.json',
10 |     '**/postcss.config.js',
11 |     '**/tailwind.config.js',
12 |     '**/snowpack.config.js',
13 |   ],
14 |   mount: {
15 |     './assets': '/assets',
16 |     './': '/'
17 |   },
18 |   plugins: [
19 |     '@snowpack/plugin-postcss'
20 |   ],
21 |   packageOptions: {
22 |   },
23 |   devOptions: {
24 |     tailwindConfig: './tailwind.config.js',
25 |   },
26 |   buildOptions: {
27 |     out: './dist',
28 |     clean: false
29 |   },
30 |   optimize: {
31 |     bundle: true,
32 |     minify: true,
33 |     target: 'es2018',
34 |     entrypoints: ['./assets/js/index.js']
35 |   },
36 | };
37 | 


--------------------------------------------------------------------------------
/post.hbs:
--------------------------------------------------------------------------------
 1 | {{!< default}}
 2 | 
 3 | <header class="absolute top-0 left-0 p-4 min-w-full">
 4 |     <a class="flex items-center text-sm md:text-base max-w-min" href="{{@site.url}}">
 5 |         <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
 6 |         Back
 7 |     </a>
 8 | </header>
 9 | 
10 | {{#post}}
11 | 
12 | <article>
13 |     <h1 class="text-4xl font-extrabold mb-12">{{title}}</h1>
14 | 
15 |     <div class="max-w-none prose lg:prose-lg">
16 |         {{content}}
17 |     </div>
18 | 
19 |     <div class="mt-8 text-sm text-gray-400">
20 |         <p>Published on <time class="" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></p>
21 |         <p>{{tags separator=", " prefix="Tagged in: "}}</p>
22 |     </div>
23 | </article>
24 | 
25 | 
26 | {{/post}}
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Christoph Lupprich
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/default.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="{{@site.locale}}">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
 9 | 
10 |   <title>{{meta_title}}</title>
11 | 
12 |   {{ghost_head}}
13 |   {{!-- Outputs important meta data and settings, should always be in
14 | 
15 |   <head> --}}
16 | 
17 | </head>
18 | 
19 | <body>
20 |   <div>
21 |     {{{body}}}
22 |     {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
23 | 
24 |     <footer>
25 |       Published with <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>.
26 |       Powered by <a href="https://tailwindcss.com" target="_blank" rel="noopener">Tailwind CSS</a>.
27 |     </footer>
28 | 
29 |   </div>
30 | 
31 |   {{!-- <foot> --}}
32 | 
33 |     {{ghost_foot}}
34 |     {{!-- Outputs important scripts - should always be included before closing body tag --}}
35 |     <script type="module" src="{{asset "js/index.js"}}"></script>
36 | </body>
37 | 
38 | </html>
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "starter-snowpack-tailwind",
 3 |   "version": "1.0.0",
 4 |   "description": "A custom theme for ghost powered by Snowpack & Tailwind CSS",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "snowpack build --watch",
 8 |     "test": "gscan .",
 9 |     "build": "snowpack build",
10 |     "dist": "mkdir dist && cd assets/built && zip -r ../../dist/release ."
11 |   },
12 |   "repository": "github:clupprich/starter-snowpack-tailwind",
13 |   "keywords": [
14 |     "ghost",
15 |     "theme",
16 |     "ghost-theme"
17 |   ],
18 |   "engines": {
19 |     "ghost-api": "v4"
20 |   },
21 |   "author": {
22 |     "name": "Christoph Lupprich",
23 |     "email": "christoph@luppri.ch"
24 |   },
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/clupprich/starter-snowpack-tailwind/issues"
28 |   },
29 |   "homepage": "https://github.com/clupprich/starter-snowpack-tailwind",
30 |   "devDependencies": {
31 |     "@snowpack/plugin-postcss": "^1.4.3",
32 |     "@tailwindcss/aspect-ratio": "^0.4.0",
33 |     "@tailwindcss/line-clamp": "^0.3.1",
34 |     "@tailwindcss/typography": "^0.5.0",
35 |     "autoprefixer": "^10.4.2",
36 |     "gscan": "^4.22.0",
37 |     "postcss": "^8.4.5",
38 |     "snowpack": "^3.7.1",
39 |     "snowpack-plugin-content-replace": "^1.0.0",
40 |     "tailwindcss": "^3.0.15"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # starter-snowpack-tailwind
 2 | 
 3 | A boilerplate for a [Ghost](https://github.com/tryghost/ghost/) theme, powered by [Tailwind CSS](https://tailwindcss.com) and [Snowpack](https://www.snowpack.dev).
 4 | 
 5 | This theme is unstyled, so you'll need to bring your own.
 6 | 
 7 | # Development
 8 | 
 9 | Styles for this theme are compiled using [Snowpack](https://www.snowpack.dev). You will need [Node](https://nodejs.org/) installed globally (e.g. by using [asdf](https://asdf-vm.com/)). After that, from the theme's directory:
10 | 
11 | ```bash
12 | # install dependencies
13 | npm install
14 | 
15 | # run development script
16 | npm run dev
17 | ```
18 | 
19 | Now you can edit your CSS and JS assets (located in `/assets`) and even your templates (the `*.hbs` files in the root directory), and the transformed templates, CSS and JS will be placed into `/dist`.
20 | 
21 | To make your local Ghost installation use this theme, please create a symlink to the `/dist` folder, like so:
22 | 
23 | ```bash
24 | cd <PATH OF YOUR LOCAL GHOST INSTALLATION>/content/themes
25 | ln -s <PATH OF THE THEME>/dist/ starter-snowpack-tailwind
26 | 
27 | # So the theme gets picked up
28 | ghost restart
29 | ```
30 | 
31 | Once that's done, you can activate the theme. For changes to show up, you need to refresh your browser. I'm looking into adding livereload or a similar solution in the future.
32 | 
33 | # Release
34 | 
35 | To build a optimized version of your assets, run this from the theme's directory:
36 | 
37 | ```bash
38 | # build optimized version
39 | npm run build
40 | ```
41 | 
42 | Now zip the theme's directory and upload it to your site.
43 | 


--------------------------------------------------------------------------------