init

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.saber
+*.log
+.DS_Store

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -0,0 +1,105 @@
+# saber-theme-minima
+
+> A Saber Port of the Default Jekyll Theme: Minima
+
+## Install
+
+```bash
+yarn add sass sass-loader saber-theme-minima
+```
+
+In your `saber-config.yml`:
+
+```yml
+theme: minima
+```
+
+This theme is better working with following plugins:
+
+- `saber-plugin-query-posts`: Inject `posts` to homepage's `page` prop, generate tag pages
+- `saber-plugin-generate-feed`: Generate JSON feed at `/feed.json`.
+
+```bash
+yarn add saber-plugin-query-posts saber-plugin-generate-feed
+```
+
+```yml
+plugins:
+  - resolve: saber-plugin-query-posts
+  - resolve: saber-plugin-generate-feed
+```
+
+## Site Config
+
+Configure site title, description etc in your `saber-config.yml`:
+
+```yml
+siteConfig:
+  title: My Site
+  description: About this website..
+  author: My Name
+  email: my@email.com
+```
+
+## Theme Config
+
+### Navbar
+
+Configure `nav` to show a set of links in header:
+
+```yml
+themeConfig:
+  nav:
+    - text: Home
+      link: /
+    - text: About
+      link: /about.html
+```
+
+### Social
+
+Configure the accounts of your social network to show at the bottom of homepage:
+
+```yml
+themeConfig:
+  social:
+    dribbble: username
+    facebook: username
+    flickr: username
+    github: username
+    instagram: username
+    linkedin: username
+    pinterest: username
+    twitter: username
+    youtube: username
+    telegram: username
+    microdotblog: username
+    googleplus: username
+    rss: true
+```
+
+### Comments
+
+You can use Disqus:
+
+```yml
+themeConfig:
+  disqus: disqus-short-name
+```
+
+Comments are only enabled for `post` layout, to disable comments in specific page, you can use the page attribute `comments`:
+
+```markdown
+---
+title: Hello
+layout: post
+date: 2018-08-12
+comments: false
+---
+
+Hello World!
+```
+
+## License
+
+MIT.

example/pages/_posts/my-example-post.md

@@ -0,0 +1,9 @@
+---
+title: My Example Post
+date: 2016-05-20
+layout: post
+---
+
+Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.
+
+No laudem altera adolescens has, volumus lucilius eum no. Eam ei nulla audiam efficiantur. Suas affert per no, ei tale nibh sea. Sea ne magna harum, in denique scriptorem sea, cetero alienum tibique ei eos. Labores persequeris referrentur eos ei.

example/pages/_posts/super-long-article.md

@@ -0,0 +1,11 @@
+---
+title: Some articles are just so long they deserve a really long title to see if things will break well
+layout: post
+date: 2016-05-18
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

example/pages/_posts/super-short-article.md

@@ -0,0 +1,7 @@
+---
+title: 'Some articles are just so short that we have to make the footer stick'
+date: 2016-05-19
+layout: post
+---
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

example/pages/about.md

