Skip to content

Doc and example updates #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 3, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
[![Node Version](https://badgen.net/npm/node/@proangular/ngx-gist)](https://www.npmjs.com/@proangular/ngx-gist)
[![Package Downloads](https://badgen.net/npm/dw/@proangular/ngx-gist)](https://www.npmjs.com/@proangular/ngx-gist)
[![Size](https://img.shields.io/bundlephobia/minzip/@proangular/ngx-gist.svg)](https://bundlephobia.com/result?p=ProAngular/ngx-gist)
[![Demo Status](https://badgen.net/badge/Demo/Online/green)](https://www.ProAngular.com/demos/ngx-gist)
[![Website Status](https://img.shields.io/website?down_color=lightgrey&down_message=Offline&label=Website&up_color=green&up_message=Online&url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)
[![Gitter Chat](https://badges.gitter.im/ProAngular/lobby.svg)](https://gitter.im/ProAngular/community)
[![Discord Chat](https://img.shields.io/discord/1003103094588055552?label=Discord)](https://discord.com/channels/1003103094588055552)
Expand All @@ -24,11 +25,6 @@
[![GitHub Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)
[![npmjs Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)

<!--
[![StackBlitz](https://badgen.net/badge/StackBlitz/Offline/red)]()
[![Demo](https://badgen.net/badge/Demo/Offline/red)]()
-->

## Table of Contents

- [Information](#information)
Expand Down Expand Up @@ -58,7 +54,7 @@ More info in the following links:

## Description

Behold, this package contains an Angular Material and HighlighJs styled element which displays your GitHub gists in a conveniant, easy to view interface. Don't have a gist? No problem, display your own code snippets by just passing in the same model! All files from the remote/local gist are displayed in separate tabs for users to easily navigate. Many optional features and themes are available.
Behold, this package contains an Angular Material and HighlighJs styled element which displays your GitHub gists in a conveniant, easy to view interface. Don't have a gist? No problem, display your own code snippets by just passing in a direct model (`NgxGist.create({ ... })`)! All files from the remote/local gist are displayed in separate tabs for users to easily navigate. Many optional features and themes are available.

GitHub gists can be created here: https://gist.github.com/

Expand All @@ -72,6 +68,8 @@ Enjoy!
<img src="src/assets/images/demo-gist.gif" />
</p>

Live demo here: [https://www.ProAngular.com/demos/ngx-gist](https://www.ProAngular.com/demos/ngx-gist)

<a name="installation"/>

## Installation
Expand Down Expand Up @@ -213,7 +211,7 @@ You can also display any number of specific files by name.

### Displaying a basic code snippet (without a remote gist)

These are not fetched from GitHub and are brought in elsewhere from your application (seperate HTTP request, or statically for example). With this method you can display code snippets without having to create a remote gist. Also, please notice here that no "Open Gist on GitHub" link will display as well.
These are not fetched from GitHub and are brought in elsewhere from your application (seperate HTTP request, or statically for example). With this method you can display code snippets without having to create a remote gist. You can easily create a new code snippet/gist object using `NgxGist.create({ ... })`. Note: no "Open Gist on GitHub" link will display.
```html
<ngx-gist [gist]="localGistObject"></ngx-gist>
```
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@proangular/ngx-gist",
"version": "1.0.7",
"version": "1.0.8",
"description": "An Angular Material and HighlighJs styled display box for GitHub gist and local code snippets.",
"author": "Pro Angular <[email protected]>",
"homepage": "https://www.proangular.com",
Expand Down
9 changes: 5 additions & 4 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,11 @@ import { Component } from '@angular/core';
<h4>DISPLAYING A BASIC CODE SNIPPET (WITHOUT A REMOTE GIST)</h4>
<p>
These are not fetched from GitHub and are brought in elsewhere from your
application (separate HTTP request, or statically, for example). With
this method, you can display code snippets without having to create a
remote gist. Also, please notice here that no "Open Gist on GitHub" link
is displayed here.
application (seperate HTTP request, or statically for example). With
this method you can display code snippets without having to create a
remote gist. You can easily create a new code snippet/gist object using
<code>NgxGist.create({{ '{' }} ... {{ '}' }})</code>. Note: no "Open
Gist on GitHub" link will display.
</p>
<ngx-gist [gist]="localGistObject"></ngx-gist>

Expand Down