├── .editorconfig
├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── gridsome.config.js
├── netlify.toml
├── package-lock.json
├── package.json
├── posts
    ├── 2019-03-01-markdown-styling.md
    ├── 2019-03-02-deploying-your-site.md
    ├── 2019-03-02-getting-started.md
    ├── 2019-03-02-writing-posts.md
    └── dummy
    │   ├── adventures-sherlock-holmes.md
    │   ├── bob-ross-quotes.md
    │   ├── extraterrestrial-sightings.md
    │   ├── jeffsum.md
    │   ├── key-to-prototyping-tool.md
    │   └── sweetest-ipsum.md
├── scripts
    └── newPost.js
├── src
    ├── assets
    │   └── css
    │   │   ├── components
    │   │       ├── markdown.css
    │   │       └── resets.css
    │   │   └── main.css
    ├── components
    │   ├── Alert.vue
    │   ├── IndexHeader.vue
    │   ├── Pagination.vue
    │   ├── PostHeader.vue
    │   ├── PostItem.vue
    │   ├── PostsFilter.vue
    │   ├── PostsList.vue
    │   └── SiteFooter.vue
    ├── favicon.png
    ├── layouts
    │   └── Default.vue
    ├── main.js
    ├── pages
    │   ├── 404.vue
    │   ├── About.vue
    │   ├── Index.vue
    │   └── paginated
    │   │   └── Index.vue
    └── templates
    │   └── Post.vue
├── static
    └── images
    │   ├── briefly-card.png
    │   └── posts
    │       └── georgie-cobbs-467924-unsplash.jpg
