jekyll-98 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b1aa5539ec57db08757297dfef8e7bee522cee256d24b767155fb68d37926e0e
+  data.tar.gz: b3d532341d1457beb67c0783f7ea6228b9ecda8cdad33b340841f599a49a8a0f
+SHA512:
+  metadata.gz: 2d009ad350745fef5db50481043f2602fea30004cc287fb218d7eb8fb2ab11031f95178a091e926a566969ac048dd89dd9a99242ebe77a76afca30b0d9175241
+  data.tar.gz: e439941be5b215f31fe14d8e00e3315285a4f5a4e8dd622b52fcd8cc2374b0bd1538a1251aac4292facd6748875a3c2713d836cdeabe2e5003a1442672f89757

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 queenkjuul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,222 @@
+# jekyll-98
+
+[***See it in action right here!***](https://queenkjuul.github.io/jekyll-98/)
+
+A theme for Jekyll built using the [XP.css](https://github.com/botoxparty/XP.css) fork of [98.css](https://github.com/jdan/98.css) which aims to recreate the aesthetics of Windows 98 in a mobile-friendly, customizable blog format.
+
+*Almost* no JavaScript, but should be perfectly usable without. Ships with pagination, atom feed generation, automatic social media links, and per-category index pages out of the box.
+
+![screenshot of jekyll-98](https://raw.githubusercontent.com/queenkjuul/jekyll-98/main/assets/screenshot.png)
+
+## Installation
+
+### Quick Start
+
+This repo is actually a fully functional jekyll site! You can clone or fork this repo, update the config with your own values, add some posts, et voila! You have a website ready to be hosted with Github Pages or built and served on your own host.
+
+If you use this repo as a base, make sure your GitHub Repo > Settings > Pages > Source is set to "GitHub Actions." The `main` branch is deployed by default. Edit `.github/workflows/jekyll.yml` to change branches. [See note below about GitHub Actions](#github-pages--jekyll-remote-theme)
+
+```sh
+git clone https://github.com/queenkjuul/jekyll-98
+cd jekyll-98
+bundle
+bundle exec jekyll serve  # preview
+bundle exec jekyll build  # build
+```
+
+### GitHub Pages / jekyll-remote-theme
+
+In your site's _config.yml, add:
+
+```yml
+remote_theme: queenkjuul/jekyll-98
+```
+
+#### GitHub Pages Deployment
+
+**NOTE:** the "deploy from branch (classic)" GitHub Pages deployment method FAILS to generate category index pages. However, the default Jekyll GitHub Action works. [See instructions from GitHub here and set up your site's repo to publish with the default Jekyll workflow](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow). 
+
+Using the legacy "deploy from branch" option will not break the site, but it will break the [`desktop_categories`](#theme-settings) and [`show_categories`](#settings) functions. If they are left enabled, the site will build and deploy, but those links will lead to 404s, so it's best to disable them.
+
+### Manual installation
+
+*WIP - Should be packaged as a gem soon*
+
+in your blog root folder, create a directory `_themes`
+
+`cd` into `_themes` and clone this repo into it
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-98", :path => "_themes"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: jekyll-98
+```
+
+And then execute:
+
+```sh
+bundle
+```
+
+Or install it yourself as:
+
+```sh
+gem install jekyll-98
+```
+
+## Usage
+
+Theme should provide sane defaults, but there's lots to customize. For full configuration options, refer to [_config.yml](https://github.com/queenkjuul/jekyll-98/blob/main/_config.yml). Add whatever settings you want *to your site's _config.yml*.
+
+### Posts
+
+#### Titles and excerpts
+
+The default Post layout includes a header containing the post title as defined in the front matter. This means that if the first line of your post is a header containing the title, the title will appear twice. Keep this in mind. Also, Jekyll will by default use the first block of your post as its excerpt, so it's best to avoid first-line headers. You can always define an excerpt explicitly in the front matter like so:
+
+```yml
+---
+title: Post Title
+excerpt: this is what will show on the home page (if show_excerpts is enabled)
+---
+```
+
+#### List formatting
+
+If you add `{:.tree-view}` before your bulleted lists, they will render in Windows Explorer-style tree view mode. I'd like to do this automatically, but I don't know how to apply a class automatically to the kramdown/jekyll output. If you know how, get in touch! Open an issue, raise a PR, or (please don't really) email me.
+
+Example:
+
+```md
+{:.tree-view}
+ - First Item
+    - Second Item
+ - Third Item
+```
+
+{:.tree-view}
+- First Item
+  - Second Item
+- Third Item
+
+#### Front matter
+
+You will want to define the following in your posts' front matter:
+
+- Required:
+  - `title: string` - as mentioned above, will be displayed as a top-level header in the post page layout, as well as in lists
+  - `layout: post` - you probably want to leave this
+  - `date: YYYY-MM-DD HH:MM:SS +/-0000` - time zone offset at end. Only for internal use, actual formatted date shown to users is formatted per `jekyll-98.date_format` in `_config.yml`
+- Optional
+  - `categories: string1 string2 ...` - space-separated list of post categories. Posts can be browsed by category with links on the homepage. Uses [jekyll-category-pages](https://github.com/field-theory/jekyll-category-pages).
+  - `icon: icon_string` - `icon_string` is the filename of any icon in the jekyll-98 `assets/icons` folder, minus the extension (so omit `.png`). Optional. Unfortunately for now, can't be automatically set by category. Will appear in any post list.
+  - `excerpt: string` - excerpt to be shown in post lists if excerpts is enabled in `_config.yml`. If not defined, jekyll will use the first paragraph of your post.
+
+## Configuration
+
+### Basic site info
+
+```yaml
+title: blog name
+author:     # ***PUBLIC BY DEFAULT!***
+    name: &name your name           # need &name prefix for Contact page to work
+    email: &email your@email.com    # need &email prefix for Contact page
+description: what's the deal with websites?
+```
+
+Basic Jekyll/Pages info from the template, such as title, author, and description. Author is a parent node, with child nodes name and email. Site title is used everywhere. Description appears on Home and About pages. Author info only shows up (optionally) on the Contact page. `title`, `author`, and `description` should be defined at the root level of your `_config.yml`
+
+### Settings
+
+```yaml
+show_excerpts:  false       # show post excerpts in post lists
+show_categories:  true     # show category links in post lists - REQUIRES GITHUB ACTIONS TO WORK WITH GITHUB PAGES, SEE README
+paginate:       3           # set to false to disable, numbers above 3 might be weird on mobile
+paginate_path:  /page/:num  # change if you know what you're doing
+google_analytics: asdf1234  # your google analytics key
+```
+
+Enabling excerpts will show the first bit of a post on the home page. This can be a little unreliable with the layout of the posts list, so either disable (default) or experiment. You can define an explicit excerpt (instead of letting Jekyll guess) by defining `excerpt` in the post's front matter (see [Posts](#posts))
+
+`show_categories` is NOT compatible with the default "deploy from a branch" GitHub Pages deployment method. Instead, [use a GitHub Action](#github-pages-deployment)
+
+### Theme settings
+
+Theme settings are defined within the `jekyll-98` node of your _config.yml
+
+```yaml
+title: ...
+author: ...
+...
+jekyll-98:
+    date_format: ...
+    ...
+```
+
+#### `date_format`
+
+change how timestamps are shown - refer to [https://shopify.github.io/liquid/filters/date/](https://shopify.github.io/liquid/filters/date/) if you want to customize this
+
+#### `icon`
+
+you can define a different icon to use for the "my computer" homepage icon on the desktop here.
+
+#### `desktop_categories`
+
+Categories defined in this array will generate desktop icons and start menu links, assuming there are posts that exist that are tagged with that category. Note that things might get weird layout wise if you have more than 5-7 desktop icons total (`desktop_categories` and `site_links` combined)
+
+Not compatible with the default "Deploy from a branch" GitHub Pages deployment method. [Use the default Jekyll deployment Action instead](#github-pages-deployment)
+
+#### `site_links`
+
+You can define additional links to include on the desktop and start menu. Links must have a title, url, icon, and alt text/description. the `alt` text is both the alt-text for the actual icon image tag (for screen readers) but also appears in the start menu. The start menu does not wrap text, so long descriptions might stretch the menu out to goofy proportions.
+
+```yml
+jekyll-98:
+    site_links:
+        - title: 'Name'
+          url: https://example.com
+          icon: document    # see assets/icons
+          alt: 'Descriptive text'
+```
+
+#### `social_links`
+
+All available sites/icons are listed in the theme [`_config.yml`](https://github.com/queenkjuul/jekyll-98/blob/main/_config.yml). Define a username, and the site will appear in the taskbar, as well as the Contact page (if enabled)
+
+#### `contact`
+
+By default, the contact page will display the name and email set in the site config. Commenting/removing these lines will prevent the Contact page from being generated (and links to it will be removed)
+
+See [`_config.yml`](https://github.com/queenkjuul/jekyll-98/blob/main/_config.yml) for details on setting up additional info beyond name + email.
+
+#### `about`
+
+You can add any info you like to the default About page. The About page will automatically include your site description. Additional lines defined in the `jekyll-98.about` array will appear in a bulleted list on the About page, below the description.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/queenkjuul/jekyll-98. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `jekyll-98.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+social icons from https://github.com/edent/SuperTinyIcons
+
+credit Alex Meub https://win98icons.alexmeub.com/

data/_config.yml

@@ -0,0 +1,127 @@
+####  GLOBAL - Site information
+# About your website
+title: Your awesome title
+author: # *** NAME AND EMAIL INCLUDED IN RSS FEED BY DEFAULT ***
+  name: &name GitHub User                 # removing &name breaks contact page
+  email: &email your-email@domain.com     # removing &email breaks contact page
+description: > # > means to ignore newlines until next section
+  Write an awesome description for your new site here. You can edit this
+  line in _config.yml. It will appear in your document head meta (for
+  Google search results) and in your feed.xml site description. 
+  It will also appear on the site About page. 
+# url:  https://jekyll-98.github.io             # will try to use github pages url if omitted
+
+#### SETTINGS - Sitewide preferences
+remote_theme: queenkjuul/jekyll-98
+show_excerpts: true       # mostly works, see README
+show_categories: true
+paginate:      3          # set to a number of posts per page 
+                          # only 3 works well on small mobile screens
+                          # set to false to disable pagination (all posts listed on home page)
+paginate_path: /page/:num # probably shouldn't touch
+# google_analytics:       # input your google analytics key for tracking
+
+#### THEME - Controls for desktop and extra pages
+jekyll-98:
+  date_format: "%b %-d, %Y" # refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this
+
+  ### SITE ICON
+  # select site icon which will be used for homepage links 
+  # on the desktop and in the start menu
+  # see assets/icons for choices, omit extension
+  icon: computer
+
+  ### DESKTOP FOLDERS
+  # select which of your post categories should have its own desktop icon
+  # should probably try and keep total icons (desktop_categories and site_links)
+  # to 7 or less total
+  desktop_categories:
+    - posts
+
+  ### DESKTOP / START MENU LINKS
+  # site_links generate desktop icons (if device width allows)
+  # as well as entries in the Start menu (all widths)
+  # must have at least title and url
+  # icon will default to "document"
+  # see assets/icons for icon choices
+  site_links:
+  - title: Example 
+    url: http://example.com
+    target: _blank            # optional
+    icon: html                # optional
+    alt: 'This is an example' # alt text is shown in start menu - long strings won't wrap and might break menu
+
+  ### CONTACT PAGE
+  # social links from the social_links section are automatically added to contact page (if enabled)
+  # only defined fields are displayed
+  contact:        # comment to omit page altogether
+    name: *name   # reuses values from above
+    email: *email
+    phone: phone number if you're spicy 
+    address: 
+      - 1234 Street Avenue
+      - Assigned living quarters number X
+      - City, Unit bigger than city, country, postal related code 
+      - You can actually add as many lines as your little heart desires
+    other:
+      - custom info can go here
+      - each line gets rendered
+      - layout not optimized for long lists
+
+  ### SOCIAL MEDIA / QUICK LAUNCH
+  # generate social links in footer
+  # only 5 will safely fit on small phones
+  social_links:
+    github:  queenkjuul
+    youtube: queenkjuul69
+    twitch: queenkjuul
+    # twitter: jekyllrb
+    # devto: jekyll
+    # dribbble: jekyll
+    # facebook: jekyll
+    # flickr:   jekyll
+    # instagram: jekyll
+    # linkedin: jekyll
+    # pinterest: jekyll
+    # youtube_channel: UC8CXR0-3I70i1tfPg1PAE1g
+    # youtube_channel_name: CloudCannon
+    # telegram: jekyll
+    # googleplus: +jekyll
+    # keybase: jekyll
+    # email: jekyll@jekyll.jekyll
+
+    # Mastodon instances
+    # mastodon:
+    # - username: jekyll
+    #   instance: example.com
+    # - username: jekyll2
+    #   instance: example.com
+
+    # GitLab instances
+    # gitlab:
+    # - username: jekyll
+    #   instance: example.com
+    # - username: jekyll2
+    #   instance: example.com
+
+  ### ABOUT PAGE
+  # add personal details to about page if you like
+  # lines are rendered as bulleted list
+  about:
+    - Live long and prosper, loves \\//_
+
+#### PLUGINS - Add what you need, but don't remove defaults!
+plugins:
+  - jekyll-paginate       # theme default
+  - jekyll-category-pages # theme-default
+  - jekyll-feed           # theme-default
+
+#### DEFAULTS - Only for theme website, you can ignore/remove
+defaults:
+  -
+    scope:
+      path: "_posts"
+    values:
+      layout: "post"
+      categories:
+        - posts

data/_includes/about_text.html

@@ -0,0 +1,13 @@
+<div class="systray-balloon__header" style="display: flex; gap: 8px">
+  <img src="{{"/assets/icons/info.png" | absolute_url }}" />
+  <a href="https://github.com/queenkjuul/jekyll-98">jekyll-98 theme by queenkjuul</a><br/>
+</div>
+<div class="systray-balloon__content">
+  <a href="https://botoxparty.github.io/XP.css">depends on XP.css by botoxparty</a><br/>
+  <a href="https://jdan.github.io/98.css">which is built on 98.css by jdan</a><br/>
+  all of which are under the MIT license<br/>
+  <br/>
+  uses SuperTinyIcons by edent<br/>
+  see license information here: <br/>
+  <a href="https://github.com/edent/SuperTinyIcons">https://github.com/edent/SuperTinyIcons</a><br/>
+</div>

data/_includes/custom-head.html

@@ -0,0 +1,6 @@
+{% comment %}
+  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:
+
+  1. Head over to https://realfavicongenerator.net/ to add your own favicons.
+  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
+{% endcomment %}

data/_includes/desktop_icons.html

@@ -0,0 +1,38 @@
+{% if include.hide %}
+  {% assign hide_on_phone = "hide-on-phone" | default: "" %}
+{% endif %}
+<aside class="{{ hide_on_phone }}">
+  <nav class="desktop-icons">
+    <a href="{{ "/" | absolute_url}}">
+      <div class="desktop-icon">
+        {% capture iconlink %}/assets/icons/{{ site.jekyll-98.icon | default: 'computer' }}.png{% endcapture %}
+        <img src="{{ iconlink | absolute_url }}" alt="Computer Icon Click To Go Home" />
+        <figcaption>{{ site.title }}</figcaption>
+      </div>
+    </a>
+
+    {% for category in site.jekyll-98.desktop_categories %}
+      {% assign category_exists = site.categories[category] %}
+      {% if category_exists.size > 0 %}
+        <a href="{{ "/category/" | append: category | absolute_url }}">
+          <div class="desktop-icon">
+            <img src="{{ "/assets/icons/documents.png" | absolute_url }}" alt="Folder icon click to go to see {{ category }} posts" />
+            <figcaption>{{ category | capitalize }}</figcaption>
+          </div>
+        </a>
+      {% endif %}
+    {% endfor %}
+
+    {%- for icon in site.jekyll-98.site_links -%}
+      {%- if icon.title and icon.url -%}
+        <a href="{{ icon.url }}" target="{{ icon.target }}">
+          <div class="desktop-icon">
+            {% capture iconlink %}/assets/icons/{{ icon.icon | default: 'document' }}.png{% endcapture %}
+            <img src={{ iconlink | absolute_url }} alt="{{ icon.alt }}" />
+            <figcaption>{{ icon.title }}</figcaption>
+          </div>
+        </a>
+      {%- endif -%}
+    {%- endfor -%}
+  </nav>
+</aside>

data/_includes/footer.html

@@ -0,0 +1,13 @@
+<div class="window taskbar">
+  {% include startmenu.html %}
+
+  <img src="{{"/assets/icons/spacer.png" | absolute_url }}" />
+
+  <div class="social-wrapper">{%- include social.html -%}</div>
+
+  <img src="{{"/assets/icons/spacer.png" | absolute_url }}" />
+
+  <div class="stendo"></div>
+
+  {% include systray.html %}
+</div>

data/_includes/google-analytics.html

@@ -0,0 +1,9 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script>
+  window['ga-disable-{{ site.google_analytics }}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ site.google_analytics }}');
+</script>

data/_includes/head.html

@@ -0,0 +1,11 @@
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
+  {%- include stylelink.html -%}
+  <!-- TODO: add back feed tag maybe -->
+  {%- if jekyll.environment == 'production' and site.google_analytics -%} {%-
+  include google-analytics.html -%} {%- endif -%} {%- include custom-head.html
+  -%}
+</head>

data/_includes/okcancel.html

@@ -0,0 +1,4 @@
+<section class="field-row" style="justify-content: flex-end">
+  <a href="{{include.oklink}}"><button>OK</button></a>
+  <a href="{{include.cancellink}}"><button>Cancel</button></a>
+</section>

data/_includes/post_list.html

@@ -0,0 +1,62 @@
+{% if page.paginator %}
+  {% assign paginator = page.paginator %}
+{% endif %}
+{% if site.paginate %}
+  {% assign posts = paginator.posts %}
+{% else %}
+  {% assign posts = site.posts %}
+{% endif %}
+
+{%- if posts.size > 0 -%}
+  <ul class="post-list tree-view">
+    {%- assign date_format = site.jekyll-98.date_format | default: "%b %-d, %Y" -%}
+    {%- for post in posts -%}
+      {% assign icon = post.icon | default: "document" %}
+      <li class="post-list-wrapper">
+        <a class="post-list-item" href="{{ post.url | absolute_url }}">
+          <img
+            class="post-list-icon"
+            src="{{  "/assets/icons/" | append: icon | append: ".png" | absolute_url}}"
+            alt="{{post.title}}" />
+          <div class="post-link">{{ post.title | escape }}</div>
+          <div class="post-meta">{{ post.date | date: date_format }}</div>
+          {%- if site.show_excerpts -%}
+            <div class="post-excerpt">{{ post.excerpt | strip_html }}</div>
+          {%- endif -%}
+        </a>
+        {%- if site.show_categories and post.categories.size > 0 -%}
+          <div class="post-tags">
+            <div class="post-categories-label">Categories:
+            </div>
+            {% for tag in post.categories %}
+              {% assign taglink = "/category/" | append: tag | append: "/" | absolute_url %}
+              <a class="post-tag" href="{{ taglink }}">{{ tag }}</a>
+            {% endfor %}
+          </div>
+        {% else %}
+          <div style="margin: 6px;" />
+        {%- endif -%}
+      </li>
+    {%- endfor -%}
+  </ul>
+
+  {% if site.paginate %}
+    <div class="pager">
+      {%- if paginator.previous_page %}
+        <a href="{{ paginator.previous_page_path }}" class="previous-page">
+          <button>Page {{ paginator.previous_page }}</button>
+        </a>
+      {%- else %}
+        <button class="pager-edge" disabled>First Page</button>
+      {%- endif %}
+      <button class="current-page">{{ paginator.page }}</button>
+      {%- if paginator.next_page %}
+        <a href="{{ paginator.next_page_path }}" class="next-page">
+          <button>Page {{ paginator.next_page }}</button>
+        </a>
+      {%- else %}
+        <button class="pager-edge" disabled>Last Page</button>
+      {%- endif %}
+    </div>
+  {%- endif %}
+{%- endif -%}