Static website with HUGO - Shortcodes

How to display a GitLab snippet

By default, HUGO provides a gist shortcode to include GitHub gists in a post. But there is no shortcode for GitLab snippets. Let’s create it. For more details I wish you to have a look to this post.

Create mygitlabset.html file

C:\hugo\sites\blog\layouts\shortcodes>dir
04/06/2018  15:21    <DIR>          .
04/06/2018  15:21    <DIR>          ..
04/06/2018  15:21               0 mygitlabset.html

Add content

<script src="{{.Get "src"}}"></script>

Use this shortcode in md files

cms hugo gitlab shortcode

Displaying example

Here is a GitLab snippet (GitHub gist like) from the graphql post.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
'use strict';

/* settings */
const proxyPort = 3000;
const mongooseURL = 'mongodb://localhost:27017/nrghDB';

/* npm modules */
const express = require('express');
const mongoose = require('mongoose');
const graphqlHTTP = require('express-graphql');
const graphql = require('graphql');

const app = express();

/* to support JSON-encoded and URL-encoded bodies */
app.use(express.json());
app.use(express.urlencoded({'extended': true}));

/* we add two api routers */
var restApiRouter = express.Router();
var graphqlApiRouter = express.Router();
app.use('/api/rest', restApiRouter);
app.use('/api/graphql', graphqlApiRouter);

/* ============================== */
/* ==== MONGOOSE DEFINITIONS ==== */
/* ============================== */
/* create a mongoose schema */
var productSchema = mongoose.Schema({
  name: String,
  price: Number,
  desc: String
});

/* create a mongoose model */
var productModel = mongoose.model('Product', productSchema);

/* remove function : returns a promise */
var removeAllProducts = function () {
  console.log('removing all products');
  return productModel.remove(); // promise (see mongoose doc)
};

/* save function : returns a promise */
var saveProduct = function (pProduct) {
  console.log('saving new product', JSON.stringify(pProduct));
  let newProduct = new productModel();
  newProduct.name = pProduct.name;
  newProduct.price = pProduct.price;
  newProduct.desc = pProduct.desc;  
  return newProduct.save(); // promise (see mongoose doc)
};

/* find function : returns a promise */
var listProducts = function (pQuery) {
  console.log('listing products');
  let query = pQuery ? pQuery : {};
  let projection = { '_id': 0, '__v': 0 };
  return productModel.find(query, projection).exec(); // promise (see mongoose doc)
};

/* ============================== */
/* ==== API REST DEFINITIONS ==== */
/* ============================== */
/* our first REST API method */
restApiRouter.get('/', function (req, res) {
  res.status(200).json({ 'message': 'this is our first REST API method, server is running' });
  return;
});

/* get products list : REST API method */
restApiRouter.get('/products', async function (req, res) {
  let products = [];
  try {
    products = await listProducts();
    res.status(200).json(products);
  } catch (err) {
    res.status(500).json(err); // displays error content : dangerous for security reason : only for demo purpose
  }
  return;
});

/* create a product : REST API method */
restApiRouter.post('/products', async function (req, res) {
  try {
    let product = await saveProduct(req.body);
    res.status(200).json(product);
  } catch (err) {
    res.status(500).json(err); // displays error content : dangerous for security reason : only for demo purpose
  }
  return;
});

/* ============================== */
/* == API GRAPHQL DEFINITIONS  == */
/* ============================== */
/* our GraphQL API */
// == 1 == create GraphQL schema
let schema = graphql.buildSchema(`
type Product {
  name: String!
  price: Int
  desc: String
}

input ProductInput {
  name: String!
  price: Int
  desc: String
}

type Query {
  message: String,
  products(name: String): [Product]
}

type Mutation  {
  saveProduct(input: ProductInput): Product
}  
`);

// == 2 == our resolvers
var root = {
  message: () => { return 'this is our first GraphQL API method, server is running'; },
  products: async ({ name }) => {
    return await listProducts(name ? { 'name': name } : {});
  },
  saveProduct: async ({ input }) => {
    return await saveProduct(input);
  },
};

graphqlApiRouter.use('/', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

/* ============================== */
/* ====== STARTING WEB PROXY ==== */
/* ============================== */
/* let's start ! */
// == 1 ==
mongoose.connect(mongooseURL, function (error) {
  if (error) {
    console.log('FAILED : Unable to connect to MongoDB [%s]', mongooseURL);
    console.log('ABORTED : API REST and GraphQL server not started');
    process.exit(0);
  }
  else {
    console.log('SUCCEED : Connected to MongoDB [%s]', mongooseURL);

    // == 2 == 
    app.listen(proxyPort, async function () {
      console.log('SUCCEED : API REST and GrapQL server started on port [%d]', proxyPort);

      // == 3 ==
      try { await removeAllProducts(); }
      catch (err) { console.log(err); }

      try { await saveProduct({ 'name': 'desktop', 'price': 1000, 'desc': 'gamer desktop' }); }
      catch (err) { console.log(err); }
      try { await saveProduct({ 'name': 'laptop', 'price': 1500, 'desc': 'gamer laptop' }); }
      catch (err) { console.log(err); }
    });
  }
});