Browse Source

Create code transformer, transform inline styles to jsx objects

main
GreatBearShark 1 year ago
parent
commit
5bcc1bde6f
  1. 17
      src/components/modlog.tsx
  2. 334
      src/components/navbar.tsx
  3. 1927
      src/components/privacy-policy.tsx
  4. 2108
      src/components/tos.tsx
  5. 4
      src/components/user.tsx
  6. 11
      transform.js

17
src/components/modlog.tsx

@ -351,7 +351,10 @@ export class Modlog extends Component<any, ModlogState> {
) : (
<div>
<div>
<div style="display:inline-block; margin-top:6px">
<div style={{
display: "inline-block",
marginTop: "6px"
}}>
<h5>
{this.state.communityName && (
<Link
@ -364,8 +367,16 @@ export class Modlog extends Component<any, ModlogState> {
<span>{i18n.t('modlog')}</span>
</h5>
</div>
<div style="display:inline-block; float:right;">
<h6 style="border:3px solid #000000; padding:5px; background-color:#F39C12; color:#111111;">
<div style={{
display: "inline-block",
float: "right"
}}>
<h6 style={{
border: "3px solid #000000",
padding: "5px",
backgroundColor: "#F39C12",
color: "#111111"
}}>
{i18n.t('modlog_warning')}
</h6>
</div>

334
src/components/navbar.tsx

@ -172,201 +172,199 @@ class UnwrappedNavbar extends Component<any, NavbarState> {
// TODO class active corresponding to current page
navbar() {
return (
<>
<nav className="container-fluid navbar navbar-expand-md navbar-light main-navbar shadow p-0 px-3">
<a className="navbar-brand" href="/">
<img
src="/static/assets/hexbear_head.svg"
className="icon icon-navbar"
alt="vaporwave hammer and sickle logo, courtesy of ancestral potato"
/>
</a>
<Link title={version} className="navbar-brand" to="/">
{this.state.siteName}
</Link>
{this.state.isLoggedIn && (
<Link
className="ml-auto p-0 navbar-toggler nav-link"
to="/inbox"
title={i18n.t('inbox')}
>
<Icon name="notification" />
{this.state.unreadCount > 0 && (
<span className="ml-1 badge badge-light badge-pink">
{this.state.unreadCount}
</span>
)}
</Link>
)}
<button
className="navbar-toggler"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
data-tippy-content={i18n.t('expand_here')}
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
return <>
<nav className="container-fluid navbar navbar-expand-md navbar-light main-navbar shadow p-0 px-3">
<a className="navbar-brand" href="/">
<img
src="/static/assets/hexbear_head.svg"
className="icon icon-navbar"
alt="vaporwave hammer and sickle logo, courtesy of ancestral potato"
/>
</a>
<Link title={version} className="navbar-brand" to="/">
{this.state.siteName}
</Link>
{this.state.isLoggedIn && (
<Link
className="ml-auto p-0 navbar-toggler nav-link"
to="/inbox"
title={i18n.t('inbox')}
>
<ul className="navbar-nav my-2 mr-auto">
<li className="nav-item">
<button
className="nav-link btn btn-inline "
//to="/communities"
title={i18n.t('communities')}
id="community-button"
onClick={linkEvent(this, this.showCommunityDropdown)}
>
{i18n.t('communities')}
</button>
</li>
<Icon name="notification" />
{this.state.unreadCount > 0 && (
<span className="ml-1 badge badge-light badge-pink">
{this.state.unreadCount}
</span>
)}
</Link>
)}
<button
className="navbar-toggler"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
data-tippy-content={i18n.t('expand_here')}
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
>
<ul className="navbar-nav my-2 mr-auto">
<li className="nav-item">
<button
className="nav-link btn btn-inline "
//to="/communities"
title={i18n.t('communities')}
id="community-button"
onClick={linkEvent(this, this.showCommunityDropdown)}
>
{i18n.t('communities')}
</button>
</li>
<li className="nav-item">
<Link
className="nav-link"
to={{
pathname: '/create_post',
state: { prevPath: this.currentLocation },
}}
title={i18n.t('create_post')}
>
{i18n.t('create_post')}
</Link>
</li>
{this.showCreateCommunityNav() && (
<li className="nav-item">
<Link
className="nav-link"
to={{
pathname: '/create_post',
state: { prevPath: this.currentLocation },
}}
title={i18n.t('create_post')}
to="/create_community"
title={i18n.t('create_community')}
>
{i18n.t('create_post')}
{i18n.t('create_community')}
</Link>
</li>
{this.showCreateCommunityNav() && (
<li className="nav-item">
<Link
className="nav-link"
to="/create_community"
title={i18n.t('create_community')}
>
{i18n.t('create_community')}
</Link>
</li>
)}
)}
<li className="nav-item">
<Link
className="nav-link"
to="/contributing"
title={i18n.t('donate_to_lemmy')}
>
<Icon name="contribute" /> {i18n.t('donate')}
</Link>
</li>
</ul>
{!this.props.history.location.pathname.match(
/^\/search/
) && (
<form
className="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
className={`form-control mr-0 search-input ${
this.state.toggleSearch ? 'show-input' : 'hide-input'
}`}
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
ref={this.searchTextField}
type="text"
placeholder={i18n.t('search')}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
className={`btn btn-link ${this.state.toggleSearch ? 'px-2' : 'px-0'
}`}
style={{ color: 'var(--gray)' }}
>
<Icon name="search" />
</button>
</form>
)}
<ul className="navbar-nav my-2 navbar-right">
{this.canAdmin && (
<li className="nav-item">
<Link
className="nav-link"
to="/contributing"
title={i18n.t('donate_to_lemmy')}
className="nav-link p-0 px-2 nav-icon"
to={`/admin`}
title={i18n.t('admin_settings')}
>
<Icon name="contribute" /> {i18n.t('donate')}
<svg className="icon">
<use xlinkHref="#icon-settings"></use>
</svg>
</Link>
</li>
</ul>
{!this.props.history.location.pathname.match(
/^\/search/
) && (
<form
className="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
className={`form-control mr-0 search-input ${
this.state.toggleSearch ? 'show-input' : 'hide-input'
}`}
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
ref={this.searchTextField}
type="text"
placeholder={i18n.t('search')}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
className={`btn btn-link ${this.state.toggleSearch ? 'px-2' : 'px-0'
}`}
style={{ color: 'var(--gray)' }}
>
<Icon name="search" />
</button>
</form>
)}
<ul className="navbar-nav my-2 navbar-right">
{this.canAdmin && (
</ul>
{this.state.isLoggedIn ? (
<>
<ul className="navbar-nav my-2">
<li className="nav-item">
<Link
className="nav-link p-0 px-2 nav-icon"
to={`/admin`}
title={i18n.t('admin_settings')}
to="/inbox"
title={i18n.t('inbox')}
>
<svg className="icon">
<use xlinkHref="#icon-settings"></use>
</svg>
<Icon name="notification" />
{this.state.unreadCount > 0 && (
<span className="ml-1 badge badge-light badge-pink">
{this.state.unreadCount}
</span>
)}
</Link>
</li>
)}
</ul>
{this.state.isLoggedIn ? (
<>
<ul className="navbar-nav my-2">
<li className="nav-item">
<Link
className="nav-link p-0 px-2 nav-icon"
to="/inbox"
title={i18n.t('inbox')}
>
<Icon name="notification" />
{this.state.unreadCount > 0 && (
<span className="ml-1 badge badge-light badge-pink">
{this.state.unreadCount}
</span>
)}
</Link>
</li>
</ul>
<ul className="navbar-nav">
<li className="nav-item">
<Link
className="nav-link"
to={`/u/${UserService.Instance.user.username}`}
title={i18n.t('settings')}
>
<span>
{UserService.Instance.user.avatar && showAvatars() && (
<img
src={pictrsAvatarThumbnail(
UserService.Instance.user.avatar
)}
height="32"
width="32"
className="rounded-circle mr-2"
/>
)}
{UserService.Instance.user.username}
</span>
</Link>
</li>
</ul>
</>
) : (
<ul className="navbar-nav my-2">
</ul>
<ul className="navbar-nav">
<li className="nav-item">
<Link
className="nav-link"
to="/login"
title={i18n.t('login_sign_up')}
to={`/u/${UserService.Instance.user.username}`}
title={i18n.t('settings')}
>
{i18n.t('login_sign_up')}
<span>
{UserService.Instance.user.avatar && showAvatars() && (
<img
src={pictrsAvatarThumbnail(
UserService.Instance.user.avatar
)}
height="32"
width="32"
className="rounded-circle mr-2"
/>
)}
{UserService.Instance.user.username}
</span>
</Link>
</li>
</ul>
)}
</div>
{this.state.communityDropdownShown && (
<CommunityDropdown
posX={this.communityButtonLoc}
removeDropdown={() => this.showCommunityDropdown(this)}
></CommunityDropdown>
</>
) : (
<ul className="navbar-nav my-2">
<li className="nav-item">
<Link
className="nav-link"
to="/login"
title={i18n.t('login_sign_up')}
>
{i18n.t('login_sign_up')}
</Link>
</li>
</ul>
)}
</nav>
{/* empty space below navbar */}
<div className="navbar-spacer" />
</>
);
</div>
{this.state.communityDropdownShown && (
<CommunityDropdown
posX={this.communityButtonLoc}
removeDropdown={() => this.showCommunityDropdown(this)}
></CommunityDropdown>
)}
</nav>
{/* empty space below navbar */}
<div className="navbar-spacer" />
</>;
}
expandNavbar(i: Navbar) {

1927
src/components/privacy-policy.tsx
File diff suppressed because it is too large
View File

2108
src/components/tos.tsx
File diff suppressed because it is too large
View File

4
src/components/user.tsx

@ -823,7 +823,9 @@ export class User extends Component<any, UserState> {
)}
{this.state.banUserShow && (
<form onSubmit={linkEvent(this, this.handleBan)}>
<div style="display: flex">
<div style={{
display: "flex"
}}>
<input
id="reason"
placeholder="reason"

11
transform.js

@ -27,7 +27,7 @@ export const getStyleObjectFromString = str => {
function transformStyleAttribute(path) {
const attributeName = path.node.name.name
const attributeType = path.node.value.type
const attributeType = path.node && path.node.value && path.node.value.type
if (attributeName === 'style' && attributeType === 'StringLiteral') {
// TRANSFORM
@ -59,18 +59,13 @@ function transformStyleAttribute(path) {
}
}
// convert all string style attributes to JSX style objects
module.exports = function (fileInfo, api, options) {
const j = api.jscodeshift;
// transform `fileInfo.source` here
// ...
// return changed source
// console.log(Object.keys(api.jscodeshift))
// console.log(j.JSXIdentifier)
const root = j(fileInfo.source);
// console.log({ root })
const attributes = root.find(j.JSXAttribute)
attributes.forEach(transformStyleAttribute)
// const identifier
return root.toSource();
};
Loading…
Cancel
Save