P1 PDF

Preview

Summary

project 1 project 1project 1project 1project 1project 1...

Description

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

insta485generator insta485 insta485/html

$ insta485generator insta485 $ cd insta485/html/ $ python3 -m http.server 8000 Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

https://eecs485staff.github.io/p1-insta485-static/

1/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

insta485generator

$PROJECT_ROOT

$ mkdir p1-insta485-static/

https://eecs485staff.github.io/p1-insta485-static/

2/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

vagrant ssh

$ cd $PROJECT_ROOT $ git init .

# Remember that's something like p1-insta485-static/

.gitignore

$ cat > .gitignore hello/html/index.html

hello_css/

$ tree hello_css hello_css ├── config.json ├── static │ └── css │ └── style.css └── templates └── index.html

hello_css/config.json

[ { "url": "/", https://eecs485staff.github.io/p1-insta485-static/

15/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

"template": "index.html", "context": { "words": [ "hello", "world" ] } } ]

hello_css/templates/index.html



Hello world

{% for word in words %} {{word}} {% endfor %}

hello_css/static/css/style.css

body { background: pink; }

div.important { font-weight: bold; font-size: 1000%; }

$ insta485generator -v hello_css Copied hello_css/static/ -> hello_css/html/ Rendered index.html -> hello_css/html/index.html $ tree hello_css/html hello_css/html https://eecs485staff.github.io/p1-insta485-static/

16/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

├── css │ └── style.css └── index.html

test_hello_css

$ ./tests/test_hello_css.py test_css_dir (__main__.TestInsta485GeneratorCLI) Diff check css/style.css. ... ok test_files (__main__.TestInsta485GeneratorCLI) Make sure generated files exist. ... ok test_index (__main__.TestInsta485GeneratorCLI) Diff check hello/index.html. ... ok ---------------------------------------------------------------------Ran 3 tests in 0.462s OK

tests/

$ python -m unittest discover --start-directory tests --verbose ... Ran 5 tests in 0.913s OK

jinja2 jinja2 FileSystemLoader

template_env = jinja2.Environment( loader=jinja2.FileSystemLoader(template_dir), autoescape=jinja2.select_autoescape(['html', 'xml']), )

https://eecs485staff.github.io/p1-insta485-static/

17/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

$ pip install pycodestyle pydocstyle pylint $ pycodestyle setup.py insta485generator $ pylint --reports=n setup.py insta485generator No config file found, using default configuration -------------------------------------------------------------------Your code has been rated at 10.00/10 (previous run: 10.00/10, +0.00) $ pydocstyle setup.py insta485generator

insta485test

insta485generator

mkdir insta485/templates/index.html

insta485/templates/user.html insta485

$ tree insta485 insta485 ├── config.json ├── static │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── uploads │ ├── 122a7d27ca1d7420a1072f695d9290fad4501a41.jpg │ ├── 2ec7cf8ae158b3b1f40065abfb33e81143707842.jpg │ ├── 505083b8b56c97429a728b68f31b0b2a089e5113.jpg │ ├── 5ecde7677b83304132cb2871516ea50032ff7a4f.jpg │ ├── 73ab33bd357c3fd42292487b825880958c595655.jpg https://eecs485staff.github.io/p1-insta485-static/

18/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

│ ├── 9887e06812ef434d291e4936417d125cd594b38a.jpg │ ├── ad7790405c539894d25ab8dcf0b79eed3341e109.jpg │ └── e1a7c5c32973862ee15173b0259e3efdb6a391af.jpg └── templates ├── index.html └── user.html

images/logo.png insta485/static/

insta485/html/

insta485generator

insta485generator

$ rm -rf 'insta485/html' $ insta485generator insta485 Error_Jinja: jinja2 template following.html TemplateNotFound: following.html

insta485/config.json

$ cp -v insta485/config.json insta485/config.json.bak 'insta485/config.json' -> 'insta485/config.json.bak'

insta485/config.json index.html

user.html

[ { "url": "/", "template": "index.html", "context": { "logname": "awdeorio", "posts": [ ... ] } }, ... { "url": "/u/michjc/", "template": "user.html", "context": { https://eecs485staff.github.io/p1-insta485-static/

19/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

... } } ]

insta485generator

$ cd $PROJECT_ROOT $ rm -rf insta485/html $ insta485generator insta485 -v Copied insta485/static/ -> insta485/html/ Rendered index.html -> insta485/html/index.html Rendered user.html -> insta485/html/u/awdeorio/index.html Rendered user.html -> insta485/html/u/jflinn/index.html Rendered user.html -> insta485/html/u/jag/index.html Rendered user.html -> insta485/html/u/michjc/index.html $ cd insta485/html/ $ python3 -m http.server 8000 Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... ... $ cd ../../

