Merge pull request #25 from ysk24ok/refactoring

Refactoring
ysk24ok · Oct 26, 2020 · 94597ec · 94597ec
2 parents 735b39c + 39a1b93
commit 94597ec
Show file tree

Hide file tree

Showing 4 changed files with 815 additions and 206 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,14 @@
 FROM ruby:2.6.5
 
-RUN apt-get -y update
-RUN gem install jekyll bundler
+RUN apt update \
+ && apt install -y \
+    vim \
+ && rm -rf /var/lib/apt/lists/*
+RUN gem install \
+    bundler \
+    jekyll
+RUN mkdir /jekyll-linkpreview
+ADD Gemfile /jekyll-linkpreview
+ADD jekyll-linkpreview.gemspec /jekyll-linkpreview
+ADD lib/jekyll-linkpreview/version.rb /jekyll-linkpreview/lib/jekyll-linkpreview/version.rb
+RUN cd /jekyll-linkpreview && bundle install
diff --git a/README.md b/README.md
@@ -1,59 +1,29 @@
 # Jekyll::Linkpreview
 
-[![Build Status](https://travis-ci.org/ysk24ok/jekyll-linkpreview.svg?branch=master)](https://travis-ci.org/ysk24ok/jekyll-linkpreview)
+[![Build Status](https://travis-ci.com/ysk24ok/jekyll-linkpreview.svg?branch=master)](https://travis-ci.com/ysk24ok/jekyll-linkpreview)
 
 Jekyll plugin to generate link preview by `{% linkpreview %}` tag. The plugin fetches [Open Graph protocol](http://ogp.me/) metadata of the designated page to generate preview. The og properties are saved as JSON for caching and it is used when rebuilding the site.
 
 You can pass url directly to the tag,
 
 ```
-{% linkpreview "https://github.com" %}
+{% linkpreview "https://github.com/ysk24ok/jekyll-linkpreview" %}
 ```
 
 or, can pass a url variable.
 
 ```
-{% assign github_toppage = 'https://github.com' %}
-{% linkpreview github_toppage %}
+{% assign jekyll_linkpreview_page = "https://github.com/ysk24ok/jekyll-linkpreview" %}
+{% linkpreview jekyll_linkpreview_page %}
 ```
 
-The tag above generates following HTML when you run `jekyll build`.
-
-```html
-<div class="jekyll-linkpreview-wrapper">
-  <p><a href="https://github.com" target="_blank">https://github.com</a></p>
-  <div class="jekyll-linkpreview-wrapper-inner">
-    <div class="jekyll-linkpreview-content">
-      <div class="jekyll-linkpreview-image">
-        <a href="https://github.com" target="_blank">
-          <img src="https://github.githubassets.com/images/modules/open_graph/github-logo.png" />
-        </a>
-      </div>
-      <div class="jekyll-linkpreview-body">
-        <h2 class="jekyll-linkpreview-title">
-          <a href="https://github.com" target="_blank">Build software better, together</a>
-        </h2>
-        <div class="jekyll-linkpreview-description">GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.</div>
-      </div>
-    </div>
-    <div class="jekyll-linkpreview-footer">
-      <a href="https://github.com" target="_blank">github.com</a>
-    </div>
-  </div>
-</div>
-```
-
-By applying appropriate CSS, the link preview will be like this.
+By applying [linkpreview.css](assets/css/linkpreview.css), the link preview will be like this.
 
-<img width="613" alt="スクリーンショット 2019-04-03 20 52 50" src="https://user-images.githubusercontent.com/3449164/55479970-35baf100-565a-11e9-8c5d-709213917f74.png">
+<img width="613" alt="スクリーンショット 2020-10-26 19 10 26" src="https://user-images.githubusercontent.com/3449164/97160548-db472f80-17bf-11eb-9cc2-383a076fb14d.png">
 
-When the page does not have Open Graph protocol metadata, following simple HTML will be generated.
+When the page does not have Open Graph protocol metadata, the preview will be like this.
 
-```html
-<div class="jekyll-linkpreview-wrapper">
-  <p><a href="https://example.com" target="_blank">https://example.com</a></p>
-</div>
-```
+<img width="613" alt="スクリーンショット 2020-10-26 19 10 35" src="https://user-images.githubusercontent.com/3449164/97160564-e00be380-17bf-11eb-8adb-55c2a07520f1.png">
 
 You can override the default templates, see [Custom templates](#user-content-custom-templates).
 
@@ -103,6 +73,39 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
+### Test with Jekyll site
+
+First, build a Docker image and run a container.
+
+```console
+$ docker build --no-cache -t jekyll_linkpreview_dev .
+$ docker run --rm -it -w /jekyll-linkpreview -p 4000:4000 jekyll_linkpreview_dev /bin/bash
+```
+
+Create a new Jekyll site and move into the new directory.
+
+```console
+# bundle exec jekyll new testsite && cd testsite
+```
+
+Add this line to `:jekyll_plugins` group of Gemfile.
+
+```console
+gem "jekyll-linkpreview", git: "https://github.com/YOUR_ACCOUNT/jekyll-linkpreview", branch: "YOUR_BRANCH"
+```
+
+Install the dependecies to your new site.
+
+```console
+# bundle install
+```
+
+Add a tag such as `{% linkpreview "https://github.com/ysk24ok/jekyll-linkpreview" %}` to `index.markdown` , then start a Jekyll server.
+
+```console
+# bundle exec jekyll serve --host 0.0.0.0
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/ysk24ok/jekyll-linkpreview.