✨ Web articles detail page & explore feed
This commit is contained in:
parent
8a1af120ea
commit
e367fc3f5c
31
lib/pods/article_detail.dart
Normal file
31
lib/pods/article_detail.dart
Normal file
@ -0,0 +1,31 @@
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:island/models/webfeed.dart';
|
||||
import 'package:island/pods/network.dart';
|
||||
|
||||
/// Provider that fetches a single article by its ID
|
||||
final articleDetailProvider = FutureProvider.autoDispose.family<SnWebArticle, String>(
|
||||
(ref, articleId) async {
|
||||
final dio = ref.watch(apiClientProvider);
|
||||
|
||||
try {
|
||||
final response = await dio.get<Map<String, dynamic>>(
|
||||
'/feeds/articles/$articleId',
|
||||
);
|
||||
|
||||
if (response.statusCode == 200 && response.data != null) {
|
||||
return SnWebArticle.fromJson(response.data!);
|
||||
} else {
|
||||
throw Exception('Failed to load article');
|
||||
}
|
||||
} on DioException catch (e) {
|
||||
if (e.response?.statusCode == 404) {
|
||||
throw Exception('Article not found');
|
||||
} else {
|
||||
throw Exception('Failed to load article: ${e.message}');
|
||||
}
|
||||
} catch (e) {
|
||||
throw Exception('Failed to load article: $e');
|
||||
}
|
||||
},
|
||||
);
|
1
lib/pods/article_list.dart
Normal file
1
lib/pods/article_list.dart
Normal file
@ -0,0 +1 @@
|
||||
|
@ -9,6 +9,7 @@ import 'package:island/widgets/app_wrapper.dart';
|
||||
import 'package:island/screens/tabs.dart';
|
||||
|
||||
import 'package:island/screens/explore.dart';
|
||||
import 'package:island/screens/article_detail_screen.dart';
|
||||
import 'package:island/screens/account.dart';
|
||||
import 'package:island/screens/notification.dart';
|
||||
import 'package:island/screens/wallet.dart';
|
||||
@ -242,6 +243,18 @@ final routerProvider = Provider<GoRouter>((ref) {
|
||||
return TabsScreen(child: child);
|
||||
},
|
||||
routes: [
|
||||
// Article detail route
|
||||
GoRoute(
|
||||
path: '/articles/:id',
|
||||
pageBuilder: (context, state) {
|
||||
final id = state.pathParameters['id']!;
|
||||
return MaterialPage(
|
||||
key: state.pageKey,
|
||||
child: ArticleDetailScreen(articleId: id),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
// Explore tab
|
||||
ShellRoute(
|
||||
builder:
|
||||
|
105
lib/screens/article_detail_screen.dart
Normal file
105
lib/screens/article_detail_screen.dart
Normal file
@ -0,0 +1,105 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:island/widgets/content/markdown.dart';
|
||||
import 'package:url_launcher/url_launcher_string.dart';
|
||||
import 'package:island/models/webfeed.dart';
|
||||
import 'package:island/pods/article_detail.dart';
|
||||
import 'package:island/widgets/app_scaffold.dart';
|
||||
import 'package:island/widgets/loading_indicator.dart';
|
||||
import 'package:html2md/html2md.dart' as html2md;
|
||||
|
||||
class ArticleDetailScreen extends ConsumerWidget {
|
||||
final String articleId;
|
||||
|
||||
const ArticleDetailScreen({super.key, required this.articleId});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final articleAsync = ref.watch(articleDetailProvider(articleId));
|
||||
|
||||
return AppScaffold(
|
||||
body: articleAsync.when(
|
||||
data:
|
||||
(article) => AppScaffold(
|
||||
appBar: AppBar(
|
||||
leading: const BackButton(),
|
||||
title: Text(article.title),
|
||||
),
|
||||
body: _ArticleDetailContent(article: article),
|
||||
),
|
||||
loading: () => const Center(child: LoadingIndicator()),
|
||||
error:
|
||||
(error, stackTrace) =>
|
||||
Center(child: Text('Failed to load article: $error')),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ArticleDetailContent extends HookConsumerWidget {
|
||||
final SnWebArticle article;
|
||||
|
||||
const _ArticleDetailContent({required this.article});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final markdownContent = useMemoized(
|
||||
() => html2md.convert(article.content ?? ''),
|
||||
[article],
|
||||
);
|
||||
|
||||
return SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
if (article.preview?.imageUrl != null)
|
||||
Image.network(
|
||||
article.preview!.imageUrl!,
|
||||
width: double.infinity,
|
||||
height: 200,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
article.title,
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
if (article.feed?.title != null)
|
||||
Text(
|
||||
article.feed!.title,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const Divider(height: 32),
|
||||
if (article.content != null)
|
||||
...MarkdownTextContent.buildGenerator(
|
||||
isDark: Theme.of(context).brightness == Brightness.dark,
|
||||
).buildWidgets(markdownContent)
|
||||
else if (article.preview?.description != null)
|
||||
Text(article.preview!.description!),
|
||||
const Gap(24),
|
||||
FilledButton(
|
||||
onPressed:
|
||||
() => launchUrlString(
|
||||
article.url,
|
||||
mode: LaunchMode.externalApplication,
|
||||
),
|
||||
child: const Text('Read Full Article'),
|
||||
),
|
||||
Gap(MediaQuery.of(context).padding.bottom),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -16,13 +16,13 @@ import 'package:island/models/post.dart';
|
||||
import 'package:island/widgets/check_in.dart';
|
||||
import 'package:island/widgets/post/post_item.dart';
|
||||
import 'package:island/screens/tabs.dart';
|
||||
import 'package:island/widgets/web_article_card.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:riverpod_annotation/riverpod_annotation.dart';
|
||||
import 'package:riverpod_paging_utils/riverpod_paging_utils.dart';
|
||||
import 'package:island/pods/network.dart';
|
||||
import 'package:island/widgets/realm/realm_card.dart';
|
||||
import 'package:island/widgets/publisher/publisher_card.dart';
|
||||
import 'package:island/widgets/web_article_card.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
|
||||
part 'explore.g.dart';
|
||||
|
1
lib/widgets/article/article_list.dart
Normal file
1
lib/widgets/article/article_list.dart
Normal file
@ -0,0 +1 @@
|
||||
|
@ -74,9 +74,7 @@ class MarkdownTextContent extends HookConsumerWidget {
|
||||
final url = Uri.tryParse(href);
|
||||
if (url != null) {
|
||||
if (url.scheme == 'solian') {
|
||||
context.push(
|
||||
['', url.host, ...url.pathSegments].join('/'),
|
||||
);
|
||||
context.push(['', url.host, ...url.pathSegments].join('/'));
|
||||
return;
|
||||
}
|
||||
final whitelistDomains = ['solian.app', 'solsynth.dev'];
|
||||
@ -143,17 +141,27 @@ class MarkdownTextContent extends HookConsumerWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
generator: MarkdownGenerator(
|
||||
generators: [latexGenerator],
|
||||
inlineSyntaxList: [
|
||||
_UserNameCardInlineSyntax(),
|
||||
_StickerInlineSyntax(),
|
||||
LatexSyntax(isDark),
|
||||
],
|
||||
linesMargin: linesMargin ?? EdgeInsets.symmetric(vertical: 4),
|
||||
generator: MarkdownTextContent.buildGenerator(
|
||||
isDark: isDark,
|
||||
linesMargin: linesMargin,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
static MarkdownGenerator buildGenerator({
|
||||
bool isDark = false,
|
||||
EdgeInsets? linesMargin,
|
||||
}) {
|
||||
return MarkdownGenerator(
|
||||
generators: [latexGenerator],
|
||||
inlineSyntaxList: [
|
||||
_UserNameCardInlineSyntax(),
|
||||
_StickerInlineSyntax(),
|
||||
LatexSyntax(isDark),
|
||||
],
|
||||
linesMargin: linesMargin ?? EdgeInsets.symmetric(vertical: 4),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _UserNameCardInlineSyntax extends markdown.InlineSyntax {
|
||||
|
33
lib/widgets/loading_indicator.dart
Normal file
33
lib/widgets/loading_indicator.dart
Normal file
@ -0,0 +1,33 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// A simple loading indicator widget that can be used throughout the app
|
||||
class LoadingIndicator extends StatelessWidget {
|
||||
/// The size of the loading indicator
|
||||
final double size;
|
||||
|
||||
/// The color of the loading indicator
|
||||
final Color? color;
|
||||
|
||||
/// Creates a loading indicator
|
||||
const LoadingIndicator({
|
||||
super.key,
|
||||
this.size = 24.0,
|
||||
this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: size,
|
||||
height: size,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2.0,
|
||||
valueColor: color != null
|
||||
? AlwaysStoppedAnimation<Color>(
|
||||
color!,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -1,7 +1,6 @@
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
import 'package:url_launcher/url_launcher_string.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:island/models/webfeed.dart';
|
||||
|
||||
class WebArticleCard extends StatelessWidget {
|
||||
@ -10,6 +9,10 @@ class WebArticleCard extends StatelessWidget {
|
||||
|
||||
const WebArticleCard({super.key, required this.article, this.maxWidth});
|
||||
|
||||
void _onTap(BuildContext context) {
|
||||
context.push('/articles/${article.id}');
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
@ -20,14 +23,7 @@ class WebArticleCard extends StatelessWidget {
|
||||
child: Card(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: () async {
|
||||
if (await canLaunchUrlString(article.url)) {
|
||||
await launchUrlString(
|
||||
article.url,
|
||||
mode: LaunchMode.externalApplication,
|
||||
);
|
||||
}
|
||||
},
|
||||
onTap: () => _onTap(context),
|
||||
child: AspectRatio(
|
||||
aspectRatio: 16 / 9,
|
||||
child: Stack(
|
||||
@ -88,9 +84,14 @@ class WebArticleCard extends StatelessWidget {
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
article.feed?.title ?? 'Unknown Source',
|
||||
).fontSize(9).opacity(0.75).padding(top: 2),
|
||||
style: const TextStyle(
|
||||
fontSize: 9,
|
||||
color: Colors.white70,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -1093,6 +1093,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.15.6"
|
||||
html2md:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
name: html2md
|
||||
sha256: "465cf8ffa1b510fe0e97941579bf5b22e2d575f2cecb500a9c0254efe33a8036"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.3.2"
|
||||
http:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
@ -127,6 +127,7 @@ dependencies:
|
||||
url: https://github.com/lionelmennig/textfield_tags.git
|
||||
ref: fixes/allow-controller-re-registration
|
||||
mime: ^2.0.0
|
||||
html2md: ^1.3.2
|
||||
|
||||
dev_dependencies:
|
||||
flutter_test:
|
||||
|
Loading…
x
Reference in New Issue
Block a user