WP6
/
expub_compendium
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

with related on FP

joel
Joel Galvez 2 vuotta sitten
vanhempi
d2ddc3cbfc
commit
3807128572
16 muutettua tiedostoa jossa 866 lisäystä ja 664 poistoa
Jaettu näkymä Näytä diff tilastot
  1. +5
    -2
      web/app/main.py
  2. +101
    -16
      web/app/static/src/main.css
  3. BIN
      web/app/static/styles/CirrusCumulus.woff
  4. BIN
      web/app/static/styles/Dauphine-Italic.ttf
  5. BIN
      web/app/static/styles/Dauphine-Regular.ttf
  6. +292
    -96
      web/app/static/styles/main.css
  7. BIN
      web/app/static/styles/roboto-italic.ttf
  8. BIN
      web/app/static/styles/roboto-regular.ttf
  9. +3
    -3
      web/app/static/tailwind.config.js
  10. +1
    -1
      web/app/templates/about.html
  11. +135
    -98
      web/app/templates/base.html
  12. +123
    -153
      web/app/templates/book.html
  13. +24
    -16
      web/app/templates/index.html
  14. +111
    -171
      web/app/templates/resource.html
  15. +70
    -103
      web/app/templates/resources.html
  16. +1
    -5
      web/content/home.md

+ 5
- 2
web/app/main.py Näytä tiedosto

@@ -17,11 +17,14 @@ main = Blueprint('main', __name__)
# route for index page
@main.route('/')
def index():
tools = Resource.query.filter_by(type='tool').order_by(func.random()).limit(6).all()
tools = Resource.query.filter_by(type='tool').order_by(func.random()).limit(1).all()
books = Resource.query.filter_by(type='book').order_by(func.random()).limit(1).all()
tools2 = Resource.query.filter_by(type='tool').order_by(func.random()).limit(1).all()
books2 = Resource.query.filter_by(type='book').order_by(func.random()).limit(1).all()
with open('content/home.md', 'r') as f:
text = f.read()
text = markdown.markdown(text)
return render_template('index.html', text=text, tools=tools)
return render_template('index.html', text=text, tools=tools,books=books, tools2=tools2,books2=books2)

# route for profile page
@main.route('/profile')

+ 101
- 16
web/app/static/src/main.css Näytä tiedosto

@@ -1,36 +1,78 @@
@tailwind base;

@tailwind components;
@tailwind utilities;



@font-face {
font-family: 'ag';
src: url(ApfelGrotezk-Regular.woff) format("woff");
src: url('ApfelGrotezk-Regular.woff') format("woff");
}

@font-face {
font-family: 'ag-brukt';
src: url(ApfelGrotezk-Brukt.woff) format("woff");
src: url('ApfelGrotezk-Brukt.woff') format("woff");
}

@font-face {
font-family: 'ag-fett';
src: url(ApfelGrotezk-Fett.woff) format("woff");
src: url('ApfelGrotezk-Fett.woff') format("woff");
}

@font-face {
font-family: 'dauphine';
src: url('Dauphine-Regular.ttf') format("truetype");
}

@font-face {
font-family: 'dauphine';
src: url('Dauphine-Italic.ttf') format("truetype");
font-style: italic;
}

@font-face {
font-family: 'robo';
src: url('roboto-regular.ttf') format("truetype");
}

@font-face {
font-family: 'robo';
src: url('roboto-italic.ttf') format("truetype");
font-style: italic;
}

@font-face {
font-family: 'cirrus';
src: url('CirrusCumulus.woff') format("woff");
}

body {
font-family: 'ag';
font-family: 'dauphine';
}

strong {
font-family: 'ag-fett';
}


.book {
font-family: 'ag-fett', 'Arial Black';
}

.tool {
font-family: 'robo';
}
.practice {
font-family: 'cirrus';
}

.std-margin {
@apply p-2;
}

.cell-margin {
@apply p-4 pt-4 pb-8 pr-8
@apply p-4;
}

