From 8abd7f50d144468dcb5567b2cb125ce8169a7b4d Mon Sep 17 00:00:00 2001 From: clemtre Date: Fri, 22 Mar 2024 14:18:59 +0100 Subject: [PATCH] v2 : no more dependy to jquery, signet generates instead of
    --- edit_bookmarks_dmenu.sh | 80 ---------------- interface_dmenu.sh | 60 ++++++++++++ script.js | 66 +++----------- signet.sh | 139 ++++++++++++++++------------ style.css | 196 +++++++++------------------------------- 5 files changed, 196 insertions(+), 345 deletions(-) delete mode 100755 edit_bookmarks_dmenu.sh create mode 100755 interface_dmenu.sh diff --git a/edit_bookmarks_dmenu.sh b/edit_bookmarks_dmenu.sh deleted file mode 100755 index d4efa45..0000000 --- a/edit_bookmarks_dmenu.sh +++ /dev/null @@ -1,80 +0,0 @@ -#!/bin/sh - -# needs a better name - -# - - - - - - - - - - - - - - - - ARGS - - - - - - - - - - - - - - - - - -show_help() { - echo "Usage:" - echo "1. Copy the desired Url to your clipboard" - echo "2. ./edit_bookmarks_dmenu.sh BOOKMARKS" - echo "Options:" - echo " --help Display this help message" - exit 1 -} -if [ "$#" -eq 0 ]; then - echo "Nothing happened, I need a file of bookmarks to edit." - show_help -fi - -while [ "$#" -gt 0 ]; do - case "$1" in - --help) - show_help - ;; - -*) - echo "Error: Unknown option: $1" >&2 - show_help - ;; - esac - shift -done -dmenu_style() { - local font='junicode-18' - local normal_bg='#000000' - local normal_fg='#FFFFFF' - local selected_bg='#AAAAAA' - local selected_fg='#000000' - echo "-fn $font -nb $normal_bg -nf $normal_fg -sb $selected_bg -sf $selected_fg" -} -# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - -# TODO : process multiple files of BOOKMARKS at once -BOOKMARKS=$1 - -URL=$(xclip -o -selection clipboard) - -# The curl for Name: is a blocking process and will pause the programm -# in case internet shuts :^) - -# TODO : -# add description, tags and color in one field with symbols such as : -# § this is a description. § comma, separated, tags § color - -# If the given string ressembles to a url, continue. -# https://stackoverflow.com/questions/21115121/how-to-test-if-string-matches-a-regex-in-posix-shell-not-bash -# URL_REGEX="^(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]*[-A-Za-z0-9+&@#/%=~_|]" -if printf "$URL" | grep -q http; then -# TODO : incrementing id replacing
      list counter -#PREV_URL_COUNT=$(grep "URL: " $BOOKMARKS | wc -l) -#ID: $((PREV_URL_COUNT + 1)) -# TODO : add the bookmark in reverse, last in first first on the stack -# maybe using tac instead of cat ? -cat <<- EOF >> $BOOKMARKS - -URL: $(printf $URL) -Name: $(curl $URL | awk -v RS='' '\ -// {gsub(/.*<title>/, ""); print}\ -' | tr -d '\n') -Description: $(printf "" | dmenu -p "Enter a description: " $(dmenu_style)) -Tags: $(printf "" | dmenu -p "Enter comma separated tags: " $(dmenu_style)) -Date: $(date +%s) - -EOF - -else - printf "Text in clipboard is not a url" - exit -fi - -# what we used to need htmlq for : -# name=$(curl $url | ~/.cargo/bin/htmlq title --text | sed -r '/^\s*$/d' | sed 's/^ *//g') diff --git a/interface_dmenu.sh b/interface_dmenu.sh new file mode 100755 index 0000000..8027c87 --- /dev/null +++ b/interface_dmenu.sh @@ -0,0 +1,60 @@ +#!/bin/bash + +# - - - - - - - - - - - - - - - - ARGS - - - - - - - - - - - - - - - - - +show_help() { + printf " +Usage: + 1. Copy the desired URL to your clipboard + 2. ./interface_dmenu.sh BOOKMARKS +Options: + --help Display this help message" + exit 1 +} +if [ "$#" -eq 0 ]; then + printf "Nothing happened, I need a file of bookmarks to edit." + show_help +fi + +while [ "$#" -gt 0 ]; do + case "$1" in + --help) + show_help + ;; + -*) + printf "Error: Unknown option: $1" >&2 + show_help + ;; + esac + shift +done + +dmenu_style() { + local font='junicode-18' + local normal_bg='#000000' + local normal_fg='#FFFFFF' + local selected_bg='#AAAAAA' + local selected_fg='#000000' + echo "-fn $font -nb $normal_bg -nf $normal_fg -sb $selected_bg -sf $selected_fg" +} +# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- + +URL=$(xclip -o -selection clipboard) + +if [ "${URL#"http"}" != "$URL" ]; then + DESC=$(dmenu -p "$URL · description →" $(dmenu_style)) + TAGS=$(dmenu -p "$URL · $DESC · tags →" $(dmenu_style)) + +cat <<- EOF > signet +URL: $URL +Description: $DESC +Tags: $TAGS +Date: $(date +%g/%m/%d) + +EOF + +./edit.sh + +else + printf "Text in clipboard is not a url" + exit +fi diff --git a/script.js b/script.js index cb9008d..cafd744 100644 --- a/script.js +++ b/script.js @@ -1,59 +1,19 @@ -//document.addEventListener("keydown", function(event) { -// var keyPressed = event.key.toLowerCase(); -// -// if (keyPressed === 'p') { -// const val = Math.round(Math.random()*255) -// document.querySelector('body').style.background = `rgba(${val},${val /2},${val})` -// console.log("The 'P' key was pressed"); -// } -//}); - -// Barre de recherche -$(document).ready(function () { - $('li').addClass('active') - $('textarea').on('input', function () { - var userInput = $(this).val().toLowerCase(); - - $('li').each(function () { - var listItemText = $(this).text().toLowerCase(); - if (listItemText.includes(userInput)) { - $(this).addClass('active'); - } else { - $(this).removeClass('active'); - } - }); - - }); -}); - -// On convertit les dates au format AA-MM-JJ -function formatDateFromEpoch(epochTime) { - const date = new Date(epochTime * 1000); - - const YY = date.getFullYear().toString() - const MM = ('0' + (date.getMonth() + 1)).slice(-2) - const DD = ('0' + date.getDate()).slice(-2) - - if(epochTime == ''){ - - return `N/A`; - } - - return `${YY}/${MM}/${DD}`; +const textarea = document.querySelector('textarea') + +function updateValue(e) { + let val = textarea.value.toLowerCase() + document.querySelectorAll('.signets tr').forEach((e) => { + var listItemText = e.innerHTML.toLowerCase(); + listItemText.includes(val) ? + e.classList.remove('hidden') : e.classList.add('hidden') + }) } -const dates = document.querySelectorAll('h4') -dates.forEach((date) => { - date.innerHTML= formatDateFromEpoch(date.innerHTML) -}) - -// On cache les descriptions si elles sont vides -$('h2').each(function() { - $(this).html() == '' ? $(this).hide() : $(this).show() +document.addEventListener("DOMContentLoaded", function(event) { + textarea.addEventListener("input", updateValue); }) -// On colore les entrées qui ont un attribut 'color' -$('[color]').each(function() { - $(this).css('background', `linear-gradient(var(--background), ${$(this).attr('color')} `) +document.querySelectorAll('[color]').forEach((e) => { + e.style.background = `linear-gradient(var(--background), ${e.getAttribute('color')} ` }) diff --git a/signet.sh b/signet.sh index c5ec58e..42b1e98 100755 --- a/signet.sh +++ b/signet.sh @@ -31,7 +31,7 @@ while [ "$#" -gt 0 ]; do if [ -f "$1" ]; then break else - echo "The file you provided doesn't seam to exist : $1" + echo "The file provided doesn't seem to exist : $1" exit 1 fi ;; @@ -40,77 +40,102 @@ while [ "$#" -gt 0 ]; do done # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- -# I thought about using recutils db from GNU but went back to plain text -# DB=BOOKMARKS.rec -DB=$1 - -cat <<- EOF -<!DOCTYPE html> -<html> - <head> - <title>⛵ → $(date "+%g-%m-%d, %H:%M") - - - - - - -
      - - -
        -$( -awk -v RS= '!/Tags: .*hide/ {print $0 "\n"}' $DB |\ +blanklineRecords_to_html() +{ awk -v RS= ' { if ($0 != "") { + id="" + URL="" + DESC="" + TAGS="" + DATE="" + color="" + split($0, lines, "\n") - color = "" for (i in lines) { + if(lines[i] ~ /^[0-9]+$/ ) { + id=lines[i] + } split(lines[i], parts, ": ") field = parts[1] value = parts[2] - if (field == "Color") { - color = value - } - vals[i] = value - } - URL=vals[1] - NAME=vals[2] - DESC=vals[3] - TAGS=vals[4] - DATE=vals[5] - print "
      1. " - print "" + if(field ~ /^Color/ ) {color=value} + if(field ~ /^URL/ ) {URL=value } + if(field ~ /^Name/ ) {NAME=value } + if(field ~ /^Description/ ) {DESC=value } + if(field ~ /^Tags/ ) {TAGS=value } + if(field ~ /^Date/ ) {DATE=value } - if (color != "") { - print "
        " - } - else { - print "
        " } - print "

        " DATE "

        " \ - "

        " NAME "

        " \ - "
        " URL "
        " \ - "

        " DESC "

        " \ - "

        " TAGS "

        " + if(color != ""){ + printf "
", color + } + else{ + printf "%s", "" + } + printf "", id - print "" - print "" - print "" + printf "" + + printf "\n", TAGS + printf "\n", DATE + + print "" } -} ' +} ' +} +DB=$1 +cat <<- EOF + + + + ⛵ → $(date "+%g-%m-%d, %H:%M") + + + + + +

liens épinglés

+
%d%s\n", URL, NAME + if(DESC != "") {printf "

%s

\n", DESC} + printf "

%s

%s
+ $( +cat $DB |\ +awk -v RS= '/PIN/ {print $0 "\n"}' | blanklineRecords_to_html +) + +
+
+ +
+
+ tags + +
+
+ + + + + + + +$( +cat $DB |\ +blanklineRecords_to_html ) - +
#Title, URL, descriptiontagsy/m/d +
diff --git a/style.css b/style.css index 29858a2..39d272f 100644 --- a/style.css +++ b/style.css @@ -1,24 +1,15 @@ -/* h1 → Name - * h2 → Description - * h3 → Tags - * h4 → Date - * h5 → Url - */ -:root { - --font-size:22px; - --font-size-s:calc(var(--font-size) / 1.5); - --line-height:24px; - --date-width:10ch; - --gutter:0px; - --padding:2px; +:root{ + --font-size:12px; + --line-height:16px; + --gap:2px; + --height:calc(var(--line-height) + var(--gap) * 2); --height:auto; - --color:black; - --selection:purple; - --background:#FFF; - --background-2:#FEFEFE; - --background-bottom:black; + --width-number:2em; + --background:#FEFEFE; + --link:purple; + --text:black; + --selection:lightyellow } -/* https://github.com/psb1558/Junicode-font/releases */ @font-face { font-family: Junicode; src: url("Junicode-CondLight.otf") format("opentype"); @@ -32,158 +23,53 @@ font-family: Junicode, serif; font-variant-numeric: lining-nums; } -h1,h2,h3,h4,h5,p, a { - text-wrap:wrap; - word-break: break-word; - line-height:var(--line-height); - padding:0; - margin:0; - font-weight:normal; - font-size:var(--font-size); -} -h1,h2,h3,h5 { - display:inline; -} -nav, section, textarea { - padding: var(--padding) 0; -} -a{ - width:100%; - display:block; - color:var(--color); - text-decoration:none; - margin:auto; +textarea {width:100%;padding:0;margin:0; + border:1px dotted black; + height:var(--height) } -h5 { -text-decoration:underline } -li:hover a { -color:var(--selection)} +.PIN date, .PIN .tags, .PIN .id {display:none} +tr a{color:var(--text); text-decoration:none} +tr a::after{ + margin-left:5px; content:attr(href); color:var(--link); + text-decoration:underline} -textarea{ - position:fixed; - top:0; - left:5px; - z-index:10; - width:calc(100vw - 10px); - font-size:var(--font-size); - height:calc(var(--line-height) + var(--padding)); -} -ol { - margin:0; - display:flex; - gap:var(--gutter); - flex-direction:column-reverse; +li:hover a::after{display:block} -} -body { +tbody tr:hover {background:var(--selection)} +td {line-height:var(--line-height); + height:var(--height); + border-bottom: 1px solid black; + padding: var(--gap) 5px; + word-break:break-word; } -footer { - height:100vh; - margin-top:50vh; - background:linear-gradient( var(--background), var(--background-bottom)); - width:calc(100% + 20px - 2px); - margin-left:-10px; - margin-bottom:-10px; - overflow:hidden; -} -li { - font-size:var(--font-size); - color:rgba(0,0,0,0); - height:0; - overflow:hidden -} -li * {opacity:0} -.active:nth-of-type(2n){ - background:var(--background-2); +table { + border-collapse:collapse; + border: 1px dotted black; } -li,textarea, nav { - - box-sizing:border-box; - border:none; -} -.active * {opacity:1} -.active { +hr{ border:none; border-bottom: 1px solid black; - height:var(--height); - display:list-item; - color:var(--color); - overflow:visible; -} -h1,h2,a { -} -h3{ - opacity:.5 -} -section{ - padding-right:var(--date-width); - height:calc(var(--font-size) + 2px) ; - overflow:hidden; } -section:hover{ -height:auto -} -section:hover h1, h2, h3, h5{ - display:inline -} -h1 {order: 0; - -} -h2 { -font-style:italic} -h5,h2,h3,h4 { - order:3 -} - - h3::before, h2::before, h1::after{content:'\00a0·\00a0';} - -h4 { - width:var(--date-width); - width:fit-content; - text-align: right; +button::after { + content:" "attr(count); position:absolute; - right:10px; + transform:translate(1px, -5px) } -html{background:white} -nav p {display:inline; -} -nav p:not(:first-of-type)::before{ - content:'· ' -} -nav p::after{ - font-size:var(--font-size-s); - display:inline-block; - transform:translateY(-7px); - content:'\00a0(' attr(count) ')' -} -nav { - border-top: 1px solid black; - border-bottom: 1px solid black; - margin-top:calc(var(--line-height) + 1px + var(--padding)); - height:calc(var(--line-height) + var(--padding) * 2); - overflow:hidden; -} -nav:hover {height:auto} -#cc { - display:absolute; - position:fixed; - top:0; - left:0; - z-index:10; - height:100vh; - width:100vw; - pointer-events:none; - background:linear-gradient(0deg, yellow, ivory); - mix-blend-mode:multiply; +button{background:transparent;border:none} - /* A color correction pass, enable it by removing this line ↓ */ - display:none -} +p{margin:0;display:inline} +.desc {opacity:.5} + +td:last-of-type {text-align:center;min-width:8ch} +td:first-of-type {text-align:center;width:4ch} +td:nth-of-type(3) {text-align:center} +.hidden{display:none} +tr,table {min-width:100%}