└── tailwind.config.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.{css,js,json,vue}]
13 | indent_size = 2
14 | 
15 | [*.md]
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: ['https://paypal.me/cossssmin', 'https://www.amazon.co.uk/hz/wishlist/ls/3I8KTU4FLQIZ1']
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .vscode
4 | src/.temp
5 | node_modules
6 | dist
7 | static/feed.xml
8 | 
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Cosmin Popovici
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Briefly
 2 | 
 3 | > Minimal blog starter for [Gridsome](https://gridsome.org), based on [Dylan Smith's](https://dylanatsmith.com/) personal website design, and styled with [Tailwind CSS](https://tailwindcss.com).
 4 | 
 5 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cossssmin/gridsome-starter-briefly)
 6 | 
 7 | ## Demo
 8 | 
 9 | - [Page](https://gridsome-starter-briefly.netlify.com/about/)
10 | - [Single post](https://gridsome-starter-briefly.netlify.com/getting-started-with-gridsome-and-briefly/)
11 | - [Blog index with filtering](https://gridsome-starter-briefly.netlify.com/)
12 | - [Blog index with pagination](https://gridsome-starter-briefly.netlify.com/paginated/)
13 | 
14 | ## Preview
15 | 
16 | ![Briefly minimal blog starter for Gridsome preview](https://res.cloudinary.com/cossssmin/image/upload/v1559057477/os/gridsome/briefly/briefly-card.png)
17 | 
18 | ## Features
19 | 
20 | - Sitemap
21 | - RSS Feed
22 | - Google Analytics
23 | - Custom 404 Page
24 | - Code syntax highlighting
25 | - Medium-like image lightbox
26 | - Open Graph meta tags for posts
27 | - Alternative index page: [paginated posts list](https://gridsome-starter-briefly.netlify.com/paginated/)
28 | - Post descriptions: automatic or user-defined
29 | - Easily show post dates in your locale (moment.js)
30 | - _Index page post filtering_: show longer or shorter posts
31 | - Posts show a warning if they're older than 1 year (configurable)
32 | 
33 | ## Installation
34 | 
35 | It's recommended that you install Briefly with the `gridsome create` command, so that Gridsome removes the `.git` folder and installs NPM dependencies for you: 
36 | 
37 | ```sh 
38 | gridsome create my-website https://github.com/cossssmin/gridsome-starter-briefly.git
39 | ```
40 | 
41 | Alternatively, you can clone this repo and set it up manually:
42 | 
43 | ```sh 
44 | git clone https://github.com/cossssmin/gridsome-starter-briefly.git my-website
45 | 
46 | # navigate to the directory
47 | cd my-website
48 | 
49 | # remove the Git folder
50 | rm -rf .git
51 | 
52 | # install NPM dependencies
53 | npm install
54 | ```
55 | 
56 | ## Configuration
57 | 
58 | See the [configuration notes](https://gridsome-starter-briefly.netlify.com/getting-started-with-gridsome-and-briefly/#configuration) in the Getting Started demo post.
59 | 
60 | ## Development
61 | 
62 | Run `gridsome develop` to start a local development server, or `gridsome build` to build the static site into the `dist` folder.
63 | 
64 | See the [Gridsome docs](https://gridsome.org/docs) for more information.
65 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteName: 'A minimal blog starter for Gridsome',
 3 |   siteDescription: "Briefly is a minimal blog starter for Gridsome, the Vue.js static site generator. It's based on Dylan Smith's personal website design, and it's styled with Tailwind CSS.",
 4 |   siteUrl: 'https://gridsome-starter-briefly.netlify.com',
 5 |   titleTemplate: `%s | Briefly`,
 6 |   icon: 'src/favicon.png',
 7 | 
 8 |   transformers: {
 9 |     remark: {
10 |       externalLinksTarget: '_blank',
11 |       externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
12 |       plugins: [
13 |         ['gridsome-plugin-remark-shiki', {
14 |           theme: 'min-light'
15 |         }]
16 |       ]
17 |     }
18 |   },
19 | 
20 |   plugins: [
21 |     {
22 |       use: '@gridsome/source-filesystem',
23 |       options: {
24 |         path: 'posts/**/*.md',
25 |         typeName: 'Post',
26 |       }
27 |     },
28 |     {
29 |       use: '@gridsome/plugin-google-analytics',
30 |       options: {
31 |         id: 'UA-135446199-2'
32 |       }
33 |     },
34 |     {
35 |       use: '@gridsome/plugin-sitemap',
36 |       options: {
37 |         cacheTime: 600000, // default
38 |       }
39 |     },
40 |     {
41 |       use: 'gridsome-plugin-rss',
42 |       options: {
43 |         contentTypeName: 'Post',
44 |         feedOptions: {
45 |           title: 'Briefly, a Gridsome minimal blog starter',
46 |           feed_url: 'https://gridsome-starter-briefly.netlify.com/feed.xml',
47 |           site_url: 'https://gridsome-starter-briefly.netlify.com'
48 |         },
49 |         feedItemOptions: node => ({
50 |           title: node.title,
51 |           description: node.description,
52 |           url: 'https://gridsome-starter-briefly.netlify.com/' + node.slug,
53 |           author: '@cossssmin',
54 |           date: node.date
55 |         }),
56 |         output: {
57 |           dir: './static',
58 |           name: 'feed.xml'
59 |         }
60 |       }
61 |     },
62 |   ],
63 | 
64 |   templates: {
65 |     Post: '/:title'
66 |   },
67 | 
68 |   chainWebpack: config => {
69 |     config.module
70 |       .rule('css')
71 |       .oneOf('normal')
72 |       .use('postcss-loader')
73 |       .tap(options => {
74 |         options.plugins.unshift(...[
75 |           require('postcss-import'),
76 |           require('postcss-nested'),
77 |           require('tailwindcss'),
78 |         ])
79 | 
80 |         return options
81 |       })
82 |   },
83 | }
84 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "dist"
3 |   command = "npm run build"
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gridsome-starter-briefly",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "gridsome build",
 6 |     "develop": "gridsome develop",
 7 |     "explore": "gridsome explore",
 8 |     "newpost": "node scripts/newPost.js"
 9 |   },
10 |   "dependencies": {
11 |     "@fullhuman/postcss-purgecss": "^2.2.0",
12 |     "@gridsome/plugin-google-analytics": "^0.1.1",
13 |     "@gridsome/plugin-sitemap": "^0.3.0",
14 |     "@gridsome/source-filesystem": "^0.6.2",
15 |     "@gridsome/transformer-remark": "^0.6.0",
16 |     "gridsome": "^0.7.15",
17 |     "gridsome-plugin-remark-shiki": "^0.3.1",
18 |     "gridsome-plugin-rss": "^1.2.0",
19 |     "medium-zoom": "^1.0.5"
20 |   },
21 |   "devDependencies": {
22 |     "moment": "^2.26.0",
23 |     "postcss-import": "^12.0.1",
24 |     "postcss-nested": "^4.2.1",
25 |     "tailwindcss": "^1.4.6"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/posts/2019-03-01-markdown-styling.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Markdown styling"
  3 | description: "Markdown post content stress test. See how your post content is being styled with Tailwind CSS."
  4 | date: 2019-02-27 17:54:43
  5 | ---
  6 | 
  7 | **Blog posts in Briefly are written using Markdown. However, you are free to use HTML inside Markdown, for any elements not covered by the spec.** 
  8 | 
  9 | Markdown is intended to be as easy-to-read and easy-to-write as is feasible.Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.
 10 | 
 11 | **Haxx0r** ipsum _then_ less spoof ifdef ~~boolean~~ bang injection while it's a _**feature**_. Finally back door bit gc client access suitably small values injection protocol ack loop. Bang public echo baz server packet sniffer syn cd.
 12 | 
 13 | Frack highjack float buffer [function protocol](https://gridsome.org) I'm compiling. Root leet all your base are belong to us char protected ascii *.* regex semaphore root bin ip snarf foo <mark>Linus Torvalds</mark>. Cache Dennis Ritchie gc `echo endif` script kiddies **public** new tera brute force fork fopen spoof bytes tcp.
 14 | 
 15 | ## Heading 2
 16 | ### Heading 3
 17 | #### Heading 4
 18 | ##### Heading 5
 19 | ###### Heading 6
 20 | 
 21 | Heading 1 is the title of this page. You should only use it once in a document.
 22 | 
 23 | ## Links
 24 | 
 25 | When you paste in a URL like so: https://gridsome.org, it will be automatically converted to a link. Otherwise, you can use the standard `[link text](https://...)` markdown to create a link.
 26 | 
 27 | ## Ordered list
 28 | 
 29 | 1. python 
 30 | 2. root 
 31 | 3. public 
 32 | 4. bypass
 33 | 
 34 | ## Unordered list
 35 | 
 36 | - boolean 
 37 | - stack 
 38 | - foad 
 39 | - tarball 
 40 | 
 41 | ## A definition list
 42 | 
 43 | This list is created using `<dl>`, `<dt>`, and `<dd>` HTML tags.
 44 | 
 45 | <dl>
 46 |   <dt>First Term</dt>
 47 |   <dd>This is the definition of the first term.</dd>
 48 |   <dt>Second Term</dt>
 49 |   <dd>This is one definition of the second term. </dd>
 50 |   <dd>This is another definition of the second term.</dd>
 51 | </dl>
 52 | 
 53 | ## Blockquotes
 54 | 
 55 | > Trojan horse protected afk finally irc ip new kilo fork boolean. Int ack long less lib crack emacs gnu foo *.* segfault suitably small values ascii rsa throw void I'm sorry Dave
 56 | 
 57 | ## Code
 58 | 
 59 | ### Fenced codeblocks
 60 | 
 61 | Briefly uses [gridsome-plugin-remark-shiki](https://github.com/EldoranDev/gridsome-plugin-remark-shiki) to add syntax highlighting to code blocks. Roll with the default light one, or choose one of the other [themes available](https://github.com/octref/shiki/tree/master/packages/themes).
 62 | 
 63 | ```vue
 64 | <template>
 65 |   <div id="app">
 66 |     <h1>My Todo App!</h1>
 67 |     <TodoList/>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import TodoList from './components/TodoList.vue'
 73 | 
 74 | export default {
 75 |   components: {
 76 |     TodoList
 77 |   }
 78 | }
 79 | </script>
 80 | 
 81 | <style lang="postcss">
 82 | #app {
 83 |   @apply text-grey-darker max-w-sm mx-auto leading-normal font-sans;
 84 | 
 85 |   h1 {
 86 |     @apply text-black text-4xl;
 87 |   }
 88 | }
 89 | </style>
 90 | ```
 91 | 
 92 | Of course, it also styles `inline code blocks`.
 93 | 
 94 | ## Images
 95 | 
 96 | Here's a local image, that opens in a lightbox:
 97 | 
 98 | ![iMac rear photo by Georgie Cobbs on Unsplash](/images/posts/georgie-cobbs-467924-unsplash.jpg)
 99 | 
100 | As you just saw, Gridsome loads it only when it enters your viewport.
101 | 
102 | Here's an external image, hotlinked from Unsplash and linked to its page there:
103 | 
104 | [![Window photo by Mirna Rivalta on Unsplash](https://images.unsplash.com/photo-1551107671-b3ce56b6c667?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&h=360&q=80)](https://unsplash.com/photos/UecFf82b1qo)
105 | 
106 | As you can see, the lightbox is not used for linked images. Also, if the URL they link to is external, it will open in a new tab - just like the one above.
107 | 


--------------------------------------------------------------------------------
/posts/2019-03-02-deploying-your-site.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Deploying your site"
 3 | description: "How to deploy and host your static site"
 4 | date: 2019-02-25 18:23:53
 5 | ---
 6 | 
 7 | Seriously, this is a static site.
 8 | 
 9 | You could just run `gridsome build` and then upload the entire `dist` folder to any web host.
10 | 
11 | ## Deploy to Netlify 🔥
12 | 
13 | Simply connect Netlify to your GitHub repo and trigger a site rebuild every time you push to `master`.
14 | Click this wonderful button to get started:
15 | 
16 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cossssmin/gridsome-starter-briefly)
17 | 
18 | ## Other services
19 | 
20 | For other services, such as GitLab Pages or Amazon S3, checkout the [Gridsome deploy docs](https://gridsome.org/docs/deploy-to-amazon-s3).
21 | 


--------------------------------------------------------------------------------
/posts/2019-03-02-getting-started.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Getting started"
  3 | slug: getting-started-with-gridsome-and-briefly
  4 | description: "Getting started with the Briefly minimal blog starter theme for the Gridsome static site generator"
  5 | date: 2019-03-01 14:43:24
  6 | ---
  7 | 
  8 | **Briefly** is a minimal blog starter theme for Gridsome, based on the design of the [Dylan Smith's](https://dylanatsmith.com/) personal website, and styled with [Tailwind CSS](https://tailwindcss.com).
  9 | 
 10 | [Gridsome](https://gridsome.org) is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert.
 11 | 
 12 | 
 13 | ## Installation
 14 | 
 15 | After installing Gridsome, run:
 16 | 
 17 | ```
 18 | gridsome create my-website https://github.com/cossssmin/gridsome-starter-briefly.git
 19 | ```
 20 | 
 21 | Then, `cd my-website` and `gridsome develop` to start a local development server.
 22 | 
 23 | Alternatively, you can clone or download the [repo on GitHub](https://github.com/cossssmin/gridsome-starter-briefly).
 24 | 
 25 | ## Features
 26 | 
 27 | - Sitemap
 28 | - RSS Feed
 29 | - Google Analytics
 30 | - Custom [404 Page](/404/)
 31 | - Code syntax highlighting
 32 | - Medium-like image lightbox
 33 | - Open Graph meta tags for posts
 34 | - Alternative index page: [paginated posts list](/paginated/)
 35 | - Post descriptions: automatic or user-defined
 36 | - Easily show post dates in your locale (moment.js)
 37 | - _Index page post filtering_: show longer or shorter posts
 38 | - Posts show a warning if they're older than 1 year (configurable)
 39 | 
 40 | ## Configuration
 41 | 
 42 | You'll need to change some Briefly defaults before deploying your own site.
 43 | 
 44 | #### Sitemap
 45 | 
 46 | Briefly uses Gridsome's official sitemap plugin. Simply change the default `siteUrl` in `gridsome.config.js`, and you're all set:
 47 | 
 48 | ```js
 49 | siteUrl: 'https://gridsome-starter-briefly.netlify.com',
 50 | ```
 51 | 
 52 | When you build the site, a `sitemap.xml` will be automatically generated at the root of your site.
 53 | Read more in the [plugin's documentation](https://gridsome.org/plugins/@gridsome/plugin-sitemap).
 54 | 
 55 | #### RSS Feed
 56 | 
 57 | Update the feed title and all the default URLs, in `gridsome.config.js`:
 58 | 
 59 | ```js
 60 | {
 61 |   use: 'gridsome-plugin-rss',
 62 |   options: {
 63 |     contentTypeName: 'Post',
 64 |     feedOptions: {
 65 |       title: 'Briefly, a Gridsome minimal blog starter', // <- update
 66 |       feed_url: 'https://gridsome-starter-briefly.netlify.com/feed.xml',  // <- update, leave the file name
 67 |       site_url: 'https://gridsome-starter-briefly.netlify.com'  // <- update
 68 |     },
 69 |     feedItemOptions: node => ({
 70 |       title: node.title,
 71 |       description: node.description,
 72 |       url: 'https://gridsome-starter-briefly.netlify.com/' + node.slug,  // <- update
 73 |       author: '@cossssmin',
 74 |       date: node.date
 75 |     }),
 76 |     output: {
 77 |       name: 'feed.xml' // <- if you change this, also change it in the `feed_url` above
 78 |     }
 79 |   }
 80 | },
 81 | ```
 82 | 
 83 | #### Google Analytics
 84 | 
 85 | If you want to use Google Analytics, make sure to change the default tracking code in `gridsome.config.js`:
 86 | 
 87 | ```js
 88 | {
 89 | use: '@gridsome/plugin-google-analytics',
 90 |   options: {
 91 |     id: 'UA-135446199-2' // <- change this
 92 |   }
 93 | }
 94 | ```
 95 | 
 96 | To disable GA, simply comment out or delete that entire code block.
 97 | 
 98 | ## Customisation
 99 | 
100 | #### Post filtering
101 | 
102 | Post filtering is done in the `filterPosts()` method from `pages/Index.vue`.
103 | 
104 | Posts are considered to be "longer" if they're over 1000 characters. Otherwise, they're considered "shorter".
105 | 
106 | You can customise the text and styling by editing the `components/PostsFilter.vue` file.
107 | 
108 | #### Old content alert
109 | 
110 | Posts that are over one year old will show a warning like this one:
111 | 
112 | <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-900 leading-normal p-4 md:mx-6 mb-6 text-base" role="alert">
113 |     This post is over a year old, some of this information may be out of date.
114 | </div>
115 | 
116 | This is a flexible alert component, defined in `/src/components/Alert.vue`. 
117 | 
118 | Usage:
119 | 
120 | ```vue
121 | <!-- /src/templates/Post.vue -->
122 | <template>
123 |     ...
124 |     <alert v-if="postIsOlderThanOneYear" class="bg-orange-100 border-orange-500 text-orange-900">This post is over a year old, some of this information may be out of date.</alert>
125 |     ...
126 | </template>
127 | ```
128 | The `postIsOlderThanOneYear` computed property uses `moment.js`, so you can customise it to any date you need.
129 | Style it like you would normally style any element, by adding a `class=""` attribute and using Tailwind utility classes.
130 | 
131 | #### Post dates in your language
132 | 
133 | Open `/src/components/PostItem.vue` and `import` your [locale](https://github.com/moment/moment/tree/develop/locale "List of all moment.js locales") after the `moment` import:
134 | 
135 | ```vue
136 | <script>
137 | import moment from 'moment'
138 | import 'moment/locale/ro' // <- add this
139 | 
140 | export default {
141 |   // ...
142 | }
143 | </script>
144 | ```
145 | 
146 | For the single post view, do the same in `/src/templates/Post.vue`.
147 | 
148 | #### Advanced customisation
149 | 
150 | The [Gridsome documentation](https://gridsome.org/docs) is a great place to start. You will need to be familiar with Vue.js, mostly. Tailwind CSS is very easy to pick up. For advanced customisation, you'll also need a bit of experience with GraphQL.
151 | 


--------------------------------------------------------------------------------
/posts/2019-03-02-writing-posts.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: "Writing posts"
  3 | slug: writing-posts-markdown
  4 | description: "Writing posts in Markdown with Briefly for Gridsome"
  5 | date: 2019-02-28 15:16:11
  6 | ---
  7 | 
  8 | The starter uses Gridsome's filesystem source plugin, which means blog posts are Markdown files that exist in the `/content/posts` directory. 
  9 | 
 10 | ## Creating a new post
 11 | 
 12 | There are 2 ways you can create a new post with Briefly:
 13 | 
 14 | 1. Simply add a new, uniquely-named `*.md` file in the `/content/posts` directory
 15 | 2. In your terminal, navigate to the project root and run this command: 
 16 | 
 17 |     ```sh
 18 |     npm run newpost "My post title"
 19 |     ``` 
 20 |     
 21 |     The quotes around the title are mandatory. 
 22 |     
 23 |     This will create a new file named `YYYY-MM-DD-my-post-title.md` under `/content/posts`.
 24 | 
 25 | ## Supported Front Matter keys
 26 | 
 27 | You can use the following Front Matter keys when creating a post:
 28 | 
 29 | ```yaml
 30 | ---
 31 | title: "Post title" # required
 32 | slug: post-title-custom-url # optional, override the auto-generated post slug
 33 | description: "Lorem ipsum description sit amet" # required, used in meta tags and RSS feed
 34 | date: 2019-03-01 17:54:43 # only date is required; time is optional, but recommended for the <time> tag and better post sorting control
 35 | ---
 36 | ```
 37 | 
 38 | ## Markdown syntax & styling
 39 | 
 40 | This is a short guide to using Markdown - see the [full spec](https://daringfireball.net/projects/markdown/syntax), or check out [how Briefly styles it](/markdown-styling/).
 41 | 
 42 | ### Formatting text
 43 | 
 44 | #### Headings
 45 | 
 46 | ```markdown
 47 | # This is an H1
 48 | 
 49 | ## This is an H2
 50 | 
 51 | ###### This is an H6
 52 | ```
 53 | 
 54 | #### Paragraphs
 55 | 
 56 | A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line — a line containing nothing but spaces or tabs is considered blank.) 
 57 | 
 58 | Normal paragraphs should not be indented with spaces or tabs.
 59 | 
 60 | #### Inline elements
 61 | 
 62 | Make text:
 63 | 
 64 | - **bold**: `**bold text**`
 65 | - _italic_: `_italic text_`
 66 | - ~~strikethrough~~: `~~strikethrough text~~`
 67 | - <mark>highlighted</mark>: `<mark>highlighted text</mark>`
 68 | - [link](https://example.com): `[link text](https://example.com)`
 69 | 
 70 | For links, you can also use the [reference-style](https://daringfireball.net/projects/markdown/syntax#link):
 71 | 
 72 | ```markdown
 73 | [link text][id] reference-style link.
 74 | [id]: https://example.com/  "Optional Title Here"
 75 | ```
 76 | 
 77 | #### Lists
 78 | 
 79 | Unordered:
 80 | 
 81 | ```markdown
 82 | - one
 83 | - two 
 84 | - three
 85 | ```
 86 | 
 87 | Ordered:
 88 | 
 89 | ```markdown
 90 | 1. one
 91 | 2. two
 92 | 3. three
 93 | ```
 94 | 
 95 | #### Blockquotes
 96 | 
 97 | ```markdown
 98 | > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere. 
 99 | ```
100 | 
101 | ### Inserting Images
102 | 
103 | Local images are added with `![Image alt text](./images/image.jpg)`
104 | 
105 | Of course, you can reference images from a CDN: 
106 | 
107 | `![Image alt text](https://example.com/image.jpg)`
108 | 
109 | #### Linking images
110 | 
111 | With Markdown, do: `[![Image alt text](https://example.com/path/to/image.jpg)](url to link to)`
112 | 
113 | ### Dividing sections
114 | 
115 | Any of the following:
116 | 
117 | ```markdown
118 | * * *
119 | 
120 | ***
121 | 
122 | *****
123 | 
124 | - - -
125 | 
126 | ---
127 | 
128 | ---------------------------------------
129 | ```
130 | 
131 | ... will create a `<hr>` like this one:
132 | 
133 | ---
134 | 
135 | ### Code blocks
136 | 
137 | Both inline code and fenced codeblocks are supported.
138 | 
139 | To write inline code `like this` simply surround it with backticks: \`some inline code\`
140 | 
141 | #### Fenced codeblocks
142 | 
143 | Surround your code with triple backticks, like this:
144 | 
145 | ```markdown
146 |     ```language
147 |     your code here
148 |     ```
149 | ```
150 | 
151 | Specify the language ([reference](https://github.com/octref/shiki/blob/master/packages/languages/src/lang.ts)) in order to get proper syntax highlighting:
152 | 
153 | ```html
154 | <!DOCTYPE html>
155 | <html lang="en">
156 | <head>
157 |     <meta charset="UTF-8">
158 |     <title>Document</title>
159 | </head>
160 | <body>
161 |     <p>Lorem ipsum</p>
162 | </body>
163 | </html>
164 | ```
165 | 
166 | If you don't specify a language, the code block will not be wrapped in a `<pre>` tag, and will look like this:
167 | 
168 | ```
169 | <!DOCTYPE html>
170 | <html lang="en">
171 | <head>
172 |     <meta charset="UTF-8">
173 |     <title>Document</title>
174 | </head>
175 | <body>
176 |     <p>Lorem ipsum</p>
177 | </body>
178 | </html>
179 | ```
180 | 


--------------------------------------------------------------------------------
/posts/dummy/adventures-sherlock-holmes.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "The Adventures of Sherlock Holmes"
 3 | slug: sherlock-holmes-adventures-excerpt
 4 | description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
 5 | date: 2019-02-23 13:59:57
 6 | ---
 7 | 
 8 | "One tallow stain, or even two, might come by chance; but when I see no less than five, I think that there can be little doubt that the individual must be brought into frequent contact with burning tallow--walks upstairs at night probably with his hat in one hand and a guttering candle in the other. Anyhow, he never got tallow-stains from a gas-jet. Are you satisfied?"
 9 | 
10 | "Well, it is very ingenious," said I, laughing; "but since, as you said just now, there has been no crime committed, and no harm done save the loss of a goose, all this seems to be rather a waste of energy."
11 | 
12 | Sherlock Holmes had opened his mouth to reply, when the door flew open, and Peterson, the commissionaire, rushed into the apartment with flushed cheeks and the face of a man who is dazed with astonishment.
13 | 
14 | "The goose, Mr. Holmes! The goose, sir!" he gasped.
15 | 
16 | "Eh? What of it, then? Has it returned to life and flapped off through the kitchen window?" Holmes twisted himself round upon the sofa to get a fairer view of the man's excited face.
17 | 
18 | "See here, sir! See what my wife found in its crop!" He held out his hand and displayed upon the centre of the palm a brilliantly scintillating blue stone, rather smaller than a bean in size, but of such purity and radiance that it twinkled like an electric point in the dark hollow of his hand.
19 | 
20 | Sherlock Holmes sat up with a whistle. "By Jove, Peterson!" said he, "this is treasure trove indeed. I suppose you know what you have got?"
21 | 
22 | "A diamond, sir? A precious stone. It cuts into glass as though it were putty."
23 | 
24 | "It's more than a precious stone. It is the precious stone."
25 | 
26 | "Not the Countess of Morcar's blue carbuncle!" I ejaculated.
27 | 
28 | "Precisely so. I ought to know its size and shape, seeing that I have read the advertisement about it in The Times every day lately. It is absolutely unique, and its value can only be conjectured, but the reward offered of 1000 pounds is certainly not within a twentieth part of the market price."
29 | 
30 | "A thousand pounds! Great Lord of mercy!" The commissionaire plumped down into a chair and stared from one to the other of us.
31 | 
32 | "That is the reward, and I have reason to know that there are sentimental considerations in the background which would induce the Countess to part with half her fortune if she could but recover the gem."
33 | 


--------------------------------------------------------------------------------
/posts/dummy/bob-ross-quotes.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Happy little quotes from Bob Ross"
 3 | slug: bob-ross-quotes
 4 | description: "This is probably the greatest thing to happen in my life - to be able to share this with you."
 5 | date: 2019-02-22 13:59:57
 6 | ---
 7 | 
 8 | We'll put a happy little bush here. A little happy sunlight shining through there. We tell people sometimes: we're like drug dealers, come into town and get everybody absolutely addicted to painting. It doesn't take much to get you addicted. Trees get lonely too, so we'll give him a little friend. Nothing's gonna make your husband or wife madder than coming home and having a snow-covered dinner. Let your imagination be your guide.
 9 | 
10 | If these lines aren't straight, your water's going to run right out of your painting and get your floor wet. There's not a thing in the world wrong with washing your brush. If what you're doing doesn't make you happy - you're doing the wrong thing.
11 | 
12 | This is probably the greatest thing to happen in my life - to be able to share this with you. You're meant to have fun in life. And maybe, maybe, maybe... We'll paint one happy little tree right here. How do you make a round circle with a square knife? That's your challenge for the day. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it.
13 | 
14 | It's cold, but it's beautiful. When you do it your way you can go anywhere you choose. Little trees and bushes grow however makes them happy.
15 | 
16 | Volunteering your time; it pays you and your whole community fantastic dividends. Maybe there's a happy little Evergreen that lives here. We'll lay all these little funky little things in there. Everyone wants to enjoy the good parts - but you have to build the framework first. Let your heart be your guide.
17 | 
18 | It is a lot of fun. Isn't it fantastic that you can change your mind and create all these happy things? It's almost like something out of a fairytale book.
19 | 
20 | This is the fun part Just let your mind wander and enjoy. This should make you happy. You can work and carry-on and put lots of little happy things in here.
21 | 


--------------------------------------------------------------------------------
/posts/dummy/extraterrestrial-sightings.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Extraterrestrial sightings"
 3 | description: "Extraterrestrial, sightings electromagnetic flying vessels crystal skull. Helicopter heiroglyph burmuta triangle."
 4 | date: 2019-02-20 13:59:57
 5 | ---
 6 | 
 7 | Ancient alien Giorgio evidence clearly megoliths electromagnetic Indian texts spaceships, earth mound megoliths burmuta triangle contend UFO mercury. Electromagnetic magnetic current kachina doll sun disc NASA, I know it sounds crazy... Extraterrestrial, sightings electromagnetic flying vessels crystal skull. Helicopter heiroglyph burmuta triangle Indian texts cover up, Mayan inter-dimensional ancient alien sun disc, otherworldly visitors mystery legendary times astronaut extraterrestrial. 
 8 | 
 9 | Sightings Easter island evidence Indian texts alien SETI portal foo fighter, mystery Puma Punku Nazca lines gods extraterrestrial. Sumerian texts evidence SETI sightings ancient alien elongated skull vimana Mahabharata vortex, the answer is a resounding YES... Golden disk. Extraterrestrial origin space travel, I know it sounds crazy... Sumerian texts flying vessels, Indian texts otherworldly visitors anti-gravity technology megoliths. Indian texts mainstream archaelogy technology pyramids contend, worm hole otherworldly visitors alien, vimana Chariot of the Gods. 
10 | 
11 | > Space travel pre-colonial aerodynamics kachina doll Chariot of the Gods weightless evidence megoliths, DNA manipulation legendary times vortex clearly DNA manipulation petroglyph alien legendary times sanskrit. I know it sounds crazy... 
12 | 
13 | Spaceships, Machu Picchu extraterrestrial origin sanskrit, sky people otherworldly visitors. 
14 | 
15 | Machu Picchu legendary times alien weightless sky people burmuta triangle mainstream archaelogy sightings Giorgio, Chariot of the Gods kachina doll vortex Mayan Chariot of the Gods, cover up Sumerian texts portal burmuta triangle extraterrestrial technology pyramids. I know it sounds crazy... Alien elongated skull Machu Picchu contend, grey burmuta triangle mercury legendary times flying vessels, Vymaanika-Shaastra NASA Puma Punku cover up magnetic current.
16 | 
17 |  Ancient religions Annunaki Vymaanika-Shaastra spaceships space brothers, Mahabharata star people pyramids alien aircraft, mainstream archaelogy golden disk Puma Punku. SETI Mayan burmuta triangle, I know it sounds crazy... Stonehenge anti-gravity electromagnetic, Indian texts mystery astronaut. Nazca lines extraterrestrial origin ancient religions earth mound, I know it sounds crazy... Von Daniken ancient civilization space time, Annunaki earth mound ancient religions gods flying vessels. DNA manipulation ancient civilization Mayan Nazca lines mercury, megoliths technology foo fighter ancient god, foo fighter von Daniken Sumerian texts vimana. Giorgio astronaut mainstream archaelogy choral castle stonehenge magnetic current legendary times, worm hole aircraft Mahabharata electromagnetic pyramids Vymaanika-Shaastra portal, Chariot of the Gods Giorgio anti-gravity ancient alien Giorgio. 
18 |  
19 |  Legendary times mainstream archaelogy stonehenge pre-colonial aerodynamics technology vortex, Mahabharata space brothers ancient alien, I know it sounds crazy... Electromagnetic. Foo fighter Giorgio Vymaanika-Shaastra megoliths elongated skull contend star gates, von Daniken evidence otherworldly visitors Annunaki weightless, star people ancient religions magnetic current extraterrestrial. Indian texts SETI Mayan I know it sounds crazy... Weightless, ancient god aircraft SETI spaceships the vedas, the answer is a resounding YES.... I know it sounds crazy... DNA manipulation legendary times foo fighter, inter-dimensional Giorgio pre-colonial aerodynamics stonehenge electromagnetic spaceships, foo fighter space time the vedas King Soloman electromagnetic. 
20 |  
21 |  Vortex legendary times evidence clearly von Daniken burmuta triangle UFO, ancient religions megoliths vortex pyramids Indian texts ancient god extraterrestrial. Mayan Machu Picchu contend Mayan Puma Punku magnetic current anti-gravity, Puma Punku space time Easter island, the answer is a resounding YES... Worm hole Machu Picchu clearly sun disc. I know it sounds crazy..., Astronaut flying vessels.
22 | 


--------------------------------------------------------------------------------
/posts/dummy/jeffsum.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Jeffsum, a Jeff Goldblum movie lines text placeholder generator"
 3 | slug: jeffsum-lorem-ipsum-generator
 4 | description: "A little text placeholder generator of Jeff Goldblum awesomeness."
 5 | date: 2018-02-24 18:23:28
 6 | ---
 7 | 
 8 | https://jeffsum.com/
 9 | 
10 | Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. I gave it a cold? I gave it a virus. A computer virus. Just my luck, no ice. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
11 | 
12 | Do you have any idea how long it takes those cups to decompose. So you two dig up, dig up dinosaurs? Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
13 | 
14 | Yes, Yes, without the oops! You know what? It is beets. I've crashed into a beet truck. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Did he just throw my cat out of the window? Must go faster. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.
15 | 
16 | Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. What do they got in there? King Kong? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
17 | 
18 | Jaguar shark! So tell me - does it really exist? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. God help us, we're in the hands of engineers. God help us, we're in the hands of engineers. Eventually, you do plan to have dinosaurs on your dinosaur tour, right?
19 | 
20 | My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! Life finds a way. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
21 | 
22 | I was part of something special. Life finds a way. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!
23 | 
24 | What do they got in there? King Kong? You really think you can fly that thing? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. You really think you can fly that thing? Must go faster... go, go, go, go, go!
25 | 
26 | Checkmate... Remind me to thank John for a lovely weekend. You know what? It is beets. I've crashed into a beet truck. Jaguar shark! So tell me - does it really exist? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? What do they got in there? King Kong?
27 | 


--------------------------------------------------------------------------------
/posts/dummy/key-to-prototyping-tool.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "The key to building a prototyping tool for an ever-changing market"
 3 | slug: key-to-prototyping-tool-ever-changing-market
 4 | description: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."
 5 | date: 2019-02-24 13:59:57
 6 | ---
 7 | 
 8 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
 9 | 
10 | > Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
11 | 
12 | > <small>Steve Jobs</small>
13 | 
14 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla.
15 | 
16 | Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate.
17 | 
18 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non.
19 | 
20 | An Image
21 | This is an image caption, positioned below.
22 | Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.
23 | 


--------------------------------------------------------------------------------
/posts/dummy/sweetest-ipsum.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "The Sweetest Ipsum"
 3 | description: "Croissant fruitcake sugar plum danish macaroon wafer chupa chups."
 4 | date: 2019-02-21 13:59:57
 5 | ---
 6 | 
 7 | Pudding croissant jujubes lemon drops brownie jelly-o wafer sweet roll pastry. Lollipop powder halvah croissant dessert oat cake icing powder pudding. Tart candy halvah soufflé lollipop. Pastry gummi bears candy muffin halvah powder. Oat cake muffin halvah halvah marzipan wafer sesame snaps. Croissant fruitcake sugar plum danish macaroon wafer chupa chups. Cheesecake toffee candy canes candy. Cotton candy gingerbread muffin chocolate cake.
 8 | 
 9 | Cake fruitcake bear claw muffin jelly beans chocolate cake. Apple pie sesame snaps tart wafer pastry. Dessert gingerbread biscuit chupa chups gummies cupcake. Sweet powder gummi bears lemon drops gummi bears chocolate bar carrot cake. Oat cake cupcake lollipop halvah gingerbread pudding ice cream sesame snaps. Jelly sweet roll gingerbread topping pie chupa chups wafer. Bear claw fruitcake pie marzipan tootsie roll wafer cheesecake. Gingerbread gummi bears icing croissant chupa chups oat cake.
10 | 
11 | ## Jelly-o jujubes!
12 | 
13 | Tiramisu gummi bears apple pie caramels powder. Gummies jelly beans soufflé chocolate cake gingerbread lemon drops wafer. Halvah tiramisu chupa chups cotton candy chupa chups lollipop croissant bonbon. Wafer tart dragée lollipop pie tiramisu. Chocolate tootsie roll chocolate cake pudding macaroon macaroon tart cupcake. Wafer brownie sugar plum topping chocolate cake carrot cake marzipan. Sugar plum lollipop topping gummies.
14 | 
15 | Carrot cake cheesecake caramels. Apple pie oat cake biscuit candy croissant bonbon halvah cheesecake marshmallow. Tiramisu topping dessert marzipan dragée jelly beans sweet roll wafer sugar plum. Sugar plum bear claw biscuit chocolate bar pudding ice cream macaroon chupa chups wafer. Biscuit gummies cheesecake dragée dragée jujubes candy pie jelly-o. Icing tiramisu powder. Marshmallow chocolate halvah donut cheesecake sugar plum. Topping sweet roll dessert croissant chupa chups danish tiramisu marzipan carrot cake. Cake jelly-o powder apple pie topping wafer jujubes halvah. Jelly-o marshmallow soufflé muffin wafer cotton candy.
16 | 
17 | Candy canes chupa chups jelly beans cotton candy cookie tart caramels apple pie. Soufflé muffin marzipan sesame snaps dessert lollipop tart. Danish caramels tiramisu halvah wafer jelly. Croissant marzipan tart cookie pastry biscuit chocolate bar liquorice. Brownie jelly-o toffee sweet roll topping tiramisu. Powder marshmallow candy canes caramels. Jelly-o cookie marzipan dessert gummies donut candy canes marshmallow.
18 | 


--------------------------------------------------------------------------------
/scripts/newPost.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const moment = require('moment')
 3 | const slugify = require('@sindresorhus/slugify')
 4 | 
 5 | const title = process.argv[2]
 6 | const blogdir = './content/posts'
 7 | const postDate = moment().format('YYYY-MM-DD HH:mm:ss')
 8 | 
 9 | if (!title) {
10 |   console.log('❌  Please specify a post title.')
11 |   return
12 | }
13 | 
14 | const basename = `${moment().format('YYYY-MM-DD')}-${slugify(title)}`
15 | 
16 | const contents = `---
17 | title: "${title}"
18 | description: ""
19 | date: ${postDate}
20 | ---
21 | `
22 | 
23 | fs.writeFile(`${blogdir}/${basename}.md`, contents, () => console.log(`✔ Created ${blogdir}/${basename}.md`))
24 | 


--------------------------------------------------------------------------------
/src/assets/css/components/markdown.css:
--------------------------------------------------------------------------------
  1 | .markdown {
  2 |   @apply text-xl leading-loose text-black;
  3 | 
  4 |   p, ul, ol {
  5 |     @apply mb-4;
  6 |   }
  7 | 
  8 |   ul li, ol li {
  9 |     @apply mb-4;
 10 |   }
 11 | 
 12 |   ul {
 13 |     @apply list-disc pl-10;
 14 |   }
 15 | 
 16 |   ol {
 17 |     @apply list-decimal pl-10;
 18 |   }
 19 | 
 20 |   h2, h3, h4, h5, h6 {
 21 |     @apply font-sans font-bold text-black mt-6 mb-2;
 22 |   }
 23 | 
 24 |   h5, h6 {
 25 |     @apply uppercase;
 26 |   }
 27 | 
 28 |   h2 { @apply text-2xl; }
 29 |   h3 { @apply text-xl; }
 30 |   h4 { @apply text-lg; }
 31 |   h5 { @apply text-base; }
 32 |   h6 { @apply text-sm; }
 33 | 
 34 |   @screen sm {
 35 |     h2 { @apply text-4xl; }
 36 |   }
 37 | 
 38 |   a {
 39 |     @apply border-briefly-blue border-b;
 40 | 
 41 |     &:hover {
 42 |       @apply text-briefly-blue border-b-2;
 43 |     }
 44 | 
 45 |     &:visited {
 46 |       @apply border-briefly-indigo;
 47 |     }
 48 | 
 49 |     &:hover:visited {
 50 |       @apply text-briefly-indigo border-briefly-indigo;
 51 |     }
 52 |   }
 53 | 
 54 |   pre.shiki {
 55 |     @apply bg-gray-codeblock !important;
 56 |     @apply border border-gray-300 -mx-6 p-6 mb-4 text-sm font-mono leading-code overflow-x-auto scrolling-touch;
 57 |   }
 58 | 
 59 |   code.shiki {
 60 |     @apply bg-gray-100 text-gray-700 !important;
 61 |     @apply border border-gray-300 p-4 block mb-4 font-mono text-sm leading-code overflow-x-auto scrolling-touch;
 62 |   }
 63 | 
 64 |   .shiki-inline {
 65 |     @apply bg-gray-100 text-gray-700 !important;
 66 |     @apply border border-gray-300 text-xs px-2 py-1 rounded;
 67 |   }
 68 | 
 69 |   mark {
 70 |     @apply bg-briefly-yellow px-2;
 71 |   }
 72 | 
 73 |   dl {
 74 |     dt {
 75 |       @apply text-black text-sm font-sans font-bold uppercase mb-2;
 76 |       + dd {
 77 |         @apply mb-4 pl-2;
 78 |       }
 79 |     }
 80 |     dd {
 81 |       @apply mb-4;
 82 |     }
 83 |   }
 84 | 
 85 |   blockquote {
 86 |     @apply border-l-2 border-gray-400 text-gray-500 p-4 mb-4 italic;
 87 | 
 88 |     p {
 89 |       @apply mb-0;
 90 |     }
 91 |   }
 92 | 
 93 |   hr {
 94 |     @apply h-px bg-gray-300 my-8;
 95 |   }
 96 | }
 97 | 
 98 | @screen sm {
 99 |   .markdown {
100 |     h2 { @apply text-4xl; }
101 |     h3 { @apply text-3xl; }
102 |     h4 { @apply text-2xl; }
103 |     h5 { @apply text-xl; }
104 |     h6 { @apply text-base; }
105 |   }
106 | }
107 | 
108 | .post-cover {
109 |   &::after {
110 |     @apply absolute w-full h-48 left-0 bottom-0 z-0;
111 |     content: '';
112 |     background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 100%);
113 |   }
114 | 
115 |   &.fullscreen::after {
116 |     @apply h-full;
117 |     background: rgba(0,0,0,.15);
118 |   }
119 | }
120 | 
121 | 


--------------------------------------------------------------------------------
/src/assets/css/components/resets.css:
--------------------------------------------------------------------------------
 1 | ::selection {
 2 |   @apply bg-briefly-yellow;
 3 | }
 4 | 
 5 | .article-list-link {
 6 |   @apply block px-4 text-black border-l-4 border-transparent transition-colors duration-300;
 7 | }
 8 | 
 9 | @screen sm {
10 |   .article-list-link {
11 |     @apply text-xl;
12 |   }
13 | }
14 | 
15 | .article-list-link:hover {
16 |   @apply text-briefly-blue border-briefly-blue;
17 | }
18 | 
19 | .article-list-link:hover:visited {
20 |   @apply text-briefly-indigo border-briefly-indigo;
21 | }
22 | 
23 | .filters button {
24 |   @apply border-b border-transparent;
25 | }
26 | 
27 | .filters button:hover {
28 |   @apply border-gray-500;
29 | }
30 | 
31 | .filters .filter-active,
32 | .filters .filter-active:hover {
33 |   @apply text-black cursor-default border-b border-black;
34 | }
35 | 
36 | .filters button:focus {
37 |   @apply outline-none;
38 | }
39 | 


--------------------------------------------------------------------------------
/src/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | /*! purgecss start ignore */
 2 | @import 'tailwindcss/base';
 3 | /*! purgecss end ignore */
 4 | 
 5 | @import 'components/resets';
 6 | 
 7 | @import 'tailwindcss/components';
 8 | 
 9 | @import 'components/markdown';
10 | 
11 | @import 'tailwindcss/utilities';
12 | 


--------------------------------------------------------------------------------
/src/components/Alert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border-l-4 leading-normal p-4 md:mx-6 mb-12" role="alert">
 3 |     <slot>This is an alert, you should probably pass it some text...</slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Alert',
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/components/IndexHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="mb-8 sm:mb-16 text-black leading-snug">
 3 |     <h1 class="text-xl sm:text-3xl">I'm <em>Briefly</em>.</h1>
 4 |     <p class="text-xl sm:text-3xl">I'm a Gridsome starter.</p>
 5 |     <p class="text-xl sm:text-3xl">I can power your personal blog.</p>
 6 |   </header>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'IndexHeader',
12 | }
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="mx-auto py-8 sm:pb-16">
 3 |     <nav role="navigation" aria-label="pagination">
 4 |       <ul class="flex items-center justify-between">
 5 |         <li class="lg:w-1/5">
 6 |           <g-link v-if="info.currentPage > 1" :to="previousPage(info.currentPage)" class="text-gray-700 hover:text-briefly-blue py-2 transition-colors duration-300" rel="prev">
 7 |             &larr; Previous
 8 |           </g-link>
 9 |         </li>
10 |         <li class="hidden md:flex w-auto text-center text-gray-600">Page {{ info.currentPage }} of {{ info.totalPages }}</li>
11 |         <li class="lg:w-1/5">
12 |           <g-link v-if="info.currentPage !== info.totalPages" :to="nextPage(info.currentPage,info.totalPages)" class="text-gray-700 hover:text-briefly-blue py-2 transition-colors duration-300" rel="next">
13 |             Next &rarr;
14 |           </g-link>
15 |         </li>
16 |       </ul>
17 |     </nav>
18 |   </section>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   props: ['base', 'info'],
24 |   methods: {
25 |     previousPage(currentPage) {
26 |       return [0, 1].includes(currentPage - 1) ? `${this.basePath}/` : `${this.basePath}/${currentPage - 1}/`;
27 |     },
28 |     nextPage(currentPage, totalPages) {
29 |       return totalPages > currentPage ? `${this.basePath}/${currentPage + 1}/` : `${this.basePath}/${currentPage}/`;
30 |     }
31 |   },
32 |   computed: {
33 |     basePath() {
34 |       return this.base || ''
35 |     }
36 |   }
37 | }
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/components/PostHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <h1 class="text-3xl sm:text-5xl leading-tight font-bold mb-4 text-black">{{ post.title }}</h1>
 4 |     <time :datetime="post.datetime" class="text-gray-500">{{ formattedPublishDate }}</time>
 5 |   </header>
 6 | </template>
 7 | 
 8 | <script>
 9 | import moment from 'moment'
10 | 
11 | export default {
12 |   props: ['post'],
13 |   computed: {
14 |     formattedPublishDate() {
15 |       return moment(this.post.datetime).format('YYYY-MM-DD');
16 |     },
17 |   },
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/components/PostItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <li class="mb-8 sm:mb-16 -mx-5" :class="{hidden: !visible}">
 3 |     <g-link :to="`${post.node.path}/`" class="article-list-link">
 4 |       <h2>{{ post.node.title }}</h2>
 5 |       <p class="text-gray-400 leading-snug">{{ post.node.description }}</p>
 6 |       <time :datetime="post.node.datetime" class="text-gray-400 text-sm">{{ formatPublishDate(post.node.datetime) }}</time>
 7 |     </g-link>
 8 |   </li>
 9 | </template>
10 | 
11 | <script>
12 | import moment from 'moment'
13 | 
14 | export default {
15 |   name: 'PostItem',
16 |   props: ['post', 'show'],
17 |   methods: {
18 |     formatPublishDate(date) {
19 |       return moment(date).format('YYYY-MM-DD');
20 |     },
21 |   },
22 |   computed: {
23 |     contentLength () {
24 |       return this.post.node.content.replace(/<(?:.|\n)*?>/gm, '').length
25 |     },
26 |     visible () {
27 |       if (this.show == 'longer') {
28 |         return this.contentLength > 1000 ? true : false
29 |       }
30 |       if (this.show == 'shorter') {
31 |         return this.contentLength < 1000 ? true : false
32 |       }
33 |       return true
34 |     },
35 |   }
36 | }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/components/PostsFilter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="filters flex flex-wrap text-gray-500 mb-8 sm:mb-16 justify-between max-w-sm">
 3 |     <span class="text-black hidden sm:flex">Show:</span>
 4 |     <button
 5 |       v-for="(label, type, index) in {'all': 'All posts', 'longer': 'Longer ones', 'shorter': 'Shorter ones'}"
 6 |       :key="index"
 7 |       @click="filterPosts(type)"
 8 |       :class="{'filter-active': active == type}"
 9 |       class="capitalize">
10 |         {{ label }}
11 |     </button>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   name: 'PostsFilter',
18 |   data () {
19 |     return {
20 |       active: 'all'
21 |     }
22 |   },
23 |   methods: {
24 |     filterPosts (type) {
25 |       this.active = type
26 |       this.$emit('filter', type)
27 |     }
28 |   },
29 | }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/src/components/PostsList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul class="mb-8 sm:mb-16">
 3 |     <post-item v-for="post in posts" :key="post.node.id" :post="post" :show="filter" />
 4 |   </ul>
 5 | </template>
 6 | 
 7 | <script>
 8 | import moment from 'moment'
 9 | import PostItem from '@/components/PostItem'
10 | 
11 | export default {
12 |   name: 'PostList',
13 |   props: ['posts', 'filter'],
14 |   components: {
15 |     PostItem
16 |   },
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/SiteFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer class="text-gray-700 text-sm leading-normal flex flex-wrap justify-between">
 3 |     <div class="w-full sm:w-1/2 mb-4 sm:mb-0">
 4 |       <p><a href="https://github.com/cossssmin/gridsome-starter-briefly" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">Briefly</a> by <a href="https://twitter.com/cossssmin" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">@cossssmin</a>.</p>
 5 |       <p>Built with <a href="https://gridsome.org" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">Gridsome</a> &amp; <a href="https://tailwindcss.com/" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">Tailwind CSS</a>.</p>
 6 |     </div>
 7 |     <div class="w-full sm:w-1/2">
 8 |       <nav>
 9 |         <ul class="flex sm:justify-end -mx-2">
10 |           <li class="px-2">
11 |             <g-link to="/" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">Home</g-link>
12 |           </li>
13 |           <li class="px-2">
14 |             <g-link to="/about/" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">About</g-link>
15 |           </li>
16 |           <li class="px-2">
17 |             <a href="/sitemap.xml" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">Sitemap</a>
18 |           </li>
19 |           <li class="px-2">
20 |             <a href="/feed.xml" class="border-b border-transparent hover:border-briefly-blue transition-colors duration-300">RSS Feed</a>
21 |           </li>
22 |         </ul>
23 |       </nav>
24 |     </div>
25 |   </footer>
26 | </template>
27 | 
28 | <script>
29 | 
30 | export default {
31 |   name: 'SiteFooter',
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cossssmin/gridsome-starter-briefly/e08c6de8320a854864f5f05435ca671392fa99d1/src/favicon.png


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <slot/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import config from '~/.temp/config.js';
 9 | 
10 | export default {
11 |   computed: {
12 |     config () {
13 |       return config
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style src="~/assets/css/main.css"></style>
20 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import DefaultLayout from '~/layouts/Default.vue'
2 | 
3 | export default function (Vue, { head }) {
4 |   Vue.component('Layout', DefaultLayout)
5 | 
6 |   head.htmlAttrs = { lang: 'en' }
7 |   head.bodyAttrs = { class: 'antialiased font-sans' }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/pages/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <main class="flex items-center justify-center text-center h-screen">
 4 |       <section class="markdown w-full max-w-3xl">
 5 |         <h1 class="text-2xl font-bold">Page Not Found</h1>
 6 |         <p class="mb-8">Unfortunately, the page could not be found.</p>
 7 |         <g-link to="/">&larr; Go back home</g-link>
 8 |       </section>
 9 |     </main>
10 |   </Layout>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   metaInfo () {
16 |     return {
17 |       title: `Page Not Found (404)`,
18 |     }
19 |   },
20 | }
21 | </script>
22 | 
23 | 


--------------------------------------------------------------------------------
/src/pages/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <main class="py-12 max-w-2xl mx-auto px-6">
 4 |       <header>
 5 |         <h1 class="text-3xl sm:text-5xl leading-tight font-bold text-black">About</h1>
 6 |         <p class="text-gray-600 italic text-lg sm:text-2xl">Lorem ipsum subtitle &hellip;</p>
 7 |       </header>
 8 |       <article class="my-16">
 9 |         <div class="markdown">
10 |           <p>This is your about page, say something about you or this blog.</p>
11 |           <p>You can edit this page in <code class="shiki-inline">src/pages/About.vue</code></p>
12 |           <hr>
13 |           <p>Now what are the possibilities of warp drive? Cmdr Riker's nervous system has been invaded by an unknown microorganism. The organisms fuse to the nerve, intertwining at the molecular level. That's why the transporter's biofilters couldn't extract it. The vertex waves show a K-complex corresponding to an REM state. The engineering section's critical. Destruction is imminent. Their robes contain ultritium, highly explosive, virtually undetectable by your transporter.</p>
14 |           <h2>Communication is not possible</h2>
15 |           <p>The shuttle has no power. Using the gravitational pull of a star to slingshot back in time? We are going to Starbase Montgomery for Engineering consultations prompted by minor read-out anomalies. Probes have recorded unusual levels of geological activity in all five planetary systems. Assemble a team. Look at records of the Drema quadrant. Would these scans detect artificial transmissions as well as natural signals?</p>
16 |           <p>Energy discharge in six seconds. Warp reactor core primary coolant failure. Fluctuate phaser resonance frequencies. Resistance is futile. Recommend we adjust shield harmonics to the upper EM band when proceeding. These appear to be some kind of power-wave-guide conduits which allow them to work collectively as they perform ship functions. Increase deflector modulation to upper frequency band.</p>
17 |           <h2>Deflector power at maximum</h2>
18 |           <p>Unidentified vessel travelling at sub warp speed, bearing 235.7. Fluctuations in energy readings from it, Captain. All transporters off. A strange set-up, but I'd say the graviton generator is depolarized. The dark colourings of the scrapes are the leavings of natural rubber, a type of non-conductive sole used by researchers experimenting with electricity. The molecules must have been partly de-phased by the anyon beam.</p>
19 |           <p>Sensors indicate human life forms 30 meters below the planet's surface. Stellar flares are increasing in magnitude and frequency. Set course for Rhomboid Dronegar 006, warp seven. There's no evidence of an advanced communication network. Total guidance system failure, with less than 24 hours' reserve power. Shield effectiveness has been reduced 12 percent. We have covered the area in a spherical pattern which a ship without warp drive could cross in the given time.</p>
20 |           <p>It indicates a synchronic distortion in the areas emanating triolic waves. The cerebellum, the cerebral cortex, the brain stem,  the entire nervous system has been depleted of electrochemical energy. Any device like that would produce high levels of triolic waves. These walls have undergone some kind of selective molecular polarization. I haven't determined if our phaser energy can generate a stable field. We could alter the photons with phase discriminators.</p>
21 |           <p>I have reset the sensors to scan for frequencies outside the usual range. By emitting harmonic vibrations to shatter the lattices. We will monitor and adjust the frequency of the resonators. He has this ability of instantly interpreting and extrapolating any verbal communication he hears. It may be due to the envelope over the structure, causing hydrogen-carbon helix patterns throughout. I'm comparing the molecular integrity of that bubble against our phasers.</p>
22 |           <p>Resistance is futile.</p>
23 |         </div>
24 |       </article>
25 |       <site-footer class="pb-8 sm:pb-10" />
26 |     </main>
27 |   </Layout>
28 | </template>
29 | 
30 | <script>
31 | import config from '~/.temp/config.js'
32 | import SiteFooter from '@/components/SiteFooter'
33 | 
34 | export default {
35 |   components: {
36 |     SiteFooter
37 |   },
38 |   metaInfo () {
39 |     return {
40 |       title: 'About',
41 |       meta: [
42 |         {
43 |           key: 'description',
44 |           name: 'description',
45 |           content: 'Introduction to the Briefly blog starter for Gridsome.'
46 |         },
47 | 
48 |         { property: "og:type", content: 'article' },
49 |         { property: "og:title", content:'About' },
50 |         { property: "og:description", content: 'Introduction to the Briefly blog starter for Gridsome.' },
51 |         { property: "og:url", content: `${this.config.siteUrl}/about/` },
52 |         { property: "og:image", content: `${this.config.siteUrl}/images/briefly-card.png` },
53 | 
54 |         { name: "twitter:card", content: "summary_large_image" },
55 |         { name: "twitter:title", content: 'About' },
56 |         { name: "twitter:description", content: 'Introduction to the Briefly blog starter for Gridsome.' },
57 |         { name: "twitter:site", content: "@cossssmin" },
58 |         { name: "twitter:creator", content: "@cossssmin" },
59 |         { name: "twitter:image", content: `${this.config.siteUrl}/images/briefly-card.png` },
60 |       ],
61 |     }
62 |   },
63 |   computed: {
64 |     config () {
65 |       return config
66 |     },
67 |   },
68 | }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout class="bg-white">
 3 |     <main class="py-12 max-w-2xl mx-auto px-6">
 4 |       <index-header />
 5 |       <posts-filter @filter="filterPosts" />
 6 |       <posts-list :posts="$page.posts.edges" :filter="showPosts" />
 7 |       <site-footer class="pt-8 pb-4" />
 8 |     </main>
 9 |   </Layout>
10 | </template>
11 | 
12 | <script>
13 | import config from '~/.temp/config.js'
14 | import PostsList from '@/components/PostsList'
15 | import SiteFooter from '@/components/SiteFooter'
16 | import PostsFilter from '@/components/PostsFilter'
17 | import IndexHeader from '@/components/IndexHeader'
18 | 
19 | export default {
20 |   components: {
21 |     IndexHeader,
22 |     PostsList,
23 |     PostsFilter,
24 |     SiteFooter,
25 |   },
26 |   data () {
27 |     return {
28 |       showPosts: 'all'
29 |     }
30 |   },
31 |   metaInfo () {
32 |     return {
33 |       title: this.$static.metadata.siteName,
34 |       meta: [
35 |         { property: "og:type", content: 'website' },
36 |         { property: "og:title", content: this.$static.metadata.siteName },
37 |         { property: "og:description", content: this.$static.metadata.siteDescription },
38 |         { property: "og:url", content: this.$static.metadata.siteUrl },
39 |         { property: "og:image", content: this.ogImageUrl },
40 | 
41 |         { name: "twitter:card", content: "summary_large_image" },
42 |         { name: "twitter:title", content: this.$static.metadata.siteName },
43 |         { name: "twitter:description", content: this.$static.metadata.siteDescription },
44 |         { name: "twitter:site", content: "@cossssmin" },
45 |         { name: "twitter:creator", content: "@cossssmin" },
46 |         { name: "twitter:image", content: this.ogImageUrl },
47 |       ],
48 |     }
49 |   },
50 |   methods: {
51 |     filterPosts (type) {
52 |       this.showPosts = type
53 |     }
54 |   },
55 |   computed: {
56 |     config () {
57 |       return config
58 |     },
59 |     ogImageUrl () {
60 |       return `${this.$static.metadata.siteUrl}/images/briefly-card.png`
61 |     }
62 |   },
63 | }
64 | </script>
65 | 
66 | <page-query>
67 |   query Home {
68 |     posts: allPost {
69 |       edges {
70 |         node {
71 |           id
72 |           title
73 |           datetime: date (format: "YYYY-MM-DD HH:mm:ss")
74 |           content
75 |           description
76 |           path
77 |         }
78 |       }
79 |     }
80 |   }
81 | </page-query>
82 | 
83 | <static-query>
84 | query {
85 |   metadata {
86 |     siteName
87 |     siteUrl
88 |     siteDescription
89 |   }
90 | }
91 | </static-query>
92 | 
93 | 


--------------------------------------------------------------------------------
/src/pages/paginated/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout class="bg-white">
 3 |     <main class="py-12 max-w-2xl mx-auto px-6">
 4 |       <index-header />
 5 |       <posts-list :posts="$page.posts.edges" />
 6 |       <pagination base="/paginated" :info="$page.posts.pageInfo" v-if="$page.posts.pageInfo.totalPages > 1" />
 7 |       <site-footer class="pt-8 pb-4" />
 8 |     </main>
 9 |   </Layout>
10 | </template>
11 | 
12 | <script>
13 | import config from '~/.temp/config.js'
14 | import PostsList from '@/components/PostsList'
15 | import Pagination from '@/components/Pagination'
16 | import SiteFooter from '@/components/SiteFooter'
17 | import IndexHeader from '@/components/IndexHeader'
18 | 
19 | export default {
20 |   components: {
21 |     IndexHeader,
22 |     PostsList,
23 |     Pagination,
24 |     SiteFooter,
25 |   },
26 |   metaInfo () {
27 |     return {
28 |       title: this.$static.metadata.siteName,
29 |       meta: [
30 |         { property: "og:type", content: 'website' },
31 |         { property: "og:title", content: this.$static.metadata.siteName },
32 |         { property: "og:description", content: this.$static.metadata.siteDescription },
33 |         { property: "og:url", content: this.$static.metadata.siteUrl },
34 |         { property: "og:image", content: this.ogImageUrl },
35 | 
36 |         { name: "twitter:card", content: "summary_large_image" },
37 |         { name: "twitter:title", content: this.$static.metadata.siteName },
38 |         { name: "twitter:description", content: this.$static.metadata.siteDescription },
39 |         { name: "twitter:site", content: "@cossssmin" },
40 |         { name: "twitter:creator", content: "@cossssmin" },
41 |         { name: "twitter:image", content: this.ogImageUrl },
42 |       ],
43 |     }
44 |   },
45 |   computed: {
46 |     config () {
47 |       return config
48 |     },
49 |     ogImageUrl () {
50 |       return `${this.config.siteUrl}/images/bleda-card.png`
51 |     }
52 |   },
53 | }
54 | </script>
55 | 
56 | <page-query>
57 |   query Home ($page: Int) {
58 |     posts: allPost (page: $page, perPage: 4) @paginate {
59 |       totalCount
60 |       pageInfo {
61 |         totalPages
62 |         currentPage
63 |       }
64 |       edges {
65 |         node {
66 |           id
67 |           title
68 |           datetime: date (format: "YYYY-MM-DD HH:mm:ss")
69 |           content
70 |           description
71 |           path
72 |         }
73 |       }
74 |     }
75 |   }
76 | </page-query>
77 | 
78 | <static-query>
79 | query {
80 |   metadata {
81 |     siteName
82 |     siteUrl
83 |     siteDescription
84 |   }
85 | }
86 | </static-query>
87 | 
88 | 


--------------------------------------------------------------------------------
/src/templates/Post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <main class="py-12 max-w-3xl mx-auto px-6">
 4 |       <post-header :post="$page.post" />
 5 |       <article class="mt-8 sm:mt-16">
 6 |         <alert v-if="postIsOlderThanOneYear" class="bg-orange-100 border-orange-500 text-orange-900">
 7 |           This post is over a year old, some of this information may be out of date.
 8 |         </alert>
 9 |         <div class="markdown" v-html="$page.post.content" />
10 |       </article>
11 |       <site-footer class="pt-8 pb-4" />
12 |     </main>
13 |   </Layout>
14 | </template>
15 | 
16 | <script>
17 | import moment from 'moment'
18 | import config from '~/.temp/config.js'
19 | import Alert from '@/components/Alert'
20 | import PostHeader from '~/components/PostHeader'
21 | import SiteFooter from '@/components/SiteFooter'
22 | 
23 | export default {
24 |   components: {
25 |     Alert,
26 |     PostHeader,
27 |     SiteFooter,
28 |   },
29 |   metaInfo () {
30 |     return {
31 |       title: this.$page.post.title,
32 |       meta: [
33 |         {
34 |           key: 'description',
35 |           name: 'description',
36 |           content: this.description(this.$page.post)
37 |         },
38 | 
39 |         { property: "og:type", content: 'article' },
40 |         { property: "og:title", content: this.$page.post.title },
41 |         { property: "og:description", content: this.description(this.$page.post) },
42 |         { property: "og:url", content: `${this.config.siteUrl + this.$page.post.path}` },
43 |         { property: "article:published_time", content: moment(this.$page.post.date).format('YYYY-MM-DD') },
44 |         { property: "og:image", content: this.ogImageUrl },
45 | 
46 |         { name: "twitter:card", content: "summary_large_image" },
47 |         { name: "twitter:title", content: this.$page.post.title },
48 |         { name: "twitter:description", content: this.description(this.$page.post) },
49 |         { name: "twitter:site", content: "@cossssmin" },
50 |         { name: "twitter:creator", content: "@cossssmin" },
51 |         { name: "twitter:image", content: this.ogImageUrl },
52 |       ],
53 |     }
54 |   },
55 |   mounted () {
56 |     import('medium-zoom').then(mediumZoom => {
57 |       this.zoom = mediumZoom.default('.markdown p > img')
58 |     })
59 |   },
60 |   methods: {
61 |     description(post, length, clamp) {
62 |       if (post.description) {
63 |         return post.description
64 |       }
65 | 
66 |       length = length || 280
67 |       clamp = clamp || ' ...'
68 |       let text = post.content.replace(/<pre(.|\n)*?<\/pre>/gm, '').replace(/<[^>]+>/gm, '')
69 | 
70 |       return text.length > length ? `${ text.slice(0, length)}${clamp}` : text
71 |     },
72 |   },
73 |   computed: {
74 |     config () {
75 |       return config
76 |     },
77 |     postIsOlderThanOneYear () {
78 |       let postDate = moment(this.$page.post.datetime)
79 |       return moment().diff(postDate, 'years') > 0 ? true : false
80 |     },
81 |     ogImageUrl () {
82 |       return `${this.config.siteUrl}/images/briefly-card.png`
83 |     }
84 |   },
85 | }
86 | </script>
87 | 
88 | <page-query>
89 | query Post ($path: String) {
90 |   post (path: $path) {
91 |     title
92 |     datetime: date (format: "YYYY-MM-DD HH:mm:ss")
93 |     content
94 |     description
95 |     path
96 |   }
97 | }
98 | </page-query>
99 | 


--------------------------------------------------------------------------------
/static/images/briefly-card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cossssmin/gridsome-starter-briefly/e08c6de8320a854864f5f05435ca671392fa99d1/static/images/briefly-card.png


--------------------------------------------------------------------------------
/static/images/posts/georgie-cobbs-467924-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cossssmin/gridsome-starter-briefly/e08c6de8320a854864f5f05435ca671392fa99d1/static/images/posts/georgie-cobbs-467924-unsplash.jpg


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   prefix: '',
  3 |   important: false,
  4 |   separator: ':',
  5 |   purge: {
  6 |     content: [
  7 |       './src/assets/**/*.css',
  8 |       './src/**/*.vue',
  9 |       './src/**/*.js'
 10 |     ],
 11 |     options: {
 12 |       defaultExtractor: content => content.match(/[\w-/:%]+(?<!:)/g) || [],
 13 |       whitelistPatterns: [/shiki/]
 14 |     },
 15 |   },
 16 |   theme: {
 17 |     screens: {
 18 |       sm: '640px',
 19 |       md: '768px',
 20 |       lg: '1024px',
 21 |       xl: '1280px',
 22 |     },
 23 |     colors: {
 24 |       transparent: 'transparent',
 25 |       current: 'currentColor',
 26 | 
 27 |       black: '#22292f',
 28 |       white: '#fff',
 29 | 
 30 |       briefly: {
 31 |         blue: '#00e',
 32 |         indigo: '#7b26c9',
 33 |         yellow: '#ff9',
 34 |       },
 35 | 
 36 |       gray: {
 37 |         100: '#f7fafc',
 38 |         200: '#edf2f7',
 39 |         300: '#e2e8f0',
 40 |         400: '#cbd5e0',
 41 |         500: '#a0aec0',
 42 |         600: '#718096',
 43 |         700: '#4a5568',
 44 |         800: '#2d3748',
 45 |         900: '#1a202c',
 46 |         'codeblock': '#fbfcfd',
 47 |       },
 48 |       red: {
 49 |         100: '#fff5f5',
 50 |         200: '#fed7d7',
 51 |         300: '#feb2b2',
 52 |         400: '#fc8181',
 53 |         500: '#f56565',
 54 |         600: '#e53e3e',
 55 |         700: '#c53030',
 56 |         800: '#9b2c2c',
 57 |         900: '#742a2a',
 58 |       },
 59 |       orange: {
 60 |         100: '#fffaf0',
 61 |         200: '#feebc8',
 62 |         300: '#fbd38d',
 63 |         400: '#f6ad55',
 64 |         500: '#ed8936',
 65 |         600: '#dd6b20',
 66 |         700: '#c05621',
 67 |         800: '#9c4221',
 68 |         900: '#7b341e',
 69 |       },
 70 |       yellow: {
 71 |         100: '#fffff0',
 72 |         200: '#fefcbf',
 73 |         300: '#faf089',
 74 |         400: '#f6e05e',
 75 |         500: '#ecc94b',
 76 |         600: '#d69e2e',
 77 |         700: '#b7791f',
 78 |         800: '#975a16',
 79 |         900: '#744210',
 80 |       },
 81 |       green: {
 82 |         100: '#f0fff4',
 83 |         200: '#c6f6d5',
 84 |         300: '#9ae6b4',
 85 |         400: '#68d391',
 86 |         500: '#48bb78',
 87 |         600: '#38a169',
 88 |         700: '#2f855a',
 89 |         800: '#276749',
 90 |         900: '#22543d',
 91 |       },
 92 |       teal: {
 93 |         100: '#e6fffa',
 94 |         200: '#b2f5ea',
 95 |         300: '#81e6d9',
 96 |         400: '#4fd1c5',
 97 |         500: '#38b2ac',
 98 |         600: '#319795',
 99 |         700: '#2c7a7b',
100 |         800: '#285e61',
101 |         900: '#234e52',
102 |       },
103 |       blue: {
104 |         100: '#ebf8ff',
105 |         200: '#bee3f8',
106 |         300: '#90cdf4',
107 |         400: '#63b3ed',
108 |         500: '#4299e1',
109 |         600: '#3182ce',
110 |         700: '#2b6cb0',
111 |         800: '#2c5282',
112 |         900: '#2a4365',
113 |       },
114 |       indigo: {
115 |         100: '#ebf4ff',
116 |         200: '#c3dafe',
117 |         300: '#a3bffa',
118 |         400: '#7f9cf5',
119 |         500: '#667eea',
120 |         600: '#5a67d8',
121 |         700: '#4c51bf',
122 |         800: '#434190',
123 |         900: '#3c366b',
124 |       },
125 |       purple: {
126 |         100: '#faf5ff',
127 |         200: '#e9d8fd',
128 |         300: '#d6bcfa',
129 |         400: '#b794f4',
130 |         500: '#9f7aea',
131 |         600: '#805ad5',
132 |         700: '#6b46c1',
133 |         800: '#553c9a',
134 |         900: '#44337a',
135 |       },
136 |       pink: {
137 |         100: '#fff5f7',
138 |         200: '#fed7e2',
139 |         300: '#fbb6ce',
140 |         400: '#f687b3',
141 |         500: '#ed64a6',
142 |         600: '#d53f8c',
143 |         700: '#b83280',
144 |         800: '#97266d',
145 |         900: '#702459',
146 |       },
147 |     },
148 |     spacing: {
149 |       px: '1px',
150 |       '0': '0',
151 |       '1': '0.25rem',
152 |       '2': '0.5rem',
153 |       '3': '0.75rem',
154 |       '4': '1rem',
155 |       '5': '1.25rem',
156 |       '6': '1.5rem',
157 |       '8': '2rem',
158 |       '10': '2.5rem',
159 |       '12': '3rem',
160 |       '16': '4rem',
161 |       '20': '5rem',
162 |       '24': '6rem',
163 |       '32': '8rem',
164 |       '40': '10rem',
165 |       '48': '12rem',
166 |       '56': '14rem',
167 |       '64': '16rem',
168 |       '72': '18rem',
169 |     },
170 |     backgroundColor: theme => theme('colors'),
171 |     backgroundPosition: {
172 |       bottom: 'bottom',
173 |       center: 'center',
174 |       left: 'left',
175 |       'left-bottom': 'left bottom',
176 |       'left-top': 'left top',
177 |       right: 'right',
178 |       'right-bottom': 'right bottom',
179 |       'right-top': 'right top',
180 |       top: 'top',
181 |     },
182 |     backgroundSize: {
183 |       auto: 'auto',
184 |       cover: 'cover',
185 |       contain: 'contain',
186 |     },
187 |     borderColor: theme => ({
188 |       ...theme('colors'),
189 |       default: theme('colors.gray.300', 'currentColor'),
190 |     }),
191 |     borderRadius: {
192 |       none: '0',
193 |       sm: '.125rem',
194 |       default: '.25rem',
195 |       lg: '.5rem',
196 |       full: '9999px',
197 |     },
198 |     borderWidth: {
199 |       default: '1px',
200 |       '0': '0',
201 |       '2': '2px',
202 |       '4': '4px',
203 |       '8': '8px',
204 |     },
205 |     boxShadow: {
206 |       xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
207 |       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
208 |       default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
209 |       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
210 |       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
211 |       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
212 |       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
213 |       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
214 |       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
215 |       none: 'none',
216 |     },
217 |     container: {
218 |       center: true
219 |     },
220 |     cursor: {
221 |       auto: 'auto',
222 |       default: 'default',
223 |       pointer: 'pointer',
224 |       wait: 'wait',
225 |       text: 'text',
226 |       move: 'move',
227 |       'not-allowed': 'not-allowed',
228 |     },
229 |     divideColor: theme => theme('borderColor'),
230 |     divideWidth: theme => theme('borderWidth'),
231 |     fill: {
232 |       current: 'currentColor',
233 |     },
234 |     flex: {
235 |       '1': '1 1 0%',
236 |       auto: '1 1 auto',
237 |       initial: '0 1 auto',
238 |       none: 'none',
239 |     },
240 |     flexGrow: {
241 |       '0': 0,
242 |       default: 1,
243 |     },
244 |     flexShrink: {
245 |       '0': 0,
246 |       default: 1,
247 |     },
248 |     fontFamily: {
249 |       sans: [
250 |         '-apple-system',
251 |         'BlinkMacSystemFont',
252 |         '"Segoe UI"',
253 |         'Roboto',
254 |         '"Helvetica Neue"',
255 |         'Arial',
256 |         '"Noto Sans"',
257 |         'sans-serif',
258 |         '"Apple Color Emoji"',
259 |         '"Segoe UI Emoji"',
260 |         '"Segoe UI Symbol"',
261 |         '"Noto Color Emoji"',
262 |       ],
263 |       serif: [
264 |         'Georgia',
265 |         'Cambria',
266 |         '"Times New Roman"',
267 |         'Times',
268 |         'serif'
269 |       ],
270 |       mono: [
271 |         'SFMono-Regular',
272 |         'Menlo',
273 |         'Monaco',
274 |         'Consolas',
275 |         '"Liberation Mono"',
276 |         '"Courier New"',
277 |         'monospace',
278 |       ],
279 |     },
280 |     fontSize: {
281 |       xs: '.75rem',
282 |       sm: '.875rem',
283 |       base: '1rem',
284 |       lg: '1.125rem',
285 |       xl: '1.25rem',
286 |       '2xl': '1.5rem',
287 |       '3xl': '1.875rem',
288 |       '4xl': '2.25rem',
289 |       '5xl': '3rem',
290 |       '6xl': '4rem',
291 |     },
292 |     fontWeight: {
293 |       hairline: 100,
294 |       thin: 200,
295 |       light: 300,
296 |       normal: 400,
297 |       medium: 500,
298 |       semibold: 600,
299 |       bold: 700,
300 |       extrabold: 800,
301 |       black: 900,
302 |     },
303 |     height: theme => ({
304 |       auto: 'auto',
305 |       ...theme('spacing'),
306 |       full: '100%',
307 |       screen: '100vh',
308 |     }),
309 |     inset: {
310 |       '0': 0,
311 |       auto: 'auto',
312 |     },
313 |     letterSpacing: {
314 |       tighter: '-.05em',
315 |       tight: '-.025em',
316 |       normal: '0',
317 |       wide: '.025em',
318 |       wider: '.05em',
319 |       widest: '.1em',
320 |     },
321 |     lineHeight: {
322 |       none: '1',
323 |       tight: '1.25',
324 |       snug: '1.375',
325 |       normal: '1.5',
326 |       relaxed: '1.625',
327 |       code: '1.75',
328 |       loose: '2',
329 |       '3': '.75rem',
330 |       '4': '1rem',
331 |       '5': '1.25rem',
332 |       '6': '1.5rem',
333 |       '7': '1.75rem',
334 |       '8': '2rem',
335 |       '9': '2.25rem',
336 |       '10': '2.5rem',
337 |     },
338 |     listStyleType: {
339 |       none: 'none',
340 |       disc: 'disc',
341 |       decimal: 'decimal',
342 |     },
343 |     margin: (theme, { negative }) => ({
344 |       auto: 'auto',
345 |       ...theme('spacing'),
346 |       ...negative(theme('spacing')),
347 |     }),
348 |     maxHeight: {
349 |       cover: '32rem',
350 |       full: '100%',
351 |       screen: '100vh',
352 |     },
353 |     maxWidth: (theme, { breakpoints }) => ({
354 |       none: 'none',
355 |       xs: '20rem',
356 |       sm: '24rem',
357 |       md: '28rem',
358 |       lg: '32rem',
359 |       xl: '36rem',
360 |       '2xl': '42rem',
361 |       '3xl': '48rem',
362 |       '4xl': '56rem',
363 |       '5xl': '64rem',
364 |       '6xl': '72rem',
365 |       full: '100%',
366 |       ...breakpoints(theme('screens')),
367 |     }),
368 |     minHeight: {
369 |       '0': '0',
370 |       cover: '32rem',
371 |       full: '100%',
372 |       screen: '100vh',
373 |     },
374 |     minWidth: {
375 |       '0': '0',
376 |       full: '100%',
377 |     },
378 |     objectPosition: {
379 |       bottom: 'bottom',
380 |       center: 'center',
381 |       left: 'left',
382 |       'left-bottom': 'left bottom',
383 |       'left-top': 'left top',
384 |       right: 'right',
385 |       'right-bottom': 'right bottom',
386 |       'right-top': 'right top',
387 |       top: 'top',
388 |     },
389 |     opacity: {
390 |       '0': '0',
391 |       '25': '.25',
392 |       '50': '.5',
393 |       '75': '.75',
394 |       '100': '1',
395 |     },
396 |     order: {
397 |       first: '-9999',
398 |       last: '9999',
399 |       none: '0',
400 |       '1': '1',
401 |       '2': '2',
402 |       '3': '3',
403 |       '4': '4',
404 |       '5': '5',
405 |       '6': '6',
406 |       '7': '7',
407 |       '8': '8',
408 |       '9': '9',
409 |       '10': '10',
410 |       '11': '11',
411 |       '12': '12',
412 |     },
413 |     padding: theme => theme('spacing'),
414 |     space: (theme, { negative }) => ({
415 |       ...theme('spacing'),
416 |       ...negative(theme('spacing')),
417 |     }),
418 |     stroke: {
419 |       current: 'currentColor',
420 |     },
421 |     strokeWidth: {
422 |       '0': '0',
423 |       '1': '1',
424 |       '2': '2',
425 |     },
426 |     textColor: theme => theme('colors'),
427 |     width: theme => ({
428 |       auto: 'auto',
429 |       ...theme('spacing'),
430 |       '1/2': '50%',
431 |       '1/3': '33.33333%',
432 |       '2/3': '66.66667%',
433 |       '1/4': '25%',
434 |       '2/4': '50%',
435 |       '3/4': '75%',
436 |       '1/5': '20%',
437 |       '2/5': '40%',
438 |       '3/5': '60%',
439 |       '4/5': '80%',
440 |       '1/6': '16.66667%',
441 |       '2/6': '33.33333%',
442 |       '3/6': '50%',
443 |       '4/6': '66.66667%',
444 |       '5/6': '83.33333%',
445 |       '1/12': '8.33333%',
446 |       '2/12': '16.66667%',
447 |       '3/12': '25%',
448 |       '4/12': '33.33333%',
449 |       '5/12': '41.66667%',
450 |       '6/12': '50%',
451 |       '7/12': '58.33333%',
452 |       '8/12': '66.66667%',
453 |       '9/12': '75%',
454 |       '10/12': '83.33333%',
455 |       '11/12': '91.66667%',
456 |       full: '100%',
457 |       screen: '100vw',
458 |     }),
459 |     zIndex: {
460 |       auto: 'auto',
461 |       '0': 0,
462 |       '10': 10,
463 |       '20': 20,
464 |       '30': 30,
465 |       '40': 40,
466 |       '50': 50,
467 |     },
468 |     gap: theme => theme('spacing'),
469 |     gridTemplateColumns: {
470 |       none: 'none',
471 |       '1': 'repeat(1, minmax(0, 1fr))',
472 |       '2': 'repeat(2, minmax(0, 1fr))',
473 |       '3': 'repeat(3, minmax(0, 1fr))',
474 |       '4': 'repeat(4, minmax(0, 1fr))',
475 |       '5': 'repeat(5, minmax(0, 1fr))',
476 |       '6': 'repeat(6, minmax(0, 1fr))',
477 |       '7': 'repeat(7, minmax(0, 1fr))',
478 |       '8': 'repeat(8, minmax(0, 1fr))',
479 |       '9': 'repeat(9, minmax(0, 1fr))',
480 |       '10': 'repeat(10, minmax(0, 1fr))',
481 |       '11': 'repeat(11, minmax(0, 1fr))',
482 |       '12': 'repeat(12, minmax(0, 1fr))',
483 |     },
484 |     gridColumn: {
485 |       auto: 'auto',
486 |       'span-1': 'span 1 / span 1',
487 |       'span-2': 'span 2 / span 2',
488 |       'span-3': 'span 3 / span 3',
489 |       'span-4': 'span 4 / span 4',
490 |       'span-5': 'span 5 / span 5',
491 |       'span-6': 'span 6 / span 6',
492 |       'span-7': 'span 7 / span 7',
493 |       'span-8': 'span 8 / span 8',
494 |       'span-9': 'span 9 / span 9',
495 |       'span-10': 'span 10 / span 10',
496 |       'span-11': 'span 11 / span 11',
497 |       'span-12': 'span 12 / span 12',
498 |     },
499 |     gridColumnStart: {
500 |       auto: 'auto',
501 |       '1': '1',
502 |       '2': '2',
503 |       '3': '3',
504 |       '4': '4',
505 |       '5': '5',
506 |       '6': '6',
507 |       '7': '7',
508 |       '8': '8',
509 |       '9': '9',
510 |       '10': '10',
511 |       '11': '11',
512 |       '12': '12',
513 |       '13': '13',
514 |     },
515 |     gridColumnEnd: {
516 |       auto: 'auto',
517 |       '1': '1',
518 |       '2': '2',
519 |       '3': '3',
520 |       '4': '4',
521 |       '5': '5',
522 |       '6': '6',
523 |       '7': '7',
524 |       '8': '8',
525 |       '9': '9',
526 |       '10': '10',
527 |       '11': '11',
528 |       '12': '12',
529 |       '13': '13',
530 |     },
531 |     gridTemplateRows: {
532 |       none: 'none',
533 |       '1': 'repeat(1, minmax(0, 1fr))',
534 |       '2': 'repeat(2, minmax(0, 1fr))',
535 |       '3': 'repeat(3, minmax(0, 1fr))',
536 |       '4': 'repeat(4, minmax(0, 1fr))',
537 |       '5': 'repeat(5, minmax(0, 1fr))',
538 |       '6': 'repeat(6, minmax(0, 1fr))',
539 |     },
540 |     gridRow: {
541 |       auto: 'auto',
542 |       'span-1': 'span 1 / span 1',
543 |       'span-2': 'span 2 / span 2',
544 |       'span-3': 'span 3 / span 3',
545 |       'span-4': 'span 4 / span 4',
546 |       'span-5': 'span 5 / span 5',
547 |       'span-6': 'span 6 / span 6',
548 |     },
549 |     gridRowStart: {
550 |       auto: 'auto',
551 |       '1': '1',
552 |       '2': '2',
553 |       '3': '3',
554 |       '4': '4',
555 |       '5': '5',
556 |       '6': '6',
557 |       '7': '7',
558 |     },
559 |     gridRowEnd: {
560 |       auto: 'auto',
561 |       '1': '1',
562 |       '2': '2',
563 |       '3': '3',
564 |       '4': '4',
565 |       '5': '5',
566 |       '6': '6',
567 |       '7': '7',
568 |     },
569 |     transformOrigin: {
570 |       center: 'center',
571 |       top: 'top',
572 |       'top-right': 'top right',
573 |       right: 'right',
574 |       'bottom-right': 'bottom right',
575 |       bottom: 'bottom',
576 |       'bottom-left': 'bottom left',
577 |       left: 'left',
578 |       'top-left': 'top left',
579 |     },
580 |     scale: {
581 |       '0': '0',
582 |       '50': '.5',
583 |       '75': '.75',
584 |       '90': '.9',
585 |       '95': '.95',
586 |       '100': '1',
587 |       '105': '1.05',
588 |       '110': '1.1',
589 |       '125': '1.25',
590 |       '150': '1.5',
591 |     },
592 |     rotate: {
593 |       '-180': '-180deg',
594 |       '-90': '-90deg',
595 |       '-45': '-45deg',
596 |       '0': '0',
597 |       '45': '45deg',
598 |       '90': '90deg',
599 |       '180': '180deg',
600 |     },
601 |     translate: (theme, { negative }) => ({
602 |       ...theme('spacing'),
603 |       ...negative(theme('spacing')),
604 |       '-full': '-100%',
605 |       '-1/2': '-50%',
606 |       '1/2': '50%',
607 |       full: '100%',
608 |     }),
609 |     skew: {
610 |       '-12': '-12deg',
611 |       '-6': '-6deg',
612 |       '-3': '-3deg',
613 |       '0': '0',
614 |       '3': '3deg',
615 |       '6': '6deg',
616 |       '12': '12deg',
617 |     },
618 |     transitionProperty: {
619 |       none: 'none',
620 |       all: 'all',
621 |       default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
622 |       colors: 'background-color, border-color, color, fill, stroke',
623 |       opacity: 'opacity',
624 |       shadow: 'box-shadow',
625 |       transform: 'transform',
626 |     },
627 |     transitionTimingFunction: {
628 |       linear: 'linear',
629 |       in: 'cubic-bezier(0.4, 0, 1, 1)',
630 |       out: 'cubic-bezier(0, 0, 0.2, 1)',
631 |       'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
632 |     },
633 |     transitionDuration: {
634 |       '75': '75ms',
635 |       '100': '100ms',
636 |       '150': '150ms',
637 |       '200': '200ms',
638 |       '300': '300ms',
639 |       '500': '500ms',
640 |       '700': '700ms',
641 |       '1000': '1000ms',
642 |     },
643 |     transitionDelay: {
644 |       '75': '75ms',
645 |       '100': '100ms',
646 |       '150': '150ms',
647 |       '200': '200ms',
648 |       '300': '300ms',
649 |       '500': '500ms',
650 |       '700': '700ms',
651 |       '1000': '1000ms',
652 |     },
653 |   },
654 |   variants: {
655 |     accessibility: ['responsive', 'focus'],
656 |     alignContent: ['responsive'],
657 |     alignItems: ['responsive'],
658 |     alignSelf: ['responsive'],
659 |     appearance: ['responsive'],
660 |     backgroundAttachment: ['responsive'],
661 |     backgroundColor: ['responsive', 'hover', 'focus'],
662 |     backgroundPosition: ['responsive'],
663 |     backgroundRepeat: ['responsive'],
664 |     backgroundSize: ['responsive'],
665 |     borderCollapse: ['responsive'],
666 |     borderColor: ['responsive', 'hover', 'focus'],
667 |     borderRadius: ['responsive'],
668 |     borderStyle: ['responsive'],
669 |     borderWidth: ['responsive'],
670 |     boxShadow: ['responsive', 'hover', 'focus'],
671 |     boxSizing: ['responsive'],
672 |     cursor: ['responsive'],
673 |     display: ['responsive'],
674 |     divideColor: ['responsive'],
675 |     divideWidth: ['responsive'],
676 |     fill: ['responsive'],
677 |     flex: ['responsive'],
678 |     flexDirection: ['responsive'],
679 |     flexGrow: ['responsive'],
680 |     flexShrink: ['responsive'],
681 |     flexWrap: ['responsive'],
682 |     float: ['responsive'],
683 |     clear: ['responsive'],
684 |     fontFamily: ['responsive'],
685 |     fontSize: ['responsive'],
686 |     fontSmoothing: ['responsive'],
687 |     fontStyle: ['responsive'],
688 |     fontWeight: ['responsive', 'hover', 'focus'],
689 |     height: ['responsive'],
690 |     inset: ['responsive'],
691 |     justifyContent: ['responsive'],
692 |     letterSpacing: ['responsive'],
693 |     lineHeight: ['responsive'],
694 |     listStylePosition: ['responsive'],
695 |     listStyleType: ['responsive'],
696 |     margin: ['responsive'],
697 |     maxHeight: ['responsive'],
698 |     maxWidth: ['responsive'],
699 |     minHeight: ['responsive'],
700 |     minWidth: ['responsive'],
701 |     objectFit: ['responsive'],
702 |     objectPosition: ['responsive'],
703 |     opacity: ['responsive', 'hover', 'focus'],
704 |     order: ['responsive'],
705 |     outline: ['responsive', 'focus'],
706 |     overflow: ['responsive'],
707 |     padding: ['responsive'],
708 |     placeholderColor: ['responsive', 'focus'],
709 |     pointerEvents: ['responsive'],
710 |     position: ['responsive'],
711 |     resize: ['responsive'],
712 |     space: ['responsive'],
713 |     stroke: ['responsive'],
714 |     strokeWidth: ['responsive'],
715 |     tableLayout: ['responsive'],
716 |     textAlign: ['responsive'],
717 |     textColor: ['responsive', 'hover', 'group-hover', 'focus'],
718 |     textDecoration: ['responsive', 'hover', 'focus'],
719 |     textTransform: ['responsive'],
720 |     userSelect: ['responsive'],
721 |     verticalAlign: ['responsive'],
722 |     visibility: ['responsive'],
723 |     whitespace: ['responsive'],
724 |     width: ['responsive'],
725 |     wordBreak: ['responsive'],
726 |     zIndex: ['responsive'],
727 |     gap: ['responsive'],
728 |     gridAutoFlow: ['responsive'],
729 |     gridTemplateColumns: ['responsive'],
730 |     gridColumn: ['responsive'],
731 |     gridColumnStart: ['responsive'],
732 |     gridColumnEnd: ['responsive'],
733 |     gridTemplateRows: ['responsive'],
734 |     gridRow: ['responsive'],
735 |     gridRowStart: ['responsive'],
736 |     gridRowEnd: ['responsive'],
737 |     transform: ['responsive'],
738 |     transformOrigin: ['responsive'],
739 |     scale: ['responsive', 'hover', 'focus'],
740 |     rotate: ['responsive', 'hover', 'focus'],
741 |     translate: ['responsive', 'hover', 'focus'],
742 |     skew: ['responsive', 'hover', 'focus'],
743 |     transitionProperty: ['responsive'],
744 |     transitionTimingFunction: ['responsive'],
745 |     transitionDuration: ['responsive'],
746 |     transitionDelay: ['responsive'],
747 |   },
748 |   corePlugins: {},
749 |   plugins: [],
750 | }
751 | 


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