summaryrefslogtreecommitdiff
path: root/source/_posts
diff options
context:
space:
mode:
Diffstat (limited to 'source/_posts')
-rw-r--r--source/_posts/custom-404-page.md34
-rw-r--r--source/_posts/customizing-your-site.md73
-rw-r--r--source/_posts/fuse-search.md16
-rw-r--r--source/_posts/getting-started.md74
-rw-r--r--source/_posts/mailchimp-newsletters.md42
-rw-r--r--source/_posts/my-first-blog-post.md10
6 files changed, 249 insertions, 0 deletions
diff --git a/source/_posts/custom-404-page.md b/source/_posts/custom-404-page.md
new file mode 100644
index 0000000..d091fd0
--- /dev/null
+++ b/source/_posts/custom-404-page.md
@@ -0,0 +1,34 @@
+---
+extends: _layouts.post
+section: content
+title: Custom 404 Pages
+date: 2018-12-23
+description: Add a custom 404 page is easy with Jigsaw
+categories: [configuration, feature]
+---
+
+This starter template includes a custom __404 Not Found__ error page, located at `/source/404.blade.php`. [To preview the 404 page](/404), you can visit `/404` in your browser.
+
+```html
+<!-- source/404.blade.php -->
+
+@extends('_layouts.master')
+
+@section('body')
+ <div class="flex flex-col items-center text-gray-700 mt-32">
+ <h1 class="text-6xl font-light leading-none mb-2">404</h1>
+
+ <h2 class="text-3xl">Page not found.</h2>
+
+ <hr class="block w-full max-w-sm mx-auto border my-8">
+
+ <p class="text-xl">
+ Need to update this page? See the <a title="404 Page Documentation" href="https://jigsaw.tighten.co/docs/custom-404-page/">Jigsaw documentation</a>.
+ </p>
+ </div>
+@endsection
+```
+
+---
+
+Depending on where your site is hosted, you may need to configure your server to use the custom 404 page. For more details, visit the [Jigsaw documentation about configuring a custom 404 page](https://jigsaw.tighten.co/docs/custom-404-page/).
diff --git a/source/_posts/customizing-your-site.md b/source/_posts/customizing-your-site.md
new file mode 100644
index 0000000..894db6c
--- /dev/null
+++ b/source/_posts/customizing-your-site.md
@@ -0,0 +1,73 @@
+---
+extends: _layouts.post
+section: content
+title: Customizing Your Site
+date: 2018-12-24
+description: Customize your site with CSS and JS
+categories: [configuration]
+featured: true
+excerpt: This starter template comes pre-loaded with Tailwind CSS, a utility CSS framework that allows you to customize and build complex designs without touching a line of CSS.
+---
+
+This starter template comes pre-loaded with [Tailwind CSS](https://tailwindcss.com), a utility CSS framework that allows you to customize and build complex designs without touching a line of CSS. There are also a few base Sass files in the `/source/_assets/sass` folder, set up with the expectation that you can add any custom CSS into `_blog.scss`.
+
+> You can also re-work the architecture of the Sass files any way you’d like; just make sure to keep the `@tailwind` references in your final `main.scss` file.
+
+```scss
+// source/_assets/sass/main.scss
+
+@tailwind preflight;
+@tailwind components;
+
+// Code syntax highlighting,
+// https://highlightjs.org
+@import '~highlightjs/styles/default';
+
+@import 'base';
+@import 'navigation';
+@import 'mailchimp';
+@import 'blog';
+
+@tailwind utilities;
+```
+
+---
+
+## Typography Styles
+
+Here’s a quick preview of what some of the basic type styles will look like in this starter template:
+
+# h1 Heading
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+The quick brown fox jumps over the lazy dog
+
+<s>The quick brown fox jumps over the lazy dog</s>
+
+<u>The quick brown fox jumps over the lazy dog</u>
+
+_The quick brown fox jumps over the lazy dog_
+
+**The quick brown fox jumps over the lazy dog**
+
+`The quick brown fox jumps over the lazy dog`
+
+<small>The quick brown fox jumps over the lazy dog</small>
+
+> The quick brown fox jumps over the lazy dog
+
+[The quick brown fox jumps over the lazy dog](#)
+
+```php
+class Foo extends bar
+{
+ public function fooBar()
+ {
+ //
+ }
+}
+```
diff --git a/source/_posts/fuse-search.md b/source/_posts/fuse-search.md
new file mode 100644
index 0000000..d469c81
--- /dev/null
+++ b/source/_posts/fuse-search.md
@@ -0,0 +1,16 @@
+---
+extends: _layouts.post
+section: content
+title: Fuse Search
+date: 2018-12-22
+description: Fast local search powered by FuseJS
+cover_image: /assets/img/post-cover-image-1.png
+categories: [feature]
+---
+
+To provide fast, local search of your blog, this starter template comes with a pre-built Vue.js component that uses Fuse.js. [Fuse.js](http://fusejs.io/) is a "lightweight fuzzy-search library with _no_ dependencies." It works by running queries against a JSON index of your content.
+
+During the [build process](http://jigsaw.tighten.co/docs/building-and-previewing/), the contents of your `posts` collection is processed by the `GenerateIndex.php` listener, and an `index.json` file is generated in the build directory. The `Search.vue` component provides a search input that queries this local index.
+
+If you'd like to customize the generation of your search index, take a look at the `handle` method of the `GenerateIndex.php` file.
+
diff --git a/source/_posts/getting-started.md b/source/_posts/getting-started.md
new file mode 100644
index 0000000..8f28cc6
--- /dev/null
+++ b/source/_posts/getting-started.md
@@ -0,0 +1,74 @@
+---
+extends: _layouts.post
+section: content
+title: Getting Started
+date: 2018-12-25
+description: Getting started with the Jigsaw blog starter template
+cover_image: /assets/img/post-cover-image-2.png
+featured: true
+categories: [configuration]
+---
+
+This is a starter template for creating a beautiful, customizable blog with minimal effort. You’ll only have to change a few settings and you’re ready to go.<!-- more -->
+
+## Configuration
+
+As with all Jigsaw sites, configuration settings can be found in `config.php`; you can update the variables in that file with settings specific to your site. You can also add new configuration variables there to use across your site; take a look at the [Jigsaw documentation](http://jigsaw.tighten.co/docs/site-variables/) to learn more.
+
+```php
+// config.php
+return [
+ 'baseUrl' => 'https://my-awesome-jigsaw-site.com/',
+ 'production' => false,
+ 'siteName' => 'My Site',
+ 'siteDescription' => 'Give your blog a boost with Jigsaw.',
+ ...
+];
+```
+
+> Tip: This configuration file is also where you’ll define any "collections" (for example, a collection of the contributors to your site, or a collection of blog posts organized by topic). Check out the official [Jigsaw documentation](https://jigsaw.tighten.co/docs/collections/) to learn more.
+
+---
+
+### Adding Content
+
+You can write your content using a [variety of file types](http://jigsaw.tighten.co/docs/content-other-file-types/). By default, this starter template expects your content to be located in the `source/_posts/` folder.
+
+The top of each content page contains a YAML header that specifies how it should be rendered. The `title` attribute is used to dynamically generate HTML `title` and OpenGraph tags for each page. The `extends` attribute defines which parent Blade layout this content file will render with (e.g. `_layouts.post` will render with `source/_layouts/post.blade.php`), and the `section` attribute defines the Blade "section" that expects this content to be placed into it.
+
+```yaml
+---
+extends: _layouts.post
+section: content
+title: Getting Started
+date: 2018-12-25
+description: Getting started with the Jigsaw blog starter template
+cover_image: /assets/img/post-cover-image-2.png
+featured: true
+---
+```
+
+### Adding Assets
+
+Any assets that need to be compiled (such as JavaScript, Less, or Sass files) can be added to the `source/_assets/` directory, and Laravel Mix will process them when running `npm run local` or `npm run production`. The processed assets will be stored in `/source/assets/build/` (note there is no underscore on this second `assets` directory).
+
+Then, when Jigsaw builds your site, the entire `/source/assets/` directory containing your built files (and any other directories containing static assets, such as images or fonts, that you choose to store there) will be copied to the destination build folders (`build_local`, on your local machine).
+
+Files that don't require processing (such as images and fonts) can be added directly to `/source/assets/`.
+
+[Read more about compiling assets in Jigsaw using Laravel Mix.](http://jigsaw.tighten.co/docs/compiling-assets/)
+
+---
+
+## Building Your Site {#getting-started-building-your-site}
+
+Now that you’ve edited your configuration variables and know how to customize your styles and content, let’s build the site.
+
+```bash
+# build static files with Jigsaw
+./vendor/bin/jigsaw build
+
+# compile assets with Laravel Mix
+# options: dev, staging, production
+npm run dev
+```
diff --git a/source/_posts/mailchimp-newsletters.md b/source/_posts/mailchimp-newsletters.md
new file mode 100644
index 0000000..b631f6a
--- /dev/null
+++ b/source/_posts/mailchimp-newsletters.md
@@ -0,0 +1,42 @@
+---
+extends: _layouts.post
+section: content
+title: Mailchimp Newsletters
+date: 2018-11-21
+categories: [feature]
+description: Mailchimp newsletter signups, just add a url.
+cover_image: /assets/img/post-cover-image-1.png
+---
+
+[Mailchimp](https://mailchimp.com/) is a fantastic marketing platform, and takes the pain out of managing email lists and campaigns. The blog starter template comes with a beautiful pre-built newsletter form, that only needs a Mailchimp list URL to send to.
+
+To begin accepting subscribers, simply add your list URL to the form `action` in the `source/_components/newsletter-signup.blade.php` file.
+
+```html
+<!-- source/_components/newsletter-signup.blade.php -->
+
+<div id="mc_embed_signup">
+ <form action="https://your-mail-chimp-list-manage-url" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+ <div id="mc_embed_signup_scroll">
+ <h2>Sign up for newsletter</h2>
+ <div class="mc-field-group">
+ <label for="mce-EMAIL">Email Address </label>
+ <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email address">
+ </div>
+ <div id="mce-responses" class="clear">
+ <div class="response" id="mce-error-response" style="display:none"></div>
+ <div class="response" id="mce-success-response" style="display:none"></div>
+ </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+
+ <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_25582686a9fc051afd5453557_189578c854" tabindex="-1" value=""></div>
+ <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+ </div>
+ </form>
+</div>
+```
+
+### Example
+
+<img src="/assets/img/newsletter.png">
+
+[See how to get your Mailchimp list URL.](https://mailchimp.com/help/host-your-own-signup-forms/#Edit_your_Custom_Signup_Form)
diff --git a/source/_posts/my-first-blog-post.md b/source/_posts/my-first-blog-post.md
new file mode 100644
index 0000000..e3171ac
--- /dev/null
+++ b/source/_posts/my-first-blog-post.md
@@ -0,0 +1,10 @@
+---
+extends: _layouts.post
+section: content
+title: My First Blog Post
+date: 2017-03-23
+description: This is your first blog post.
+cover_image: /assets/img/post-cover-image-2.png
+---
+
+This is the start of your first blog post.