1
0
forked from HPR/hpr_generator

18 Commits

Author SHA1 Message Date
96d4f14b6f Update responsive layout for footer and latest lanes 2025-08-03 23:59:06 -04:00
f2b00145ad Add episode summary to information about latest shows 2025-08-03 23:30:15 -04:00
e9df7bc900 Update theme colors for links 2025-08-03 23:14:17 -04:00
c742794f15 Use no-css class on page footer hr tag 2025-08-03 22:45:01 -04:00
90710665c9 Add level 2 header tag to page section header tags 2025-08-03 22:40:16 -04:00
6347b39d74 Text changes to landing page
Per Ken's PR comment:
HPR/hpr_generator#266 (comment)
2025-08-03 22:36:56 -04:00
033fc310bf Fix lane icon default height when no css
Add height attribute to image and br tags for formatting
when no css is available.
2025-08-03 22:27:13 -04:00
6acaf1b28c Update card flex layout and coloring
Use the secondary background color in the card header and shadows.
2025-07-30 21:51:03 -04:00
115d831c94 Merge branch 'newsite' into newsite-cards 2025-07-26 16:46:02 -04:00
f58aa02980 Merge branch 'main' into newsite 2025-07-26 16:45:29 -04:00
2e43f79d52 Merge pull request '#267 update-dependencies' (#268) from update-dependencies into main
Reviewed-on: HPR/hpr_generator#268
Reviewed-by: Roan Horning <rho_n@josh@dao-mail.com>
2025-07-26 20:40:01 +00:00
38d81cedda Intial card layout design
Format episodes, series, syndication pages with card format.
2025-07-24 22:18:56 -04:00
8e2fb783b6 Add missing section end tag 2025-07-24 22:12:55 -04:00
d0727a0f0c Remove extraneous closing div tag 2025-07-24 22:02:10 -04:00
Paul Jewell
00ab3b3065 #267 - Remove mysql instructions from site-generator 2025-07-24 08:27:39 +01:00
Paul Jewell
4af0c021eb #267 - Remove mysql instructions from GETTING_STARTED.md 2025-07-24 08:25:58 +01:00
Paul Jewell
3abeb25b03 #267 - Remove references to mysql from README.md 2025-07-24 08:21:50 +01:00
Paul Jewell
e2fd890669 #267 - remove dependency check for DBD::mysql 2025-07-24 08:18:51 +01:00
10 changed files with 175 additions and 144 deletions

View File

@@ -111,7 +111,7 @@ file are found in the comments within the file.
Any database supported by the Perl:DBI and Perl::DBD modules can be used with
the site-generator program. Currently the hpr_generator project works with
a MySQL or SQLite database.
an SQLite database.
Find the [DBI] section of the file. It should look like the following
@@ -146,26 +146,6 @@ The hpr.db section of the driver option `dbi:SQLite:hpr.db` is the path
to the sqlite file. The default assumes the hpr.db file is located in the same
directory as the site-generator.
### MySQL
Remove the comment character from the start of the database, driver,
user, and password option lines:
```
# Configuration settings for MySQL
database: mysql
driver: dbi:mysql:database=hpr_hpr:hostname=localhost
user: hpr-generator
password: *********
```
This assumes that the MySQL database service is available at the localhost
hostname, that the database name (hpr_hpr) is the database created from
the hpr.sql dump file or manually created by you, that the user (hpr-generator)
was added by you and has read rights to the hpr_hpr database, and that the
password (replace ********* with the actual password) matches the password set
for the hpr-generator database user.
## Configuring the website for viewing locally
For HTML links to work when viewing the files on your local machine using the

View File

@@ -15,15 +15,6 @@ Static web page generator for the Hacker Public Radio website.
2. Run `./utils/update-hpr.sh`
* SQLite v3.8.3 or greater is recommended. CTE WITH clauses are used in some template queries. Must convert WITH
clauses to sub-queries when using earlier versions of SQLite.
* With MySQL
* Create database hpr_hpr in the MySQL server from HPR dump file.
- ``sudo mysql --host=localhost < hpr.sql``
* Create a user that will be used by the site-generator.
- Suggested username: hpr-generator
- ``CREATE USER 'hpr-generator'@'localhost' IDENTIFIED BY '<password>';``
* Limit the user's privileges to EXECUTE and SELECT
- ``GRANT SELECT ON hpr_hpr.* TO 'hpr-generator'@'localhost';``
- ``GRANT EXECUTE ON `hpr_hpr`.* TO 'hpr-generator'@'localhost';``
* Install the needed Perl modules using preferred method (distribution packages, CPAN, etc.)
* Getopt::Long
* Pod::Usage
@@ -35,7 +26,7 @@ Static web page generator for the Hacker Public Radio website.
* Template::Plugin::HTML::Strip
* DBI
* Tie::DBI
* DBD::SQLite or DBD::mysql
* DBD::SQLite
* Date::Calc
* Text::CSV_XS
* HTML::Entities
@@ -76,4 +67,6 @@ and add the label "**Feature Request**".
* gordons
* Ken Fallon
* norrist
* Paul Jewell

View File

@@ -26,16 +26,17 @@ https://creativecommons.org/publicdomain/
url("/css/bebas/BebasNeue.woff") format("woff");
}
:root {
--background-primary: #dfdfdf;
--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
--text-primary: #4d4d4d; /* HPR Grey */
--banner-text-primary: #000000;
--background-secondary: #4d4d4d;
--text-secondary: #dfdfdf;
--link-primary: #004852 /*#154a60*/;
--link-primary-hover: #f8961e;
--link-primary-hover: #b54c08/*#f8961e*/;
--link-secondary: #a8f8ff;
--link-secondary-hover: #f9e9c2;
--lane-button-border: #80b4c0;
--input-border-primary: #4d4d4d;
--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
@@ -43,6 +44,9 @@ https://creativecommons.org/publicdomain/
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
--shadow-secondary-color: hsl(0, 0%, 30.2%);
--shadow-cards: var(--shadow-secondary-color);
/* screen breakpoints */
--for-phone-only: 599px;
--for-tablet-portrait-up: 600px;
@@ -127,15 +131,11 @@ body > footer {
flex: 0 1 auto;
background-color: var(--background-secondary);
color: var(--text-secondary);
padding: 0.25rem;
padding: clamp(0.25rem, calc(100vw - var(--for-tablet-portrait-up) + 0.5rem), 0.5rem);
margin-top: 0.5rem;
text-align: center;
line-height: 1.25;
}
body > footer hr:first-child {
display: none;
margin: 0;
padding: 0;
}
body > footer a {
color: var(--link-secondary);
}
@@ -249,9 +249,51 @@ article > p,
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
gap: 1.0rem;
justify-content: space-around;
justify-items: space-around;
}
#podcast_lane > .lane,
#project_lane > .lane,
#latest_lane.lane {
justify-content: flex-start;
}
.lane > article {
/* Add shadows to create the "card" effect */
border-top: thin solid var(--shadow-cards);
border-left: thin solid var(--shadow-cards);
border-radius: 0.5rem;
box-shadow:
1px 2px 2px var(--shadow-cards),
2px 4px 4px var(--shadow-cards);
transition: 0.3s;
flex: 1 0 100%;
overflow-x: scroll;
padding-bottom: 1rem;
}
.lane > article:hover {
box-shadow:
4px 8px 8px var(--shadow-cards),
8px 16px 16px var(--shadow-cards);
}
.lane > article > * {
margin-left: 1rem;
margin-right: 1rem;
}
.lane > article > header {
background: var(--background-secondary);
padding: 1.5rem 1rem 1rem 1rem;
margin: 0;
font-weight: bold;
font-size: 1.45rem;
}
.lane > article > header a {
color: var(--link-secondary);
}
.lane > article > header a:hover {
color: var(--link-secondary-hover);
}
a.lane-button {
display: flex;
flex-direction: column;
@@ -259,14 +301,19 @@ a.lane-button {
margin: 0.5rem var(--link-spacing-horizontal);
padding: 0.5rem;
border-width: 5px;
border-color: var(--link-primary);
border-color: var(--lane-button-border);
border-style: solid;
border-radius: 5px;
text-align: center;
}
a.lane-button:hover {
box-shadow:
1px 2px 2px var(--link-primary-hover),
2px 4px 4px var(--link-primary-hover);
}
a.lane-button img {
height: 110px;
height: clamp(95px, calc(100vw - var(--for-tablet-portrait-up)), 110px);
filter: invert(60%) sepia(50%) hue-rotate(140deg) saturate(200%);
transform: scaleX(0.9);
}
@@ -369,10 +416,14 @@ fieldset > input {
border: thin solid var(--input-border-primary);
border-radius: 0.2rem;
}
@media (min-width: 900px) {
.no-css {
display: none;
}
@media (min-width: 600px) {
body > header {
background-size: 200pt, cover;
background-position: left 128pt top -12pt, left top;
justify-content: space-between;
}
#tag_line {
text-align: center;
@@ -395,9 +446,7 @@ fieldset > input {
}
#qr_code {
text-align: center;
}
#qr_code > img {
max-height: 195px;
max-width: 195px;
}
fieldset>table,
fieldset>table thead,
@@ -446,4 +495,20 @@ fieldset > input {
body > main {
padding: 0.25rem 2rem;
}
.lane > article {
max-height: 40vw;
overflow-y: scroll
}
#latest_lane.lane section > ul {
margin: 0.5rem 3rem 0 1rem;
}
}
@media (min-width: 900px) {
.lane > article {
flex-basis: 32%;
max-width: 32%;
}
#latest_lane.lane section {
flex: 1;
}
}

