-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add tailwind and upgrade dao-haus packages
- Loading branch information
1 parent
19d3f44
commit dc37587
Showing
9 changed files
with
569 additions
and
165 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export default { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,22 @@ | ||
|
|
||
| import { Outlet } from "react-router-dom"; | ||
| import styled from "styled-components"; | ||
| //import styled from "styled-components"; | ||
|
|
||
| const BlogContainerLayout = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: left; | ||
| justify-content: center; | ||
| margin-top: 2rem; | ||
| max-width: 800px; | ||
| `; | ||
| // const BlogContainerLayout = styled.div` | ||
| // display: flex; | ||
| // flex-direction: column; | ||
| // align-items: left; | ||
| // justify-content: center; | ||
| // margin-top: 2rem; | ||
| // max-width: 800px; | ||
| // `; | ||
|
|
||
| export const HomeContainer = () => { | ||
|
|
||
| return ( | ||
| <BlogContainerLayout> | ||
| // <BlogContainerLayout> | ||
| <div className="flex flex-col items-start justify-center mt-8 max-w-xl"> | ||
| <Outlet /> | ||
| </BlogContainerLayout> | ||
| </div> | ||
|
|
||
| // </BlogContainerLayout> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,111 @@ | ||
|
|
||
| import { Link, useParams } from 'react-router-dom' | ||
| import '../App.css' | ||
| import { useRecords } from '../hooks/UseRecords'; | ||
| import { Link, useParams } from "react-router-dom"; | ||
| // import '../App.css' | ||
| import { useRecords } from "../hooks/UseRecords"; | ||
| import { ValidNetwork } from "@daohaus/keychain-utils"; | ||
| import { useDaoData } from '@daohaus/moloch-v3-hooks'; | ||
| import { BlogPost } from '../utils/types'; | ||
| import { useDaoData } from "@daohaus/moloch-v3-hooks"; | ||
| import { BlogPost } from "../utils/types"; | ||
|
|
||
| import styled from "styled-components"; | ||
| import ReactMarkdown from "react-markdown"; | ||
|
|
||
|
|
||
|
|
||
| const ReactMarkdownWrapper = styled.div` | ||
| margin-top: 2rem; | ||
| margin-bottom: 2rem; | ||
| font-size: 1.5rem; | ||
| `; | ||
|
|
||
| const BlogDetailTitleBlock = styled.div` | ||
| margin-top: 2rem; | ||
| margin-bottom: 2rem; | ||
| font-size: 1.5rem; | ||
| `; | ||
|
|
||
| ` | ||
| const BlogDetailTitleBlock = styled.div``; | ||
|
|
||
| const BlogDetailInfo = styled.div` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| ` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| `; | ||
|
|
||
| const StyledLink = styled(Link)` | ||
| color: hsl(226, 70.0%, 55.5%); | ||
| color: hsl(226, 70%, 55.5%); | ||
| text-decoration: none; | ||
| &:hover { | ||
| color: #888; | ||
| } | ||
| `; | ||
|
|
||
|
|
||
| function BlogDetail() { | ||
| const { chainId, daoId, contentId } = useParams() | ||
| const { dao } = useDaoData({ | ||
| daoId: daoId || "", | ||
| daoChain: chainId as ValidNetwork, | ||
| }); | ||
|
|
||
| let { records } = useRecords({ | ||
| daoId: daoId, | ||
| chainId: chainId as ValidNetwork, | ||
| recordType: "DUCEREF", | ||
| hash: contentId | ||
| }); | ||
|
|
||
| const { records: comment } = useRecords({ | ||
| daoId: daoId, | ||
| chainId: chainId as ValidNetwork, | ||
| recordType: "DUCE", | ||
| hash: contentId | ||
| }); | ||
|
|
||
| if (records?.length === 0) { | ||
| records = comment; | ||
| } | ||
|
|
||
| const getBlogURL = (URI: string) => { | ||
| // TODO: this is very fagile | ||
| // example: https://dinhaus.github.io/din-admin/#/molochv3/0xaa36a7/0x738e841225bef5059640591f453eb7e9074c42c2/articles/0x53621709eb82041098d03fdd421cf0b78cd4dca68ee294084bff16ca9c66c689 | ||
| // format molochV3/chainId/daoId/articles/contentId | ||
| // blog example: http://localhost:5173/din-blog/#/content/0xaa36a7/0x738e841225bef5059640591f453eb7e9074c42c2/0x53621709eb82041098d03fdd421cf0b78cd4dca68ee294084bff16ca9c66c689 | ||
| // new format content/chainId/daoId/contentId | ||
| const parts = URI.split("/"); | ||
| return `/content/${parts[6]}/${parts[7]}/${parts[9]}`; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>{dao?.name || "Not Found"}</h1> | ||
| const { chainId, daoId, contentId } = useParams(); | ||
| const { dao } = useDaoData({ | ||
| daoId: daoId || "", | ||
| daoChain: chainId as ValidNetwork, | ||
| }); | ||
|
|
||
| let { records } = useRecords({ | ||
| daoId: daoId, | ||
| chainId: chainId as ValidNetwork, | ||
| recordType: "DUCEREF", | ||
| hash: contentId, | ||
| }); | ||
|
|
||
| const { records: comment } = useRecords({ | ||
| daoId: daoId, | ||
| chainId: chainId as ValidNetwork, | ||
| recordType: "DUCE", | ||
| hash: contentId, | ||
| }); | ||
|
|
||
| if (records?.length === 0) { | ||
| records = comment; | ||
| } | ||
|
|
||
| <div> | ||
| {records?.map((record) => { | ||
| const parsedContent: BlogPost = record.parsedContent as BlogPost; | ||
| const date = new Date(Number(record.createdAt) * 1000); | ||
| const formattedDate = `${date.getFullYear()} ${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}`; | ||
| return ( | ||
| <div key={record.id}> | ||
| <BlogDetailTitleBlock> | ||
| <h2>{parsedContent.title}</h2> | ||
| {(record.parsedContent as BlogPost)?.contentURI && <StyledLink to={`${getBlogURL((record.parsedContent as BlogPost)?.contentURI)}`}>See original post</StyledLink>} | ||
| <BlogDetailInfo> | ||
| <p>{formattedDate}</p> | ||
| <StyledLink to={`/blog/${chainId}/${daoId}`}>See all posts</StyledLink> | ||
| </BlogDetailInfo> | ||
| </BlogDetailTitleBlock> | ||
| <ReactMarkdownWrapper> | ||
| <ReactMarkdown>{parsedContent?.content}</ReactMarkdown> | ||
| </ReactMarkdownWrapper> | ||
| </div> | ||
| ) | ||
| })} | ||
| const getBlogURL = (URI: string) => { | ||
| // TODO: this is very fagile | ||
| // example: https://dinhaus.github.io/din-admin/#/molochv3/0xaa36a7/0x738e841225bef5059640591f453eb7e9074c42c2/articles/0x53621709eb82041098d03fdd421cf0b78cd4dca68ee294084bff16ca9c66c689 | ||
| // format molochV3/chainId/daoId/articles/contentId | ||
| // blog example: http://localhost:5173/din-blog/#/content/0xaa36a7/0x738e841225bef5059640591f453eb7e9074c42c2/0x53621709eb82041098d03fdd421cf0b78cd4dca68ee294084bff16ca9c66c689 | ||
| // new format content/chainId/daoId/contentId | ||
| const parts = URI.split("/"); | ||
| return `/content/${parts[6]}/${parts[7]}/${parts[9]}`; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>{dao?.name || "Not Found"}</h1> | ||
|
|
||
| <div> | ||
| {records?.map((record) => { | ||
| const parsedContent: BlogPost = record.parsedContent as BlogPost; | ||
| const date = new Date(Number(record.createdAt) * 1000); | ||
| const formattedDate = `${date.getFullYear()} ${date.toLocaleString( | ||
| "default", | ||
| { month: "short" } | ||
| )} ${date.getDate()}`; | ||
| return ( | ||
| <div key={record.id}> | ||
| <BlogDetailTitleBlock> | ||
| <h2>{parsedContent.title}</h2> | ||
| {(record.parsedContent as BlogPost)?.contentURI && ( | ||
| <StyledLink | ||
| to={`${getBlogURL( | ||
| (record.parsedContent as BlogPost)?.contentURI | ||
| )}`} | ||
| > | ||
| See original post | ||
| </StyledLink> | ||
| )} | ||
| <BlogDetailInfo> | ||
| <p>{formattedDate}</p> | ||
| <StyledLink to={`/blog/${chainId}/${daoId}`}> | ||
| See all posts | ||
| </StyledLink> | ||
| </BlogDetailInfo> | ||
| </BlogDetailTitleBlock> | ||
| <ReactMarkdownWrapper> | ||
| <ReactMarkdown>{parsedContent?.content}</ReactMarkdown> | ||
| </ReactMarkdownWrapper> | ||
| </div> | ||
|
|
||
|
|
||
| </> | ||
| ) | ||
| ); | ||
| })} | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default BlogDetail | ||
| export default BlogDetail; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,13 @@ | ||
|
|
||
| import '../App.css' | ||
|
|
||
| function Home() { | ||
|
|
||
| // get params from url path | ||
|
|
||
|
|
||
| return ( | ||
| <> | ||
| <h1>Din Blog</h1> | ||
|
|
||
| <h1 className="text-3xl font-bold underline text-red-500"> | ||
| Hello world! | ||
| </h1> | ||
| </> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default Home | ||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
| plugins: [], | ||
| }; |
Oops, something went wrong.