From cc9c6ecb87e337862bd9066b0b53ce38b3a9e615 Mon Sep 17 00:00:00 2001 From: Ezekiel Date: Sun, 5 Jan 2025 13:18:27 +0100 Subject: [PATCH] Called api --- README.md | 106 ++++++++---------------------------------------- src/fetch.ts | 23 ----------- src/index.ts | 28 +++++++------ src/settings.ts | 0 src/utils.ts | 46 +++++++++++++++++++++ styles.css | 25 ++++++++++-- 6 files changed, 101 insertions(+), 127 deletions(-) delete mode 100644 src/fetch.ts create mode 100644 src/settings.ts create mode 100644 src/utils.ts diff --git a/README.md b/README.md index c773152..26abeb4 100644 --- a/README.md +++ b/README.md @@ -1,94 +1,24 @@ -# Obsidian Sample Plugin +# Obsidian Hacker News 📰 -This is a sample plugin for Obsidian (https://obsidian.md). +![Maintained](https://img.shields.io/badge/Maintained%3F-yes-green.svg) +![Ask me anything](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg) +![Stars](https://img.shields.io/github/stars/Ezek-iel/obsidian-hn.svg) -This project uses TypeScript to provide type checking and documentation. -The repo depends on the latest plugin API (obsidian.d.ts) in TypeScript Definition format, which contains TSDoc comments describing what it does. -This sample plugin demonstrates some of the basic functionality the plugin API can do. -- Adds a ribbon icon, which shows a Notice when clicked. -- Adds a command "Open Sample Modal" which opens a Modal. -- Adds a plugin setting tab to the settings page. -- Registers a global click event and output 'click' to the console. -- Registers a global interval which logs 'setInterval' to the console. +## Overview +This is a plugin to view top hacker news stories directly in Obsidian. +>This plugin is a great start for anyone who is planning to build in obsidian -## First time developing plugins? +## Contributions 💖 +This plugin is currently accepting contributions. You can contribute by: +- 🐞 Reporting bugs +- 🌿 Suggesting new features +- 🖊️ Writing code -Quick starting guide for new plugin devs: - -- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with. -- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it). -- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder. -- Install NodeJS, then run `npm i` in the command line under your repo folder. -- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`. -- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`. -- Reload Obsidian to load the new version of your plugin. -- Enable plugin in settings window. -- For updates to the Obsidian API run `npm update` in the command line under your repo folder. - -## Releasing new releases - -- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release. -- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible. -- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases -- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release. -- Publish the release. - -> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`. -> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json` - -## Adding your plugin to the community plugin list - -- Check the [plugin guidelines](https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines). -- Publish an initial version. -- Make sure you have a `README.md` file in the root of your repo. -- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin. - -## How to use - -- Clone this repo. -- Make sure your NodeJS is at least v16 (`node --version`). -- `npm i` or `yarn` to install dependencies. -- `npm run dev` to start compilation in watch mode. - -## Manually installing the plugin - -- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`. - -## Improve code quality with eslint (optional) -- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. -- To use eslint with this project, make sure to install eslint from terminal: - - `npm install -g eslint` -- To use eslint to analyze this project use this command: - - `eslint main.ts` - - eslint will then create a report with suggestions for code improvement by file and line number. -- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder: - - `eslint .\src\` - -## Funding URL - -You can include funding URLs where people who use your plugin can financially support it. - -The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file: - -```json -{ - "fundingUrl": "https://buymeacoffee.com" -} +### Writing Code 🖊️ +To write code, you need to have a basic understanding of TypeScript. You can start by cloning the repository and running the following commands: +```bash +npm install +npm run dev ``` - -If you have multiple URLs, you can also do: - -```json -{ - "fundingUrl": { - "Buy Me a Coffee": "https://buymeacoffee.com", - "GitHub Sponsor": "https://github.com/sponsors", - "Patreon": "https://www.patreon.com/" - } -} -``` - -## API Documentation - -See https://github.com/obsidianmd/obsidian-api +This will start the development server and you can start writing code. \ No newline at end of file diff --git a/src/fetch.ts b/src/fetch.ts deleted file mode 100644 index ad5f04a..0000000 --- a/src/fetch.ts +++ /dev/null @@ -1,23 +0,0 @@ -export async function fetchFromURL() { - const response = await fetch('http://127.0.0.1:5000/api/v1/blogs') - const data: BlogResponse = await response.json() - return data -} - -interface BlogResponse { - blogs: Array -} - -interface BlogItem { - id: string - title: string - content: string - created: string - updated: string | null - likes: number - comments_number: number - author_id: string - comments_url: string - author_name: string -} - diff --git a/src/index.ts b/src/index.ts index 9b29201..dd6ef6e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import { ItemView, WorkspaceLeaf, Plugin } from "obsidian" -import { fetchFromURL } from "./fetch" +import { createLoader, error, getPosts } from "./utils" export const VIEW_TYPE = 'posts_view' @@ -20,18 +20,23 @@ export class PostsView extends ItemView { } protected async onOpen(): Promise { - const container = this.containerEl.children[1] - container.empty() - const box = container.createDiv({ cls: "bg" }) - box.createEl('div', { cls: 'loader' }) - - const data = await fetchFromURL() + async function refresh(container: HTMLElement) { + container.empty() + createLoader(container) + try { + await getPosts(container) + } + catch (e){ + console.error(e) + error(container) + } + const refreshButton = container.createEl('button', { text: 'Refresh'}) + refreshButton.addEventListener('click', () => {refresh(container)}) + } + const container = this.contentEl - container.empty() - data.blogs.forEach(blog => { - container.createEl('h4', { text: blog.title }) - }); + refresh(container) } @@ -39,7 +44,6 @@ export class PostsView extends ItemView { // Nothing to clean up } } - export default class HNPlugin extends Plugin { async onload(): Promise { this.registerView(VIEW_TYPE, (leaf) => new PostsView(leaf)) diff --git a/src/settings.ts b/src/settings.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..fb020a1 --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,46 @@ +export async function fetchPost() { + const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty') + const data: number[] = await response.json() + return data +} + +export async function fetchPostDetails(id: number) { + const response = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`) + const data: Post = await response.json() + return data +} + +interface Post { + by: string; + score: number; + text: string; + title: string; + url: string +} + +export async function getPosts(container: HTMLElement) { + const posts = await fetchPost() + const postDetails = posts.map(fetchPostDetails) + const allposts = await Promise.all(postDetails) + container.empty() + console.trace(allposts.slice(0,9)) + allposts.slice(0, 9).map(data => { + const div = container.createDiv({cls: 'box'}) + div.createEl('h2', { text: data.title }) + div.createEl('p', { text: `by ${data.by}`, cls: 'author' }) + div.createEl('p', { text: String(data.score) }) + div.createEl('p', { text: data.text }) + div.createEl('a', { text: 'Read More', attr: { href: data.url } }) + }) +} + +export function createLoader(container: HTMLElement) { + const bg = container.createDiv({ cls: 'bg' }) + bg.createEl('div', {cls: 'loader'}) +} + +export function error(container: HTMLElement){ + container.empty() + + container.createEl('h2', {text: 'Error loading posts', cls: "error"}) +} \ No newline at end of file diff --git a/styles.css b/styles.css index f268ef3..c90450d 100644 --- a/styles.css +++ b/styles.css @@ -8,13 +8,22 @@ If your plugin does not need CSS, delete this file. */ .box { - background-color: purple; - padding: 1rem; + border: 1px solid var(--background-modifier-border); + padding: 10px; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + border-radius: var(--radius-m); + max-width: 600px; + background-color: var(--background-primary-alt) +} + +.author { + color: var(--text-muted); } .loader { border: 8px solid #f3f3f3; - border-top: 8px solid #3498db; + border-top: 8px solid hsl(var(--accent-h), var(--accent-s), var(--accent-l)); border-radius: 50%; width: 60px; height: 60px; @@ -31,8 +40,16 @@ If your plugin does not need CSS, delete this file. } } -.bg{ +.bg { display: flex; justify-content: center; width: 100%; +} + +.error { + color: var(--color-red); + background-color: rgba(var(--color-red-rgb), 0.2); + padding: 1rem; + max-width: 600px; + border-radius: var(--radius-m); } \ No newline at end of file