Make your own TODO webpage automatically from your code

Search This thread
By:
Advanced…
AdamOutler

AdamOutler

Retired Senior Recognized Developer
Feb 18, 2011
5,224
9,827
Miami, Fl̨̞̲̟̦̀̈̃͛҃҅͟orida
We have an automatic build server which you can trigger yourself at http://jenkins.casual-dev.com. As a part of the build process it generates a Todo list. This is useful for those of you who have open source projects and would like to accumulate all of your TODOs online somewhere. You can see the todo list in action here: http://builds.casual-dev.com/todo.html

How's it work? It searches the code for "TODO" or "todo" comments. When it finds one, it notes the line number, and the line itself. It attempts to remove the words "//todo" or "//TODO". Then it combines the information all together into HTML format and applies CSS from this page http://codepen.io/bennettfeely/pen/Ftczh

You will need to setup the following:
  1. to run on a Linux/Mac computer or Cygwin under Windows with your source code. This script uses bash.
  2. modify the outputFolder variable to the desired location of your todo.html file (possibly /var/www/)
  3. modify the localFolder variable to the location which the trunk of your source exists (/home/adamoutler/code/project/trunk)
  4. modify the onlineSourceBrowser to match the http address of your trunk folder.
  5. modify the bannerpic to your own image
  6. the script below, copied into /usr/local/bin/makeTodo.

Here is the script.
Code: 
#todosite.sh creates a webpage our of todo comments and formats like Google Now
#Copyright (C) 2013  Adam Outler
#
#  This program is free software: you can redistribute it and/or modify
#  it under the terms of the GNU General Public License as published by
#  the Free Software Foundation, either version 3 of the License, or
#  (at your option) any later version.
#
#  This program is distributed in the hope that it will be useful,
#  but WITHOUT ANY WARRANTY; without even the implied warranty of
#  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#  GNU General Public License for more details.
#
#  You should have received a copy of the GNU General Public License
#  along with this program.  If not, see <http://www.gnu.org/licenses/>.

#! /bin/bash

#Path to your code
startingFolder="./code/myCode";
#Path to output the HTML Todo List
outputFolder=/home/adamoutler/website/builds
#Banner picture
bannerpic='http://casual-dev.com/wp-content/uploads/2013/11/cdev.png'
#Source repository browser, for links to your code
onlineSourceBrowser="http://code.google.com/p/android-casual/source/browse/"


cd "$startingFolder"
todoSearch=$(grep -n -r -e ".*todo.*" -e ".*TODO.*" trunk 2>&1)
itemnum=0
echo ''>todolist.html
echo ''>todo.txt


