WP6
/
expub_compendium
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

with related on FP

joel
Joel Galvez 2 年前
父节点
d2ddc3cbfc
当前提交
3807128572
共有 16 个文件被更改，包括 866 次插入 和 664 次删除
合并视图 显示文件统计
  1. +5
    -2
      web/app/main.py
  2. +101
    -16
      web/app/static/src/main.css
  3. 二进制
      web/app/static/styles/CirrusCumulus.woff
  4. 二进制
      web/app/static/styles/Dauphine-Italic.ttf
  5. 二进制
      web/app/static/styles/Dauphine-Regular.ttf
  6. +292
    -96
      web/app/static/styles/main.css
  7. 二进制
      web/app/static/styles/roboto-italic.ttf
  8. 二进制
      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 查看文件

# route for index page # route for index page
@main.route('/') @main.route('/')
def index(): 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: with open('content/home.md', 'r') as f:
text = f.read() text = f.read()
text = markdown.markdown(text) 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 # route for profile page
@main.route('/profile') @main.route('/profile')

+ 101
- 16
web/app/static/src/main.css 查看文件

@tailwind base; @tailwind base;

@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;




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


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


@font-face { @font-face {
font-family: 'ag-fett'; 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 { body {
font-family: 'ag';
font-family: 'dauphine';
} }


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



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

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

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


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


.block-margin { .block-margin {


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



.cell::before { .cell::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0px; right: 0px;
width: 3px;
width: 2px;
height: calc(100% - 20px); height: calc(100% - 20px);
background-color: black; background-color: black;
} }
content: ''; content: '';
position: absolute; 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; bottom: 0px;
left: 8px; left: 8px;
width: calc(100% - 20px); width: calc(100% - 20px);
height: 3px; height: 3px;
background-color: black; background-color: black;
transform-origin: 100% 100%;
transform: rotate(45deg);
} }


.meta {
/* .meta {
transform: rotate(-3.5deg); 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 { h2,h3 {
@apply overflow-hidden max-w-full overflow-ellipsis;
hyphens: auto;
} }


h2 { h2 {
} }


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

}

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


.text > h3 { .text > h3 {


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


p {
max-width: 55ch;
}


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


.loading { .loading {
opacity: 0; 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 { .htmx-request .loading {
transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
opacity: 1; opacity: 1;
display: block; display: block;
} }




text-decoration: underline; text-decoration: underline;
} }


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

二进制
web/app/static/styles/CirrusCumulus.woff 查看文件


二进制
web/app/static/styles/Dauphine-Italic.ttf 查看文件


二进制
web/app/static/styles/Dauphine-Regular.ttf 查看文件


+ 292
- 96
web/app/static/styles/main.css 查看文件

--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }

.container { .container {
width: 100%; width: 100%;
} }

@media (min-width: 640px) { @media (min-width: 640px) {


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

@media (min-width: 768px) { @media (min-width: 768px) {


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

@media (min-width: 1024px) { @media (min-width: 1024px) {


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

@media (min-width: 1280px) { @media (min-width: 1280px) {


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

@media (min-width: 1536px) { @media (min-width: 1536px) {


.container { .container {
.z-50 { .z-50 {
z-index: 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 { .row-span-2 {
grid-row: span 2 / span 2; grid-row: span 2 / span 2;
} }
.row-span-3 { .row-span-3 {
grid-row: span 3 / span 3; grid-row: span 3 / span 3;
} }
.row-span-1 {
grid-row: span 1 / span 1;
}
.row-start-1 { .row-start-1 {
grid-row-start: 1; grid-row-start: 1;
} }
.m-16 { .m-16 {
margin: 4rem; margin: 4rem;
} }
.m-8 {
margin: 2rem;
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
} }
.my-8 { .my-8 {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 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 { .mb-2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
.mb-8 { .mb-8 {
margin-bottom: 2rem; 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 { .mr-auto {
margin-right: auto; margin-right: auto;
} }
.mt-3 { .mt-3 {
margin-top: 0.75rem; 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 { .block {
display: block; display: block;
} }
.flex {
display: flex;
}
.table {
display: table;
.inline-block {
display: inline-block;
} }
.grid { .grid {
display: grid; display: grid;
} }
.hidden {
display: none;
}
.h-10 { .h-10 {
height: 2.5rem; height: 2.5rem;
} }
.h-20 {
height: 5rem;
}
.h-40 { .h-40 {
height: 10rem; height: 10rem;
} }
.h-screen { .h-screen {
height: 100vh; 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 { .w-10 {
width: 2.5rem; width: 2.5rem;
} }
.w-20 {
width: 5rem;
}
.w-40 { .w-40 {
width: 10rem; width: 10rem;
} }
.w-\[25rem\] {
width: 25rem;
}
.w-\[30rem\] {
width: 30rem;
}
.w-full { .w-full {
width: 100%; 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-w-\[30rem\] {
max-width: 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 { .shrink-0 {
flex-shrink: 0; flex-shrink: 0;
.grid-flow-col { .grid-flow-col {
grid-auto-flow: column; 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-between {
justify-content: space-between; justify-content: space-between;
} }
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-8 { .gap-8 {
gap: 2rem; gap: 2rem;
} }
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.rounded-full {
border-radius: 9999px;
}
.border-2 { .border-2 {
border-width: 2px; 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 { .border-black {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity)); 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 { .bg-black\/20 {
background-color: rgb(0 0 0 / 0.2); background-color: rgb(0 0 0 / 0.2);
} }
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
} }
.p-2 {
padding: 0.5rem;
.p-1 {
padding: 0.25rem;
} }
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
.p-8 {
padding: 2rem;
}
.p-1 {
padding: 0.25rem;
}
.py-3 { .py-3 {
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 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 { .pt-4 {
padding-top: 1rem; padding-top: 1rem;
} }
.pl-12 {
padding-left: 3rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-12 {
padding-bottom: 3rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
vertical-align: bottom; vertical-align: bottom;
} }
.text-base { .text-base {
font-size: 1.08rem;
line-height: 1.35;
font-size: 1.25rem;
line-height: 1.22;
} }
.text-sm { .text-sm {
font-size: 0.95rem;
font-size: 1rem;
line-height: 1.35; line-height: 1.35;
} }
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs { .text-xs {
font-size: 0.75rem; font-size: 0.75rem;
line-height: 1rem; 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 { .grayscale {
--tw-grayscale: grayscale(100%); --tw-grayscale: grayscale(100%);
.filter { .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); 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-face {
font-family: 'ag'; font-family: 'ag';
src: url(ApfelGrotezk-Regular.woff) format("woff");
src: url('ApfelGrotezk-Regular.woff') format("woff");
} }


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


@font-face { @font-face {
font-family: 'ag-fett'; 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 { body {
font-family: 'ag';
font-family: 'dauphine';
} }


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



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

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

.std-margin { .std-margin {
padding: 0.5rem; padding: 0.5rem;
} }


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


.block-margin { .block-margin {
.cell { .cell {
position: relative; position: relative;
padding: 1rem; 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 { .cell::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 0px; right: 0px;
width: 3px;
width: 2px;
height: calc(100% - 20px); height: calc(100% - 20px);
background-color: black; background-color: black;
} }
content: ''; content: '';
position: absolute; 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; bottom: 0px;
left: 8px; left: 8px;
width: calc(100% - 20px); width: calc(100% - 20px);
height: 3px; height: 3px;
background-color: black; background-color: black;
transform-origin: 100% 100%;
transform: rotate(45deg);
} }


.meta {
/* .meta {
transform: rotate(-3.5deg); 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 { h2,h3 {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-hyphens: auto;
hyphens: auto;
} }


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


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

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


.text > h3 { .text > h3 {


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


p {
max-width: 55ch;
}


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


.loading { .loading {
opacity: 0; 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 { .htmx-request .loading {
transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
opacity: 1; opacity: 1;
display: block; display: block;
} }




text-decoration: underline; 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) { @media (min-width: 1024px) {


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

.lg\:block {
display: block;
}

.lg\:flex { .lg\:flex {
display: 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 { .lg\:grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr)); 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;
}
}

二进制
web/app/static/styles/roboto-italic.ttf 查看文件


二进制
web/app/static/styles/roboto-regular.ttf 查看文件


+ 3
- 3
web/app/static/tailwind.config.js 查看文件

extend: { extend: {
fontSize: { fontSize: {
// xs: ['0.95rem', { lineHeight: '1.35' }], // 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' }], // lg: ['1.125rem', { lineHeight: '1.5' }],
// xl: ['1.25rem', { lineHeight: '1.6' }], // xl: ['1.25rem', { lineHeight: '1.6' }],
// '2xl': ['1.5rem', { lineHeight: '1.88rem' }], // '2xl': ['1.5rem', { lineHeight: '1.88rem' }],
// '3xl': ['1.875rem', { lineHeight: '2.25rem' }], // '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.53rem', { lineHeight: '1' }],
'4xl': ['2.8rem', { lineHeight: '1' }],
// '5xl': ['3rem', { lineHeight: '1.1' }], // '5xl': ['3rem', { lineHeight: '1.1' }],
// '6xl': ['3.75rem', { lineHeight: '1.04' }], // '6xl': ['3.75rem', { lineHeight: '1.04' }],
// '7xl': ['4.5rem', { lineHeight: '1.1' }], // '7xl': ['4.5rem', { lineHeight: '1.1' }],

+ 1
- 1
web/app/templates/about.html 查看文件



{% block content %} {% block content %}


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



+ 135
- 98
web/app/templates/base.html 查看文件

# Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed # 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) %} {% macro popup_link(title,url) %}
<a href="{{ url }}" class="nav-link"> <a href="{{ url }}" class="nav-link">
{{ title }} {{ title }}
</a> </a>
{% endmacro %} {% 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 <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-target="#modal-content"
hx-select="main" hx-select="main"
> >


{% 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 %} {% 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 %} {% endif %}


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

</a> </a>
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<div class=""> <div class="">
{% endif %} {% endif %}
</div> </div>
{% endif %} {% 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 %} {% endmacro %}




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

<script> <script>
// htmx.on('htmx:beforeRequest', e=> { // htmx.on('htmx:beforeRequest', e=> {
// console.log(e) // console.log(e)
modalOpen: false, modalOpen: false,
showRelated: false, showRelated: false,
home: '/', home: '/',
hideIfBase() { hideIfBase() {
let str = document.location.toString(); let str = document.location.toString();
str = str.replace('http://', ''); str = str.replace('http://', '');
str = str.replace('https://', ''); 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; this.modalOpen = false;
} }
return l; return l;
}, },
init() { init() {
this.$watch('document.location', (value, oldValue) => {
this.$watch('document.location', (value, oldValue) => {
console.log('new url', value); console.log('new url', value);
}); });
window.addEventListener('popstate', e => { window.addEventListener('popstate', e => {
}, },
hideOverlay() { hideOverlay() {
this.modalOpen = false; this.modalOpen = false;
// window.history.pushState({}, '', this.home); // window.history.pushState({}, '', this.home);
}, },
openModal() { openModal() {
// this.$refs.modal.innerHTML = ''; // this.$refs.modal.innerHTML = '';
this.modalOpen = true; this.modalOpen = true;
let mc = document.querySelector('#modal-content'); let mc = document.querySelector('#modal-content');
mc.scrollTo(0,0);
mc.scrollTo(0, 0);
} }
} }
} }
</script> </script>
</head>


<body <body
class="text-base overflow-y-scroll" class="text-base overflow-y-scroll"
x-data="base()" x-data="base()"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-indicator="body" 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>

<div id="all"> <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> </a>
</div>
<div class="ml-auto mr-2">
{% if current_user.is_authenticated %} {% 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 Add resource
</a> </a>
{% endif %} {% 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 Profile
</a> </a>
{% endif %} {% endif %}
{% if not current_user.is_authenticated %} {% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="link">
<a href="{{ url_for('auth.login') }}" class="block link">
Login Login
</a> </a>
<a href="{{ url_for('auth.signup') }}" class="link">
<a href="{{ url_for('auth.signup') }}" class="block link">
Sign Up Sign Up
</a> </a>
{% endif %} {% endif %}
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="link">
<a href="{{ url_for('auth.logout') }}" class="block link">
Logout Logout
</a> </a>
{% endif %} {% endif %}
</div> </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> </nav>
</header> </header>
</main> </main>
</div> </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()"> <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"> <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> <path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>

+ 123
- 153
web/app/templates/book.html 查看文件



{% block content %} {% 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'] %} {% 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 %} {% endif %}
{% if resource['bookUrl'] %} {% 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 %} {% endif %}
{% if book %} {% 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 %} {% 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 %} {% 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'] %} {% if resource['description'] %}
<tr>
<th>
<div class="col-span-2">
<h3>
Experimental aspects: Experimental aspects:
</th>
<td>
</h3>
<div>
{{ resource['description'] }} {{ resource['description'] }}
</td>
</tr>
</div>
</div>
{% endif %} {% endif %}
</tbody>
</table>
</div>


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

{% endblock %} {% endblock %}


+ 24
- 16
web/app/templates/index.html 查看文件

{% extends "base.html" %} {% extends "base.html" %}


{% block content %} {% 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> </div>
{% for tool in tools %} {% for tool in tools %}


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


{% endfor %} {% 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> </div>
{% endblock %} {% endblock %}

+ 111
- 171
web/app/templates/resource.html 查看文件

{% extends 'base.html' %} {% extends 'base.html' %}


{% block content %} {% 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 %} {% block title %}
{% autoescape false %} {% autoescape false %}
{{ resource['name'] | replace(" ","<br>") }} {{ resource['name'] | replace(" ","<br>") }}
</h2> </h2>
{% if current_user.is_authenticated %} {% 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 %} {% 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>
</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> </div>
{% endif %}
</div>
{% endblock %} {% endblock %}

+ 70
- 103
web/app/templates/resources.html 查看文件

<script> <script>
function filter() { function filter() {
return { return {
filterOpen: false,
expandFilters: false,
init() { init() {
// console.log(this.showRelated) // console.log(this.showRelated)
} }
} }
</script> </script>
<div class="" x-data="filter()"> <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> </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> </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>
<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> </div>



{% endblock %} {% endblock %}

+ 1
- 5
web/content/home.md 查看文件

## 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)

撰写 预览
正在加载...
取消
保存