jordanreger Posts

jordanreger

•Created by jordanreger on 6/17/2024 in #help

onClick not staying with preact-render-to-string?

Hello, I'm trying to make an SSR application by rendering components to strings. However, I need a button to have some JavaScript capabilities and unfortunately Preact seems to be removing it. How can I work around this? I'd like to continue rendering it to a string if possible. Thanks!

9 replies

DDeno

•Created by jordanreger on 1/25/2023 in #help

write map to .ts file

how would i write a Map object to a .ts file?

4 replies

DDeno

•Created by jordanreger on 1/16/2023 in #help

[react] document is not defined

the following code returns document is not defined. i have no idea how i'd go about fixing this. the example uses next.js' dynamic() but i'm doing this in "plain" react. any ideas? thanks!

import { NotionAPI } from "https://esm.sh/notion-client@6.15.6";
import { NotionRenderer } from "https://esm.sh/react-notion-x@6.15.7";

import { Collection } from 'https://esm.sh/react-notion-x/build/third-party/collection'

import { React, Suspense, ReactDOMServer, DOMParser } from "../deps.ts";

const notion = new NotionAPI();
const recordMap = await notion.getPage("f675efad218a4aea85546c036957f3f8");

export default function App (){
  return (
      <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={true} components={{Collection}} />
  )
}

import { NotionAPI } from "https://esm.sh/notion-client@6.15.6";
import { NotionRenderer } from "https://esm.sh/react-notion-x@6.15.7";

import { Collection } from 'https://esm.sh/react-notion-x/build/third-party/collection'

import { React, Suspense, ReactDOMServer, DOMParser } from "../deps.ts";

const notion = new NotionAPI();
const recordMap = await notion.getPage("f675efad218a4aea85546c036957f3f8");

export default function App (){
  return (
      <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={true} components={{Collection}} />
  )
}

18 replies

DDeno

•Created by jordanreger on 1/16/2023 in #help

react-notion-x usememo error?

3 replies

DDeno

•Created by jordanreger on 1/14/2023 in #help

adding async data to array?

i'm probably missing something obvious but i'm trying to add data that's async to an array in a forEach loop. below is my code:

const posts = await notion.databases.query({
      database_id: Deno.env.get("DATABASE_ID"),
      sorts: [
        {
          property: "Date",
          direction: "descending"
        }
      ]
    })

    const posts_array: Array<Record<string, unknown>> = [];
    
    posts.results.forEach(async post => {
      const title = post.properties.Title.title[0].text.content, date = post.properties.Date.date.start, id = post.id;
      const content = await notion.blocks.children.list({ block_id: id, page_size: 100 });
      const post_data = { title: title, date: date, content: content.results };
      posts_array.push(post_data);
    })

const posts = await notion.databases.query({
      database_id: Deno.env.get("DATABASE_ID"),
      sorts: [
        {
          property: "Date",
          direction: "descending"
        }
      ]
    })

    const posts_array: Array<Record<string, unknown>> = [];
    
    posts.results.forEach(async post => {
      const title = post.properties.Title.title[0].text.content, date = post.properties.Date.date.start, id = post.id;
      const content = await notion.blocks.children.list({ block_id: id, page_size: 100 });
      const post_data = { title: title, date: date, content: content.results };
      posts_array.push(post_data);
    })

apologies for the formatting

3 replies

DDeno

•Created by jordanreger on 11/15/2022 in #help

preact form not working?

hi all, i'm just trying to make a simple form but for some reason it keeps submitting the form as if there's no onSubmit function... inputbar.jsx

/** @jsx h */

import { h, Component } from "https://esm.sh/preact";

export default class InputBar extends Component {
  state = { value: '' }

  onSubmit = e => {
    console.log("submit");
    e.preventDefault();
  }

  onInput = e => {
    const { value } = e.target;
    this.setState({ value });
  }

  render(_, { value }) {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="text" placeholder="enter your RSS URL" name="import" value={value} onInput={this.onInput}/>
          <button type="submit" style="visibility: hidden"></button>
        </form>
        <br/>
        <br/>
        <details>
          <summary>your feeds</summary>
          <div>feed list</div>
        </details>
      </div>
    )
  }
}

/** @jsx h */

import { h, Component } from "https://esm.sh/preact";

export default class InputBar extends Component {
  state = { value: '' }

  onSubmit = e => {
    console.log("submit");
    e.preventDefault();
  }

  onInput = e => {
    const { value } = e.target;
    this.setState({ value });
  }

  render(_, { value }) {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="text" placeholder="enter your RSS URL" name="import" value={value} onInput={this.onInput}/>
          <button type="submit" style="visibility: hidden"></button>
        </form>
        <br/>
        <br/>
        <details>
          <summary>your feeds</summary>
          <div>feed list</div>
        </details>
      </div>
    )
  }
}

root.ksx

/** @jsx h */
/* https://todo.sr.ht/~jordanreger/feeds/5 */

import InputBar from "./inputbar.jsx";
import FeedList from "./feedlist.jsx";

import { h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";

const root = `
<!DOCTYPE html>
<html lang="en">
    ...
    <article>
      <div class="body">
        feeds is a very basic rss reader. view the source on <a href="https://git.sr.ht/~jordanreger/feeds">sourcehut</a>.
        <br/>
        (for links that don't work, please add an issue to <a href="https://todo.sr.ht/~jordanreger/feeds" target="_blank">todo.sr.ht/~jordanreger/feeds</a>)
        <br/>
        <br/>
        ${render(<InputBar/>)}
      </div>
    </article>
    ...
</html>

`;

export { root as page_root };

/** @jsx h */
/* https://todo.sr.ht/~jordanreger/feeds/5 */

import InputBar from "./inputbar.jsx";
import FeedList from "./feedlist.jsx";

import { h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";

const root = `
<!DOCTYPE html>
<html lang="en">
    ...
    <article>
      <div class="body">
        feeds is a very basic rss reader. view the source on <a href="https://git.sr.ht/~jordanreger/feeds">sourcehut</a>.
        <br/>
        (for links that don't work, please add an issue to <a href="https://todo.sr.ht/~jordanreger/feeds" target="_blank">todo.sr.ht/~jordanreger/feeds</a>)
        <br/>
        <br/>
        ${render(<InputBar/>)}
      </div>
    </article>
    ...
</html>

`;

export { root as page_root };

5 replies

DDeno

•Created by jordanreger on 11/6/2022 in #help

split error when using std toml

here's the error:

$ deno run -A toml.ts
error: Uncaught (in promise) TypeError: subStr.split is not a function
      const lines = subStr.split("\n");
                           ^
    at parse (https://deno.land/std@0.162.0/encoding/_toml/parser.ts:873:28)        
    at file:///C:/Users/jorda/crate/playground/toml.ts:5:13

$ deno run -A toml.ts
error: Uncaught (in promise) TypeError: subStr.split is not a function
      const lines = subStr.split("\n");
                           ^
    at parse (https://deno.land/std@0.162.0/encoding/_toml/parser.ts:873:28)        
    at file:///C:/Users/jorda/crate/playground/toml.ts:5:13

4 replies

DDeno

•Created by jordanreger on 11/4/2022 in #help

turn off js with fetch?

i'd like to fetch only the html version of a website, if there is one. any ideas on how to do so?

4 replies

DDeno

•Created by jordanreger on 11/4/2022 in #help

package to turn html into plaintext?

i want to try turning html pages into plaintext in the terminal. any ideas?

18 replies