insta485/html/

insta485generator bin/insta485run

#!/bin/bash # # insta485run # # Clean, build and start server # # Andrew DeOrio

# Stop on errors, print commands set -e set -x # Clean rm -rf insta485/html # Build insta485generator insta485 https://eecs485staff.github.io/p1-insta485-static/

20/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

# Serve cd insta485/html python3 -m http.server 8000

$ cd $PROJECT_ROOT $ chmod +x bin/insta485run $ ./bin/insta485run + rm -rf insta485/html/css insta485/html/index.html insta485/html/u + insta485generator insta485 + cd insta485/html + python3 -m http.server 8000 Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

bin/insta485test

python -m unittest discover --start-directory tests -verbose pycodestyle insta485generator pydocstyle insta485generator pylint --reports=n insta485generator insta485/html insta485/html

insta485generator html/

html5validator

html5validator --ignore

JAVA_TOOL_OPTIONS --root html insta485/html/

html5validator

html5validator --

ignore JAVA_TOOL_OPTIONS --root insta485/html env __pycache__

$ cd $PROJECT_ROOT $ tree --matchdirs -I 'env|__pycache__|*.egg-info' . ├── bin │ ├── insta485run │ └── insta485test ├── html │ ├── css │ │ └── style.css │ ├── images https://eecs485staff.github.io/p1-insta485-static/

21/28

12/18/2018

│ │ │ │ │ │ │ │ │ │ │ │ │ │ ├── │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

│ ├── ├── │ │ └──

└── logo.png index.html u └── awdeorio └── index.html uploads ├── 122a7d27ca1d7420a1072f695d9290fad4501a41.jpg ├── 2ec7cf8ae158b3b1f40065abfb33e81143707842.jpg ├── 505083b8b56c97429a728b68f31b0b2a089e5113.jpg ├── 5ecde7677b83304132cb2871516ea50032ff7a4f.jpg ├── 73ab33bd357c3fd42292487b825880958c595655.jpg ├── 9887e06812ef434d291e4936417d125cd594b38a.jpg ├── ad7790405c539894d25ab8dcf0b79eed3341e109.jpg └── e1a7c5c32973862ee15173b0259e3efdb6a391af.jpg insta485 ├── config.json ├── config.json.bak ├── html │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ ├── index.html │ ├── u │ │ ├── awdeorio │ │ │ └── index.html │ │ ├── jag │ │ │ └── index.html │ │ ├── jflinn │ │ │ └── index.html │ │ └── michjc │ │ └── index.html │ └── uploads │ ├── 122a7d27ca1d7420a1072f695d9290fad4501a41.jpg │ ├── 2ec7cf8ae158b3b1f40065abfb33e81143707842.jpg │ ├── 505083b8b56c97429a728b68f31b0b2a089e5113.jpg │ ├── 5ecde7677b83304132cb2871516ea50032ff7a4f.jpg │ ├── 73ab33bd357c3fd42292487b825880958c595655.jpg │ ├── 9887e06812ef434d291e4936417d125cd594b38a.jpg │ ├── ad7790405c539894d25ab8dcf0b79eed3341e109.jpg │ └── e1a7c5c32973862ee15173b0259e3efdb6a391af.jpg ├── static │ ├── css │ │ └── style.css │ ├── images │ │ └── logo.png │ └── uploads │ ├── 122a7d27ca1d7420a1072f695d9290fad4501a41.jpg │ ├── 2ec7cf8ae158b3b1f40065abfb33e81143707842.jpg │ ├── 505083b8b56c97429a728b68f31b0b2a089e5113.jpg │ ├── 5ecde7677b83304132cb2871516ea50032ff7a4f.jpg

https://eecs485staff.github.io/p1-insta485-static/

22/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

│ │ │ │ │ │ │ ├── │ │ ├── └──

│ ├── 73ab33bd357c3fd42292487b825880958c595655.jpg │ ├── 9887e06812ef434d291e4936417d125cd594b38a.jpg │ ├── ad7790405c539894d25ab8dcf0b79eed3341e109.jpg │ └── e1a7c5c32973862ee15173b0259e3efdb6a391af.jpg └── templates ├── index.html └── user.html insta485generator ├── __init__.py └── __main__.py setup.py tests ├── test_hello.py └── test_hello_css.py

/

index.html

/u//

user.html

/u//followers/

followers.html

/u//following/

following.html

/p// /explore/

post.html

explore.html

/ /explore/

/u//

insta485

/

logname

https://eecs485staff.github.io/p1-insta485-static/

config.json

23/28

12/18/2018

p1-insta485-static | An Instagram clone implemented with a templated static site generator.

/p// /u//

/u//

/u//

user_url_slug

user_url_slug user_url_slug user_url_slug

/u/...