egoist / loglive Goto Github PK

View Code? Open in Web Editor NEW

150.0 4.0 20.0 401 KB

Render changelog as a website on the fly.

Home Page: https://loglive.netlify.com

License: MIT License

HTML 3.06% JavaScript 78.62% Vue 18.33%

changelog

loglive's Introduction

LogLive

This is inspired by headwayapp.co but as a single script you can add to an HTML file.

Install

yarn add loglive

Usage
Changelog Format
Front Matters
- website
Contributing
Author

Usage

You can simply create an index.html and include loglive there:

<html>
<head>
  <title>App Title</title>
  <link rel="stylesheet" href="https://unpkg.com/loglive/dist/loglive.css">
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/loglive"></script>
  <script>
    new LogLive({
      el: '#app'
    })
    // And that's it!
  </script>
</body>
</html>

Then you can start to write a CHANGELOG.md, by default LogLive will read from http://your-website/CHANGELOG.md, however you can use a custom path:

new LogLive({
  el: '#app',
  changelog: '/path/to/my-changelog.md'
})

You can also use it as a Vue component

<template>
  <div id="app">
    <log-live 
      changelog="changelog">
    </log-live>
  </div>
</template>

<script>
import { LogLive } from 'loglive'

export default {
  components: {
    LogLive
  },

  data() {
    return {
      changelog: '/changelog.md'
    }
  }
}
</script>

Changelog Format

Example

# My Website

## Add TypeScript support (2016-07-23)

### New

- Now added Typescript support.
- Some other new stuffs.

### Fix

Fixed some babel problems.

Site name

The value of h1 heading will be used as website name:

# My Website

Changelog Title

Changelog title is an h2 heading which consists of two parts, title and date and date is totally optional.

## changelog title (date)

Sometime you just want to use semantic version as the changelog title:

## 1.3.0 (2015-02-43)

Change Type

Change type is an h3 heading which describes the type of the change, eg: Fix. And it shows up like:

By default we have pre-defined colors for specific types which include: Fix Breaking New, other types will get a random color.

You can also set color for custom change type:

new LogLive({
  colors: {
    'Bug fixes': '#342343'
  }
})

Front Matters

website

You changelog is born for your product, so adding a link to your actual product is necessary:

---
website: http://my-fantastic-app.com
---

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

loglive © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily

loglive's People

Contributors

Stargazers

Watchers

Forkers

m-khosravi puppycodes oorahdev dumbdevpr rmsy devpascoe ridaamirini mohancm100 timhaywood 0xyittle sediug pr0h4cker robbiegd janineamelie hiteshmah-jan hzck7 oyuh codexjoin iq-scm mranv

loglive's Issues

Show only provided versions/sections

Hi there and thanks for a great Vue component/changelog generator : )

We'd love to use this to show the changed/newest versions of the changelog to a user.
Would it be possible to provide a semver from which upwards to show versions?
So if we'd provide 1.4.2, it'd show from there upwards (and maybe also exclude [Unreleased])

CORS Policy

Fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is there a way to avoid this problem?

Support link titles

Using anchorjs this is easy!

https://www.bryanbraun.com/anchorjs

Same behavior than GitHub

TypeError: Body has already been consumed.

How it happens:

vue-router displays Changelog.vue
loading main page "home" then trying to load "changelog" page.
error doesnt happen when loading changelog page first.

Error:

TypeError: Body has already been consumed. vendors~Changelog.js line 175 > eval:427:20
return res.text();
Error location:

methods:{
    fetchFile: function fetchFile() {
      var _this = this;

      var changelog = this.changelog || '/CHANGELOG.md';
      __WEBPACK_IMPORTED_MODULE_0_unfetch___default()(changelog).then(function (res) {
        return res.text();
      }).then(function (res) {
        var _fm = Object(__WEBPACK_IMPORTED_MODULE_1__utils_front_matter__["a" /* default */])(res),
            body = _fm.body,
            attributes = _fm.attributes;

        _this.site = attributes;
        _this.html = Object(__WEBPACK_IMPORTED_MODULE_2__utils_markdown__["a" /* default */])(body, {
          site: _this.site,
          colors: Object.assign({
            Fix: '#b26cee',
            New: '#3778ff',
            Breaking: '#ff9800'
          }, _this.colors || {})
        });
      });
    },
    getDomain: function getDomain(url) {
      return url.replace(/^https?:\/\//, '');
    }
  }
});

Changelog.vue

<template>
  <div id="changelog-container">
    <log-live :changelog="changelog"></log-live>
  </div>
</template>

<script>
import { LogLive } from "loglive";
export default {
  name: "changelog",
  components: {
    LogLive
  },
  data() {
    return {
      changelog: "/CHANGELOG.md"
    };
  },
  mounted() {}
};
</script>

<style scoped>
@import url("../css/loglive.css");
#changelog-container {
  min-height: 100vh;
  max-width: 50%;
  margin: auto;
  padding: 0 10px;
}
</style>

Support name and url as arguments

Hey,

Thanks for this project, it's awesome!

I'm trying to add it into my current projects. For example, loading voll changelog, this is the result:

This happenede because mi changelog doesn't have a header defined. I could do it, but this means I have to update +200 repositories!

Could be possible add name and url on the component arguments? Like:

new LogLive({
      el: '#app',
      changelog: 'https://raw.githubusercontent.com/Kikobeats/voll/master/CHANGELOG.md',
      name: 'voll',
      url: 'https://voll.js.org' 
    })

Expected result:

Customize CSS

I'm experimenting with changelog-microservice viewing how popular changelog files are rendered.

An example could be:

I know that the scope of this project is provide a good visualization based in a opiniated markdown format, but, because each changelog could be different, do you think that could be possible provide a way to format CSS just similar to GitHub Markdown files?

1.0 Plan

Rewrite with React
Usage with Next.js
Custom themes
Support multi projects, like https://changelog.changefeed.app

Change Timezone

Hello, what timezone does loglive use?
How do I change the timezone because I noticed the time is somehow inconsistent.