Git Product home page Git Product logo

site's Introduction

Top-Frog Static

Simpler is better. (That died fast)
Too bad I have to use Ruby. And, yes, I know that this whole thing is less than simple ;)

Running Generator

Flickr auth

Setup

  • copy auth.json.dist to auth.json
  • get your flickr api key data and enter to auth.json
  • run pipenv run python auth.py
  • copy and paste the generated url in a browser
  • extract the oauth_verifier token from the XML output and provide it to the script
  • you should now have a fully populated auth.json file

Run

  • pipenv run python cache.py

Local dev server

First we need to install a few things and intialize our docker container:

make install

To run local instance of the site with Apache in Docker, with the latest 50 posts only, and Jekyll watching for changes:

make serve

This starts a docker container and runs jekyll build with the watch flag. Access the site at localhost:8080.

Build

To test the build, which includes full .htaccess config, Content Security Policies, and built assets:

make package

Publish

requires key based SSH auth on remote destination

make package deploy

Writing Posts

Manual lightbox

{% include lightbox-image.html 
	id="unique-url-safe-id"
	img_lg="/path/to/large/photo.jpg"
	img_sm="/path/to/small/photo.jpg"
	title="Title for image alt."
	caption="Figure caption. Triple escape quotes if you must have them."
%}

Flickr embedding with lightbox

{% flickr_photo '17141038408' %} 

Notes

Speeding up LSI

brew install gsl to get parent package. (install libgsl on linux).
Then add gsl, nmatrix & narray gems to Gemfile. Then bundle install.

You may have to install nmatrix and narray gems first, then install gsl.

site's People

Contributors

gipetto avatar

Watchers

 avatar

site's Issues

ERROR Crawled 653 urls with 13 error(s) in 9.11 seconds

ERROR Crawled 653 urls with 13 error(s) in 9.11 seconds

Start URL(s): http://localhost:4000

Improve tokenization of code blocks.

See: /2009/07/10/simple-but-handy-htaccess-tricks/

Tokens:

two always questions mind until recently ive never need actually put time satisfying
 curiosity look around havent easily found real world examples out know set basic 
http authentication right good here please reread post corrected erroneous information 
something htaccess file authtype require validuser authname halt goes authuserfile 
wwwpasswordspasswd now few tweaks make less simple nothing wall between users 
content free allowing access via address want password outsiders coworkers getting 
tired entering username small visit needed site office static allow xxxxxxxxxxxx satisfy 
telling apache requirements matches grant unprotecting sometimes poke holes unfettered 
one resource another pretty straight forward first lets entire directory open add code much 
tell anyone auth directives considered satisfied maybe dont give full everything folder done 
use files directive provide filename ltfiles filehtmlgt ltfilesgt lastly series based regex 
matching allows images without requiring ltfilesmatch gifjpegpnggt ltfilesmatchgt thats 
really scratching surface lot day needs projects development shouldnt opened whole 
guys long way helping life little bit easier

**Text Only Improvements**

  • hide blank bullet item in nav list from screen readers, or do away with it all together. (maybe this is alt-text on the link since it includes an SVG that text-only browsers don't see)
  • Also clean up utf8 arrows in the photo links list.
  • Add space between PP glyph and headline, preferably set an aria-hidden as well
  • remove alt text from header/logo images
  • next/previous post links

CSP Fix Ups

Current Settings

default-src 'self'; 
script-src 'self' https://unpkg.com https://cdnjs.cloudflare.com; 
img-src 'self' *.staticflickr.com *.flickr.com www.paypalobjects.com data:; 
style-src 'self' 'sha256-vWFHFpReq+csliHvKw19HHfApplOq7p8ofyz464w27k='; 
connect-src 'self'; 
frame-src *.youtube.com;

CSP Evalutator

Screen Shot 2020-08-17 at 9 13 05 AM

Additional Items

Navigation is terrible for screen readers

The current navigation menu isn't nice for screen readers. Its aria-expanded has no meaning because it is a child of the container that expands. It also doesn't reference the element that it controls.

  • Extract the hamburger menu and place it in the dom before the menu
    • Add an aria-controls attribute that references the navigation menu
  • TBD: how to properly hide the hamburger from screen readers when not relevant

Threads

  • Build list of thread posts
  • Show "this is part of a thread"
  • Style "this is part of a thread"
  • Basic thread page and output
  • Style list with dots, line and spacing
  • Implement long time span spacer with pure css
  • Threads list page?
  • Make a jekyll plugin

**Archive improvements**

  • Keep on one line for text only browsers and screen readers
  • Organize by month as well as year
  • Introduce better visual hierarchy
  • Include categories, include filter by category
  • Prune sidebar?

**Dog Stuff**

  • Link to posts about dogs on Puppycam page.
  • Include dog emoji to mimic 404 & 500 pages

HTC hovers broken with CSP

Content Security Policy: The page’s settings observed the loading of a resource at inline (“style-src”). A CSP report is being sent.

Flickr cache

  • Pull ids from posts (python)
  • Cache post data (python)
  • Load and use cache (ruby)
  • Cache post on cache miss (ruby)

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.