.block-margin {
@@ -47,16 +89,16 @@ strong {

.cell {
@apply cell-margin relative;
/* background: linear-gradient(to right, white 0%, rgb(252, 206, 255) 15px, white 10%, white 100%); */
}


.cell::before {
content: '';
position: absolute;
top: 10px;
right: 0px;
width: 3px;
width: 2px;
height: calc(100% - 20px);
background-color: black;
}
@@ -65,19 +107,51 @@ strong {
content: '';
position: absolute;
bottom: 0px;
left: 8px;
width: calc(100% - 20px);
height: 2px;
background-color: black;
}

.slash {
position: relative;
}

.slash::after {
content: '';
position: absolute;

bottom: 0px;
left: 8px;
width: calc(100% - 20px);
height: 3px;
background-color: black;
transform-origin: 100% 100%;
transform: rotate(45deg);
}

.meta {
/* .meta {
transform: rotate(-3.5deg);
} */

.facts {
@apply grid lg:grid-cols-2 gap-4;
}

.facts h3 {
}

.facts > * {
@apply max-w-[65ch];
}

a:hover {
@apply opacity-60;
}

h2,h3 {
@apply overflow-hidden max-w-full overflow-ellipsis;
hyphens: auto;
}

h2 {
@@ -85,8 +159,13 @@ h2 {
}

h3 {
@apply text-xl tracking-wide;
font-family: 'ag-fett';
@apply uppercase;

}

.indent {
@apply mx-4 my-4;
}

.text > h3 {
@@ -95,25 +174,25 @@ h3 {

h2 + *,
h3 + * {
@apply ml-6 mt-1;
/* @apply ml-6 mt-1; */
}

p {
max-width: 55ch;
}

p + p {
@apply ml-6 mt-[1em];
@apply mt-[1em];
}

.loading {
opacity: 0;
transition: opacity 200ms ease-in;
background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
}

.htmx-request .loading {
transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
opacity: 1;
display: block;
}


@@ -147,3 +226,9 @@ details[open]::details-content {
text-decoration: underline;
}

#resources.expanded .filter-header::before {
content:'- ';
}
#resources .filter-header::before {
content:'+ ';
}

BIN
web/app/static/styles/CirrusCumulus.woff Näytä tiedosto


BIN
web/app/static/styles/Dauphine-Italic.ttf Näytä tiedosto


BIN
web/app/static/styles/Dauphine-Regular.ttf Näytä tiedosto


+ 292
- 96
web/app/static/styles/main.css Näytä tiedosto

@@ -468,33 +468,39 @@ video {
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

.container {
width: 100%;
}

@media (min-width: 640px) {

.container {
max-width: 640px;
}
}

@media (min-width: 768px) {

.container {
max-width: 768px;
}
}

@media (min-width: 1024px) {

.container {
max-width: 1024px;
}
}

@media (min-width: 1280px) {

.container {
max-width: 1280px;
}
}

@media (min-width: 1536px) {

.container {
@@ -543,12 +549,21 @@ video {
.z-50 {
z-index: 50;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
.row-span-1 {
grid-row: span 1 / span 1;
}
.row-start-1 {
grid-row-start: 1;
}
@@ -558,16 +573,20 @@ video {
.m-16 {
margin: 4rem;
}
.m-8 {
margin: 2rem;
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 {
margin-bottom: 0.5rem;
@@ -581,6 +600,18 @@ video {
.mb-8 {
margin-bottom: 2rem;
}
.mb-\[1em\] {
margin-bottom: 1em;
}
.ml-4 {
margin-left: 1rem;
}
.ml-auto {
margin-left: auto;
}
.mr-8 {
margin-right: 2rem;
}
.mr-auto {
margin-right: auto;
}
@@ -590,27 +621,30 @@ video {
.mt-3 {
margin-top: 0.75rem;
}
.ml-auto {
margin-left: auto;
.mt-4 {
margin-top: 1rem;
}
.mb-16 {
margin-bottom: 4rem;
.mr-2 {
margin-right: 0.5rem;
}
.block {
display: block;
}
.flex {
display: flex;
}
.table {
display: table;
.inline-block {
display: inline-block;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.h-10 {
height: 2.5rem;
}
.h-20 {
height: 5rem;
}
.h-40 {
height: 10rem;
}
@@ -620,38 +654,62 @@ video {
.h-screen {
height: 100vh;
}
.h-\[50rem\] {
height: 50rem;
}
.h-\[25rem\] {
height: 25rem;
}
.h-\[clamp\(20rem\2c 30rem\2c 40rem\)\] {
height: clamp(20rem,30rem,40rem);
}
.h-12 {
height: 3rem;
}
.max-h-\[30rem\] {
max-height: 30rem;
}
.w-10 {
width: 2.5rem;
}
.w-20 {
width: 5rem;
}
.w-40 {
width: 10rem;
}
.w-\[25rem\] {
width: 25rem;
}
.w-\[30rem\] {
width: 30rem;
}
.w-full {
width: 100%;
}
.w-\[3rem\] {
width: 3rem;
.w-\[32rem\] {
width: 32rem;
}
.w-\[30rem\] {
width: 30rem;
.w-60 {
width: 15rem;
}
.w-\[20rem\] {
width: 20rem;
.w-52 {
width: 13rem;
}
.w-\[25rem\] {
width: 25rem;
.min-w-\[35rem\] {
min-width: 35rem;
}
.min-w-\[10rem\] {
min-width: 10rem;
.min-w-\[32rem\] {
min-width: 32rem;
}
.max-w-\[30rem\] {
max-width: 30rem;
}
.max-w-\[55ch\] {
max-width: 55ch;
.max-w-\[65ch\] {
max-width: 65ch;
}
.max-w-\[25rem\] {
max-width: 25rem;
.max-w-\[20rem\] {
max-width: 20rem;
}
.shrink-0 {
flex-shrink: 0;
@@ -666,24 +724,21 @@ video {
.grid-flow-col {
grid-auto-flow: column;
}
.grid-cols-\[1fr\2c 4fr\] {
grid-template-columns: 1fr 4fr;
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[2fr\2c 1fr\] {
grid-template-columns: 2fr 1fr;
}
.items-center {
align-items: center;
.items-start {
align-items: flex-start;
}
.justify-center {
justify-content: center;
.justify-start {
justify-content: flex-start;
}
.justify-between {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-8 {
gap: 2rem;
}
@@ -701,23 +756,19 @@ video {
text-overflow: ellipsis;
white-space: nowrap;
}
.rounded-full {
border-radius: 9999px;
}
.border-2 {
border-width: 2px;
}
.border-b-\[3px\] {
border-bottom-width: 3px;
.border-b-2 {
border-bottom-width: 2px;
}
.border-b-\[2px\] {
border-bottom-width: 2px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-black\/20 {
background-color: rgb(0 0 0 / 0.2);
}
@@ -729,25 +780,46 @@ video {
-o-object-fit: contain;
object-fit: contain;
}
.p-2 {
padding: 0.5rem;
.p-1 {
padding: 0.25rem;
}
.p-4 {
padding: 1rem;
}
.p-8 {
padding: 2rem;
}
.p-1 {
padding: 0.25rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pl-44 {
padding-left: 11rem;
}
.pl-20 {
padding-left: 5rem;
}
.pl-24 {
padding-left: 6rem;
}
.pl-16 {
padding-left: 4rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pl-12 {
padding-left: 3rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.text-center {
text-align: center;
}
@@ -755,27 +827,29 @@ video {
vertical-align: bottom;
}
.text-base {
font-size: 1.08rem;
line-height: 1.35;
font-size: 1.25rem;
line-height: 1.22;
}
.text-sm {
font-size: 0.95rem;
font-size: 1rem;
line-height: 1.35;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.leading-tight {
line-height: 1.25;
.uppercase {
text-transform: uppercase;
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
.capitalize {
text-transform: capitalize;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
.italic {
font-style: italic;
}
.grayscale {
--tw-grayscale: grayscale(100%);
@@ -784,39 +858,82 @@ video {
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}



@font-face {
font-family: 'ag';
src: url(ApfelGrotezk-Regular.woff) format("woff");
src: url('ApfelGrotezk-Regular.woff') format("woff");
}

@font-face {
font-family: 'ag-brukt';
src: url(ApfelGrotezk-Brukt.woff) format("woff");
src: url('ApfelGrotezk-Brukt.woff') format("woff");
}

@font-face {
font-family: 'ag-fett';
src: url(ApfelGrotezk-Fett.woff) format("woff");
src: url('ApfelGrotezk-Fett.woff') format("woff");
}

@font-face {
font-family: 'dauphine';
src: url('Dauphine-Regular.ttf') format("truetype");
}

@font-face {
font-family: 'dauphine';
src: url('Dauphine-Italic.ttf') format("truetype");
font-style: italic;
}

@font-face {
font-family: 'robo';
src: url('roboto-regular.ttf') format("truetype");
}

@font-face {
font-family: 'robo';
src: url('roboto-italic.ttf') format("truetype");
font-style: italic;
}

@font-face {
font-family: 'cirrus';
src: url('CirrusCumulus.woff') format("woff");
}

body {
font-family: 'ag';
font-family: 'dauphine';
}

strong {
font-family: 'ag-fett';
}


.book {
font-family: 'ag-fett', 'Arial Black';
}

.tool {
font-family: 'robo';
}
.practice {
font-family: 'cirrus';
}

.std-margin {
padding: 0.5rem;
}

.cell-margin {
padding: 1rem;
padding-top: 1rem;
padding-bottom: 2rem;
padding-right: 2rem;
}

.block-margin {
@@ -848,19 +965,16 @@ strong {
.cell {
position: relative;
padding: 1rem;
padding-top: 1rem;
padding-bottom: 2rem;
padding-right: 2rem;
/* background: linear-gradient(to right, white 0%, rgb(252, 206, 255) 15px, white 10%, white 100%); */
}


.cell::before {
content: '';
position: absolute;
top: 10px;
right: 0px;
width: 3px;
width: 2px;
height: calc(100% - 20px);
background-color: black;
}
@@ -869,31 +983,79 @@ strong {
content: '';
position: absolute;
bottom: 0px;
left: 8px;
width: calc(100% - 20px);
height: 2px;
background-color: black;
}

.slash {
position: relative;
}

.slash::after {
content: '';
position: absolute;

bottom: 0px;
left: 8px;
width: calc(100% - 20px);
height: 3px;
background-color: black;
transform-origin: 100% 100%;
transform: rotate(45deg);
}

.meta {
/* .meta {
transform: rotate(-3.5deg);
} */

.facts {
display: grid;
gap: 1rem;
}

@media (min-width: 1024px) {

.facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

.facts h3 {
}

.facts > * {
max-width: 65ch;
}

a:hover {
opacity: 0.6;
}

h2,h3 {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-hyphens: auto;
hyphens: auto;
}

h2 {
font-size: 2.53rem;
font-size: 2.8rem;
line-height: 1;
}

h3 {
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: 0.025em;
font-family: 'ag-fett';
text-transform: uppercase;
}

.indent {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}

.text > h3 {
@@ -903,27 +1065,25 @@ h3 {

h2 + *,
h3 + * {
margin-left: 1.5rem;
margin-top: 0.25rem;
/* @apply ml-6 mt-1; */
}

p {
max-width: 55ch;
}

p + p {
margin-left: 1.5rem;
margin-top: 1em;
}

.loading {
opacity: 0;
transition: opacity 200ms ease-in;
background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
}

.htmx-request .loading {
transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
opacity: 1;
display: block;
}


@@ -959,18 +1119,54 @@ details[open]::details-content {
text-decoration: underline;
}

#resources.expanded .filter-header::before {
content:'- ';
}
#resources .filter-header::before {
content:'+ ';
}
.hover\:opacity-60:hover {
opacity: 0.6;
}
@media (min-width: 1024px) {

.lg\:mt-16 {
margin-top: 4rem;
}

.lg\:block {
display: block;
}

.lg\:flex {
display: flex;
}

.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lg\:grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
}

.lg\:grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}

.lg\:grid-rows-\[1fr\2c 1fr\] {
grid-template-rows: 1fr 1fr;
}

.lg\:grid-rows-\[1fr\2c 1fr\2c 1fr\] {
grid-template-rows: 1fr 1fr 1fr;
}

.lg\:grid-rows-\[3fr\2c 1fr\2c 1fr\] {
grid-template-rows: 3fr 1fr 1fr;
}

.lg\:grid-rows-\[auto\2c auto\2c auto\] {
grid-template-rows: auto auto auto;
}
}

BIN
web/app/static/styles/roboto-italic.ttf Näytä tiedosto


BIN
web/app/static/styles/roboto-regular.ttf Näytä tiedosto


+ 3
- 3
web/app/static/tailwind.config.js Näytä tiedosto

@@ -7,13 +7,13 @@ module.exports = {
extend: {
fontSize: {
// xs: ['0.95rem', { lineHeight: '1.35' }],
sm: ['0.95rem', { lineHeight: '1.35' }],
base: ['1.08rem', { lineHeight: '1.35' }],
sm: ['1rem', { lineHeight: '1.35' }],
base: ['1.25rem', { lineHeight: '1.22' }],
// lg: ['1.125rem', { lineHeight: '1.5' }],
// xl: ['1.25rem', { lineHeight: '1.6' }],
// '2xl': ['1.5rem', { lineHeight: '1.88rem' }],
// '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.53rem', { lineHeight: '1' }],
'4xl': ['2.8rem', { lineHeight: '1' }],
// '5xl': ['3rem', { lineHeight: '1.1' }],
// '6xl': ['3.75rem', { lineHeight: '1.04' }],
// '7xl': ['4.5rem', { lineHeight: '1.1' }],

+ 1
- 1
web/app/templates/about.html Näytä tiedosto

@@ -2,7 +2,7 @@

{% block content %}

<div class="cell-margin text max-w-[55ch]">
<div class="cell-margin text max-w-[65ch]">
{{ text|safe }}
</div>


+ 135
- 98
web/app/templates/base.html Näytä tiedosto

@@ -12,18 +12,75 @@
# Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed
-->

{% macro relationships_links(relationships) %}
{% if relationships %}
{% for relationship in relationships %}
{{ resource_lead(relationship)}}
{% endfor %}
{% endif %}
{% endmacro %}

{% macro resource_with_related(resource, pre_title='', post_title='Related') %}
<div class="w-full overflow-x-scroll my-8 pb-12 border-b-2 border-black">
<div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col" >
<div class=" w-40 pl-16 pt-4 row-start-1 ">
{% if pre_title == '' %}
<p>1 / 34</p>
{% else %}
<p>{{ pre_title }}</p>
{% endif %}
</div>
<div class="w-[32rem] shrink-0 row-start-1 row-span-3">
{{ resource_lead(resource) }}
</div>
<div class=" w-52 pl-24 pt-4 row-start-1 ">
{{ post_title }}
</div>
<div class="h-12">

</div>
{% if resource['name'] != 'practice' %}
<div class="w-52 pl-24 pt-4 ">
Related practices
</div>
{% endif %}
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div>
<div class=""></div>
<div class="cell practice">
<h2>Collaborative writing</h2>
</div>
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div>
<div class="shrink-0 min-w-[32rem] row-start-1">
{{ resource_lead(resource) }}
</div>
</div>
</div>
{% endmacro %}

{% macro popup_link(title,url) %}
<a href="{{ url }}" class="nav-link">
{{ title }}
</a>
{% endmacro %}

{% macro resource_lead(type, title, leadtext, url, year, thumbnail='', large_title=false) %}
<div class="relative cell h-full">
{% macro resource_lead(resource) %}
<div class="relative cell ">
<a
class="block cursor-pointer"
class="block h-full hover:opacity-60 transition-opacity cursor-pointer "

href="{{ url }}"
{% if resource['type'] == 'book' %}
href="{{ url_for('book.show_book', book_id=resource['id']) }}"
{% endif %}
{% if resource['type'] == 'tool' %}
href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}"
{% endif %}
{% if resource['type'] == 'practice' %}
href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}"
{% endif %}
hx-target="#modal-content"
hx-select="main"
@@ -33,23 +90,22 @@
>

{% if large_title %}
<h2 class="">{{ title }}</h2>
{% else %}
<h3 class="">{{ title }}</h3>
{% if (resource['type'] == 'book') %}
<img class="w-20 h-20 object-contain float-right mt-4 ml-4 mb-4 grayscale rotate-[15deg]" src="https://dummyimage.com/4:5x70" alt="cover for {{ resource['name'] }}">
{% endif %}
{% if year %}
<div class="">{{ year }}</div>
{% endif %}
{% if type == 'book' and thumbnail %}
<img class="w-40 h-40 object-contain float-right m-16 grayscale rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ title }}">
<h2 class="{{ resource['type'] }} mb-2">{{ resource['name'] }}</h2>
{% if resource['year'] %}
<div class=" text-sm">
{{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
</div>
{% endif %}

<div class="">
{{ leadtext | truncate(100) }}
<div class="text-xl mb-[1em]">
{{ resource['description'] | truncate(150) }}
</div>

</a>
{% if current_user.is_authenticated %}
<div class="">
@@ -68,49 +124,10 @@
{% endif %}
</div>
{% endif %}
</div>

{% endmacro %}

{% macro resource_small(resource) %}
{% if resource['type'] == 'tool' %}
{{
resource_lead(
resource['type'],
resource['name'],
resource['description'],
url_for('tool.show_tool',
tool_id=resource['id']),
null,
'',
true
)
}}
{% elif resource['type'] == 'practice' %}
{{
resource_lead(
resource['type'],
resource['name'],
resource['description'],
url_for('practice.show_practice',
practice_id=resource['id']),
null
)
}}
{% elif resource['type'] == 'book' %}
{{
resource_lead(
resource['type'],
resource['name'],
resource['author'],
url_for('book.show_book',
book_id=resource['id']),
null,
resource['thumbnail'],
true
)
}}
{% endif %}
</div>

{% endmacro %}


@@ -122,12 +139,11 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/htmx.org@1.8.6"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<title>ExPub Compendium</title>
<link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet">
</head>

<script>
// htmx.on('htmx:beforeRequest', e=> {
// console.log(e)
@@ -139,19 +155,19 @@
modalOpen: false,
showRelated: false,
home: '/',
hideIfBase() {
let str = document.location.toString();
str = str.replace('http://', '');
str = str.replace('https://', '');
let l = str.split('/').length-1;
if(l<2) {
let l = str.split('/').length - 1;
if (l < 2) {
this.modalOpen = false;
}
return l;
},
init() {
this.$watch('document.location', (value, oldValue) => {
this.$watch('document.location', (value, oldValue) => {
console.log('new url', value);
});
window.addEventListener('popstate', e => {
@@ -160,18 +176,21 @@
},
hideOverlay() {
this.modalOpen = false;
// window.history.pushState({}, '', this.home);
},
openModal() {
// this.$refs.modal.innerHTML = '';
this.modalOpen = true;
let mc = document.querySelector('#modal-content');
mc.scrollTo(0,0);
mc.scrollTo(0, 0);
}
}
}
</script>
</head>


<body
class="text-base overflow-y-scroll"
x-data="base()"
@@ -181,59 +200,77 @@
hx-swap="outerHTML"
hx-indicator="body"
>
<div id="loading" class="loading">
<div class="pointer-events-none fixed top-0 left-0 w-full h-screen z-50 flex justify-center items-center p-4">
<div class="rounded-full bg-black text-white p-4 ">
Loading...
</div>
</div>
<div id="loading" class="loading pointer-events-none fixed top-0 left-0 w-full h-screen z-50">
</div>

<div id="all">
<header class="sticky top-0 z-10 bg-white std-padding border-b-[3px] border-black">
<nav class="">
<div class="lg:flex gap-2 mb-2">
<a class="link leading-tight" href="{{ url_for('main.index') }}">ExPub<br>Compendium</a>
<a href="{{ url_for('main.about') }}" class="{{ 'active' if request.path == url_for('main.about') }} ml-auto link">
About
<header class="sticky top-0 z-10 bg-white std-padding border-b-[2px] border-black">
<nav class=" lg:flex justify-between">
<a class="link inline-block w-40" href="{{ url_for('main.index') }}">ExPub<br>Compendium</a>

<div class="mr-8">
<h2><a href="{{ url_for('tool.get_tools') }}" class="tool link align-bottom">Tools</a></h2>
</div>

<div class="mr-8">
<h2>
<a href="{{ url_for('practice.get_practices') }}" class="practice link">
Practices
</a>
</h2>
</div>

<div class="mr-8">
<h2>
<a href="{{ url_for('book.get_books') }}" class="book link">
Books
</a>
</h2>
</div>

<!-- <div class="mr-8">
<h2 class="">
<a href="{{ url_for('practice.get_practices') }}" class="practice link">
Typologies
</a>
</h2>
</div> -->

<div class="mr-8">
<a href="{{ url_for('main.about') }}"
class="{{ 'active' if request.path == url_for('main.about') }} ml-auto link mr-auto">
About<br>ExPub
</a>
</div>
<div class="ml-auto mr-2">
{% if current_user.is_authenticated %}
<a href="{{ url_for('create.create_resource') }}" class="link">
<a href="{{ url_for('create.create_resource') }}" class="block link">
Add resource
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="link">
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="block link">
Profile
</a>
{% endif %}
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="link">
<a href="{{ url_for('auth.login') }}" class="block link">
Login
</a>
<a href="{{ url_for('auth.signup') }}" class="link">
<a href="{{ url_for('auth.signup') }}" class="block link">
Sign Up
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="link">
<a href="{{ url_for('auth.logout') }}" class="block link">
Logout
</a>
{% endif %}
</div>
<h2 class="flex gap-4 ">
<a href="{{ url_for('tool.get_tools') }}" class=" link align-bottom">
Tools
</a>
<a href="{{ url_for('practice.get_practices') }}" class="link">
Practices
</a>
<a href="{{ url_for('book.get_books') }}" class="link">
Books
</a>
<input class="ml-auto text-base border-2 border-black p-1 " type="text" placeholder="Search">
</h2>

<input class=" text-base border-2 border-black p-1 " type="text" placeholder="Search">
</nav>
</header>
@@ -251,7 +288,7 @@
</main>
</div>

<div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-20 p-8 bg-black/20 overscroll-none">
<div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-20 p-4 bg-black/20 overscroll-none">
<div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()">
<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>

+ 123
- 153
web/app/templates/book.html Näytä tiedosto

@@ -2,170 +2,140 @@

{% block content %}

<div class="cell-margin">
{% if book['thumbnail'] %}
<img class="w-40 h-40 object-contain float-right m-16 grayscale rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ book['Title'] }}">
{% endif %}
<h2 class="max-w-[30rem]">{% block title %} {{ book['Title'] or resource['name'] }} {% endblock %}</h2>
{% if current_user.is_authenticated %}
<div class="row text-center py-3">
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="badge bg-dark">Edit</span>
</a>
</div>
{% endif %}
</div>
<div class="row block-margin">
<div class="col">
<table class="table table-hover">
<tbody>
<div class="cell-margin grid grid-cols-[2fr,1fr]">
<div class="left">
<div class="mb-8">
<div class="mb-2">Book</div>
{% if book['thumbnail'] %}
<div class="float-right">
<img class="w-40 h-40 object-contain m-16 rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ book['Title'] }}">
</div>
{% endif %}

<h2 class="book mb-2 max-w-[30rem]">{% block title %} {{ book['Title'] or resource['name'] }} {% endblock %}</h2>

{% if book['Year'] %}
{{ book['Year'] }}
{% endif %}
{% if book['Authors'] %}
<div class="">
{% if book['Authors']|length > 1 %}
<div class="">
{% for author in book['Authors'] %}
{{ author }}</br>
{% endfor %}
</div>
{% else %}
<div>
{% for author in book['Authors'] %}
{{ author }}
{% endfor %}
</div>
{% endif %}

</div>
{% endif %}
</div>


<div class="">
{% if current_user.is_authenticated %}
<div class="">
<a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
<span class="badge bg-dark">Edit</span>
</a>
</div>
{% endif %}

<div class="facts">

{% if resource['typology'] %}
<tr>
<th>
Typology category:
</th>
<td>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
</td>
</tr>
<div class="">
<h3>Typology category</h3>
<a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
</div>
{% endif %}
{% if resource['bookUrl'] %}
<tr>
<th>
URL:
</th>
<td>
<a href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</td>
</tr>
<div class="">
<h3>URL</h3>
<a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
</div>
{% endif %}
{% if book %}
<!-- fields for books from isbntools -->
{% if book['Title'] %}
<tr>
<th>
Title:
</th>
<td>
{{ book['Title'] }}
</td>
</tr>
{% endif %}
{% if book['Authors'] %}
<tr>
{% if book['Authors']|length > 1 %}
<th>
Authors:
</th>
<td>
{% for author in book['Authors'] %}
{{ author }}</br>
{% endfor %}
</td>
{% else %}
<th>
Author:
</th>
<td>
{% for author in book['Authors'] %}
{{ author }}
{% endfor %}
</td>
{% endif %}
</tr>
{% endif %}
{% if book['ISBN-13'] %}
<tr>
<th>
ISBN-13:
</th>
<td>
{{ book['ISBN-13'] }}
</td>
</tr>
{% endif %}
{% if book['Year'] %}
<tr>
<th>
Publication year:
</th>
<td>
{{ book['Year'] }}
</td>
</tr>
{% endif %}
{% if book['Publisher'] %}
<tr>
<th>
Publisher:
</th>
<td>
{{ book['Publisher'] }}
</td>
</tr>
{% endif %}
{% if book['desc'] %}
<tr>
<th>
Publisher's description:
</th>
<td>
{{ book['desc'] }}
</td>
</tr>
{% endif %}
<!-- fields for books from isbntools -->
{% if book['ISBN-13'] %}
<div class="">
<h3>
ISBN-13
</h3>
<div>
{{ book['ISBN-13'] }}
</div>
</div>
{% endif %}
{% if book['Publisher'] %}
<div class="">
<h3>
Publisher
</h3>
<div>
{{ book['Publisher'] }}
</div>
</div>
{% endif %}
{% else %}
<!-- fields for books from database -->
{% if resource['name'] %}
<tr>
<th>
Title:
</th>
<td>
{{ resource['name'] }}
</td>
</tr>
{% endif %}
{% if resource['author'] %}
<tr>
<th>
Author:
</th>
<td>
{{ resource['author'] }}
</td>
</tr>
{% endif %}
{% if resource['year'] %}
<tr>
<th>
Publication year:
</th>
<td>
{{ resource['year'] }}
</td>
</tr>
{% endif %}
<!-- fields for books from database -->
{% if resource['name'] %}
<!-- <div class="">
<h3>Title</h3>
<div class="">{{ resource['name'] }}</div>
</div> -->
{% endif %}
{% if resource['author'] %}
<div class="">
<h3>Author</h3>
<div class="">{{ resource['author'] }}</div>
</div>
{% endif %}
{% if resource['year'] %}
<div class="">
<h3>Publication year</h3>
<div>
{{ resource['year'] }}
</div>
</div>
{% endif %}
{% endif %}
{% if book['desc'] %}
<div class="col-span-2">
<h3>Publisher's description</h3>
<div class="">{{ book['desc'] }}</div>
</div>
{% endif %}

{% if resource['description'] %}
<tr>
<th>
<div class="col-span-2">
<h3>
Experimental aspects:
</th>
<td>
</h3>
<div>
{{ resource['description'] }}
</td>
</tr>
</div>
</div>
{% endif %}
</tbody>
</table>
</div>


</div>
</div>
<div class="right lg:mt-16">
<div class=" max-w-[30rem] mx-auto p-4">
{{ relationships_links(relationships) }}
</div>
</div>
</div>
{% if relationships %}
<div class="grid lg:grid-cols-3">
{% for relationship in relationships %}
{{ resource_small(relationship)}}
{% endfor %}
</div>
{% endif %}

{% endblock %}


+ 24
- 16
web/app/templates/index.html Näytä tiedosto

@@ -1,33 +1,41 @@
{% extends "base.html" %}

{% block content %}
<div class="std-grid">
<div class="">

<div class="border-b-2 border-black">
<div class="pl-44 text my-8 row-span-2 meta max-w-[65ch]">
{{ text|safe }}
</div>

<div class="std-margin text row-span-2 cell meta">
{{ text|safe }}
</div>
{% for tool in tools %}

{{ resource_small(tool) }}
{{ resource_with_related(tool, 'Tool', 'Used by') }}

{% endfor %}

<div class="cell text-red-600">
MISSING :<br>
{% for book in books %}

Clusters of things (book + tool). SHow books and what tools they're made with, and "tagged" with practice and typology
</div>
<div class="cell text-red-600">
MISSING :<br>
{{ resource_with_related(book, 'Book', 'Made with') }}

{% endfor %}

{% for tool in tools2 %}

{{ resource_with_related(tool, 'Tool', 'Used by') }}

{% endfor %}

{% for book in books2 %}

{{ resource_with_related(book, 'Book', 'Made with') }}

{% endfor %}

Lead into Typology with some examples and lead text
</div>
<div class="cell text-red-600">
MISSING :<br>

Lead into Practices with some examples and lead text
</div>

</div>
{% endblock %}

+ 111
- 171
web/app/templates/resource.html Näytä tiedosto

@@ -1,9 +1,10 @@
{% extends 'base.html' %}

{% block content %}
<div class="cell-margin">
<div class="cell-margin">
<h2 class="block-margin">
<div class="cell-margin grid gap-8 grid-cols-[2fr,1fr]">
<div class="left">
<div class="mb-2 capitalize">{{ resource['type'] }}</div>
<h2 class="block-margin {{ resource['type'] }}">
{% block title %}
{% autoescape false %}
{{ resource['name'] | replace(" ","<br>") }}
@@ -12,177 +13,116 @@
</h2>
{% if current_user.is_authenticated %}
{% if resource['type'] == 'tool' %}
<div class="row text-center py-3">
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% elif resource['type'] == 'practice' %}
<div class="row text-center py-3">
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% if resource['type'] == 'tool' %}
<div class="row text-center py-3">
<a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% elif resource['type'] == 'practice' %}
<div class="row text-center py-3">
<a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
<span class="">Edit</span>
</a>
</div>
{% endif %}
{% endif %}
<table class="table table-hover">
<tbody>
<tr>
<th>
Created:
</th>
<td>
{{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
</td>
</tr>
{% if resource['description'] %}
<tr>
<th>
Description:
</th>
<td>
{{ resource['description'] }}
</td>
</tr>
{% endif %}
<!-- fields for tools -->
{% if resource['developer'] %}
<tr>
<th>
Developer
</th>
<td>
{% if resource['developerUrl'] %}
<a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
{% else %}
{{ resource['developer'] }}
{% endif %}
</td>
</tr>
{% endif %}
{% if resource['license'] %}
<tr>
<th>
Software license:
</th>
<td>
{{ resource['license'] }}
</td>
</tr>
{% endif %}
{% if resource['scriptingLanguage'] %}
<tr>
<th>
Software language(s):
</th>
<td>
{{ resource['scriptingLanguage'] }}
</td>
</tr>
{% endif %}
{% if resource['projectUrl'] %}
<tr>
<th>
Project page:
</th>
<td>
<a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
</td>
</tr>
{% endif %}
{% if resource['repositoryUrl'] %}
<tr>
<th>
Code repository:
</th>
<td>
<a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
</td>
</tr>
{% endif %}
{% if resource['ingestFormats'] %}
<tr>
<th>
Import / ingest formats:
</th>
<td>
{{ resource['ingestFormats'] }}
</td>
</tr>
{% endif %}
{% if resource['outputFormats'] %}
<tr>
<th>
Output formats:
</th>
<td>
{{ resource['outputFormats'] }}
</td>
</tr>
{% endif %}
{% if resource['status'] %}
<tr>
<th>
Platform status:
</th>
<td>
{{ resource['status'] }}
</td>
</tr>
{% endif %}
<!-- fields for practices -->
{% if resource['longDescription'] %}
<tr>
<th>
Full description
</th>
<td>
{{ resource['longDescription']|safe }}
</td>
</tr>
{% endif %}
{% if resource['experimental'] %}
<tr>
<th>
Experimental uses
</th>
<td>
{{ resource['experimental']|safe }}
</td>
</tr>
{% endif %}
{% if resource['considerations'] %}
<tr>
<th>
Considerations
</th>
<td>
<p style="white-space: pre-line">{{ resource['considerations']|safe }}</p>
</td>
</tr>
{% endif %}
{% if resource['references'] %}
<tr>
<th>
References:
</th>
<td>
<p style="white-space: pre-line">{{ resource['references']|safe }}</p>
</td>
</tr>
{% endif %}
</tbody>
</table>
<div class="facts">
{% if resource['description'] %}
<div class="">
<h3>Description</h3>
{{ resource['description'] }}
</div>
{% endif %}
<!-- fields for tools -->
{% if resource['developer'] %}
<div class="">
<h3>Developer</h3>
{% if resource['developerUrl'] %}
<a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
{% else %}
{{ resource['developer'] }}
{% endif %}
</div>
{% endif %}
{% if resource['license'] %}
<div class="">
<h3>Software license</h3>
{{ resource['license'] }}
</div>
{% endif %}
{% if resource['scriptingLanguage'] %}
<div class="">
<h3>Software language(s)</h3>
{{ resource['scriptingLanguage'] }}
</div>
{% endif %}
{% if resource['projectUrl'] %}
<div class="">
<h3>Project page</h3>
<a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
</div>
{% endif %}
{% if resource['repositoryUrl'] %}
<div class="">
<h3>Code repository</h3>
<a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
</div>
{% endif %}
{% if resource['ingestFormats'] %}
<div class="">
<h3>Import / ingest formats</h3>
{{ resource['ingestFormats'] }}
</div>
{% endif %}
{% if resource['outputFormats'] %}
<div class="">
<h3>Output formats</h3>
{{ resource['outputFormats'] }}
</div>
{% endif %}
{% if resource['status'] %}
<div class="">
<h3>Platform status</h3>
{{ resource['status'] }}
</div>
{% endif %}
<!-- fields for practices -->
{% if resource['longDescription'] %}
<div class="col-span-2">
<h3>Full description</h3>
{{ resource['longDescription']|safe }}
</div>
{% endif %}
{% if resource['experimental'] %}
<div class="col-span-2">
<h3>Experimental uses</h3>
{{ resource['experimental']|safe }}
</div>
{% endif %}
{% if resource['considerations'] %}
<div class="col-span-2">
<h3>Considerations</h3>
<p>{{ resource['considerations']|safe }}</p>
</div>
{% endif %}
{% if resource['references'] %}
<div class="col-span-2">
<h3> References </h3>
<p>{{ resource['references']|safe }}</p>
</div>
{% endif %}
<div class="">
<h3>Created</h3>
{{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
</div>

</div>
</div>
</div>
{% if relationships %}
<div class="grid lg:grid-cols-3">
{% for relationship in relationships %}
{{ resource_small(relationship) }}
{% endfor %}
<div class="right lg:mt-16 max-w-[30rem] mx-auto p-4">
{{ relationships_links(relationships) }}
</div>
{% endif %}
</div>
{% endblock %}

+ 70
- 103
web/app/templates/resources.html Näytä tiedosto

@@ -21,7 +21,7 @@
<script>
function filter() {
return {
filterOpen: false,
expandFilters: false,
init() {
// console.log(this.showRelated)
}
@@ -29,111 +29,78 @@
}
</script>
<div class="" x-data="filter()">
<div
class="search fixed z-20 top-0 left-0 w-[20rem] h-screen bg-white cell-padding "
x-show="filterOpen"
style="box-shadow:0 0 2rem rgba(0,0,0,0.3)"
@click.outside = "filterOpen = false"
>
<div class=" p-2 pt-4 gap-8 bg-white ">
{% if practices_filter %}
<details class="" open>
<summary>Practices</summary>
<div class="">
{% for practice in practices_filter %}
<div {% if request.args.get('practice')==practice[0]|string %} class="active" {% endif %}>
<a href="/{{type + 's'}}?practice={{practice[0]}}">{{ practice[1] }}</a>
<div id="resources" :class="expandFilters?'expanded':''">
<div class="std-margin grid lg:grid-cols-4 mb-16">
{% if practices_filter %}
<div class="hidden lg:block cursor-pointer" @click="expandFilters = !expandFilters">Show/hide filters</div>
<div class="">
<div class="filter-header">Practices</div>
<div class="filter-options my-4" x-show="expandFilters">
{% for practice in practices_filter %}
<div {% if request.args.get('practice')==practice[0]|string %} class="active" {% endif %}>
<a href="/{{type + 's'}}?practice={{practice[0]}}" hx-target="#resources" hx-select="#resources">{{ practice[1] }}</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if year_filter %}
<div class="">
<div class="filter-header">Year</div>
<div class="filter-options my-4" x-show="expandFilters">
{% for year in year_filter %}
<div {% if request.args.get('year')==year %} class="active" {% endif %}>
<a href="/books?year={{year}}" hx-target="#resources" hx-select="#resources">{{ year }}</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if typology_filter %}
<div class="">
<div class="filter-header">Typology category</div>
<div class="filter-options my-4" x-show="expandFilters">
{% for typology in typology_filter %}
<div {% if request.args.get('typology')==typology %} class="active" {% endif %}>
<a href="/books?typology={{typology}}" hx-target="#resources" hx-select="#resources">{{ typology }}</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if languages_filter %}
<div class="" >
<div class="filter-header">Scripting languages</div>
<div class="filter-options my-4" x-show="expandFilters">
{% for language in languages_filter %}
<div {% if request.args.get('scriptingLanguage')==language %} class="active" {% endif %}>
<a href="/tools?scriptingLanguage={{language}}" hx-target="#resources" hx-select="#resources">{{ language }}</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if licenses_filter %}
<div class="" >
<div class="filter-header">License</div>
<div class="filter-options my-4" x-show="expandFilters">
{% for license in licenses_filter %}
<div {% if request.args.get('license')==license %} class="active" {% endif %}>
<a href="/tools?license={{license}}" hx-target="#resources" hx-select="#resources">{{ license }}</a>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</details>
{% endif %}
{% if year_filter %}
<details class="">
<summary>Year</summary>
<div id="filter-year" class="collapse filter-items">
{% for year in year_filter %}
<li {% if request.args.get('year')==year %} class="active" {% endif %}>
<a href="/books?year={{year}}">{{ year }}</a>
</li>
{% endfor %}
</div>
</details>
{% endif %}
{% if typology_filter %}
<details class="">
<summary class="">Typology category</summary>
<div class="">
{% for typology in typology_filter %}
<div {% if request.args.get('typology')==typology %} class="active" {% endif %}>
<a href="/books?typology={{typology}}">{{ typology }}</a>
</div>
{% endfor %}
</div>
</details>
{% endif %}
{% if languages_filter %}
<details class="">
<summary>Scripting languages</summary>
<div class="">
{% for language in languages_filter %}
<div {% if request.args.get('scriptingLanguage')==language %} class="active" {% endif %}>
<a href="/tools?scriptingLanguage={{language}}">{{ language }}</a>
</div>
{% endfor %}
</div>
</details>
{% endif %}
{% if licenses_filter %}
<details class="min-w-[10rem]">
<summary>License</summary>
<div class="">
{% for license in licenses_filter %}
<div {% if request.args.get('license')==license %} class="active" {% endif %}>
<a href="/tools?license={{license}}">{{ license }}</a>

<div>
{% for resource in resources %}
{{ resource_with_related(resource) }}
{% endfor %}
</div>
{% endfor %}
</div>
</details>
{% endif %}
</div>
</div>
<div class="flex justify-between mx-4 my-8">
<div class="cursor-pointer" @click="filterOpen = true">← Show filters</div>
<div class="">
<input type="checkbox" name="filter-open" x-model="showRelated" id=""> Also show everything related
</div>
</div>
<div class="grid lg:grid-cols-3" x-show="!showRelated">
{% for resource in resources %}
{{ resource_small(resource) }}
{% endfor %}
</div>
<div x-show="showRelated">
{% for resource in resources %}
<div class="w-full overflow-x-scroll">
<div class="grid lg:grid-rows-3 grid-flow-col mb-16">
<div class="w-[25rem] shrink-0 row-span-3 h-full">
{{ resource_small(resource) }}
</div>
<div class="w-[25rem] cell row-start-1">
Something Related
</div>
<div class="w-[25rem] cell shrink-0 row-start-1">
Something Related
</div>
<div class="w-[25rem] cell shrink-0 row-start-1">
Something Related
</div>
<div class="w-[25rem] cell shrink-0 row-start-1">
Something Related
</div>
</div>
</div>
{% endfor %}
</div>
</div>


{% endblock %}

+ 1
- 5
web/content/home.md Näytä tiedosto

@@ -1,5 +1 @@
## ExPub <br>Compendium

The Experimental Publishing Compendium is for authors, designers, publishers, institutions and technologist who challenge, push and redefine the shape, form and rationale of scholarly works. The compendium offers a catalogues of tools, practices, and books to inspire experimental scholarly works.

[About ExPub](/about)
The Experimental Publishing Compendium is for authors, designers, publishers, institutions and technologist who challenge, push and redefine the shape, form and rationale of scholarly works. The compendium offers a catalogues of tools, practices, and books to inspire experimental scholarly works. [Read more](/about)

Write Preview
Loading…
Peruuta
Tallenna