All Projects → egoist → Mordred

egoist / Mordred

Licence: mit
[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Mordred

Serverless With Next5 Boilerplate
Serverless.js with Next.js 5 on AWS, powered by the Serverless Framework
Stars: ✭ 100 (-51.92%)
Mutual labels:  nextjs, ssr
Gank
🦅 Gank api base △ next.js (react&ssr)
Stars: ✭ 122 (-41.35%)
Mutual labels:  nextjs, ssr
Next Express Bootstrap Boilerplate
⚡️ JavaScript boilerplate for a full stack app built using React.js, Next.js, Express.js, react-bootstrap, SCSS and full SSR with eslint.
Stars: ✭ 102 (-50.96%)
Mutual labels:  nextjs, ssr
Sails Nuxt
Sails + Nuxt + Vuetify Combo <3
Stars: ✭ 92 (-55.77%)
Mutual labels:  nuxtjs, ssr
Next Routes
Universal dynamic routes for Next.js
Stars: ✭ 2,354 (+1031.73%)
Mutual labels:  nextjs, ssr
Oh My Fullstack
🚀 Full stack web application skeleton (Next.js, Redux, RxJS, Immutable, Express)
Stars: ✭ 99 (-52.4%)
Mutual labels:  nextjs, ssr
Zendea
A free, open-source, self-hosted forum software written in Go 官方QQ群:656868
Stars: ✭ 116 (-44.23%)
Mutual labels:  nuxtjs, ssr
Nextjs Jwt Example
next.js authorization example including private route protection
Stars: ✭ 72 (-65.38%)
Mutual labels:  nextjs, ssr
Egg React Ssr
最小而美的Egg + React + SSR 服务端渲染应用骨架,同时支持JS和TS
Stars: ✭ 1,837 (+783.17%)
Mutual labels:  nextjs, ssr
Surmon.me
🆒 My personal website and blog, powered by @vuejs (3)
Stars: ✭ 1,767 (+749.52%)
Mutual labels:  nuxtjs, ssr
Next Firebase Ssr
An Next.js example repo for building authenticated pages with Firebase Authentication, cookies, and getServerSideProps
Stars: ✭ 192 (-7.69%)
Mutual labels:  nextjs, ssr
Next I18next
The easiest way to translate your NextJs apps.
Stars: ✭ 2,818 (+1254.81%)
Mutual labels:  nextjs, ssr
Vue Masonry Wall
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
Stars: ✭ 79 (-62.02%)
Mutual labels:  nuxtjs, ssr
Vue Family Bucket Ssr Koa2 Full Stack Development From Meituan
🚀🚀2020最新Vue全家桶+SSR+Koa2全栈开发☁
Stars: ✭ 100 (-51.92%)
Mutual labels:  nuxtjs, ssr
Vue Horizontal
An ultra simple pure vue horizontal layout for modern responsive web with zero dependencies. (SPA/SSG/SSR)
Stars: ✭ 75 (-63.94%)
Mutual labels:  nuxtjs, ssr
Wild Next
Our next.js boilerplate with sane base configuration.
Stars: ✭ 101 (-51.44%)
Mutual labels:  nextjs, ssr
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+414.9%)
Mutual labels:  nuxtjs, ssr
Laravel Vuejs.com
Laravel and VueJs Blog, using Laravel nova, GraphQL, NuxtJs, Apollo and ...more
Stars: ✭ 54 (-74.04%)
Mutual labels:  nuxtjs, ssr
Pathpida
TypeScript friendly internal link client for Next.js, Nuxt.js and Sapper.
Stars: ✭ 127 (-38.94%)
Mutual labels:  nextjs, nuxtjs
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+5703.85%)
Mutual labels:  nuxtjs, ssr

🤺 Mordred

npm version community

Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.

Features

✅ Inspired by Gatsby, you can query any data (Markdown, API, database, CMS) with GraphQL
✅ Automatically generate JavaScript client for better dev experience
✅ Framework agnostic, works with any framework that has SSG support
✅ Tons of plugins for popular headless CMS (not yet, we need your contribution!)

Table of Contents

Install

yarn add mordred

Usage with Next.js

Configuration

In next.config.js:

const { withMordred } = require('mordred/next')

module.exports = withMordred({
  // Extra Next.js config..
})

Then create a mordred.config.js in the same directory and use some plugins:

module.exports = {
  plugins: [
    // Load markdown files from file system
    {
      resolve: 'mordred-source-filesystem',
      options: {
        // This is where you'll be creating Markdown files
        path: __dirname + '/content',
      },
    },
    // Transform files to markdown nodes
    {
      resolve: 'mordred-transformer-markdown',
    },
  ],
}

You also need to install these plugins:

yarn add mordred-source-filesystem mordred-transformer-markdown

Using Data

Create a Markdown file in content folder (in your project root), like content/my-first-posts.md:

---
title: My First Post
date: 2020-04-24
---

This is my **first** post!

When you run next or next build, Mordred will generate a GraphQL client at mordred/graphql.js, then you can use the generated client to query data.

You should add this folder to .gitignore:

mordred/

Now in any page, query data in getStaticProps:

import { client } from '../mordred/graphql'

export const getStaticProps = async () => {
  const { allMarkdown } = await client.query({
    allMarkdown: [
      {
        limit: 20
      },
      {
        nodes: {
          id: true,
          slug: true,
          createdAt: true,
          updatedAt: true,
          html: true,
          frontmatter {
            title: true
          }
        }
      }
    ]
  })
  return {
    props: {
      allMarkdown
    },
  }
}

export default ({ allMarkdown }) => {
  return (
    <ul>
      {allMarkdown.nodes.map((post) => {
        return (
          <li key={post.id}>
            <Link href={`/post/${post.slug}`}>{post.title}</Link>
          </li>
        )
      })}
    </ul>
  )
}

The client.query syntax is very similar to GraphQL SDL except that it also provides type hints as you write, we use graphql-zeus to generate the client code.

Execute Raw Query

If you prefer GraphQL SDL over the JavaScript client, you can execute raw query too:

import { executeQuery, gql } from './path/to/mordred/graphql'

const { data, errors } = await executeQuery(
  gql`
    query($limit: Int!) {
      allMarkdown(limit: $limit) {
        id
      }
    }
  `,
  {
    limit: 20,
  },
)

Note that we use the gql tag here only for syntax highlighting in supported editors like VS Code, it's completely optional.

Module Alias

When your project has a deep nested folder structure, you might run into import hell:

import { client } from '../../mordred/graphql'

To simplify the import path, you can use paths option in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "mordred-graphql": ["./mordred/graphql"]
    }
  }
}

Now you can import form mordred-graphql instead.

Note that Next.js supports paths by default, but if you're using other tools which don't support this, you might find alias-hq helpful.

Exploring Data with GraphiQL

You can create an API at /api/graphql to explore data via GraphiQL:

import express from 'express'
import graphqlHTTP from 'express-graphql'
import { schema } from '../../mordred/graphql'

const app = express()

app.use(
  graphqlHTTP({
    schema,
    graphiql: true,
  }),
)

export default app

Plugin List

License

MIT © EGOIST (Kevin Titor)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].