Adding details and testing on circle

.circleci/circle_urls.sh

@@ -0,0 +1,4 @@
+REPO_ID=$(curl https://api.github.com/repos/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME} | jq --raw-output '.id')
+echo "Repo ID is ${REPO_ID}"
+BASEURL=https://${CIRCLE_BUILD_NUM}-${REPO_ID}-gh.circle-artifacts.com/0/${CIRCLE_PROJECT_REPONAME}
+sed -i "26 s,.*,baseurl: $BASEURL,g" "_config.yml"

.circleci/config.yml

@@ -0,0 +1,50 @@
+version: 2.1
+
+workflows:
+ version: 2
+
+ # The build workflow will build a preview for the site, intended for PRs
+ build:
+ jobs:
+ - build-site:
+ filters:
+ branches:
+ ignore: master
+
+build_jekyll: &build_jekyll
+ name: Jekyll Build
+ command: |
+ echo "Building Preview"
+ cp ~/repo/.circleci/circle_urls.sh ~/repo/circle_urls.sh
+ cd ~/repo
+ chmod u+x circle_urls.sh
+ bash circle_urls.sh 
+ bundle exec jekyll build
+
+jobs:
+ build-site:
+ docker:
+ - image: circleci/ruby:2.4.1
+ working_directory: ~/repo
+ environment:
+ - JEKYLL_ENV: production
+ - NOKOGIRI_USE_SYSTEM_LIBRARIES: true
+ - BUNDLE_PATH: ~/repo/vendor/bundle
+ steps:
+ - checkout
+ - restore_cache:
+ keys:
+ - rubygems-v1
+ - run:
+ name: Bundle Install
+ command: |
+ cd ~/repo
+ bundle check || bundle install
+ - save_cache:
+ key: rubygems-v1
+ paths:
+ - vendor/bundle
+ - run: *build_jekyll
+ - store_artifacts:
+ path: ~/repo/_site
+ destination: tw-jekyll

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+ - pinned
+ - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+ This issue has been automatically marked as stale because it has not had
+ recent activity. It will be closed if no further activity occurs. Thank you
+ for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

README.md

@@ -1,12 +1,23 @@
 # Tailwind (tw) Jekyll
 
-**under development**
+![assets/img/tw-jekyll.png](assets/img/tw-jekyll.png)
+
+⭐️ [Documentation Demo](https://vsoch.github.io/tw-jekyll/) ⭐️
 
 This is a [starter template](https://vsoch.github.com/tw-jekyll/) for a Tailwind jekyll theme, based
 on [these docs](https://github.com/superfly/docs) that are based on [Tailwind css](https://tailwindcss.com/docs/installation),
 however everything has been modified to work on GitHub pages (using Jekyll). If you don't need
 native deployment on GitHub pages, then please consider checking out Tailwind. 
-The original [Apache License](LICENSE) is included.
+The original [Apache License](LICENSE) is included. I (@vsoch) have extended it to include:
+
+- includes for callouts and badges
+- rainbow buttons
+- colored tags (with a tags page) for posts and articles
+- GitHub interaction buttons to edit, open an issue, or ask a question
+- customization of colors and minimal style
+- CircleCI preview
+
+And let me know if you'd like to add anything else, or just open a PR and contribute! 🔥️
 
 ## Usage
 

_config.yml

@@ -31,6 +31,10 @@ url: "https://vsoch.github.io" # the base hostname & protocol for your site
 # Keywords (space separated)
 keywords: "documentation theme"
 
+# Add colorful permalinks to headers
+# change colors in _includes/permalinks.html
+add_permalinks: true
+
 # Optional
 twitter: vsoch
 linkedin: vsochat
@@ -40,13 +44,14 @@ github_user: vsoch
 github_repo: tw-jekyll
 # discord: https://community.discord.com
 
+# If you have a logo, put here to include in meta tags
+logo: assets/img/tw-jekyll.png
+
 # branch to edit on GitHub
 github_branch: main
 
-logo: "assets/img/logo/SRCC-square-red.png"
-logo_pixels: 34
-color: "#30638e"
-badge_color: violet
+# If not set, badge color (background) defaults to violet
+# badge_color: "#2bcf98"
 badge_rounded: true
 
 # Build settings

_docs/getting-started.md

@@ -161,11 +161,33 @@ according to the year.
 
 ### Buttons
 
-Buttons aren't fully developed yet, but are coming soon!
+The following buttons are available - you can match the class on the button to the examples below.
+All buttons include the basic `.btn` class.
+
+<button class="btn btn-red">.btn-red</button>
+<button class="btn btn-orange">.btn-orange</button>
+<button class="btn btn-yellow">.btn-yellow</button>
+<button class="btn btn-green">.btn-green</button>
+<button class="btn btn-blue">.btn-blue</button>
+<button class="btn btn-purple">.btn-purple</button>
+<button class="btn btn-pink">.btn-pink</button>
+
+
+```html
+<button class="btn btn-red">.btn .btn-red</button>
+<button class="btn btn-orange">.btn .btn-orange</button>
+<button class="btn btn-yellow">.btn .btn-yellow</button>
+<button class="btn btn-green">.btn .btn-green</button>
+<button class="btn btn-blue">.btn .btn-blue</button>
+<button class="btn btn-purple">.btn .btn-purple</button>
+<button class="btn btn-pink">.btn .btn-pink</button>
+```
 
 ### Badges
 
-For news post items, it's nice to be able to tag it with something that indicates
+For tags that appear on posts, you can edit `badge_color` in the `_config.yaml`
+to change the color. If not set, it defaults to the lovely purple of the main site.
+For news post items, it's also nice to be able to tag it with something that indicates
 a status, such as "warning" or "alert." For this reason, you can add badges to
 the front end matter of any post page, and they will render colored by a type,
 with the tag of your choice. For example, here is an example header for
@@ -177,36 +199,52 @@ title: "Two Thousand Nineteen"
 date: 2019-06-28 18:52:21
 categories: jekyll update
 badges:
- - type: warning
- tag: warning-badge
- - type: danger
- tag: danger-badge
+ - color: orange
+ name: warning-badge
+ - color: red
+ name: danger-badge
 ---
 ```
 
-And here is the post preview with the rendered badges that it produces:
+And to easily include a badge, just use the include:
+
+```
+{% raw %}{% include badge.html text="good-job" style="background-color:green" %}{% endraw %}
+```
+
+To generate this:
+
+{% include badge.html text="good-job" style="background-color:green" %}
 
-<span style="font-size:12px" class="inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-violet-100 bg-violet-600 rounded-full"><a style="cursor:pointer; color:white">jekyll</a></span>
 
 ### Callout
 
 A callout is a little box to draw emphasis to something:
 
-{% include callout.html text="Hey you, look right here at this interesting thing!" %}
+
+{% include callout.html text="Hey you, look right here!" %}
+
 
 That looks like this:
 
 ```
-{% raw %}{% include callout.html text="Hey you, look right here at this interesting thing!" %}{% endraw %}
+{% raw %}{% include callout.html text="Hey you, look right here!" %}{% endraw %}
 ```
 
-### Alerts
+Or change the background color:
 
-These are under development and will be added soon!
+```
+{% raw %}{% include callout.html text="Hey you! The sky is blue!" color="skyblue" %}{% endraw %}
+```
+
+{% include callout.html text="Hey you, look right here!" color="skyblue" %}
 
 ### Quotes
 
-These will also be added soon.
+Here is what a blockquote looks like. We could probably improve upon this with different colors, etc.
+
+> A famous person once said, "Hark! I do believe I'd like some cheese"
+> -- Famous Person
 
 ## Development
 
@@ -324,14 +362,15 @@ https://<circleci>/0/tw-jekyll/docs/getting-started/index.html
 
 #### config.yml
 
-To edit configuration values, customize the [_config.yml](_config.yml).
-Most are documented there, and please [open an issue](https://www.github.com/{{ site.github_user }}/{{ site.github_user }}/issues) if you have questions.
+To edit configuration values, customize the [_config.yml](_config.yml). There are a lot
+of small details that are included there that are not mentioned here!
+Please [open an issue](https://www.github.com/{{ site.github_user }}/{{ site.github_user }}/issues) if you have questions.
 
 #### Adding pages
 
-To add pages, write them into the [pages](pages) folder. 
+To add pages, write them into the [pages](https://github.com/vsoch/tw-jekyll/tree/main/pages) folder. 
 You define urls based on the `permalink` attribute in your pages,
-and then add them to the navigation by adding to the content of [_data/toc.yml](_data/toc.yml).
+and then add them to the navigation by adding to the content of [_data/toc.yml](https://github.com/vsoch/tw-jekyll/blob/main/_data/toc.yml).
 
 #### Tags
 

_includes/badge.html

@@ -0,0 +1,2 @@
+<span style="font-size:12px" class="inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-violet-100 bg-violet-600 rounded-full" {% if include.style %}style="{{ include.style }}{% endif %}"><a style="cursor:pointer; color:white">{{ include.text }}</a></span>
+

_includes/callout.html

@@ -1 +1,2 @@
-<div class=callout>{{ include.text }}</div>
+
+<div class="callout" {% if include.color %}style="background-color: {{ include.color }}"{% endif %}>{{ include.text }}</div>

_includes/permalinks.html

@@ -1,12 +1,19 @@
+{% if site.add_permalinks %}
 <script>
 var headers = ["h1", "h2", "h3", "h4"]
-var colors = ["red", "orange", "green", "blue"]
+
+// Lighter to darker as links get smaller (harder to see)
+var colors = ["#cdb8ef", "#bb98f5", "#935feb", "#7c3aed"]
 
 $.each(headers, function(i, header){
  var color = colors[i];
  $(header).each(function () {
- var href=$(this).attr("id");
- $(this).append('<a class="headerlink" style="color:' + color + '" href="#' + href + '" title="Permanent link"> ¶</a>')
+ text = $(this).text();
+ if (text != "") {
+ var href=$(this).attr("id");
+ $(this).append('<a class="headerlink" style="color:' + color + '" href="#' + href + '" title="Permanent link"> ¶</a>')
+ }
  });
 })
 </script>
+{% endif %}

_includes/quiz/multiple-choice.html

@@ -1,5 +1,5 @@
 <div class="admonition question">
 <p class="admonition-title">{% if include.item.question %}{{ include.item.question }}{% else %}Question {{ include.count }}{% endif %}</p>
 <p>{% for choice in include.item.items %}{% if choice.correct == true %}<span class="correct-{{ include.count }}">{% endif %}{{ forloop.index }}. {{ choice.choice }}{% if choice.correct == true %}</span>{% endif %}<br>{% endfor %}</p>
-</div><button class="btn btn-success" onclick='$(".correct-{{ include.count }}").css("font-weight", 600);$(".correct-more-{{ include.count }}").css("display", "inline")'>Show Answer</button>
+</div><button class="btn btn-green" onclick='$(".correct-{{ include.count }}").css("font-weight", 600);$(".correct-more-{{ include.count }}").css("display", "inline")'>Show Answer</button>
 {% if include.item.followup %}<p class="well correct-more-{{ include.count }}" style="display:none">{{ include.item.followup }}</p>{% endif %}

_includes/social-menu.html

@@ -8,7 +8,7 @@
  </g>
  </svg>
  </a>{% endif %}
- {% if site.repo %}<a href="/{{ site.repo }}/" class="hover:text-violet-700 transition-colors">
+ {% if site.repo %}<a href="{{ site.repo }}" class="hover:text-violet-700 transition-colors">
  <span class=sr-only> Github </span> 
  <svg role=img class=icon viewBox="0 0 24 24" style='width: 20px; height: 20px; ' fill=currentColor>
  <g buffered-rendering=static>

_includes/tags.html

@@ -1,2 +1,2 @@
 {% if page.tags %}<script>
-$('h1').first().append('<div>{% for tag in page.tags %}<span style="font-size:12px" class="inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-{{ site.badge_color }}-100 bg-{{ site.badge_color }}-600 rounded{% if site.badge_rounded %}-full{% endif %}"><a style="cursor:pointer; color:white" href="{% if site.tag_search_endpoint %}{{ site.tag_search_endpoint }}{{ tag }}{% else %}{{ site.url }}{{ site.baseurl }}/tags#{{ tag }} {% endif %}">{{ tag }}</a></span>{% endfor %}</div>')</script>{% endif %}
+$('h1').first().append('<div>{% for tag in page.tags %}<span style="font-size:12px;{% if site.badge_color %}background-color:{{ site.badge_color }}{% endif %}" class="inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-violet-100 bg-violet-600 rounded{% if site.badge_rounded %}-full{% endif %}"><a style="cursor:pointer; color:white" href="{% if site.tag_search_endpoint %}{{ site.tag_search_endpoint }}{{ tag }}{% else %}{{ site.url }}{{ site.baseurl }}/tags#{{ tag }} {% endif %}">{{ tag }}</a></span>{% endfor %}</div>')</script>{% endif %}

_layouts/post.html

@@ -2,7 +2,6 @@
 layout: page
 ---
 <!-- Copyright 2019-2021 Vanessa Sochat-->
-<h1 style="margin-bottom:0px">{{ page.title }}</h1>
-{% if page.badges %}{% for badge in page.badges %}<span class="badge badge-{{ badge.type }}">{{ badge.tag }}</span>{% endfor %}{% endif %}
+<h1 style="margin-bottom:0px">{{ page.title }}</h1>{% if page.badges %}{% for badge in page.badges %}<span style="font-size:12px;{% if badge.color %}background-color:{{ badge.color }}{% endif %}" class="inline-flex items-center justify-center px-2 py-1 mr-2 text-xs font-bold leading-none text-violet-100 bg-violet-600 rounded{% if site.badge_rounded %}-full{% endif %}"><a style="cursor:pointer; color:white" href="{% if site.tag_search_endpoint %}{{ site.tag_search_endpoint }}{{ tag }}{% else %}{{ site.url }}{{ site.baseurl }}/tags#{{ tag }} {% endif %}">{{ badge.name }}</a></span>{% endfor %}{% endif %}
 <span class="post-date" style="font-style: italic;">{{ page.date | date: "%B %d, %Y" }}</span>
 {{ content }}

_posts/2019-06-28-hello-world.md

@@ -3,10 +3,10 @@ title: "Two Thousand Nineteen"
 date: 2019-06-28 18:52:21
 categories: jekyll update
 badges:
- - type: warning
- tag: warning-badge
- - type: danger
- tag: danger-badge
+ - color: orange
+ name: warning-badge
+ - color: darkred
+ name: danger-badge
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

_posts/2019-06-29-welcome.md

@@ -3,14 +3,14 @@ title: "Welcome to TW-Jekyll"
 date: 2019-06-28 5:52:21 -0500
 categories: jekyll update
 badges:
- - type: primary
- tag: primary-badge
- - type: secondary
- tag: secondary-badge
- - type: info
- tag: info-badge
- - type: success
- tag: success-badge
+ - color: darkblue
+ name: blue-badge
+ - color: "#CCC"
+ name: grey-badge
+ - color: skyblue
+ name: skyblue-badge
+ - color: green
+ name: green-badge
 ---
 
 You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.