StackTack is a tool that will fetch information about any question in the Stack Exchange network of sites and format it in a nicely-styled and functional widget.
This fork has few changes from the already forked StackTack. The changes are:
build.pywas transformed to Python 3.- Dedicated
demofolder was added, with a shorterdemo.htmlfile. - Few documentation fixes and changes.
- jQuery (only if built with
--disable-jquery-check)
- Python 3+ (required by the build system, Juice Builder)
- Determine whether you want the CSS styles to be included in the minified JS file or whether you want to create an external minified CSS file.
-
Run the following command:
Note: add the
python build.py--enable-embed-cssoption to the command above if you want to embed the CSS. - You should now have a
'stacktack.min.js'file and (depending on the options you specified) a'style.min.css'file in the'out'folder.
Live demo is hosted on jsFiddle.
- Note: Currently, the live demo is possible by serving the Github source files through Combinatorics. However, this would probably break someday in the future, as such services tend to.
To run the demo locally:
-
Run the following commands:
Notes:cd demo
python -m http.serve- The default port is
8000, but you can specify another port, see here. - The minified files in the
demofolder are a copy of the resultant files after following the Build Instructions section above.
- The default port is
- Browse to http://localhost:8000/demo.html.
Adding StackTack to a page is relatively simple and consists of the following steps:
-
If you did not build StackTack with the
--enable-embed-cssoption, add the following line to the<head>section of your page:<link rel="stylesheet" href="style.min.css" /> -
If you built StackTack with the
--disable-jquery-checkoption, you will need to manually load jQuery by adding the following to the end of the<body>section of your page:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> -
Add StackTack to the
<body>section of your page:<script type="text/javascript" src="stacktack.min.js"></script> -
To insert a StackTack widget on the page, use the following template:
The
<div class="stacktack" data-site="stackoverflow" data-id="1732348" data-answers="all"></div><div>contains a number ofdata-*attributes that specify the options for that particular instance. These options include:- answers: specifies the answers that will be displayed - this can be 'all', 'none', 'accepted', or a comma-separated list of answer IDs
- id: the ID of the question [required]
- question: whether or not to display the question
- secure: whether to use HTTPS when retrieving data from the API
- site: the site to retrieve the question from
- tags: whether or not to display the question's tags
- votes: whether or not to display vote score on answers
- width: the width (in pixels) of the widget
.stacktack()method in the previous step.