Initial commit
This commit is contained in:
ashastral
commit
3f91f846f4
14 changed files with 7439 additions and 0 deletions
51
.eslintrc.json
Normal file
51
.eslintrc.json
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"root": true,
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"rules": {
|
||||
"no-prototype-builtins": "off",
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/explicit-function-return-type": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"@typescript-eslint/no-explicit-any": "error",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"warn",
|
||||
{
|
||||
"argsIgnorePattern": "^_"
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["rollup.config.js", "web-test-runner.config.js"],
|
||||
"env": {
|
||||
"node": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*_test.ts",
|
||||
"**/custom_typings/*.ts",
|
||||
"packages/labs/ssr/src/test/integration/tests/**",
|
||||
"packages/labs/ssr/src/lib/util/parse5-utils.ts"
|
||||
],
|
||||
"rules": {
|
||||
"@typescript-eslint/no-explicit-any": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
11
.gitignore
vendored
Normal file
11
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/node_modules/
|
||||
/lib/
|
||||
/test/
|
||||
custom-elements.json
|
||||
# top level source
|
||||
*.js
|
||||
*.js.map
|
||||
*.d.ts
|
||||
*.d.ts.map
|
||||
# only generated for size check
|
||||
*.bundled.js
|
||||
3
.prettierrc.json
Normal file
3
.prettierrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"tabWidth": 2
|
||||
}
|
||||
185
cohost-wc.css
Normal file
185
cohost-wc.css
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
/* atkinson-hyperlegible-regular - latin_latin-ext */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-regular.woff2")
|
||||
format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* atkinson-hyperlegible-italic - latin_latin-ext */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-italic.woff2")
|
||||
format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* atkinson-hyperlegible-700 - latin_latin-ext */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("../fonts/atkinson-hyperlegible-v11-latin_latin-ext-700.woff2")
|
||||
format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
|
||||
/* atkinson-hyperlegible-700italic - latin_latin-ext */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url("./fonts/atkinson-hyperlegible-v11-latin_latin-ext-700italic.woff2")
|
||||
format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
@keyframes slideupright {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
}
|
||||
@keyframes slideupleft {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
transform-origin: bottom left;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
.motion-safe\:animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.motion-safe\:animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
.motion-safe\:transition-transform {
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.motion-reduce\:animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
.motion-reduce\:transition-none {
|
||||
transition-property: none;
|
||||
}
|
||||
}
|
||||
|
||||
cohost-wc * {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: #ded9d3;
|
||||
}
|
||||
cohost-wc a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
cohost-wc hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
cohost-wc blockquote,
|
||||
cohost-wc dl,
|
||||
cohost-wc dd,
|
||||
cohost-wc h1,
|
||||
cohost-wc h2,
|
||||
cohost-wc h3,
|
||||
cohost-wc h4,
|
||||
cohost-wc h5,
|
||||
cohost-wc h6,
|
||||
cohost-wc hr,
|
||||
cohost-wc figure,
|
||||
cohost-wc p,
|
||||
cohost-wc pre {
|
||||
margin: 0;
|
||||
}
|
||||
.prose {
|
||||
color: light-dark(#191919, #fff9f2);
|
||||
--tw-prose-body: light-dark(#374151, #fff9f2);
|
||||
--tw-prose-headings: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-lead: light-dark(#4b5563, #fff9f2);
|
||||
--tw-prose-links: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-bold: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-counters: light-dark(#6b7280, #fff9f2);
|
||||
--tw-prose-bullets: light-dark(#d1d5db, #fff9f2);
|
||||
--tw-prose-hr: light-dark(#e5e7eb, #bfbab5);
|
||||
--tw-prose-quotes: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-quote-borders: light-dark(#e5e7eb, #bfbab5);
|
||||
--tw-prose-captions: light-dark(#6b7280, #fff9f2);
|
||||
--tw-prose-code: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-pre-code: light-dark(#e5e7eb, #fff9f2);
|
||||
--tw-prose-pre-bg: light-dark(#1f2937, #191919);
|
||||
--tw-prose-th-borders: light-dark(#d1d5db, #bfbab5);
|
||||
--tw-prose-td-borders: light-dark(#e5e7eb, #bfbab5);
|
||||
font-size: 1em;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.prose
|
||||
:where(.prose > :last-child):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.prose
|
||||
:where(.prose > :first-child):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
margin-top: 0;
|
||||
}
|
||||
288
dev/index.html
Normal file
288
dev/index.html
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title><my-element> Demo</title>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
||||
<script src="../node_modules/lit/polyfill-support.js"></script>
|
||||
<script type="module" src="../cohost-wc.js"></script>
|
||||
<link rel="stylesheet" href="../cohost-wc.css" />
|
||||
<style type="text/css">
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
background-color: light-dark(#fff9f2, #191919);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<cohost-wc
|
||||
avatarSrc="https://staging.cohostcdn.org/avatar/10282-23a36741-dadc-498c-90c1-32e4d82bfff9-profile.jpg?dpr=2&width=80&height=80&fit=cover&auto=webp"
|
||||
avatarShape="squircle"
|
||||
displayName="ash"
|
||||
username="astral"
|
||||
iso8601Timestamp="2024-03-04T19:00:03.535-08:00"
|
||||
permalink="https://cohost.org/astral/post/4894934-an-intro-post"
|
||||
postTitle="an intro post"
|
||||
>
|
||||
<p>
|
||||
ummm hi! I've been posting here for over a year & never really wrote
|
||||
a proper introduction for this page. so, here's what to expect from
|
||||
<span style="font-family: system-ui"
|
||||
><span style="opacity: 0.6">https://</span>cohost.org<span
|
||||
style="opacity: 0.6"
|
||||
>/astral</span
|
||||
>:</span
|
||||
>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong
|
||||
>prose, tagged
|
||||
<a
|
||||
href="https://cohost.org/astral/tagged/meowing"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
tabindex="0"
|
||||
>#meowing</a
|
||||
></strong
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
subject matter may include literally anything, but most often
|
||||
computers / the internet, videogames, or stuff I made / am making.
|
||||
</li>
|
||||
<li>oh, speaking of which...</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>stuff I made / am making</strong>
|
||||
<ul>
|
||||
<li>
|
||||
I'm a
|
||||
<a
|
||||
href="https://ashastral.com/"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
tabindex="0"
|
||||
>musician</a
|
||||
>
|
||||
who, when pressed to summarize her style for an unknown audience,
|
||||
apparently makes "EDM / rhythm game fusion" music. neat!
|
||||
</li>
|
||||
<li>
|
||||
I'm also a programmer with some ambitious thoughts on what modern
|
||||
software ought to look like (but doesn't, because of capitalism)
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>any furry art that brings me joy</strong>
|
||||
<ul>
|
||||
<li>
|
||||
subject matter may include
|
||||
<span
|
||||
style="
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
white-space: nowrap;
|
||||
"
|
||||
>the Trans Experience™</span
|
||||
><span aria-hidden="true"
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -4.24s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>t</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -4.04s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>h</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -3.84s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>e</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -3.64s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
> </span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -3.44s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>T</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -3.24s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>r</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -3.03s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>a</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -2.83s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>n</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -2.63s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>s</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -2.43s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
> </span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -2.23s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>E</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -2.02s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>x</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -1.82s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>p</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -1.62s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>e</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -1.42s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>r</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -1.22s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>i</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -1.01s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>e</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -0.81s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>n</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -0.61s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>c</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -0.41s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>e</span
|
||||
><span
|
||||
style="
|
||||
display: inline-block;
|
||||
animation: 1.2s ease-in-out -0.21s infinite alternate spin;
|
||||
transform: translateY(-25%);
|
||||
"
|
||||
>™</span
|
||||
></span
|
||||
>, macro/micro, TF, and more!
|
||||
</li>
|
||||
<li>
|
||||
I don't tag these; my blog is for people who don't mind seeing
|
||||
these things.
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>some good-ass chosts from all around the website</strong>.
|
||||
enough said, folks
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
as for myself: my name is Ash<a
|
||||
href="https://meow.garden/how-to-refer-to-me/"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
tabindex="0"
|
||||
>*</a
|
||||
>
|
||||
and I'm uhh
|
||||
<em>(rolls a pair of dice but does not look at the results)</em> tired
|
||||
today! a lot of my friends know me through the dance game community (ITG
|
||||
in particular); I've also been a
|
||||
<em>Crypt of the NecroDancer</em> racer/speedrunner and
|
||||
<em>N (2004 flash game)</em> mapper in the distant past. I spent too
|
||||
many years of my life on Twitter & Tumblr and now I'm 30 and trying
|
||||
my best to overcome the maladaptive behaviors those platforms
|
||||
encouraged. you may
|
||||
<a
|
||||
href="https://cohost.org/astral/tagged/Ash%20(fursona)"
|
||||
target="_blank"
|
||||
rel="nofollow noopener"
|
||||
tabindex="0"
|
||||
>look at my fursona</a
|
||||
>
|
||||
if you are so inclined
|
||||
</p>
|
||||
<p>
|
||||
well, that's every single thing there is to know about me! I'll leave a
|
||||
short curated gallery of stuff I've made under the cut
|
||||
</p>
|
||||
</cohost-wc>
|
||||
</body>
|
||||
</html>
|
||||
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-700.woff2
Normal file
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-700.woff2
Normal file
Binary file not shown.
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-700italic.woff2
Normal file
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-700italic.woff2
Normal file
Binary file not shown.
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-italic.woff2
Normal file
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-italic.woff2
Normal file
Binary file not shown.
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-regular.woff2
Normal file
BIN
fonts/atkinson-hyperlegible-v11-latin_latin-ext-regular.woff2
Normal file
Binary file not shown.
11
index.html
Normal file
11
index.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Lit Starter Kit</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="/dev/index.html">Component Demo</a>
|
||||
</body>
|
||||
</html>
|
||||
6361
package-lock.json
generated
Normal file
6361
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
31
package.json
Normal file
31
package.json
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "cohost-wc",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"description": "Web component to render cohost posts",
|
||||
"main": "cohost-wc.js",
|
||||
"module": "cohost-wc.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"build:watch": "tsc --watch",
|
||||
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
||||
"lint:eslint": "eslint 'src/**/*.ts'",
|
||||
"lint:lit-analyzer": "lit-analyzer",
|
||||
"format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
|
||||
"serve": "wds --watch",
|
||||
"serve:prod": "MODE=prod npm run serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@web/dev-server": "^0.4.6",
|
||||
"@webcomponents/webcomponentsjs": "^2.8.0",
|
||||
"eslint": "^9.10.0",
|
||||
"lit-analyzer": "^2.0.3",
|
||||
"prettier": "^3.3.3",
|
||||
"typescript": "^5.6.2"
|
||||
},
|
||||
"customElements": "custom-elements.json"
|
||||
}
|
||||
465
src/cohost-wc.ts
Normal file
465
src/cohost-wc.ts
Normal file
|
|
@ -0,0 +1,465 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { when } from "lit/directives/when.js";
|
||||
|
||||
@customElement("cohost-wc")
|
||||
export class CohostWebComponent extends LitElement {
|
||||
static override styles = css`
|
||||
:host {
|
||||
color-scheme: light dark;
|
||||
font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: #ded9d3;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
.co-post-box {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border-radius: 0.5rem;
|
||||
background-color: light-dark(white, black);
|
||||
box-shadow:
|
||||
0px 4px 5px #00000024,
|
||||
0px 1px 10px #0000001f,
|
||||
0px 2px 4px #0003;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.co-post-box {
|
||||
max-width: 65ch;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.co-post-box {
|
||||
border-width: 1px;
|
||||
border-color: rgb(74 72 71);
|
||||
}
|
||||
}
|
||||
.co-thread-header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background-color: light-dark(rgb(255 249 242), rgb(25 25 25));
|
||||
}
|
||||
.co-thread-header-1 {
|
||||
line-height: 1;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
flex: 1 1 0%;
|
||||
min-width: 0px;
|
||||
display: flex;
|
||||
}
|
||||
.co-avatar-container {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.mask {
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
}
|
||||
.mask-squircle {
|
||||
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==);
|
||||
mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==);
|
||||
}
|
||||
.mask-roundrect {
|
||||
border-radius: 12.5%;
|
||||
}
|
||||
.mask-circle {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
/* .mask-egg {
|
||||
-webkit-mask-image: url(/static/de7a6730ae8672a12406.svg);
|
||||
mask-image: url(/static/de7a6730ae8672a12406.svg);
|
||||
}
|
||||
.mask-capsule-big {
|
||||
-webkit-mask-image: url(/static/3e2b26f2f1e719024296.svg);
|
||||
mask-image: url(/static/3e2b26f2f1e719024296.svg);
|
||||
}
|
||||
.mask-capsule-small {
|
||||
-webkit-mask-image: url(/static/8ff201350af3c70fb5b8.svg);
|
||||
mask-image: url(/static/8ff201350af3c70fb5b8.svg);
|
||||
} */
|
||||
.co-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.co-project-display-name {
|
||||
max-width: 100%;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
color: light-dark(rgb(25 25 25), rgb(255 249 242));
|
||||
}
|
||||
.co-project-display-name:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.co-project-handle {
|
||||
color: light-dark(rgb(74 72 71), rgb(222 217 211));
|
||||
}
|
||||
.co-project-handle:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.co-thread-header time {
|
||||
display: block;
|
||||
flex: none;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: rgb(130 127 124);
|
||||
}
|
||||
.co-thread-header time a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.co-hairline {
|
||||
border-color: light-dark(rgb(191 186 181), rgb(74 72 71));
|
||||
}
|
||||
.post-title-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.post-title-a {
|
||||
overflow-wrap: break-word;
|
||||
align-self: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.post-title-a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.prose {
|
||||
color: light-dark(#191919, #fff9f2);
|
||||
--tw-prose-body: light-dark(#374151, #fff9f2);
|
||||
--tw-prose-headings: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-lead: light-dark(#4b5563, #fff9f2);
|
||||
--tw-prose-links: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-bold: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-counters: light-dark(#6b7280, #fff9f2);
|
||||
--tw-prose-bullets: light-dark(#d1d5db, #fff9f2);
|
||||
--tw-prose-hr: light-dark(#e5e7eb, #bfbab5);
|
||||
--tw-prose-quotes: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-quote-borders: light-dark(#e5e7eb, #bfbab5);
|
||||
--tw-prose-captions: light-dark(#6b7280, #fff9f2);
|
||||
--tw-prose-code: light-dark(#111827, #fff9f2);
|
||||
--tw-prose-pre-code: light-dark(#e5e7eb, #fff9f2);
|
||||
--tw-prose-pre-bg: light-dark(#1f2937, #191919);
|
||||
--tw-prose-th-borders: light-dark(#d1d5db, #bfbab5);
|
||||
--tw-prose-td-borders: light-dark(#e5e7eb, #bfbab5);
|
||||
font-size: 1em;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.prose
|
||||
:where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.prose
|
||||
:where(.prose > :last-child):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.prose
|
||||
:where(.prose > :first-child):not(
|
||||
:where([class~="not-prose"], [class~="not-prose"] *)
|
||||
) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.post-body {
|
||||
overflow: clip;
|
||||
contain: paint;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
position: relative;
|
||||
}
|
||||
.post-body-section {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.co-thread-footer {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background-color: light-dark(rgb(255 249 242), rgb(25 25 25));
|
||||
color: light-dark(rgb(130 127 124), rgb(191 186 181));
|
||||
}
|
||||
.co-thread-footer-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.comments {
|
||||
width: max-content;
|
||||
flex: none;
|
||||
}
|
||||
.comments a {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.comments a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.co-action-button {
|
||||
display: block;
|
||||
color: light-dark(rgb(25 25 25), rgb(255 249 242));
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
|
||||
@property()
|
||||
avatarSrc =
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACuUlEQVRYR9WXPYwpURTHz3QbDdFJdqOxEWJXT7EVsgoRCRK6jSgUZCVb2ZJ2V7ONoBIfpVLUVBoiohAKQie7jejue+e+3HljPnzMWzbvVmbm3vv/nf85Z8bler0e0ev1cHV1BZcc2+0W1us1cNPplOAPk8kEWq32IgxfX18wmUwAA+eWyyXRaDT0xiUgmDhqbTabPwAGgwGED87lhFhjtVr9BUDvzwkht7cE4FwQSoHJAnw3xD5XFQG+C+JQSvcC/CvEIXHc/yCAWohjxI8GOBXiWPGTAI6FOEX8ZIBDEKeKqwJQglAjrhpADIHXar8jR3WB0ueRRY3P1X7E/l8AYc4vngK5grtYEe4TUgOxUwODwQDsdjtfc/1+H+7v7/lrOYHFYgE3Nzf8nM/PT74jdDodf79UKsHT05OkninA29sbeX5+Bo7jYD6fw/X1NbTbbXC73UAIoYuUorPZbFCtVilouVyGVqsFhUIBgsEgJBIJ8Pv9wCDFAfHvgVQqRfL5vIQOgXCR0WhU7HPcHIFxoIORSASGw6EEOBwOg8fjkbhAHajX6wQniAcCjEYjsFqt0Ol0wOFw0ClCp4RrXl9f6WU2m5W4Fo/HIRaLgcvl2pFRfA9gCpLJJFQqFcB/zGgpRoYiDw8POxsJ64ClkKlg6rrdLni9Xj69QgIKYDabyXg85u+zDWu1Gjw+PtKzAgIVi0U6p9FoSNxiKcAiFkNYLBYIhUKQTqcl5w4K8HsxYYuY+MfHB0Sj0Z0FrCaEnSEmwaJ8f3/nHcJrLMSXlxfZOpIAoIicOLMeuwVToTSEAFhXt7e3sjXBzh0UwOfzkWazCYFAAO7u7iRWYXXncjlqPaYC3cKeZm7JtS5rSXG6FA8ms9kMnE6nJDDscWwtYV4xMlbR4pcXm4dOikcmk6FuSI5mP344/enj+S+rBamTP+UGdwAAAABJRU5ErkJggg==";
|
||||
|
||||
@property()
|
||||
avatarShape = "squircle";
|
||||
|
||||
@property()
|
||||
displayName = "Display Name";
|
||||
|
||||
@property()
|
||||
username = "username";
|
||||
|
||||
@property()
|
||||
iso8601Timestamp = "2022-06-28T18:03:00Z";
|
||||
|
||||
@property()
|
||||
permalink = "https://cohost.org/";
|
||||
|
||||
@property()
|
||||
postId: string | undefined = undefined;
|
||||
|
||||
@property()
|
||||
postTitle: string | undefined = undefined;
|
||||
|
||||
@property()
|
||||
sharedAvatarSrc: string | undefined = undefined;
|
||||
|
||||
@property()
|
||||
sharedDisplayName: string | undefined = undefined;
|
||||
|
||||
@property()
|
||||
sharedUsername: string | undefined = undefined;
|
||||
|
||||
@property()
|
||||
tags: string | undefined = undefined;
|
||||
|
||||
@property({ type: Number })
|
||||
comments = 0;
|
||||
|
||||
@state()
|
||||
protected _displayTimestamp = new Date(
|
||||
this.iso8601Timestamp,
|
||||
).toLocaleString();
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<article
|
||||
data-theme="both"
|
||||
class="co-themed-box co-post-box"
|
||||
data-url-popovers=""
|
||||
>
|
||||
<header class="co-thread-header">
|
||||
<div class="co-thread-header-1">
|
||||
<div class="co-avatar-container mask">
|
||||
<img
|
||||
src="${this.avatarSrc}"
|
||||
class="co-avatar mask mask-${this.avatarShape}"
|
||||
alt="${this.displayName}"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
rel="author"
|
||||
href="https://cohost.org/${this.username}"
|
||||
class="co-project-display-name"
|
||||
title="${this.displayName}"
|
||||
data-url-popovers=""
|
||||
style="user-select: none;"
|
||||
data-longpress-event="true"
|
||||
>${this.displayName}</a
|
||||
><a
|
||||
href="https://cohost.org/${this.username}"
|
||||
class="co-project-handle"
|
||||
data-url-popovers=""
|
||||
style="user-select: none;"
|
||||
data-longpress-event="true"
|
||||
>@${this.username}</a
|
||||
><time
|
||||
datetime="${this.iso8601Timestamp}"
|
||||
class="block flex-none text-xs tabular-nums text-gray-500"
|
||||
title="${this._displayTimestamp}"
|
||||
><a href="${this.permalink}" class="hover:underline"
|
||||
>${this._displayTimestamp}</a
|
||||
></time
|
||||
>
|
||||
</div>
|
||||
<!--<button
|
||||
id="headlessui-menu-button"
|
||||
type="button"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded="false"
|
||||
data-headlessui-state=""
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class="co-action-button h-6 w-6 transition-transform ui-open:rotate-90"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>-->
|
||||
</header>
|
||||
<hr class="co-hairline" />
|
||||
<div>
|
||||
${when(
|
||||
this.postId,
|
||||
() => html`
|
||||
<div id="post-${this.postId}" class="relative -top-20"></div>
|
||||
`,
|
||||
)}
|
||||
<div class="post-body-container">
|
||||
${when(
|
||||
this.postTitle,
|
||||
() => html`
|
||||
<div class="post-title-container flex w-full flex-row p-3">
|
||||
<a href="${this.permalink}" class="post-title-a prose"
|
||||
><h3>${this.postTitle}</h3></a
|
||||
>
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
<div
|
||||
class="post-body relative overflow-hidden supports-[overflow:clip]:overflow-clip isolate co-contain-paint"
|
||||
data-post-body="true"
|
||||
data-testid="post-body"
|
||||
>
|
||||
<div class="post-body-section prose">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="co-hairline" />
|
||||
<footer class="co-thread-footer">
|
||||
<div class="co-thread-footer-1">
|
||||
<div class="comments">
|
||||
<a
|
||||
href="${this.permalink}#comments"
|
||||
class="text-sm hover:underline"
|
||||
>${this.comments} comment${this.comments == 1 ? "" : "s"}</a
|
||||
>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class="co-action-button"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||
></path></svg
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class="co-action-button"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"cohost-wc": CohostWebComponent;
|
||||
}
|
||||
}
|
||||
33
tsconfig.json
Normal file
33
tsconfig.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2021",
|
||||
"module": "es2020",
|
||||
"lib": ["es2021", "DOM", "DOM.Iterable"],
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"outDir": "./",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noImplicitOverride": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "ts-lit-plugin",
|
||||
"strict": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": []
|
||||
}
|
||||
Loading…
Reference in a new issue