Giter Club home page Giter Club logo

samer.kanjo.net's Introduction

samer.kanjo.net site

Fonts

This web site is using several custom fonts including:

Originally I was referencing these fonts as NPM packages from Fontsource and Fortawsome, and using 11ty to select the necessary files from package source and copying to my build directory. However, I decided to include the fonts directly in the site as static assets to avoid having to download them on every build.

For Inter and Roboto fonts, I am using font-files from Fontsource to select the font files and CSS I would like to use on this site. For Font Awesome, I am using Font Awesome Free to select the font files and CSS I would like to use on this site.

All licenses for the fonts are included in source.

samer.kanjo.net's People

Contributors

skanjo avatar

Watchers

James Cloos avatar  avatar

samer.kanjo.net's Issues

Add bits section to the site

Bits will be my form of microblogging, something similar to Tweets. No pagination support and no comments. Eventually when I have enough of them I will consider a solution for infinite scrolling. Eventually I will add support for hashtags.

Change name of blog from bytes back to blog

Given I am no longer going to add a microblog to my site as part of #61 it does not make sense to name the blog Bytes, in which I was going to use Bytes for the regular blog and Bits for microblog, I am reverting that name change and file structure to reflect this name change.

Convert from using Liquid to Nunjucks

I am finding that 11ty seems to prefer Nunjucks but I swear I read that Nunjucks had fallen out of favor and Liquid was preferred. I am finding the Liquid documentation lacking and have no interest using it with Shopify.

The 11ty blog post for 2.x contained a link to the new starter project and that project was using Nunjucks so it seems to be preferred. In addition, the documentation for Nunjucks is far better and there are more 11ty examples using it.

Going to switch to Nunjucks since the does seem to be preferred by 11ty. So for the sake of less friction with the tool that is what will be done.

Open external links in a new window

While markdown does support links it does not support opening links in a new window using target. It is possible to write an HTML link but it would be nice if I did not need to. Find a way.

Add social icons to site

Add social icons to header including GitHub, BlueSky, and LinkedIn. Add the icons to the right side of the header. Add the icons as the last row in the mobile menu.

Add page footer with edit link

The Vuepress site had a footer containing a link to edit the page on Github and the date the page was last updated. I would like to add that footer back to the site.

Implement blog post list page

The current list page contains a "under construction" message. Need to generate a list from blog posts and add pagination support.

Add next and previous links to bytes

I am not really sure how useful it is but I thought it would be nice to have previous and next links on byte pages. Maybe I should name the links newer or older.

Add featured blog posts to home page

Add featured blog posts to the home page to highlight posts that are frequently visited or would those that I would like to call attention to. Perhaps could pick the top three most recent posts as a starting point. If I included featured blog posts then I would need to identify those posts as featured in frontmatter.

Create unique layout for home page

The site is currently using a single layout for all pages. Update to to have a unique layout for the home page that includes the copyright but does not include the edit link and last modified date. The rest of the pages should include the edit link and last modified date but does not include the copyright.

Reduce Font Awesome resources

I am barely using any assets from Font Awesome yet including them entirely on my site. I need to find a way to reduce the deployed size either by tree shaking, without introducing another build tool outside of 11ty, or consider switch to SVG rather than font.

Add sidebar to reference content layout

The Vuepress site had a left sidebar for content under Reference which contained links to all content topics and a table of contents based on headings of the content. I would like to add the sidebar back in with at least the links to the topics in the section. I may add a right sidebar for the TOC that would change from sidebar to embedded collapse panel at top of page rather than have the headings in the left sidebar.

Vendor fonts

I am currently pulling on sans, serif, and mono fonts as NPM packages from Fontsource and pulling in Font Awesome as a NPM package. I then need to use 11ty to copy over the relevant CSS and font files fro node_modules to the build directory. This makes my 11ty config unnecessarily verbose., IMO. I am not likely to frequently change these fonts. If I vendor the fonts in the static directory and customize the CSS I could remove that copy config given anything in static directory is copied to the build directory. I will also version the directories in case I need to later update the fonts and break the cache without using a checksum in the filenames.

internal markdown links opening in new windows

The link to Terminal in the Reference page opens in a new window as does the link to Reference in the blog post. These are internal links and should update the page in the same window. These links are generated from markdown.

Wrap copy right notice for small screens

The copyright notice wraps for small screen sizes. I would like to consider having it transform to two lines rather than wrap. I think it will look better but won't know til I try it out.

Add site search

Need to add search back to the site. Vuepress provided a basic search by indexing the headings of markdown content. 11ty does have a community plugin that does something similar. Need to consider options.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.