View File

@@ -56,19 +56,9 @@ Perl Template Toolkit.
* SQLite v3.8.3 or greater is recommended. CTE WITH clauses are used in some template queries.
Must convert WITH clauses to sub-queries when using earlier versions of SQLite.
With MySQL
* Create database hpr_hpr in the MySQL server from HPR dump file.
- sudo mysql --host=localhost < hpr.sql
* Create a user that will be used by the site-generator.
- Suggested username: hpr-generator
- CREATE USER 'hpr-generator'@'localhost' IDENTIFIED BY '<password>';
* Limit the user's privileges to EXECUTE and SELECT
- GRANT SELECT ON hpr_hpr.* TO 'hpr-generator'@'localhost';
- GRANT EXECUTE ON `hpr_hpr`.* TO 'hpr-generator'@'localhost';
Install the needed Perl modules using preferred method (distribution packages, CPAN, etc.)
* Config::Std
* DBD::SQLite or DBD:mysql
* DBD::SQLite
* DBI
* Data::Dumper
* Date::Calc

View File

@@ -1,23 +1,25 @@
<!--% PROCESS 'shared-episode-summary.tpl.html' %-->
<!--% PROCESS "queries-episodes.tpl.html" %-->
<article>
<header>
<h1>Complete Archive of Shows.</h1>
<p>
All this information is available to the public. Scrape if you wish but if we can format the data for you then we're happy to help.
</p>
</header>
<div class="lane">
<!--% USE DBI(constants.driver) %-->
<!--% FOREACH episodes IN DBI.query(query_episodes)
%-->
<article>
<!--% show_summary(episodes) %-->
<p class="listen-in"><!--% display_listen_in(episodes.id) %--></p>
</article>
<!--% END %-->
</div>
<h2 id="twt_episodes">Today With a Techie Archived Shows</h2>
<p>
<!-- Creative Commons License -->
<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/"><img alt="Creative Commons License" border="0" src="https://creativecommons.org/images/public/somerights20.png" width="88" height="31" /></a><br>The following work is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/2.5/">Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License</a>.</p>
<p>Today With a Techie Radio was brought to you by <a href="https://en.wikipedia.org/wiki/Infonomicon">The Infonomicon Computer Club</a></p>
<div class="lane">
<!--% FOREACH twat_episode IN DBI.query('
SELECT
eps.id,
@@ -33,8 +35,9 @@
ORDER BY eps.id DESC
')
%-->
<article>
<!--% twat_show_summary(twat_episode) %-->
</article>
<!--% END %-->
</article>

View File

@@ -36,46 +36,51 @@
<!--% delta = date.calc.N_Delta_YMD(2005,9,19, date.format(date.now, '%Y'),date.format(date.now, '%m'),date.format(date.now, '%d')) %-->
<section id="welcome">
<header>Welcome</header>
<p>Hacker Public Radio is a podcast that releases shows every weekday Monday to Friday. The shows are contributed by the public and can be on any topic that is of interest to hackers, makers, hobbyists, etc.</p>
<header><h2>Welcome</h2></header>
<p>Hacker Public Radio is a technology focused podcast that releases shows every weekday Monday to Friday. Our shows are produced by listeners like you and can be on any topic that is of interest to hackers, makers, hobbyists, etc. We are a welcoming community that offers positive feedback and encourages respectful debate.</p>
<div id="call_for_shows">
<!--% display_call_for_shows() %-->
</div>
</section>
<section id="podcast_lane">
<header>Podcast</header>
<header><h2>The Podcast</h2></header>
<div class="lane">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast">
<img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/mic-fill.svg" alt="" height="110">
Record
</a>
<br class="no-css">
<a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
<img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/calendar-2-line.svg" alt="" height="110">
Schedule
</a>
<br class="no-css">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
<img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/rss-fill.svg" alt="" height="110">
Subscribe
</a>
<br class="no-css">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
<img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/volume-up-fill.svg" alt="" height="110">
Listen
</a>
</div>
</section>
<section id="project_lane">
<header>Project</header>
<header><h2>The Project</h2></header>
<div class="lane">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html">
<img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/user-fill.svg" alt="" height="110">
Host
</a>
<br class="no-css">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
<img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/stack-fill.svg" alt="" height="110">
Series
</a>
<br class="no-css">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
<img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="">
<img src="<!--% absolute_path(baseurl) %-->images/icons/question-mark.svg" alt="" height="110">
About
</a>
</div>
@@ -83,18 +88,21 @@
<section id="latest_lane" class="lane">
<!--% PROCESS 'shared-episode-summary.tpl.html' %-->
<section id="latest_shows">
<header>Latest Shows</header>
<header><h2>Latest Shows</h2></header>
<!--% host_cnt = 0 %-->
<ul>
<!--% FOREACH latest_episodes IN DBI.query(query_latest_episodes)
%-->
<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a></li>
<li><a href="<!--% absolute_path(baseurl) %-->eps/hpr<!--% zero_pad_left(latest_episodes.id) %-->/index.html">hpr<!--% latest_episodes.id %--> :: <!--% latest_episodes.title %--></a>
<ul><li>
<!--% latest_episodes.summary %-->
</li></ul>
<!--% host_cnt = host_cnt + 1 %-->
<!--% END %-->
</ul>
</section>
<section id="latest_comments">
<header>Latest Comments</header>
<header><h2>Latest Comments</h2></header>
<ul>
<!--% FOREACH item IN DBI.query('
WITH episode_comment_rank AS (
@@ -131,3 +139,4 @@
<!--% END %-->
</ul>
</section>
</section>

View File

@@ -1,10 +1,11 @@
<!--% PROCESS 'shared-utils.tpl.html' %-->
<!--% PROCESS "queries-series.tpl.html" %-->
<article>
<!--% USE DBI(constants.driver) %-->
<h1 class="title">In-Depth Series</h1>
<div class="lane">
<!--% FOREACH series IN DBI.query(query_episodes) %-->
<h2><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></h2>
<article>
<header><a href="<!--% absolute_path(baseurl) %-->series/<!--% zero_pad_left(series.id) %-->.html"><!--% series.name %--></a></header>
<ul>
<li>Number of episodes: <!--% series.number_of_episodes %--></li>
<li>Open/closed: <!--% display_choice(series.private, 'closed', 'open') %--></li>
@@ -13,5 +14,6 @@
<li>Series RSS feeds: <a href="<!--% absolute_path(baseurl) %-->hpr_ogg_rss.php?series=<!--% series.id %-->">ogg</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_spx_rss.php?series=<!--% series.id %-->">spx</a>, <a href="<!--% absolute_path(baseurl) %-->hpr_mp3_rss.php?series=<!--% series.id %-->">mp3</a></li>
</ul>
<em><!--% series.description %--></em>
<!--% END %-->
</article>
<!--% END %-->
</div>

View File

@@ -1,13 +1,9 @@
<h1>RSS Syndication</h1>
<article>
<header>
<h2>Subscribe to our Feeds</h2>
</header>
<p>
Great that you want to listen. Have a look below at the feeds that best suite your listening habits.
</p>
</article>
<div class="lane">
<article>
<header>
<h2><img src="<!--% absolute_path(baseurl) %-->images/feed.png" alt="rss logo"> The Community News Summary</h2>
@@ -77,7 +73,8 @@
<li><a href="<!--% absolute_path(baseurl) %-->comments.rss">Listener contributed comments to the episodes</a></li>
</ul>
</article>
<hr />
<div>
<hr class="no-css">
<h1>Other Download Options</h1>
<article>
<header>

View File

@@ -56,9 +56,7 @@
<div id="tag_line">
<h2>The Community Podcast</h2>
<h2>Sharing your ideas, projects, opinions since 2005</h2>
<h3>New episodes every weekday
</div>
</h3>
<h3>New episodes every weekday </h3>
</div>
<div id="qr_code">
<img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">
@@ -68,7 +66,7 @@
<!--% INCLUDE $content %-->
</main>
<footer role="contentinfo">
<hr>
<hr class="no-css">
<div id="copyright">
<span>Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">
Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license.</span>

View File

@@ -29,8 +29,7 @@ set -o nounset # Treat unset variables as an error
function is_module_installed {
HR="----------------------"
perl -e "use ${1} "
if [ $? -ne 0 ]
then
if [ $? -ne 0 ]; then
echo ${HR}
else
echo "Found module ${1}"
@@ -38,35 +37,30 @@ function is_module_installed {
fi
}
MODULES=( \
"Getopt::Long" \
"Pod::Usage" \
"Config::Std" \
"Template" \
"Template::Plugin::File" \
"Template::Plugin::DBI" \
"Template::Plugin::HTML::Strip" \
"DBI" \
"Tie::DBI" \
"DBD::SQLite" \
"DBD::mysql" \
"Date::Calc" \
"Text::CSV_XS" \
MODULES=(
"Getopt::Long"
"Pod::Usage"
"Config::Std"
"Template"
"Template::Plugin::File"
"Template::Plugin::DBI"
"Template::Plugin::HTML::Strip"
"DBI"
"Tie::DBI"
"DBD::SQLite"
"Date::Calc"
"Text::CSV_XS"
)
echo "The following modules must be installed for the site-generator to function: "
for module in "${MODULES[@]}"
do
for module in "${MODULES[@]}"; do
echo "* ${module}"
done
echo "When MySQL is used, the DBD:mysql module is required (otherwise it is optional)"
echo "When SQLite is used, then the DBD:SQLite module is required (otherwise it is optional)"
echo "Scanning for modules ..."
echo "----------------------"
for module in "${MODULES[@]}"
do
for module in "${MODULES[@]}"; do
is_module_installed "${module}"
done