@@ -0,0 +1,8 @@
+---
+title: About
+layout: page
+---
+
+This is the Saber port of the base Jekyll theme. Check out the [GitHub project](https://github.com/egoist/saber-theme-minima) for detailed usages.
+
+You can find out more info about customizing your theme, as well as basic Saber usage documentation at https://saberjs.org

example/saber-config.yml

@@ -0,0 +1,23 @@
+theme: ../
+
+siteConfig:
+  url: https://minima.saberjs.org
+  author: Author of This Site
+  email: author@your-domain.com
+  description: Write an awesome description for your new site here. You can edit this line in saber-config.yml. It will appear in your document head meta (for Google search results) site description.
+
+themeConfig:
+  nav:
+    - text: Home
+      link: /
+    - text: About
+      link: /about.html
+  social:
+    twitter: _saberjs
+    github: egoist
+    rss: true
+  disqus: saber-minima
+
+plugins:
+  - resolve: saber-plugin-query-posts
+  - resolve: saber-plugin-generate-feed

layouts/default.vue

@@ -0,0 +1,75 @@
+<template>
+  <Wrap :page="page">
+    <div class="home">
+      <h1 class="page-heading" v-if="page.attributes.title">{{ page.title }}</h1>
+
+      <slot name="default"></slot>
+
+      <h2
+        class="post-list-heading"
+        v-if="page.posts && page.posts.length > 0"
+      >{{ page.attributes.listTitle || 'Posts' }}</h2>
+
+      <ul class="post-list" v-if="page.posts && page.posts.length > 0">
+        <li v-for="post in page.posts" :key="post.attributes.permalink">
+          <span class="post-meta">{{ formatDate(post.attributes.createdAt) }}</span>
+          <h3>
+            <saber-link
+              class="post-link"
+              :to="post.attributes.permalink"
+            >{{ post.attributes.title }}</saber-link>
+          </h3>
+        </li>
+      </ul>
+
+      <div
+        class="pagination"
+        v-if="page.pagination && (page.pagination.hasNext || page.pagination.hasPrev)"
+      >
+        <router-link
+          class="prev-link"
+          :to="page.pagination.prevLink"
+          v-if="page.pagination.hasPrev"
+        >← Previous</router-link>
+        <router-link
+          class="next-link"
+          :to="page.pagination.nextLink"
+          v-if="page.pagination.hasNext"
+        >Next →</router-link>
+      </div>
+
+      <p class="feed-subscribe">
+        <svg class="svg-icon orange">
+          <use :xlink:href="getSvg('rss')"></use>
+        </svg>
+        <a :href="feedURL">Subscribe</a>
+      </p>
+    </div>
+  </Wrap>
+</template>
+
+<script>
+import { feedURL } from 'saber/variables'
+import formatDate from '../src/utils/formatDate'
+import Wrap from '../src/components/Wrap.vue'
+import getSvg from '../src/utils/getSvg'
+
+export default {
+  components: {
+    Wrap
+  },
+
+  props: ['page'],
+
+  data() {
+    return {
+      feedURL
+    }
+  },
+
+  methods: {
+    formatDate,
+    getSvg
+  }
+}
+</script>

layouts/page.vue

@@ -0,0 +1,25 @@
+<template>
+  <Wrap :page="page">
+    <article class="post">
+      <header class="post-header">
+        <h1 class="post-title">{{ page.attributes.title }}</h1>
+      </header>
+
+      <div class="post-content">
+        <slot name="default"></slot>
+      </div>
+    </article>
+  </Wrap>
+</template>
+
+<script>
+import Wrap from '../src/components/Wrap.vue'
+
+export default {
+  components: {
+    Wrap
+  },
+
+  props: ['page']
+}
+</script>

layouts/post.vue

@@ -0,0 +1,43 @@
+<template>
+  <Wrap :page="page">
+    <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+      <header class="post-header">
+        <h1 class="post-title p-name" itemprop="name headline">{{ page.attributes.title }}</h1>
+        <p class="post-meta">
+          <time
+            class="dt-published"
+            :datetime="page.attributes.createdAt"
+            itemprop="datePublished"
+          >{{ formatDate(page.attributes.createdAt) }}</time>
+        </p>
+      </header>
+
+      <div class="post-content e-content" itemprop="articleBody">
+        <slot name="default"/>
+      </div>
+
+      <Disqus v-if="page.attributes.comments !== false && $themeConfig.disqus" :permalink="page.attributes.permalink" :shortname="$themeConfig.disqus" />
+
+      <a class="u-url" :href="page.attributes.permalink" hidden></a>
+    </article>
+  </Wrap>
+</template>
+
+<script>
+import formatDate from '../src/utils/formatDate'
+import Wrap from '../src/components/Wrap.vue'
+import Disqus from '../src/components/Disqus.vue'
+
+export default {
+  components: {
+    Wrap,
+    Disqus
+  },
+
+  props: ['page'],
+
+  methods: {
+    formatDate
+  }
+}
+</script>

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "saber-theme-minima",
+  "version": "1.0.0",
+  "license": "MIT",
+  "files": [
+    "layouts",
+    "src",
+    "saber-browser.js"
+  ],
+  "scripts": {
+    "dev:example": "saber example",
+    "generate:example": "saber generate example"
+  },
+  "devDependencies": {
+    "saber": "^0.2.24",
+    "saber-plugin-generate-feed": "^0.0.3",
+    "saber-plugin-query-posts": "^0.0.4",
+    "sass": "^1.17.3",
+    "sass-loader": "^7.1.0"
+  },
+  "dependencies": {
+    "tinydate": "^1.0.1"
+  }
+}

saber-browser.js

@@ -0,0 +1 @@
+import './src/styles/minima.scss'

src/components/Disqus.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="disqus_thread"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    permalink: {
+      type: String,
+      required: true
+    },
+    shortname: {
+      type: String,
+      required: true
+    }
+  },
+
+  mounted() {
+    const { permalink } = this
+    window.disqus_config = function() {
+      this.page.url = permalink
+      this.page.identifier = permalink
+    }
+    const script = document.createElement('script')
+    script.async = true
+    script.src = `https://${
+      this.shortname
+    }.disqus.com/embed.js`
+    script.setAttribute('data-timestamp', +new Date())
+    document.body.appendChild(script)
+  }
+}
+</script>