template updates

This commit is contained in:
James Turk 2022-12-08 00:14:28 -06:00
parent 04017261fc
commit 84b57fadbe
5 changed files with 23 additions and 18 deletions

View File

@ -7,18 +7,19 @@
</h2> </h2>
<div class="section"> <div class="section">
<p> <p>
This site is generated from data scraped from <a href="https://www.chicagoparkdistrict.com/about-us/history-chicagos-parks">Chicago Park District</a>. It is not meant to be authoritative and is not kept up to date. This site exists to demonstrate some basic scraping techniques, as well as provide examples of real world challenges that scraper authors often encounter. It was primarily written to assist with examples and documentation for <a href="https://github.com/jamesturk/spatula">spatula</a> but feel free to use it for whatever you want. Just be nice, the site is hosted on a free <a href="https://fly.io">fly.io</a> VM.
<br>
This site was originally created as a demo for <a href="https://github.com/jamesturk/spatula">spatula</a> and updated for CAPP 30122 at the University of Chicago.
</p>
<p>
This site exists to demonstrate some basic scraping techniques, as well as provide examples of real world challenges that scraper authors often encounter. You may use it for this purpose however you see fit. Just be nice, the site is hosted on a free <a href="https://fly.io">fly.io</a> VM.
</p> </p>
<p>While other sites with a similar purpose exist, they often omit some of the common complications that can arise in scraping. The eventual goal of this site is to serve as a test suite of sorts for handling edge cases. <p>While other sites with a similar purpose exist, they often omit some of the common complications that can arise in scraping. The eventual goal of this site is to serve as a test suite of sorts for handling edge cases.
</p> </p>
<p>The full source for this site is available on <a href="https://github.com/jamesturk/scrapple">GitHub</a>.
<h3> Sources </h3>
<p> Chicago Parks data scraped from <a href="https://www.chicagoparkdistrict.com/about-us/history-chicagos-parks">Chicago Park District</a> replicated here for educational purposes. It is not meant to be authoritative and is not kept up to date.</p>
<p>As for Yoyodyne, <a href="https://letterboxd.com/film/the-adventures-of-buckaroo-banzai-across-the-8th-dimension/">here you go</a>.</p>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -3,11 +3,12 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.1/mini-default.min.css">
<style type="text/css"> <style type="text/css">
header { background: #476930; color: #ddd; } /*header { background: #476930; color: #ddd; }
header a.logo { color: #ddd; } header a.logo { color: #ddd; }
a.button { background: #476930; color: #ddd; } a.button { background: #476930; color: #ddd; }
a.button:hover { color: #476930; background: #ddd; } a.button:hover { color: #476930; background: #ddd; }
footer { background: #476930; color: #ddd; } footer { background: #476930; color: #ddd; }*/
div.parks { background: #476930; color: #ddd; padding: 12px; }
.location-header { border: 1px solid #476930; border-radius: 3px; padding: 1em; } .location-header { border: 1px solid #476930; border-radius: 3px; padding: 1em; }
.location-header-label { font-weight: bold; clear: both; } .location-header-label { font-weight: bold; clear: both; }
.location-header-value { clear: both; } .location-header-value { clear: both; }
@ -17,15 +18,16 @@
</head> </head>
<body> <body>
<header> <header>
<a href="#" class="logo">Chicago Parks</a> <a href="#" class="logo">Scrapple</a>
<a href="/" class="button">Home</a> <a href="/" class="button">Home</a>
<a href="/staff" class="button">Yoyodyne</a>
<a href="/parks" class="button">Parks</a> <a href="/parks" class="button">Parks</a>
<a href="/about" class="button">About</a> <a href="/about" class="button">About</a>
</header> </header>
{% block base %} {% block base %}
{% endblock %} {% endblock %}
<footer> <footer>
<p>This site is created for the express purpose of <a href="/about" style="color: #fff;">demonstrating scraping techniques</a>. No information contained on this site is meant to be taken as useful in any way.</p> <p>This site is created for the express purpose of <a href="/about">demonstrating scraping techniques</a>. No information contained on this site is meant to be taken as useful in any way.</p>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -2,11 +2,13 @@
{% block base %} {% block base %}
<div class="card fluid"> <div class="card fluid">
<h1 class="section">Chicago Parks</h1> <h1 class="section">Scrapple</h1>
<div class="section"> <div class="section">
<p> This site consists of several subsites.
One of America's best-kept secrets is Chicago's historic park system. Even Chicagoans who routinely enjoy its diverse open spaces- from the magnificent lakeshore parks to intimate neighborhood settings- may be surprised about their parkland legacy. We invite you to learn more about the history of Chicago parks, which are second to none in America and abroad. <ul>
</p> <li><a href="/parks">Chicago Parks</a> - pagination, small variations</li>
<li><a href="/staff">Yoyodyne Propulsion Systems</a> - pagination, subpages, errors</li>
</ul>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block base %} {% block base %}
<div class="card fluid"> <div class="container fluid parks">
<div class="page-title"> <div class="page-title">
<h2 class="section">{{ park.title }}</h2> <h2 class="section">{{ park.title }}</h2>
</div> </div>

View File

@ -1,8 +1,8 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block base %} {% block base %}
<div class="card fluid"> <div class="container parks">
<h1 class="section">Chicago Parks<small>List of Parks</small></h1> <h1>Chicago Parks<small>List of Parks</small></h1>
<div class="section"> <div class="section">
<table id="employees" style="max-height: 100%;"> <table id="employees" style="max-height: 100%;">
<thead> <thead>