From 9e25941feef15677d5f8a9f91a4b5f8d0a1adf18 Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 9 Jan 2020 23:37:36 -0600 Subject: [PATCH] Removed Example files, and wrote a post. --- content/posts/2019-03-01-markdown-styling.md | 108 ---------- content/posts/2019-03-02-authors.md | 33 --- .../posts/2019-03-02-deploying-your-site.md | 24 --- content/posts/2019-03-02-getting-started.md | 147 ------------- content/posts/2019-03-02-tags.md | 45 ---- content/posts/2019-03-02-writing-posts.md | 193 ------------------ content/posts/2019-12-04-building-swatchit.md | 40 ++++ .../2019-12-04-my-first-gridsome-post.md | 19 -- .../posts/dummy/adventures-sherlock-holmes.md | 38 ---- content/posts/dummy/bleda-the-hunnic-ruler.md | 28 --- content/posts/dummy/bob-ross-quotes.md | 26 --- .../posts/dummy/extraterrestrial-sightings.md | 27 --- content/posts/dummy/jeffsum.md | 32 --- .../posts/dummy/key-to-prototyping-tool.md | 28 --- content/posts/dummy/sweetest-ipsum.md | 23 --- src/components/Footer.vue | 7 - src/components/PostHeader.vue | 3 - src/layouts/Default.vue | 18 +- src/pages/About.vue | 4 - src/templates/Author.vue | 3 - src/templates/Tag.vue | 3 - yarn.lock | 5 - 22 files changed, 52 insertions(+), 802 deletions(-) delete mode 100644 content/posts/2019-03-01-markdown-styling.md delete mode 100755 content/posts/2019-03-02-authors.md delete mode 100755 content/posts/2019-03-02-deploying-your-site.md delete mode 100755 content/posts/2019-03-02-getting-started.md delete mode 100755 content/posts/2019-03-02-tags.md delete mode 100755 content/posts/2019-03-02-writing-posts.md create mode 100644 content/posts/2019-12-04-building-swatchit.md delete mode 100755 content/posts/2019-12-04-my-first-gridsome-post.md delete mode 100755 content/posts/dummy/adventures-sherlock-holmes.md delete mode 100755 content/posts/dummy/bleda-the-hunnic-ruler.md delete mode 100755 content/posts/dummy/bob-ross-quotes.md delete mode 100755 content/posts/dummy/extraterrestrial-sightings.md delete mode 100755 content/posts/dummy/jeffsum.md delete mode 100755 content/posts/dummy/key-to-prototyping-tool.md delete mode 100755 content/posts/dummy/sweetest-ipsum.md diff --git a/content/posts/2019-03-01-markdown-styling.md b/content/posts/2019-03-01-markdown-styling.md deleted file mode 100644 index ad8846f..0000000 --- a/content/posts/2019-03-01-markdown-styling.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: "Markdown styling" -description: "Markdown post content stress test. See how your post content is being styled with Tailwind CSS." -date: 2019-02-27 17:54:43 -author: Christian -tags: ['markdown', 'design'] ---- - -**Blog posts in Bleda are written using Markdown. However, you are free to use HTML inside Markdown, for any elements not covered by the spec.** - -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. - -**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. - -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 Linus Torvalds. Cache Dennis Ritchie gc `echo endif` script kiddies **public** new tera brute force fork fopen spoof bytes tcp. - -## Heading 2 -### Heading 3 -#### Heading 4 -##### Heading 5 -###### Heading 6 - -Heading 1 is the title of this page. You should only use it once in a document. - -## Links - -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. - -## Ordered list - -1. python -2. root -3. public -4. bypass - -## Unordered list - -- boolean -- stack -- foad -- tarball - -## A definition list - -This list is created using `
`, `
`, and `
` HTML tags. - -
-
First Term
-
This is the definition of the first term.
-
Second Term
-
This is one definition of the second term.
-
This is another definition of the second term.
-
- -## Blockquotes - -> 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 - -## Code - -### Fenced codeblocks - -Bleda 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). - -```vue - - - - - -``` - -Of course, it also styles `inline code blocks`. - -## Images - -Here's a local image: - -![iMac rear photo by Georgie Cobbs on Unsplash](/images/posts/georgie-cobbs-467924-unsplash.jpg) - -As you just saw, Gridsome loads it only when it enters your viewport. - -Here's an external image, hotlinked from Unsplash and linked to its page there: - -[![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) - -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. diff --git a/content/posts/2019-03-02-authors.md b/content/posts/2019-03-02-authors.md deleted file mode 100755 index c9c2d38..0000000 --- a/content/posts/2019-03-02-authors.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: "Adding a post author" -description: "Assigning authors to your blog posts in Bleda for Gridsome" -date: 2019-02-26 15:07:17 -tags: - - getting-started - - content -cover: ---- - -Just like with tags, you can also organise your posts by author. - -Simply add an `author: some-name` to your posts' Front Matter, and the author collection and URLs will be automatically generated. - -## Multi-author blogs - -You can use unique author names to create a 'multi-author' blog. Checkout the [getting started post](/getting-started-with-gridsome-and-bleda/), it's written by a different author. - -Note: a post can only have one author. - -## Author avatars - -Add author avatars in the `/static/images/authors` directory. The name of the file must match the author name in your Front Matter, and it must be a PNG. - -For example, `author: john-doe` will use `/static/images/authors/john-doe.png` - -If a matching avatar image is not found, or it failed to load, Bleda will try to use `default.png` from the same directory. - -## No authors? That's OK. - -You don't _have_ to add an author to a post. Posts with no author will simply not show the author name anywhere, and will not be included in the author archive pages. - -As you can see, this post was written by a ghost 😉 diff --git a/content/posts/2019-03-02-deploying-your-site.md b/content/posts/2019-03-02-deploying-your-site.md deleted file mode 100755 index 3f3f49b..0000000 --- a/content/posts/2019-03-02-deploying-your-site.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: "Deploying your site" -description: "How to deploy and host your static site" -date: 2019-02-25 18:23:53 -author: gridsome -tags: - - getting-started -cover: https://images.unsplash.com/photo-1533279443086-d1c19a186416?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=900&q=80 ---- - -Seriously, this is a static site. - -You could just run `gridsome build` and then upload the entire `dist` folder to any web host. - -## Deploy to Netlify đŸ”„ - -Simply connect Netlify to your GitHub repo and trigger a site rebuild every time you push to `master`. -Click this wonderful button to get started: - -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/hellocosmin/gridsome-starter-bleda) - -## Other services - -For other services, such as GitLab Pages or Amazon S3, checkout the [Gridsome deploy docs](https://gridsome.org/docs/deploy-to-amazon-s3). diff --git a/content/posts/2019-03-02-getting-started.md b/content/posts/2019-03-02-getting-started.md deleted file mode 100755 index bba93e7..0000000 --- a/content/posts/2019-03-02-getting-started.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: "Getting started" -slug: getting-started-with-gridsome-and-bleda -description: "Getting started with the Bleda blog starter theme for the Gridsome static site generator" -date: 2019-03-01 14:43:24 -author: bleda -tags: - - getting-started -cover: https://images.unsplash.com/photo-1521321205814-9d673c65c167?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80 ---- - -**Bleda** is a minimal blog starter theme for Gridsome, inspired by the design of the [Attila](https://github.com/zutrinken/attila) Ghost theme, and styled with [Tailwind CSS](https://tailwindcss.com). - -[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. - - -## Installation - -After installing Gridsome, run: - -``` -gridsome create my-website https://github.com/cossssmin/gridsome-starter-bleda.git -``` - -Then, `cd my-website` and `gridsome develop` to start a local development server. - -Alternatively, you can clone or download the [repo on GitHub](https://github.com/cossssmin/gridsome-starter-bleda). - -## Features - -- Sitemap -- RSS Feed -- Google Analytics -- Custom 404 Page -- Open Graph meta tags -- Code syntax highlighting -- Parallax post image covers -- Option for fullscreen covers -- Medium-like image lightbox -- Taxonomies: Tags and Authors -- Aproximate read time for posts -- Post excerpts: automatic or user-defined -- **Paginated** [blog](/2/), [tag](https://gridsome-starter-bleda.netlify.com/tag/dummy/), and [author](/author/gridsome/) archives -- Easily show post dates in your locale (moment.js) -- Posts show a warning if they're older than 1 year (configurable) - -## Configuration - -You'll need to change some Bleda defaults before deploying your own site. - -#### Google Analytics - -If you want to use Google Analytics, make sure to change the default tracking code in `gridsome.config.js`: - -```js -{ -use: '@gridsome/plugin-google-analytics', - options: { - id: 'UA-135446199-1' // <- change this - } -} -``` - -To disable GA, simply comment out or delete that entire code block. - -#### Sitemap - -Bleda uses Gridsome's official sitemap plugin. Simply change the default `siteUrl` in `gridsome.config.js`, and you're all set: - -```js -siteUrl: 'https://gridsome-starter-bleda.netlify.com', -``` - -When you build the site, a `sitemap.xml` will be automatically generated at the root of your site. -Read more in the [plugin's documentation](https://gridsome.org/plugins/@gridsome/plugin-sitemap). - -#### RSS Feed - -Update the feed title and all the default URLs, in `gridsome.config.js`: - -```js -{ - use: 'gridsome-plugin-rss', - options: { - contentTypeName: 'Post', - feedOptions: { - title: 'Bleda, a Gridsome blog starter', // <- update - feed_url: 'https://gridsome-starter-bleda.netlify.com/feed.xml', // <- update, leave the file name - site_url: 'https://gridsome-starter-bleda.netlify.com' // <- update - }, - feedItemOptions: node => ({ - title: node.title, - description: node.description, - url: 'https://gridsome-starter-bleda.netlify.com/' + node.slug, // <- update - author: node.author, - date: node.date - }), - output: { - name: 'feed.xml' // <- if you change this, also change it in the `feed_url` above - } - } -}, -``` - -## Customisation - -#### Old content alert - -Posts that are over one year old will show a warning like this one: - - - -This is a flexible alert component, defined in `/src/components/Alert.vue` and pulled into `/src/templates/Post.vue`: - -```vue - -``` -The `postIsOlderThanOneYear` computed property uses `moment.js`, so you can customise it to any date you need. - -The `color` prop can be any color name from your `tailwind.js` config. If you omit it, the alert will use blue as a fallback. - -#### Post dates in your language - -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: - -```vue - -``` - -For the single post view, do the same in `/src/templates/Post.vue`. - -#### Advanced customisation - -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 to know a bit about GraphQL. diff --git a/content/posts/2019-03-02-tags.md b/content/posts/2019-03-02-tags.md deleted file mode 100755 index 4613d5d..0000000 --- a/content/posts/2019-03-02-tags.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: "Organise content with tags" -description: "Using the tags taxonomy, defined as a collection in Gridsome, to categorise content" -slug: organise-content-tags -date: 2019-02-26 16:44:21 -author: gridsome ---- - -Tags in Bleda are defined in your posts's Front matter. - -You can specify them in either YAML format: - -```yaml ---- -# ... other fields -tags: - - getting-started - - content ---- -``` - -Or in array format: - -```yaml ---- -# ... other fields -tags: ['getting-started', 'content'] ---- -``` - -On archive pages (homepage, tags page, author page), only the first tag will be shown. The single post view will show all tags at the bottom. - -## Slug format - -Each tag must be written in 'slug' format: `lowercase-words-separated-by-a-dash` - -## Case-sensitive - -Tag names are case-sensitive. Because of this, you can't have a post tagged `design` and and another one tagged `Design`. - -## No tags? No problem! - -You don't _have_ to add tags to your posts: if you don't, the archives and single post views will simply not show them. - -This post has no tags 😎 diff --git a/content/posts/2019-03-02-writing-posts.md b/content/posts/2019-03-02-writing-posts.md deleted file mode 100755 index c11e231..0000000 --- a/content/posts/2019-03-02-writing-posts.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: "Writing posts" -description: "Writing posts in Markdown with Bleda for Gridsome" -date: 2019-02-28 15:16:11 -author: gridsome -slug: writing-posts-markdown -tags: - - getting-started - - content -cover: https://images.unsplash.com/photo-1539815913963-92c9bfeb9d1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&h=900&crop=bottom&q=80 ---- - -The starter uses Gridsome's filesystem source plugin, which means blog posts are Markdown files that exist in the `/content/posts` directory. - -## Creating a new post - -There are 2 ways you can create a new post with Bleda: - -1. Simply add a new, uniquely-named `*.md` file in the `/content/posts` directory - duh! -2. In your terminal, navigate to the project root and run this command: - - ```sh - npm run newpost "My post title" - ``` - - The quotes around the title are mandatory. - - This will create a new file named `YYYY-MM-DD-my-post-title.md` under `/content/posts`. - -## Supported Front Matter keys - -You can use the following Front Matter keys when creating a post: - -```yaml ---- -title: "Post title" # required -slug: post-title-custom-url # optional, override the auto-generated post slug -description: "Lorem ipsum description sit amet" # required, used in meta tags and RSS feed -date: 2019-03-01 17:54:43 # required; time is optional, but recommended for the