#build list
while IFS= read -r line
do
  if [[ $line =~ .*matches  || $line =~ .*\/Libraries\/.*  || $line =~ .*CASPACCASUAL/changelog.txt.* ]]; then
     continue;
  else 
    echo $line
    filename=$(echo "$line"| tr -s \  |sed s/\:.*// )
    friendlyname=$(echo "$filename"| tr -s \  |sed s/.*\\\/// )
    friendlyname=${friendlyname/'.java'/}
    linenumber=$(echo "$line"|  tr -s \ | awk -F':' '{print $2}')  
    message=$(echo "$line"| tr -s \  |sed -es/.*:// -es/.*://)
    echo "file $filename \n lineNumber $linenumber \n message $message"
    URL="$onlineSourceBrowser$filename#"$linenumber
    echo "<a href=\"$URL\" target="_blank"><section class=\"card\"><h1><strong>${friendlyname//./.<wbr>}</strong> line $linenumber</h1>">>todolist.html
    echo "$message<hr>">>todolist.html
    echo "<small><small>${filename//"/"//<wbr>}</small></small></section></a>">>todolist.html
  fi
  itemnum=$[$itemnum+1]

done <<< "$todoSearch"
echo '</main>'>>todolist.html
#html doc
echo '<!DOCTYPE html>

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);

* { font-family: 'Roboto', sans-serif; line-height:1.2; }

body { background:#222;  }


main {
  display:block;
  position:relative;
  margin: 3vh auto;
  width:28rem;
  padding: 1.5rem 0 0;
  background:#d5d5d5;
  outline
  border-radius:.25rem;
  overflow:hidden;
  transform:scale(.75);
  transform-origin:center 3rem;
  transition:transform .3s;
}
body:hover main {
  transform:scale(1);
}

header {
  width:28rem;


  position:absolute;
  z-index:0;
  top:0; left:0; right:0;
  height:8rem;
  margin: 0vh auto;
  background:url('$bannerpic') no-repeat center center;
  background-size:100%;
}

body {
display: block;
margin: 0px;

}
input, .card {
  position:relative;
  z-index:2;
}
input {
left: -12rem;
display: block;
width: 24rem;
margin-left: 50%;
margin-top: 3.7rem;
border: 0;
font-size: 1.2rem;
padding: .75rem 1rem;
border-radius: 3px;
box-shadow: 0 1px 2px #aaa;
transition: .5s, margin-bottom .15s;
}


input:focus + header {
  transform:translate3d(0,-10rem,0);
  opacity:0;
}

.card {
  padding:1.5rem;
  box-shadow:0 1px 2px #aaa;
  background:white;
  margin:0 1rem 1rem;
  border-radius:3px;
  user-select:none;
  animation:fly-in-from-left .5s 1s ease both;
  transform-origin:top left;
}
.card:nth-child(even){
  animation-name:fly-in-from-right;
  animation-delay:1.1s;
 transform-origin:top right;
}

@keyframes fly-in-from-left {
  from {
    transform:translateY(15rem) rotate(15deg);
    opacity:0;
  }
}

@keyframes fly-in-from-right {
  from {
    transform:translateY(15rem) rotate(-15deg);
    opacity:0;
  }
}
a {
    color: inherit;
    text-decoration: none;
    font-weight:inherit;
}
a:visited{
    color: inherit;
    text-decoration: none;
    font-weight:inherit;
}
a:hover 
{
     color: inherit; 
     text-decoration:none; 
     cursor:pointer;  
}
.card:after {

  position:absolute;
  font-size:.9rem;
  top:1.5rem;
  right:1rem;
  content:"i";
  border:thin solid gray;
  color:gray;
  width:1rem;
  line-height:1rem;
  text-align:center;
  border-radius:50%;
  pointer-events:none;
}

h1 {
  font-size:2rem;
  font-weight:200;
}
  strong {
    font-weight:300;
    color:#539D00;
  }

h2 {
  font-size:.9rem;
  line-height:2.5;
  color:gray;
  font-weight:400;
}

.map {
 
  background:whitesmoke;
  margin:.5rem 0 0 -1.5rem;
  width:28rem;

}</style>
</style><meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<head>

</head>
<body>

<meta name="viewport" content="width=device-width" />
'>todo.html
#header
echo '<header></header>
<form class="iform" id="iform"><input placeholder="Search, or say Ok Google" x-webkit-speech autocomplete="off" type="text"  onKeyPress='"open('http://example.com/submit.php?url='+escape(q),'','resizable,location,menubar,toolbar,scrollbars,status');"'</form>
<main>
<section class="card"><h2>TODO list: '$itemnum' items</h2></section>
' >>todo.html

#list
cat todolist.html >>todo.html
rm todolist.html
cp todo.html "$outputFolder"

cat todo.txt
After the setup described above, it runs with the command "makeTodo" and will generate a webpage which contains clickable links to the exact lines of code which require "todo"ing. I hope this is helpful.
Screenshot_2013-11-10-17-54-06.png
 

Attachments

  • Screenshot_2013-11-10-17-54-06.png
    Screenshot_2013-11-10-17-54-06.png
    159.2 KB · Views: 304
Last edited:
  • Like
Reactions: dukedusty, yashade2001, Zeuscluts and 1 other person
You must log in or register to reply here.

Similar threads

P
  • Sticky
[Discussion] What's your next smartphone / What should I buy
Replies
21K
Views
1M
stlsht
stlsht
M
Want to make your Pocket PC Today screen look exactly like iPhone? READ THIS!
Replies
349
Views
578K
U
udaymahi
luis86dr
  • Locked
[DISCUSSION] What's the first phone you've ever owned?
Replies
6K
Views
454K
justmpm
justmpm
Badger50
  • Locked
  • Sticky
Welcome to the forum! (A message from the moderators)
Replies
0
Views
347K
Neo
Neo
a5hi5h
Use Your Android Device as Wifi Repeater or Extender
Replies
99
Views
183K
a5hi5h
a5hi5h

Top Liked Posts

24 Hours All time
  • There are no posts matching your filters.
  • 4
    AdamOutler
    AdamOutler
    We have an automatic build server which you can trigger yourself at http://jenkins.casual-dev.com. As a part of the build process it generates a Todo list. This is useful for those of you who have open source projects and would like to accumulate all of your TODOs online somewhere. You can see the todo list in action here: http://builds.casual-dev.com/todo.html

    How's it work? It searches the code for "TODO" or "todo" comments. When it finds one, it notes the line number, and the line itself. It attempts to remove the words "//todo" or "//TODO". Then it combines the information all together into HTML format and applies CSS from this page http://codepen.io/bennettfeely/pen/Ftczh

    You will need to setup the following:
    1. to run on a Linux/Mac computer or Cygwin under Windows with your source code. This script uses bash.
    2. modify the outputFolder variable to the desired location of your todo.html file (possibly /var/www/)
    3. modify the localFolder variable to the location which the trunk of your source exists (/home/adamoutler/code/project/trunk)
    4. modify the onlineSourceBrowser to match the http address of your trunk folder.
    5. modify the bannerpic to your own image
    6. the script below, copied into /usr/local/bin/makeTodo.

    Here is the script.
    Code: 
    #todosite.sh creates a webpage our of todo comments and formats like Google Now
#Copyright (C) 2013  Adam Outler
#
#  This program is free software: you can redistribute it and/or modify
#  it under the terms of the GNU General Public License as published by
#  the Free Software Foundation, either version 3 of the License, or
#  (at your option) any later version.
#
#  This program is distributed in the hope that it will be useful,
#  but WITHOUT ANY WARRANTY; without even the implied warranty of
#  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#  GNU General Public License for more details.
#
#  You should have received a copy of the GNU General Public License
#  along with this program.  If not, see <http://www.gnu.org/licenses/>.

#! /bin/bash

#Path to your code
startingFolder="./code/myCode";
#Path to output the HTML Todo List
outputFolder=/home/adamoutler/website/builds
#Banner picture
bannerpic='http://casual-dev.com/wp-content/uploads/2013/11/cdev.png'
#Source repository browser, for links to your code
onlineSourceBrowser="http://code.google.com/p/android-casual/source/browse/"


cd "$startingFolder"
todoSearch=$(grep -n -r -e ".*todo.*" -e ".*TODO.*" trunk 2>&1)
itemnum=0
echo ''>todolist.html
echo ''>todo.txt


#build list
while IFS= read -r line
do
  if [[ $line =~ .*matches  || $line =~ .*\/Libraries\/.*  || $line =~ .*CASPACCASUAL/changelog.txt.* ]]; then
     continue;
  else 
    echo $line
    filename=$(echo "$line"| tr -s \  |sed s/\:.*// )
    friendlyname=$(echo "$filename"| tr -s \  |sed s/.*\\\/// )
    friendlyname=${friendlyname/'.java'/}
    linenumber=$(echo "$line"|  tr -s \ | awk -F':' '{print $2}')  
    message=$(echo "$line"| tr -s \  |sed -es/.*:// -es/.*://)
    echo "file $filename \n lineNumber $linenumber \n message $message"
    URL="$onlineSourceBrowser$filename#"$linenumber
    echo "<a href=\"$URL\" target="_blank"><section class=\"card\"><h1><strong>${friendlyname//./.<wbr>}</strong> line $linenumber</h1>">>todolist.html
    echo "$message<hr>">>todolist.html
    echo "<small><small>${filename//"/"//<wbr>}</small></small></section></a>">>todolist.html
  fi
  itemnum=$[$itemnum+1]

done <<< "$todoSearch"
echo '</main>'>>todolist.html
#html doc
echo '<!DOCTYPE html>

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,900,700italic,900italic);

* { font-family: 'Roboto', sans-serif; line-height:1.2; }

body { background:#222;  }


main {
  display:block;
  position:relative;
  margin: 3vh auto;
  width:28rem;
  padding: 1.5rem 0 0;
  background:#d5d5d5;
  outline
  border-radius:.25rem;
  overflow:hidden;
  transform:scale(.75);
  transform-origin:center 3rem;
  transition:transform .3s;
}
body:hover main {
  transform:scale(1);
}

header {
  width:28rem;


  position:absolute;
  z-index:0;
  top:0; left:0; right:0;
  height:8rem;
  margin: 0vh auto;
  background:url('$bannerpic') no-repeat center center;
  background-size:100%;
}

body {
display: block;
margin: 0px;

}
input, .card {
  position:relative;
  z-index:2;
}
input {
left: -12rem;
display: block;
width: 24rem;
margin-left: 50%;
margin-top: 3.7rem;
border: 0;
font-size: 1.2rem;
padding: .75rem 1rem;
border-radius: 3px;
box-shadow: 0 1px 2px #aaa;
transition: .5s, margin-bottom .15s;
}


input:focus + header {
  transform:translate3d(0,-10rem,0);
  opacity:0;
}

.card {
  padding:1.5rem;
  box-shadow:0 1px 2px #aaa;
  background:white;
  margin:0 1rem 1rem;
  border-radius:3px;
  user-select:none;
  animation:fly-in-from-left .5s 1s ease both;
  transform-origin:top left;
}
.card:nth-child(even){
  animation-name:fly-in-from-right;
  animation-delay:1.1s;
 transform-origin:top right;
}

@keyframes fly-in-from-left {
  from {
    transform:translateY(15rem) rotate(15deg);
    opacity:0;
  }
}

@keyframes fly-in-from-right {
  from {
    transform:translateY(15rem) rotate(-15deg);
    opacity:0;
  }
}
a {
    color: inherit;
    text-decoration: none;
    font-weight:inherit;
}
a:visited{
    color: inherit;
    text-decoration: none;
    font-weight:inherit;
}
a:hover 
{
     color: inherit; 
     text-decoration:none; 
     cursor:pointer;  
}
.card:after {

  position:absolute;
  font-size:.9rem;
  top:1.5rem;
  right:1rem;
  content:"i";
  border:thin solid gray;
  color:gray;
  width:1rem;
  line-height:1rem;
  text-align:center;
  border-radius:50%;
  pointer-events:none;
}

h1 {
  font-size:2rem;
  font-weight:200;
}
  strong {
    font-weight:300;
    color:#539D00;
  }

h2 {
  font-size:.9rem;
  line-height:2.5;
  color:gray;
  font-weight:400;
}

.map {
 
  background:whitesmoke;
  margin:.5rem 0 0 -1.5rem;
  width:28rem;

}</style>
</style><meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<head>

</head>
<body>

<meta name="viewport" content="width=device-width" />
'>todo.html
#header
echo '<header></header>
<form class="iform" id="iform"><input placeholder="Search, or say Ok Google" x-webkit-speech autocomplete="off" type="text"  onKeyPress='"open('http://example.com/submit.php?url='+escape(q),'','resizable,location,menubar,toolbar,scrollbars,status');"'</form>
<main>
<section class="card"><h2>TODO list: '$itemnum' items</h2></section>
' >>todo.html

#list
cat todolist.html >>todo.html
rm todolist.html
cp todo.html "$outputFolder"

cat todo.txt
    After the setup described above, it runs with the command "makeTodo" and will generate a webpage which contains clickable links to the exact lines of code which require "todo"ing. I hope this is helpful.
    Screenshot_2013-11-10-17-54-06.png
    View
    1
    MCSH
    MCSH
    Wow, it's really nice...!
    View
    1
    Zeuscluts
    Zeuscluts
    Nice Work...

    Very nice Script.
    I am sure this will definately Help...
    I will give it a Try. ..:D
    View

New posts